Your SlideShare is downloading. ×
Frontend for developers
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Frontend for developers

320
views

Published on

This presentation was done for MercadoLibre developers. The goal was improving the knowledge about HTML and avoid semantic ambiguities.

This presentation was done for MercadoLibre developers. The goal was improving the knowledge about HTML and avoid semantic ambiguities.

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
320
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Frontend for Developers HTML for WebApps
  • 2. The Web Browser
  • 3. Web BrowsersThe most important ones. • Internet Explorer • Chrome • Firefox • Safari • Opera
  • 4. Web BrowsersChrome is bigger than Internet Explorer. • Chrome • Internet Explorer • Firefox • Safari • Opera
  • 5. Rendering engineHow it works? 1. Parses HTML to construct the DOM tree 2. Renders tree construction 3. Creates layout of the render tree 4. Paints the render
  • 6. Web Browser’s partsretrieves resources from the server and visually presents them.
  • 7. The DOMis a language-independent API.
  • 8. The DOMis implemented in JavaScript in the browser.
  • 9. The DOMis the object presentation of the HTML document. html head body title h1 p h2 ul div li li span img p
  • 10. The DOMis the interface of HTML elements to the outside world.
  • 11. Rendering engineby browser. Engine used by Firefox, SeaMonkey, Galeon, Camino, K-Meleon, Flock, Epiphany-Gecko gecko ... etcPresto Opera, Opera Mobile, Nintendo DS & DSi Browser, Internet ChannelTrident Internet Explorer, Windows Phone 7 Safari, Chrome, Adobe Air, Android Browser, Palm webOS, SymbianWebKit S60, OWB, Stream, Flock, RockMelt
  • 12. JavaScript engineby browser. Engine used bySpiderMonkey Mozilla FirefoxRhino MozillaCarakan OperaChakra Internet Explorer > 9JScript Internet Explorer < 8V8 ChromeNitro Safari
  • 13. The User Experience
  • 14. Progressive Enhancementaims to deliver information to the widest possible audience. • sparse, semantic markup contains all content • end-user web browser preferences are respected
  • 15. Progressive Enhancementbasic content should be accessible to all web browsers.
  • 16. Progressive Enhancementbasic functionality should be accessible to all web browsers.
  • 17. Progressive Enhancementenhanced layout is provided by externally linked CSS.
  • 18. Progressive Enhancementenhanced behavior is provided by unobtrusive JavaScript.
  • 19. Polyfillsis a feature detection technique for regressive enhancement.
  • 20. FrontendIts parts. • The Web Browser • The User Experience • The Content Layer • The Visual Layer • The Behavior Layer
  • 21. The Content Layer
  • 22. What is HTML • HyperText Markup Language • Markup language is not programming language • The web is published in HTML • It’s maintained by the W3C
  • 23. ElementsTypes of elements according to the tag. <p>It’s the content</p> Open tag & close tag. Element with content. <img /> Unique tag. Element without content.
  • 24. AttributesSyntax. <p id=”paragraph”>It’s the content</p> Open tag & close tag. Element with content. <img src=”/image.jpg” alt=”It has a book.” /> Unique tag. Element without content.
  • 25. AttributesThe common attributes for the HTMLElement. • title • id • class • lang • dir • data-*
  • 26. ReservedCharacters Entities
  • 27. Reserved Characterscannot be used inside the document. • < can be mixed with tags • > can be mixed with tags • “ the quotes start an attribute • & the ampersand is also reserved
  • 28. Entitiesare used to implement reserved characters. < --------- &lt; > --------- &gt; & --------- &amp; “ --------- &quote;
  • 29. Entitiesexamples.10 < 20<p> 10 &lt; 20 </p>20 > 10<p> 10 &gt; 20 </p>He said: “Don’t do it”<p>He said: &quot;Don’t do it&quot; </p>Company & Co.<p> Company &amp; Co. </p>
  • 30. The Structurehtml, head & body
  • 31. The doctypeis required to do cross browser.<!doctype html><html> <head> <title>MercadoLibre</title> </head> <body> <p>The basic content</p> <!-- Comment --> </body></html>
  • 32. The html elementis the root of the document.<!doctype html><html> <head> <title>MercadoLibre</title> </head> <body> <p>The basic content</p> <!-- Comment --> </body></html>
  • 33. The head elementis a collection of metadata.<!doctype html><html> <head> <title>MercadoLibre</title> </head> <body> <p>The basic content</p> <!-- Comment --> </body></html>
  • 34. The body elementis the place for the content.<!doctype html><html> <head> <title>MercadoLibre</title> </head> <body> <p>The basic content</p> <!-- Comment --> </body></html>
  • 35. The DOMIt’s the interface of HTML elements to the outside world
  • 36. The DOMinterface of a image element.interface HTMLImageElement : HTMLElement { attribute DOMString alt; attribute DOMString src; attribute DOMString crossOrigin; attribute DOMString useMap; attribute boolean isMap; attribute unsigned long width; attribute unsigned long height; readonly attribute unsigned long naturalWidth; readonly attribute unsigned long naturalHeight; readonly attribute boolean complete;};
  • 37. PracticesThe best of them
  • 38. Commentthe code.<!doctype html><html> <head> <title>MercadoLibre</title> </head> <body> <p>The basic content</p> <!-- Comment --> </body></html>
  • 39. Attributesmust always be between quotes.<img width=”50” height=”90” alt=”Iphone Image” />
  • 40. Attributesmust always be between quotes.<img width=”50” height=”90” alt=”Iphone Image” />
  • 41. JavaScriptfunctions should never go in event attributes.<p onclick=”hideDiv();”></p>
  • 42. JavaScriptfunctions should never go in event attributes.<p onclick=”hideDiv();”></p> not recommended
  • 43. JavaScriptfunctions should never go in event attributes.<p id=”overview”></p><p onclick=”hideDiv();”></p> not recommended
  • 44. JavaScriptnever goes in head element.<!doctype html><html> <head> <title>MercadoLibre</title> <script> function greet(){ alert(“hello world!”); } </script> </head> <body> <p>The basic content</p> <!-- Comment --> </body></html>
  • 45. JavaScriptnever goes in head element.<!doctype html><html> <head> <title>MercadoLibre</title> <script> function greet(){ not recommended alert(“hello world!”); } </script> </head> <body> <p>The basic content</p> <!-- Comment --> </body></html>
  • 46. JavaScriptnever goes in head element.<!doctype html><html> <head> <title>MercadoLibre</title> </head> <body> <p>The basic content</p> <!-- Comment --> <script> function greet(){ alert(“hello world!”); } </script> </body></html>
  • 47. CSSrules should never go inline.<p style=”color:#ffffff;”></p>
  • 48. CSSrules should never go inline.<p style=”color:#ffffff;”></p> not recommended
  • 49. CSSrules should never go inline.<p class=”featured”></p><p style=”color:#ffffff;”></p> not recommended
  • 50. MetadataInside the head
  • 51. The head elementthe place for metadata. <head> </head>
  • 52. The title elementrepresents the document’s name and identifies it out of context. • Required • Unique • ~ 64 characters
  • 53. The title elementrepresents the document’s name and identifies it out of context.<head> <title>MercadoLibre Argentina</title></head>
  • 54. The link elementallows you to link the current document to other resources. <link /> • rel • href • media • type
  • 55. The rel attributeadds meaning to the external resources. • alternate • nofollow • author • noreferrer • bookmark • prefetch • help • prev • icon • search • license • stylesheet • next • tag
  • 56. The rel attributeexamples.<link rel=”stylesheet” type=”text/css” href=”/external.css” ... /><link rel=”alternate” type=”application/rss+xml” ... /><link rel=”prev” title=”Chapter 2” href=”/chapter-2” ... /><link rel=”next” title=”Chapter 4” href=”/chapter-4” ... /><link rel=”alternate stylesheet” title=”New Layout” ... />
  • 57. The meta elementrepresents various kinds of metadata. <meta /> • name • charset • http-equiv • content
  • 58. The meta elementThe name attribute.<meta name=”author” content=”Hernan Mammana” /><meta name=”copyright” content=”2011” /><meta name=”description” content=”It’s the ... for HTML talk” /><meta name=”generator” content=”gDocs” /><meta name=”keywords” content=”html,talk,slideshow” /><meta name=”robots” content=”all” />
  • 59. The meta elementThe charset attribute.<meta charset=”utf-8” />
  • 60. The ContentInside the body
  • 61. The elements for textare used to give meaning to the content. • Headings • h1, h2, h3, h4, h5, h6 • Paragraph • p • Inside Headings, Paragraph and List • strong, em, cite, sup, sub, acronym, a
  • 62. HeadingsExamples from Home. <h1>MercadoLibre</h1> <h2>Clasificados</h2> <h2>Categorías</h2> <h2>Recomendados</h2> <h2>Más vendidos de la ... </h2> <h2>Destacados</h2> <h2>Más Compartidos</h2> <h2>Subastas desde $1</h2> <h2>Historial</h2> <h2>12 Cuotas sin interés</h2> <h2>Imperdibles del día</h2>
  • 63. HeadingsExamples for VIP. <h1>Apple Ipod touch...</h1> <h2>Reputación del vendedor</h2> <h2>Medios de pago</h2> <h2>Medios de envío</h2>
  • 64. Paragraphexamples.<p>MercadoLibre no vende este artículo ... </p><p>Local Palermo Fscomputers Dist Autorizado ... </p>
  • 65. Inside paragraphs ...Examples. <p><strong>Elige el motivo de tu denuncia: </strong></p> <p><strong>$ 1.899<sup>99</sup></strong></p>
  • 66. ListsTo add meaning
  • 67. Ordered & Unordered ListsThe most used lists on the web. • Ordered List To show rankings, prioritize tasks and search results • List Item To put anything inside the Ordered List • Unordered List To list anything without priorities • List Item To put anything inside the Unordered Lists
  • 68. Ordered Listis used to show rankings, prioritize tasks and search results.<ol> <li>Apple Ipod Touch 8 Gb 4ta Generaci... </li> <li>Apple Ipod Touch 32gb 4g 4ta Gener... </li> <li>Apple Ipod Nano 8gb 6g 6ta Genera... </li></ol>
  • 69. Unordered Listis used to list anything without priorities. <ul> <li>Artículo nuevo </li> <li>208 vendidos </li> <li>Capital Federal </li> </ul> <ul> <li>Efectivo </li> <li>Visa American... </li> <li>Tu compra esta...</li> </ul>
  • 70. Description Listis used to make dictionaries, screenplays and key-value pairs. • It has three parts • Description List element • Description Term element • Description Definition element
  • 71. Definition ListExample. <dl> <dt>Condición:</dt> <dd>Artículo nuevo</dd> <dt>Ubicación:</dt> <dd>capital federal</dd> <dt>Vendidos:</dt> <dd>193 vendidos</dd> <dt>Finaliza en:</dt> <dd>Finaliza en 4d 2h</dd> </dl>
  • 72. TableTo organize the data
  • 73. The table elementand all its semantic elements. • The basic elements table, tr, td, th • The semantic elements caption, thead, tbody, tfoot, colgroup, col
  • 74. The table elementExample.
  • 75. The basic elementsThe semantic table elements.<table> <tr> <th>header</th> <th>header</th> </tr> <tr> <td>data</td> <td>data</td> </tr></table>
  • 76. The table elementThe global data container.<table> <tr> <th>header</th> <th>header</th> </tr> <tr> <td>data</td> <td>data</td> </tr></table>
  • 77. The tr elementThe row.<table> <tr> <th>header</th> <th>header</th> </tr> <tr> <td>data</td> <td>data</td> </tr></table>
  • 78. The th elementThe header data element.<table> <tr> <th>header</th> <th>header</th> </tr> <tr> <td>data</td> <td>data</td> </tr></table>
  • 79. The td elementThe content data element.<table> <tr> <th>header</th> <th>header</th> </tr> <tr> <td>data</td> <td>data</td> </tr></table>
  • 80. The semantic elementsThe semantic table elements.<table> <caption>It’s title of the table</caption> <thead> </thead> <tfoot> </tfoot> <tbody> </tbody></table>
  • 81. The semantic elementsThe semantic table elements.<table> <caption>It’s title of the table</caption> <thead> </thead> <tfoot> </tfoot> <tbody> </tbody></table>
  • 82. The semantic elementsThe semantic table elements.<table> <caption>It’s title of the table</caption> <thead> </thead> <tfoot> </tfoot> <tbody> </tbody></table>
  • 83. The semantic elementsThe semantic table elements.<table> <caption>It’s title of the table</caption> <thead> </thead> <tfoot> </tfoot> <tbody> </tbody></table>
  • 84. The semantic elementsThe semantic table elements.<table> <caption>It’s title of the table</caption> <thead> </thead> <tfoot> </tfoot> <tbody> </tbody></table>
  • 85. The semantic elementsThe semantic table elements.<table> <caption>It’s title of the table</caption> <thead> </thead> <tfoot> </tfoot> <tbody> </tbody></table>
  • 86. The semantic elementsThe semantic table elements. table first name last name age purchase
  • 87. The semantic elementsThe semantic table elements. table first name last name age purchase
  • 88. The semantic elementsThe semantic table elements. table personal data purchase first name last name age
  • 89. The semantic elementsThe semantic table elements. table personal data purchase first name last name age
  • 90. The semantic elementsThe semantic table elements.<table> <caption>Title of the table</caption> <colgroup> <col /> <col /> <col /> </colgroup> <tfoot> ...</table>
  • 91. The semantic elementsThe semantic table elements. table personal data age purchase first name last name
  • 92. The semantic elementsThe semantic table elements.<table> <caption>Title of the table</caption> <colgroup> <col /> <col /> </colgroup> <col /> <tfoot> ...</table>
  • 93. The semantic elementsThe semantic table elements.<table> <caption>Title of the table</caption> <colgroup id=”personalData”> <col class=”first-name” /> <col class=”last-name” /> </colgroup> <col class=”age” /> <tfoot> ...</table>
  • 94. Yes, we can use tables! Only for data!
  • 95. LinksThe hypertext
  • 96. The a elementallows you to link current document to other resources. • href • rel • target • title • type
  • 97. The a elementURL decomposition attributes. interface HTMLAnchorElement : HTMLElement { ... attribute DOMString protocol; attribute DOMString host; attribute DOMString hostname; attribute DOMString port; attribute DOMString pathname; attribute DOMString search; attribute DOMString hash; };
  • 98. ImagesNon decorative
  • 99. The img elementallows you to insert an image. • src • alt • title • width • height
  • 100. The img elementallows you to insert an image.<img src=”/image.jpg” alt=”It has a book.” />
  • 101. FormsGetting the user’s data
  • 102. The form elementestablishes a relationship between the user and the organization.
  • 103. The form elementestablishes a relationship between the user and the organization.
  • 104. The form elementestablishes a relationship between the user and the organization.
  • 105. The form elementestablishes a relationship between the user and the organization.
  • 106. The form elementestablishes a relationship between the user and the organization.
  • 107. The form elementestablishes a relationship between the user and the organization. • Component of a web page • They have form controls, like text fields & buttons • The user can interact with them • The user’s data can be sent to the server • No client side scripting is needed • An API is available. It augments the user experience
  • 108. The form elementexample. <form method=”post” action=”/signup”> </form>
  • 109. The form elementThe method attribute. <form method=”post” action=”/signup”> </form>
  • 110. The form elementThe action attribute. <form method=”post” action=”/signup”> </form>
  • 111. Semantic elementsfor the form. • fieldset is the element to group similar meaning controls • legend is the element to give a meaning to the fieldset • label is the element to give meaning to a control
  • 112. Semantic elementsfor the form. <form method=”post” action=”/signup”> <fieldset> <legend>Regístrate</legend> <label>Nombre:</label> </fieldset> </form>
  • 113. Form controlsThe elements inside the form. • input, It render very different control related to his type attribute. • select It render two list of options, single and multiple. • optgroup Semantic element to group similar options. • option It’s a option in the select list. • textarea It render a control to multiline text. • button It render a common button. Could be user outside the form tag.
  • 114. The input elementIt has many types. Each type has a different display. <input type=”{VALUE}” /> • hidden • month html5 • text • week html5 • search html5 • time html5 • tel html5 • datetime-local html5 • url html5 • number html5 • file • email html5 • range html5 • submit • password • color html5 • image • datetime html5 • checkbox • reset • date html5 • radio • button
  • 115. The input elementIt has many types. Each type has a different display.<input type=”{TYPE}” name=”{NAME}” id=”{ID}” /> • accept • multiple • autocomplete • pattern • autofocus • placeholder • checked • readonly • disabled • required • list • size • max • src • maxlength • step • min • value
  • 116. The type hiddenrepresents a value that isn’t intended to be manipulated.<input type=”hidden” /> • name • value
  • 117. The type textrepresents a one line text edit control for the element’s value.<input type=”text” /> • autocomplete • autofocus • disabled • maxlength • placeholder • readonly • required • size
  • 118. The type textrepresents a one line text edit control for the element’s value.<input type=”search” /> • autocomplete • autofocus • disabled • maxlength • placeholder • readonly • required • size
  • 119. The type telrepresents a control for editing a telephone number.<input type=”tel” /> • autocomplete • autofocus • disabled • maxlength • placeholder • readonly • required • size
  • 120. The type passwordrepresents a one line text edit control for the element’s value.<input type=”password” /> • autocomplete • autofocus • disabled • maxlength • placeholder • readonly • required • size
  • 121. The type emailrepresents a control for editing the e-mail addresses.<input type=”email” /> • autocomplete • autofocus • disabled • maxlength • multiple • placeholder • readonly • required • size
  • 122. The type urlrepresents a control for editing a single absolute URL.<input type=”url” /> • autocomplete • autofocus • disabled • maxlength • multiple • placeholder • readonly • required • size
  • 123. The type filerepresents a list of selected files. <input type=”file” /> • accept • autocomplete • autofocus • disabled • multiple • placeholder • readonly • required • size
  • 124. The type daterepresents a control for setting a string representing a date.<input type=”date” /> • autocomplete • autofocus • disabled • max • min • placeholder • readonly • required • size • step
  • 125. The type datetimerepresents a control for setting a global date and time.<input type=”datetime” /> • autocomplete • autofocus • disabled • max • min • placeholder • readonly • required • size • step
  • 126. The type monthrepresents a control for setting a string representing a month.<input type=”month” /> • autocomplete • autofocus • disabled • max • min • placeholder • readonly • required • size • step
  • 127. The type weekrepresents a control for setting a string representing a week.<input type=”week” /> • autocomplete • autofocus • disabled • max • min • placeholder • readonly • required • size • step
  • 128. The type datetime-localrepresents a control for setting a local date and time.<input type=”datetime-local” /> • autocomplete • autofocus • disabled • max • min • placeholder • readonly • required • size • step
  • 129. The type numberrepresents a control for setting a string representing a number<input type=”number” /> • autocomplete • autofocus • disabled • max • min • placeholder • readonly • required • size • step
  • 130. The type rangerepresents a number, but the exact value is not important.<input type=”range” /> • autofocus • disabled • max • min • readonly • required • size • step
  • 131. The type colorrepresents a control for setting a string simple color.<input type=”color” /> • autocomplete • autofocus • disabled • placeholder • readonly • required • size
  • 132. The type checkboxrepresents a two-state control.<input type=”checkbox” /> • checked • disabled • readonly • required • value
  • 133. The type radiorepresents a mutually exclusive options control.<input type=”radio” /> • checked • disabled • readonly • required • value
  • 134. The type imagerepresents an button from which we can add some behavior.<input type=”image” /> • autofocus • disabled • readonly • required • src
  • 135. The type submitrepresents a button that, when activated, submits the form.<input type=”submit” /> • autofocus • disabled • required • value
  • 136. The type resetrepresents a button that, when activated, resets the form.<input type=”reset” /> • autofocus • disabled • required • value
  • 137. The type buttonrepresents a button with no default behavior.<input type=”button” /> • autofocus • disabled • required • value
  • 138. The select elementrepresents a control for selecting amongst a set of options.<select> <option>Otros (Debes completar el comentario).</option></select>
  • 139. The select elementAttributes. <select> ... </select> • autofocus html5 • multiple • size • required • readonly • disabled • name
  • 140. The select elementExamples. <select> <option value=”opt1”>value</option> </select> <select> <optgroup label=”Group One”> <option value=”opt1”>value</option> </optgroup> </select>
  • 141. The textarea elementrepresents a multiline plain text edit control. <textarea></textarea>
  • 142. The textarea elementis used for long inputs of text. <textarea></textarea> • autofocus • cols • dirname • disabled • maxlength • name • placeholder html5 • readonly • required • rows • wrap
  • 143. Thanks