Embed Size (px)
DESCRIPTION
This presentation was done for MercadoLibre developers. The goal was improving the knowledge about HTML and avoid semantic ambiguities.
Citation preview
Frontend for DevelopersHTML for WebApps
The Web Browser
Web BrowsersThe most important ones.
• Internet Explorer
• Chrome
• Firefox
• Safari
• Opera
Web BrowsersChrome is bigger than Internet Explorer.
• Chrome
• Internet Explorer
• Firefox
• Safari
• Opera
1. Parses HTML to construct the DOM tree
2. Renders tree construction
3. Creates layout of the render tree
4. Paints the render
Rendering engineHow it works?
Web Browser’s parts retrieves resources from the server and visually presents them.
The DOMis a language-independent API.
The DOMis implemented in JavaScript in the browser.
The DOM
html
head body
title h1 p h2 ul
li li
div
pspan img
is the object presentation of the HTML document.
The DOMis the interface of HTML elements to the outside world.
Rendering engineby browser.
Engine used by
Gecko Firefox, SeaMonkey, Galeon, Camino, K-Meleon, Flock, Epiphany-gecko ... etc
Presto Opera, Opera Mobile, Nintendo DS & DSi Browser, Internet Channel
Trident Internet Explorer, Windows Phone 7
WebKit Safari, Chrome, Adobe Air, Android Browser, Palm webOS, Symbian S60, OWB, Stream, Flock, RockMelt
JavaScript engineby browser.
Engine used by
SpiderMonkey Mozilla Firefox
Rhino Mozilla
Carakan Opera
Chakra Internet Explorer > 9
JScript Internet Explorer < 8
V8 Chrome
Nitro Safari
The User Experience
• sparse, semantic markup contains all content
• end-user web browser preferences are respected
Progressive Enhancementaims to deliver information to the widest possible audience.
Progressive Enhancementbasic content should be accessible to all web browsers.
Progressive Enhancementbasic functionality should be accessible to all web browsers.
Progressive Enhancementenhanced layout is provided by externally linked CSS.
Progressive Enhancementenhanced behavior is provided by unobtrusive JavaScript.
Polyfillsis a feature detection technique for regressive enhancement.
• The Web Browser
• The User Experience
• The Content Layer
• The Visual Layer
• The Behavior Layer
FrontendIts parts.
The Content Layer
• HyperText Markup Language
• Markup language is not programming language
• The web is published in HTML
• It’s maintained by the W3C
What is HTML
<p>It’s the content</p> Open tag & close tag. Element with content.
<img /> Unique tag. Element without content.
ElementsTypes of elements according to the tag.
Attributes
<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.
Syntax.
AttributesThe common attributes for the HTMLElement.
• title
• id
• class
• lang
• dir
• data-*
Reserved Characters
Entities
• < can be mixed with tags
• > can be mixed with tags
• “ the quotes start an attribute
• & the ampersand is also reserved
Reserved Characterscannot be used inside the document.
< --------- <
> --------- >
& --------- &
“ --------- "e;
Entitiesare used to implement reserved characters.
10 < 20 <p> 10 < 20 </p>
20 > 10 <p> 10 > 20 </p>
He said: “Don’t do it”<p>He said: "Don’t do it" </p>
Company & Co.<p> Company & Co. </p>
Entitiesexamples.
The Structurehtml, head & body
<!doctype html><html>
<head><title>MercadoLibre</title>
</head><body>
<p>The basic content</p><!-- Comment -->
</body></html>
The doctypeis required to do cross browser.
<!doctype html><html>
<head><title>MercadoLibre</title>
</head><body>
<p>The basic content</p><!-- Comment -->
</body></html>
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>
The head elementis a collection of metadata.
<!doctype html><html>
<head><title>MercadoLibre</title>
</head><body>
<p>The basic content</p><!-- Comment -->
</body></html>
The body elementis the place for the content.
It’s the interface of HTML elements to the outside world
The DOM
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;
};
The DOMinterface of a image element.
PracticesThe best of them
<!doctype html><html>
<head><title>MercadoLibre</title>
</head><body>
<p>The basic content</p><!-- Comment -->
</body></html>
Commentthe code.
<img width=”50” height=”90” alt=”Iphone Image” />
Attributesmust always be between quotes.
<img width=”50” height=”90” alt=”Iphone Image” />
Attributesmust always be between quotes.
<p onclick=”hideDiv();”></p>
JavaScriptfunctions should never go in event attributes.
<p onclick=”hideDiv();”></p> not recommended
JavaScriptfunctions should never go in event attributes.
<p onclick=”hideDiv();”></p>
<p id=”overview”></p>
not recommended
JavaScriptfunctions should never go in event attributes.
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>
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>
not recommended
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>
<p style=”color:#ffffff;”></p>
CSSrules should never go inline.
<p style=”color:#ffffff;”></p> not recommended
CSSrules should never go inline.
<p style=”color:#ffffff;”></p>
<p class=”featured”></p>
not recommended
CSSrules should never go inline.
MetadataInside the head
<head>
</head>
The head elementthe place for metadata.
• Required
• Unique
• ~ 64 characters
The title elementrepresents the document’s name and identifies it out of context.
<head>
<title>MercadoLibre Argentina</title>
</head>
The title elementrepresents the document’s name and identifies it out of context.
• rel
• href
• media
• type
The link elementallows you to link the current document to other resources.
<link />
• alternate
• author
• bookmark
• help
• icon
• license
• next
• nofollow
• noreferrer
• prefetch
• prev
• search
• stylesheet
• tag
The rel attributeadds meaning to the external resources.
<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” ... />
The rel attributeexamples.
• name
• charset
• http-equiv
• content
The meta elementrepresents various kinds of metadata.
<meta />
<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” />
The meta elementThe name attribute.
<meta charset=”utf-8” />
The meta elementThe charset attribute.
The ContentInside the body
• Headings• h1, h2, h3, h4, h5, h6
• Paragraph• p
• Inside Headings, Paragraph and List• strong, em, cite, sup, sub, acronym, a
The elements for textare used to give meaning to the content.
<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>
HeadingsExamples from Home.
<h1>Apple Ipod touch...</h1><h2>Reputación del vendedor</h2><h2>Medios de pago</h2><h2>Medios de envío</h2>
HeadingsExamples for VIP.
<p>MercadoLibre no vende este artículo ... </p>
<p>Local Palermo Fscomputers Dist Autorizado ... </p>
Paragraphexamples.
<p><strong>Elige el motivo de tu denuncia: </strong></p>
<p><strong>$ 1.899<sup>99</sup></strong></p>
Inside paragraphs ...Examples.
ListsTo add meaning
• Ordered ListTo show rankings, prioritize tasks and search results
• List ItemTo put anything inside the Ordered List
• Unordered ListTo list anything without priorities
• List ItemTo put anything inside the Unordered Lists
Ordered & Unordered ListsThe most used lists on the web.
<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>
Ordered Listis used to show rankings, prioritize tasks and search results.
<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>
Unordered Listis used to list anything without priorities.
• It has three parts• Description List element
• Description Term element
• Description Definition element
Description Listis used to make dictionaries, screenplays and key-value pairs.
<dl> <dt>Condición:</dt> <dd>Artículo nuevo</dd> <dt>Ubicación:</dt> <dd>capital federal</dd> <dt>Vendidos:</dt> <dd>193vendidos</dd> <dt>Finaliza en:</dt> <dd>Finaliza en 4d 2h</dd></dl>
Definition ListExample.
TableTo organize the
data
• The basic elementstable, tr, td, th
• The semantic elementscaption, thead, tbody, tfoot, colgroup, col
The table elementand all its semantic elements.
The table elementExample.
<table><tr>
<th>header</th> <th>header</th>
</tr><tr>
<td>data</td><td>data</td>
</tr></table>
The basic elementsThe semantic table elements.
<table><tr>
<th>header</th> <th>header</th>
</tr><tr>
<td>data</td><td>data</td>
</tr></table>
The table elementThe global data container.
<table><tr>
<th>header</th> <th>header</th>
</tr><tr>
<td>data</td><td>data</td>
</tr></table>
The tr elementThe row.
<table><tr>
<th>header</th> <th>header</th>
</tr><tr>
<td>data</td><td>data</td>
</tr></table>
The th elementThe header data element.
<table><tr>
<th>header</th> <th>header</th>
</tr><tr>
<td>data</td><td>data</td>
</tr></table>
The td elementThe content data element.
<table><caption>It’s title of the table</caption><thead>
</thead><tfoot>
</tfoot><tbody>
</tbody></table>
The semantic elementsThe semantic table elements.
<table><caption>It’s title of the table</caption><thead>
</thead><tfoot>
</tfoot><tbody>
</tbody></table>
The semantic elementsThe semantic table elements.
<table><caption>It’s title of the table</caption><thead>
</thead><tfoot>
</tfoot><tbody>
</tbody></table>
The semantic elementsThe semantic table elements.
<table><caption>It’s title of the table</caption><thead>
</thead><tfoot>
</tfoot><tbody>
</tbody></table>
The semantic elementsThe semantic table elements.
<table><caption>It’s title of the table</caption><thead>
</thead><tfoot>
</tfoot><tbody>
</tbody></table>
The semantic elementsThe semantic table elements.
<table><caption>It’s title of the table</caption><thead>
</thead><tfoot>
</tfoot><tbody>
</tbody></table>
The semantic elementsThe semantic table elements.
table
first name last name age purchase
The semantic elementsThe semantic table elements.
table
first name last name age purchase
The semantic elementsThe semantic table elements.
first name last name age
purchase
table
personal data
The semantic elementsThe semantic table elements.
first name last name age
purchase
table
personal data
The semantic elementsThe semantic table elements.
<table><caption>Title of the table</caption><colgroup>
<col /><col /><col />
</colgroup><tfoot>...
</table>
The semantic elementsThe semantic table elements.
first name last name
age purchase
table
personal data
The semantic elementsThe semantic table elements.
<table><caption>Title of the table</caption><colgroup>
<col /><col />
</colgroup><col /><tfoot>...
</table>
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>
The semantic elementsThe semantic table elements.
Yes, we can use tables!
Only for data!
LinksThe hypertext
• href
• rel
• target
• title
• type
The a elementallows you to link current document to other resources.
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;};
ImagesNon decorative
• src
• alt
• title
• width
• height
The img elementallows you to insert an image.
The img element
<img src=”/image.jpg” alt=”It has a book.” />
allows you to insert an image.
FormsGetting the user’s
data
The form elementestablishes a relationship between the user and the organization.
The form elementestablishes a relationship between the user and the organization.
The form elementestablishes a relationship between the user and the organization.
The form elementestablishes a relationship between the user and the organization.
The form elementestablishes a relationship between the user and the organization.
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
<form method=”post” action=”/signup”> </form>
The form elementexample.
<form method=”post” action=”/signup”> </form>
The form elementThe method attribute.
<form method=”post” action=”/signup”> </form>
The form elementThe action attribute.
• fieldset is the element to group similar meaning controls
• legendis the element to give a meaning to the fieldset
• label is the element to give meaning to a control
Semantic elementsfor the form.
<form method=”post” action=”/signup”><fieldset>
<legend>Regístrate</legend><label>Nombre:</label>
</fieldset></form>
Semantic elementsfor the form.
• input, It render very different control related to his type attribute.
• selectIt render two list of options, single and multiple.
• optgroupSemantic element to group similar options.
• optionIt’s a option in the select list.
• textareaIt render a control to multiline text.
• buttonIt render a common button. Could be user outside the form tag.
Form controlsThe elements inside the form.
• hidden
• text
• search
• tel
• url
• password
• datetime
• date
• month
• week
• time
• datetime-local
• number
• range
• color
• checkbox
• radio
• file
• submit
• image
• reset
• button
html5
html5
html5
html5
html5
html5
html5
html5
html5
html5
html5
html5
html5
<input type=”{VALUE}” />
The input elementIt has many types. Each type has a different display.
<input type=”{TYPE}” name=”{NAME}” id=”{ID}” />
• accept
• autocomplete
• autofocus
• checked
• disabled
• list
• max
• maxlength
• min
• multiple
• pattern
• placeholder
• readonly
• required
• size
• src
• step
• value
The input elementIt has many types. Each type has a different display.
<input type=”hidden” />
The type hiddenrepresents a value that isn’t intended to be manipulated.
• name
• value
<input type=”text” />
• autocomplete
• autofocus
• disabled
• maxlength
• placeholder
• readonly
• required
• size
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
The type textrepresents a one line text edit control for the element’s value.
<input type=”tel” />
• autocomplete
• autofocus
• disabled
• maxlength
• placeholder
• readonly
• required
• size
The type telrepresents a control for editing a telephone number.
<input type=”password” />
• autocomplete
• autofocus
• disabled
• maxlength
• placeholder
• readonly
• required
• size
The type passwordrepresents a one line text edit control for the element’s value.
<input type=”email” />
• autocomplete
• autofocus
• disabled
• maxlength
• multiple
• placeholder
• readonly
• required
• size
The type emailrepresents a control for editing the e-mail addresses.
<input type=”url” />
• autocomplete
• autofocus
• disabled
• maxlength
• multiple
• placeholder
• readonly
• required
• size
The type urlrepresents a control for editing a single absolute URL.
<input type=”file” />
• accept
• autocomplete
• autofocus
• disabled
• multiple
• placeholder
• readonly
• required
• size
The type filerepresents a list of selected files.
<input type=”date” />
• autocomplete
• autofocus
• disabled
• max
• min
• placeholder
• readonly
• required
• size
• step
The type daterepresents a control for setting a string representing a date.
<input type=”datetime” />
• autocomplete
• autofocus
• disabled
• max
• min
• placeholder
• readonly
• required
• size
• step
The type datetimerepresents a control for setting a global date and time.
<input type=”month” />
• autocomplete
• autofocus
• disabled
• max
• min
• placeholder
• readonly
• required
• size
• step
The type monthrepresents a control for setting a string representing a month.
<input type=”week” />
• autocomplete
• autofocus
• disabled
• max
• min
• placeholder
• readonly
• required
• size
• step
The type weekrepresents a control for setting a string representing a week.
<input type=”datetime-local” />
• autocomplete
• autofocus
• disabled
• max
• min
• placeholder
• readonly
• required
• size
• step
The type datetime-localrepresents a control for setting a local date and time.
<input type=”number” />
• autocomplete
• autofocus
• disabled
• max
• min
• placeholder
• readonly
• required
• size
• step
The type numberrepresents a control for setting a string representing a number
<input type=”range” />
• autofocus
• disabled
• max
• min
• readonly
• required
• size
• step
The type rangerepresents a number, but the exact value is not important.
<input type=”color” />
• autocomplete
• autofocus
• disabled
• placeholder
• readonly
• required
• size
The type colorrepresents a control for setting a string simple color.
<input type=”checkbox” />
The type checkboxrepresents a two-state control.
• checked
• disabled
• readonly
• required
• value
<input type=”radio” />
The type radiorepresents a mutually exclusive options control.
• checked
• disabled
• readonly
• required
• value
<input type=”image” />
• autofocus
• disabled
• readonly
• required
• src
The type imagerepresents an button from which we can add some behavior.
<input type=”submit” />
• autofocus
• disabled
• required
• value
The type submitrepresents a button that, when activated, submits the form.
<input type=”reset” />
• autofocus
• disabled
• required
• value
The type resetrepresents a button that, when activated, resets the form.
<input type=”button” />
• autofocus
• disabled
• required
• value
The type buttonrepresents a button with no default behavior.
<select><option>Otros (Debes completar el comentario).</option>
</select>
The select elementrepresents a control for selecting amongst a set of options.
• autofocus
• multiple
• size
• required
• readonly
• disabled
• name
<select> ... </select>
html5
The select elementAttributes.
<select><option value=”opt1”>value</option>
</select>
<select><optgroup label=”Group One”>
<option value=”opt1”>value</option></optgroup>
</select>
The select elementExamples.
The textarea elementrepresents a multiline plain text edit control.
<textarea></textarea>
• autofocus
• cols
• dirname
• disabled
• maxlength
• name
• placeholder
• readonly
• required
• rows
• wrap
<textarea></textarea>
html5
The textarea elementis used for long inputs of text.
Thanks
