Proteopedia

Proteopedia:Cookbook: Difference between revisions

Jaime Prilusky (talk | contribs)
ConfirmAccount, Editor, Journal, Mutation, Next, Print3D, Tester, any2jmol, Bureaucrats, Administrators
7,875 edits
New page: == Imagemaps == <big>The display should lead you to '''2ace''', the keyboard to '''1rat''', <br> and click the ''thinking'' for '''Believe It or Not!'''.<br> The ''(i)'' goes to the image ...
 
Eric Martz (talk | contribs)
ConfirmAccount, Editor, Tester, Administrators
27,351 edits
 
(130 intermediate revisions by 7 users not shown)
Line 1: Line 1:
This page contains some advanced editing information. Make sure you looked at [[Help:Getting Started in Proteopedia]] and [[Help:Editing]] before you delve into this page.
==Text color==
'''{{Font color|red|Please}}
{{Font color|green|see}}'''
[[Help:Coloring text]].
==Tables==
Most of the tags to define a HTML table [https://www.w3schools.com/html/html_tables.asp] are valid in a Proteopedia wiki text.
The official [https://www.mediawiki.org/wiki/Help:Tables Help:Tables] warns "''Tables may be created in wiki pages. As a general rule, it is best to avoid using a table unless you need one. Table markup often complicates page editing''."
A good alternative is available at [https://www.tablesgenerator.com/mediawiki_tables tablesgenerator.com] with a good interface to generate tables that can be inserted in Proteopedia pages.
==Checkboxes, Buttons, Radio Buttons==
These can be used to toggle something in JSmol on/off, or for more complicated purposes, including running any JSmol script. See working examples at [[Proteopedia:DIY:Templates]], and more details in the [http://wiki.jmol.org/index.php/MediaWiki/ExtensionV4 Jmol Wiki].<br/>
Also see [[Jmol/Interactivity]].
==Font Awesome icons on pages <span class="fas fa-child"></span>==
You may choose from a large gallery of free [https://fontawesome.com/icons?d=gallery&m=free Font Awesome] icons .
The icon on the heading above was inserted with <b><nowiki><span class="fas fa-child"></span></nowiki></b>.  Replace 'child' with the name of the icon you want to display. For those icons available on 'regular' and 'solid' modes, use either 'far' or 'fas' in the class.
Adding a CSS style allows to set color, size, background, etc. <b><nowiki><span class="far fa-lightbulb" style="color:#FF6600"></span></nowiki></b> <span class="far fa-lightbulb" style="color:#FF6600"></span>
==Jump to a specific green link==
To build a link (url2greenLink) to a specific <span style='color: green;'>green link</span> on a Proteopedia page, right click on the green link and Copy (not CopyLinkAddress). This will just copy the displayed text of the green link.
Add to the URL of the target page the sign '''#''' followed for the text you just copied, and press enter. This will force the browser to reformat the just created URL replacing spaces by %20 and encoding other special characters.
This is the url2greenLink you want.
Use this url2greenLink on a Proteopedia page as any other link to external sites: enclose the url2greenLink followed by space and the link text in single square brackets <nowiki>[url2greenLink one or more words]</nowiki>
This [http://proteopedia.org/w/Journal:PLoS_ONE:2#carboxylate%20group demo link] was created with the following text in this page
<pre>[http://proteopedia.org/w/Journal:PLoS_ONE:2#carboxylate%20group demo link]</pre>
'''Note:''' assign unique text to green links, to be able to address each one of the green links on a given page. Otherwise the jump will go to the first occurrence of the word(s).
==JSmol examples and documentation==
Tips, examples and advanced help for using JSmol are available at [https://wiki.jmol.org wiki.jmol.org], a complete Jmol/JSmol [https://chemapps.stolaf.edu/jmol/docs/ interactive script documentation] and
Jmol [https://chemapps.stolaf.edu/pe/protexpl/htm/seleccmd.htm select commands] with explanations.
==Translucent Cylinder==
[[Image:Translucent Cylinder 200px.gif|Translucent Cylinder]] Instructions and related examples at [[Jmol/Visualizing membrane position#Methods:_Translucent_Cylinder|Translucent Cylinder]]
==Side by side still images==
To arrange still images side by side on a page, insert them in a table
{|
| [[Image:1cjq.png|left|200px|]]
| [[Image:1stp.png|left|200px|]]
|}
<pre>
{|
| [[Image:1cjq.png|left|200px]]
| [[Image:1stp.png|left|200px]]
|}
</pre>
==Rectangular Jmol Structure Applets==
[http://jmol.sourceforge.net/jslibrary/ jslibrary] describes:<br>
For a rectangular Jmol structure applet, an array containing two elements, width and height; this is usually easiest to do using JavaScript square bracket notation for array constants, as in [400, 200], ["50%", "100%"] or [0.5, 1.0]. Proteopedia currently only accepts integers, as in this example <b>size='[800,200]'</b>
<Structure load='1stp' size='[400,100]' frame='true' align='left' caption='Insert caption here' />
{{Clear}}
==Synchronizing molecules==
Please see [[Jmol/Synchronization]]
==Capturing Movies==
On pages titled with a [[PDB ID]], simple rocking or spinning movies can be captured using the ''Export Animated Image'' link under the molecule, or by clicking ''FirstGlance'' in the Resources block, and then clicking ''Save Image or Animation for Powerpoint'' under the molecule (see
[http://firstglance.jmol.org/slides.htm overview]).
Complex operations and manual movements with the mouse can be captured as movies by "screen recording". Here are [http://firstglance.jmol.org/videocapture.htm examples and instructions].
==Movies mp4==
Click the ''Play'' icon below to start the sample movie.<br>
<html5media height="300" width="300" loop>/mp4/Resolution_holton.mp4</html5media>
{{Clear}}
<pre><html5media height="300" width="300" loop>/mp4/file.mp4</html5media></pre>
Shows the movie with the with a width of 300 and a height of 300 pixels. Including "loop" makes the movie loop back to the beginning while playing.
A movie controller is also displayed at the bottom beneath the movie. If the height is too small, the controller will not be displayed. Clicking on the movie stops playing, and clicking again resumes playing in both Mac OS X and Windows. This is
useful in case the controller is not displayed ("controller=false").
== Embedded Youtube ==
<html5media height="337" width="600">https://www.youtube.com/watch?v=Q1ftYq13XKk</html5media>
<pre><html5media height="337" width="600">https://www.youtube.com/watch?v=Q1ftYq13XKk</html5media></pre>
== Embedded Youtube Shorts ==
<html5media height="300" width="300">https://www.youtube.com/shorts/9hLJao96r0k</html5media>
==Embedded Vimeo ==
<html5media height="360" width="640">https://vimeo.com/235321305</html5media>
<pre><html5media height="360" width="640">https://vimeo.com/235321305</html5media></pre>
== Quiz ==
The special implementation of Quiz in Proteopedia includes an email feedback to the teacher.
See overview at [[Help:Quiz]] and the full explanation and examples on How To Use at [http://en.wikiversity.org/wiki/Help:Quiz Help:Quiz at Wikiversity].
<pre>
<quiz display=simple>
{ 
|type="{}"}
Name a famous Greek philosopher.
{ Aristotle|Plato }
{Question
|type="[]"}
+ Correct answer.
- Incorrect answer.
+ Correct answer.
- Incorrect answer.
</quiz>
</pre>
== Image as clickable link ==
People tend to click an image expecting it to take them to more about that image, via a hyperlink. Below is the wikitext to do this. This method goes to only one link target, regardless of where you click within the image. If you want to have different targets for different parts of the image, see the next section below on ''Imagemaps''.
<imagemap>
Image:Cys-spacefilled.png|100px
default [[Introduction to molecular visualization]]
</imagemap>
Clicking this image goes to ''Introduction to molecular visualization''.
<PRE>
<imagemap>
Image:Cys-spacefilled.png|100px
default [[Introduction to molecular visualization]]
</imagemap>
</PRE>
For more options, such as putting a border around the image, or aligning it to the right side of the page, please see [[Proteopedia:Image as clickable link]].
== Imagemaps ==
== Imagemaps ==
<big>The display should lead you to '''2ace''', the keyboard to '''1rat''', <br>
<!-- I could not find this page by searching for "image maps", which is the reason for adding those words in this comment, and at the beginning of the following sentence -->
and click the ''thinking'' for '''Believe It or Not!'''.<br>
<big>In the image map below, clicking on the computer screen should lead you to '''2ace''', the keyboard to '''1rat''', <br>
and the ''thinking balloon'' to '''Believe It or Not!'''. A click on the person's head goes to the '''external article on Student at Wikipedia'''.<br>
The ''(i)'' goes to the image info.
The ''(i)'' goes to the image info.
</big>
<imagemap>
Image:Foo.jpg|200px|picture of a foo
poly 131 45 213 41 210 110 127 109 [[2ace]]
poly 104 126 105 171 269 162 267 124 [[1rat]]
rect 15 95 94 176  [http://en.wikipedia.org/wiki/Student]
# A comment, this line is ignored
circle 57 57 20    [[Believe_It_or_Not!]]
desc bottom-left
</imagemap>


</big>
<PRE>
<imagemap>
<imagemap>
Image:Foo.jpg|200px|picture of a foo
Image:Foo.jpg|200px|picture of a foo
Line 14: Line 160:
desc bottom-left
desc bottom-left
</imagemap>
</imagemap>
</PRE>


[http://www.image-maps.com/ Here]'s a nice tool for finding the coordinates in an image.
<!--Formerly had:
[http://image-mapper.mgwalk.com/ Here]'s a nice tool for finding the coordinates in an image.
[http://image-mapper.mgwalk.com/ Here]'s a nice tool for finding the coordinates in an image.
Howeer, according to http://groups.google.com/group/google-excanvas/browse_thread/thread/affca8a3fcb5cf4d/44589930cf53d3dd , the link http://image-mapper.mgwalk.com/ has been updated to the link http://www.image-maps.com/ -->
==Structure Gallery Generator==
A list of PDB codes can generate small images and links automatically. See the [[Structure Gallery Generator]].
==Theoretical Models==
On pages that largely or entirely concern theoretical model structures, please insert '''<nowiki>{{Theoretical_model}}</nowiki>''' in the top of the wikitext box. It will generate this banner:
{{Theoretical_model}}
If a page shows largely empirical models, but also one or more theoretical models, please put <font color='red'>Theoretical Model</font> in the text, and/or as a caption in Jmol whenever the model is theoretical:
* The wikitext is: <nowiki>'''<font color='red'>Theoretical Model</font>'''</nowiki>
* To add the red caption to a scene, use the "labels" tab in the ''Scene Authoring Tools'' and open the "caption" section.
Policy concerning theoretical models is at [[Proteopedia:Policy#Theoretical_Models]], where you will also find links to '''examples'''.
==Anchors==
Section headings automatically act as anchors, with the heading text as the "anchor_name". Links of the form [[#anchor_name]] will link to the first anchor on the page matching that "anchor_name", usually the first identical section heading.
For example, try [[#Quiz]] ( <code><nowiki>[[#Quiz]]</nowiki></code> ) and [[#KiNG]] ( <code><nowiki>[[#KiNG]]</nowiki></code> ) to jump to those sections.
==Floating quote Box==
{{Quote box
| quote  = Alice's Adventures in Wonderland by Lewis Carroll
| source = [http://www.gutenberg.org Project Gutemberg]
| width  = 50%
| align  = right
}}
There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself, `Oh dear! Oh dear! I shall be late!' (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but when the Rabbit actually took a watch out of its waistcoat-pocket, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and fortunately was just in time to see it pop down a large rabbit-hole under the hedge.
<PRE>
{{Quote box
| quote  =
| source =
| width  =
| align  =
}}
</PRE>
<!--
==Flash==
This loads a local .swf file (Shockwave Flash). The interactive feature works fine. Click buttons and slide controls to try.
<swf width="400" height="300">/wiki/images/8/8c/7_scrolling.swf</swf>
<swf width="390" height="390">http://carb.umbi.umd.edu//system/files/users/herzberg/ppdk_release.swf</swf><br>
-->
<!--
==KiNG==
To insert a KiNG (Kinemage, Next Generation) applet use this tag and provide as ''file'' the name of a Kinemage uploaded file:
<PRE><kinemage align="left" width="420" height="300" file="HbAllo.kin"/></PRE>
<kinemage align="left" width="420" height="300" file="HbAllo.kin"/>
{{Clear}}
===Articles that use KiNG===
* [[Hemoglobin]]
-->
==ConSurf==
To insert the ConSurf panel, type the following line
<noinclude><nowiki>{{subst:ConSurf|1stp|st}}</nowiki></noinclude>
where the 2 parameters, <b>1stp</b> and <b>st</b>, need to be adjusted to your case:
* First parameter is the PDB ID of the model.
* Second parameter is the 2nd and 3rd characters of the PDB ID.
The result will look like below and will be made a hard-coded content of the page (i.e. the template wikitext is removed and the result is inserted into the page source).
<!-- The content below was inserted by the ConSurf template -->
== Evolutionary Conservation ==
[[Image:Consurf_key_small.gif|right|200px]]
Check
<jmol>
  <jmolCheckbox>
<scriptWhenChecked>
select protein; define ~consurf_to_do selected;
consurf_initial_scene = true;
script /wiki/ConSurf/st/1stp_consurf.spt;
</scriptWhenChecked>
<scriptWhenUnchecked>
script /wiki/extensions/Proteopedia/spt/initialview01.spt;
</scriptWhenUnchecked>
    <text>to colour the structure by Evolutionary Conservation</text>
  </jmolCheckbox>
</jmol>, as determined by [http://consurfdb.tau.ac.il/ ConSurfDB].
You may read the [[Conservation%2C_Evolutionary|explanation]]
of the method and the full data available from
[http://bental.tau.ac.il/new_ConSurfDB/main_output.php?pdb_ID=1stp ConSurf].
<!-- end of content inserted by the ConSurf template -->
==ConSurf Documentation==
[[ConSurf/Index]] has a list of many articles about ConSurf and evolutionary conservation.
==Combine Proteopedia scenes with JSmol scripting==
'''Advanced'''. You may wish to call up a scene saved via Proteopedia from within inline JSmol scripts placed in a page. For example, this can be useful for some pages that use multiple structures to call up a certain scene at the start of JSmol script be sure the user has the structure or scene open that you wish the inline JSmol script to build upon. Please see [[Combine Proteopedia scenes with inline JSmol scripting]].
==Mix and Edit scenes from other pages==
To load on SAT scenes from other Proteopedia pages and become able to edit them, simply insert the page ID (wgArticleId) of other pages between &lt; &gt; like this: '''&lt;!-- /471747/ /351028/ --&gt;''' somewhere in your page. You may insert this way as many page IDs as you want, and [[Scene_authoring_tools|SAT]] will allow you to load any scene from those pages. From that moment, any edited scene will be saved under your page, without altering the original scene nor the source page.
* How to find the page ID? Edit or view the source code (wikitext) of the page from which you want to borrow the scenes, find the <code>scene</code> tag and pick the number after the first slash, e.g. that in red here:
&lt;scene name='58/<span style="color:red;">587840</span>/Cartoon_rainbow_and_water/1'&gt;Color by group&lt;/scene&gt;
==See Also==
* [[Proteopedia:DIY:Templates]]
* [[DRuMS#The DRuMS Color Schemes|DRuMS color templates]]
* [[Jmol/Interactivity]]

Proteopedia Page Contributors and Editors (what is this?)Proteopedia Page Contributors and Editors (what is this?)

Jaime Prilusky, Karl Oberholser, Eran Hodis, Eric Martz, Wayne Decatur, Angel Herraez, Karsten Theis
Retrieved from "https://proteopedia.openfox.io/w/Proteopedia:Cookbook"