Introducción al. Albert Solans Rubio

Transcripción

1 Introducciónal AlbertSolansRubio

2 Introducción HTML5eslaquintaversióndellenguajedelaWorldWideWeb(www).Respectoa susanterioresversiones,html5incluyenuevasetiquetaso tags,condiferentes significados semánticos, o la mejora de elementos como el <canvas>, para modernizarellenguajealasnuevastecnologíascomoel3d. Nuevasetiquetas Las nuevas etiquetas o tags son muy útiles para dar forma a una página Web y organizarlainformación. <article> Estaetiquetaseutilizaparaenglobarelcontenidomásimportantedelapágina.Es unacomposiciónauto contenidoenundocumento,páginaweb,sitiooaplicación queestádestinadaaserindependiente. <article> <h3>netscape is dead</h3> <p><a href=" of support for Netscape web browsers</a>. AOL has a long history on the internet, being one of the first companies to really get people online. Throughout its lifetime, it has been involved with a number of high profile acquisitions, perhaps the largest of which was the 1999 acquisition of the Netscape Communications Corporation. Netscape was known to many as the thought leader in web browsing, and had developed a number of complementary pieces of software that allowed for a rich suite of internet tools.</p> </article> un ejemplo práctico seria un mensaje en un foro, un artículo de una revista o un periódico, una entrada en un blog, cuando un usuario envía un comentario, un widget interactivo o Gadget, o cualquier otro elemento independiente del contenido.

3 Además, el <article> posee un título o encabezado y a veces un pie de página. El nacimientodeeste tag sedebealosweblog.sisetieneclarolaestructuradeun Weblog,esmuysencilloentenderlaetiqueta.Unaentradadeunblogsecompone deuntítulo,uncontenidoyunpiedepágina. <aside> Laetiqueta<aside>esunelementoquerepresentaunaseccióndeunapáginaque consiste de contenido que está tangencialmente relacionado con el <article>. Es una columna lateral donde están los tags o cualquier tipo de información relacionada,conenlaces,etc. <p>my family and I visited The Epcot center this summer.</p> <aside> <h4>epcot Center</h4> The Epcot Center is a theme park in Disney World, Florida. </aside> <footer> Aunquemuysencilla,laetiqueta<footer>esmuyútil.Agrupaloscontenidosque formanpartedelpiedepágina. <footer> 2009 Woofer Dog Corporation </footer> <header> Aligualqueelpiedepágina,agrupotodosloscomponentesqueformanpartedel encabezado. <header> <h1>welcome to my homepage</h1> <p>my name is Donald Duck</p> </header>

4 <hgroup> Estaetiquetaseutilizaparaagrupartítulosconsuscorrespondientessubtítulos. <article> <hgroup> <h1>title goes here</h1> <h2>subtitle of article</h2> </hgroup> <p>lorem Ipsum dolor set amet</p> </article> <mark> Este tag nospermitemarcarunaelementoconcretocomosifueraunrotulador marker decoloramarillo. <p>despite the stockmarket crash in 2008, the value of my share portfolio <mark style="backgroundcolor:yellow;">increased by 100 percent</mark>. I must be doing something right.</p> <nav> Eneste tag seincluyentodosloenlacesqueafectanalanavegación.estaetiqueta seutilizaparaidentificardeunaformaclaraloselementosdenavegaciónquetiene unsitioweb.asíelordenadorlodetecta. <nav> <a href="/html/">html</a> <a href="/html5/">html5</a> <a href="/css/">css</a> <a href="/css3/">css3</a> <a href="/js/">javascript</a> </nav> <time> Cuandoseponeunafechadentrodeuncontenido,utilizandopalabrascomoahier, hoy,etc.sepuedenenmarcardentrodeeste tag dondeseincorporalafechade referencia.esunaformadeindexarlasfechas.esunaformamuyútildehacerque elordenadorsepaquedignifica ahier o hoy. <p>on Saturdays, we open at <time>09:00</time>.</p>

5 <p>the concert is <time datetime=" ">next Wednesday</time>.</p> <p>we finally hit the road at <time datetime=" T05:00-07:00">5am last Tuesday</time>.</p> Este dibujo nos muestra de forma esquemática la disposición de las diferentes etiquetas. <canvas> AunquelaetiquetamásdestacabledetodoslasquecomponenelnuevoHTMLes <canvas>. Esteelementonospermitelageneracióndegráficosatravésdescripting.Permite generargráficos,animacionesyjuegossinpluginsexternos,graciasaljavascript. Esta herramienta es muy útil para cualquier proyecto. La creación de elementos gráficossintenerquerecurriraeditoresexternoscomopuedenserflash. Por el contrario, esto significa la extinción del uso del flash, ya que el tiempo de rendaricaciónenhtml5sereduce.

6 WebWorkers Actualmente,lacargasehacemediantelosnavegadores.Lalinealidaddelacarga provoca que el tiempo de carga sea muy lenta a causa de la excesiva carga de código. Gracias al HTML5 las cargas se procesan en segundo plano aprovechando los múltiplesprocesadoresdenuestropc. Comoseveenesteejemplo,elmarcadornosindicalosframesporsegundodela animacióndelafuente.eltiempodecargayvelocidadnosoncomparables. En este ejemplo podemos ver el tiempo y la velocidad de carga actual, es decir a travésdelnavegador,outilizandoloswebworkers.comosepuedevernoexiste comparación.