A more
This presentation is the property of its rightful owner.
Sponsored Links
1 / 47

a more PowerPoint PPT Presentation


  • 53 Views
  • Uploaded on
  • Presentation posted in: General

a more. web. ¿ Cómo hemos llegado aquí ?. Luis Guerrero Guirado Software developer at PlainConcepts [email protected] twitter.com/ guerrerotook. Los primeros días. 1993. “I’d like to propose a new, optional HTML tag: IMG

Download Presentation

a more

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


a more

web

¿Cómohemosllegadoaquí?

Luis Guerrero Guirado

Software developer at PlainConcepts

[email protected]

twitter.com/guerrerotook


Los primerosdías

1993

“I’d like to propose a new, optional HTML tag:IMG

This names a bitmap or pixmap file for the browser to attempt to pull over the networkand interpret as an image, to be embedded in the text at the point of the tag’s occurrence.”

Marc Andressen


Los primerosdías

1993

“[…]“how are we going to support embedded images” rather than “how are we going to support embedded objections in various media.”

Otherwise, next week someone is going to suggest “let’s put in a new tag

<AUD SRC="file://foobar.com/foo/bar/blargh.snd">” for audio.”

Jay C. Webber


HTML 2.0 - «retro-spec»

1994

“This specification brings together, clarifies, and formalizes a set of features that roughly corresponds to the capabilities of HTML in common use prior to June 1994.”


HTML 3.X

1995

DaveRaggett propone HTML 3.0

Nunca fue implementado

HTML 3.2 es estandarizado

Como su predecesor es también «retro-spec»


The W3C arrives

1997-1998

HTML 4.0 es publicado y el HTML WG es eliminado.

XML 1.0 es publicado.

“In discussions, it was agreed that further extending HTML 4.0 would be difficult, as would converting 4.0 to be an XML application. The proposed way to break free of theserestrictions is to make a fresh start with the next generation of HTML based upon a suite of XML tag-sets.”


XHTML

HTML es reformulado en XML con un nuevo mime type (application/xhtml+xml)

Apéndice C permitió XHTML bajo text/html mime type

1998-1999


XHTML 1.1

Apéndice C es borrado

2001


Todo lo que sabes sobre XHTML es falso

  • Draconian error

  • Sobre el 99% de las páginas webs tienen al menos 1 error

  • Se usa algo que parece sintaxis XHTML, pero se mantiene el text/html MIME type

  • Muchas página están en XHTML 1.0, sólo unas pocas son XHTML 1.1


WHAT Working Group

HTML sin romper la web

“W3C does not intend to put any resources into the third straw-poll topic: extensions to HTML and CSS for Web Applications, other than technologies being developed under the charter of current W3C Working Groups.”

2004


WHAT Working Group

Deciden trabajar fuera del W3C:

“[…] to support features requested by authors, without breaking backward compatibility with existing content[…]”

2004


W3C + WHAT

  • XHTML 2 es un borrador sin terminar

  • En octubre la W3C anuncia que trabajará con WHAT en HTML

  • Nacieron Web Applications 1.0 (HTML 5)

2006


XHTM 2.0 ES ABANDONADO

“While we recognize the value of the XHTML 2 Working Group’s contributions over the years, after discussion with the participants, W3C management has decided to allow the Working Group’s charter to expire at the end of 2009 and not to renew it.”

2009


a more

web

HTML5

Alejandro Hidalgo Fernández

MVP Internet Explorer.

Development Advisor, Plain Concepts


¿Quées “HTML5”?

  • HTML5 es el futuro de la Web

  • HTML5 no es el asesino de Silverlight y Flash

  • HTML5 no es (solo) un mensaje de marketing

  • HTML5 no está completo, todavía

  • HTML5 es grande: testing no es Trivial

  • HTML5 necesita consenso

  • HTML5 no es CSS3, ni librerías de JS

MostHypedTechnology


¿Debería de contarle a mi cliente que uso HTML5?


En cuanto a SEO,¿Usar HTML5 puede afectar a mi web?


Ventajas

  • Elementos semánticos

  • Compatibilidad hacia atrás

  • Orientado a aplicaciones web

  • Renderización muy rápida


El mapa de “HTML5”


Specification Status

  • First Public Working Draft

  • Working Draft

  • Candidate Recommendation

  • Proposed Recommendation

  • Recommendation

  • Call to implement

  • Last call

HTML5


Html5readiness.com


¿Es verdad que HTML5 tiene una sintaxis más permisiva?

<IMG SRC=ttt.jpg>

<imgsrc=ttt.jpg>

<imgsrc="ttt.jpg">

<iMgSrC=ttt.jpg>

<imgsrc="ttt.jpg" />


!DOCTYPE

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>

XHTML 1.0 Strict

HTML5

  • <! DOCTYPE html>


Elemento raíz

<html xmlns=http://www.w3.org/1999/xhtml lang=”es” xml:lang=”es”>

XHTML 1.0 Strict

HTML5

  • <html lang=”es”>


Codificación

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” />

XHTML 1.0 Strict

HTML5

  • <meta charset=”utf-8”>


Links

<link rel=”stylesheet” type =”text/css” href=”style.css”>

XHTML 1.0 Strict

HTML5

  • <link rel=stylesheethref=style.css>


Script

<script type =”text/javascript” src=”jquery.js”></script>

XHTML 1.0 Strict

HTML5

<script src=jquery.js></script>


Estructura Antigua

<div id=”header”>

<div id=”nav”>

<div id=”main”>

<div id=”sidebar”>

<div class=”post”>

<div class=”post”>

<div id=”footer”>


Etiquetas semánticas


Etiquetas semánticas


Polyfills

<!-- [iflt IE 9]>

<script

src=”http://html5shim.googlecode.com/svn/trunk/html5.js”>

</script>

<![endif] -->

html5shim


HTML5

  • <Canvas>

  • <Audio>

  • <Video>

  • Elementossemánticos

    • Article, Section, Nav

    • Aside, Hgroup, Header,

    • Footer

    • Figure, Figcaption

    • Address


Geolocalización

  • Permiteconocer la localizaciónfísica del usuario.

  • Forma parte del HTML5

  • Essoportadopor la mayoria de los navegadores

    • IE9, FF3.5, Safari5, Chrome5, Opera10.6, iPhone3, Android2, WP7.

  • El usuariodebepermitiraccder a la información de localización

function get_location() { navigator.geolocation.getCurrentPosition(show_map);

}

function get_location() {

if (Modernizr.geolocation) {

navigator.geolocation.getCurrentPosition(show_map);

} else {

// no native support; maybe try Gears?

}

}


demo

GEO


Local Storage

  • Permitealmacenarinformacionlocalmente en el navegador de manerapersistente.

  • Soportado en:

    • IE8, Firefox3.5, Safari4, Chrome4, Opera10.5, iPhone2, Android2, WP7.1

function supports_html5_storage() {

try {

return 'localStorage' in window && window['localStorage'] !== null;

} catch (e) {

return false;

}

}

if (Modernizr.localstorage) {

// window.localStorage is available!

} else {

// no native support for HTML5 storage :(

// maybe try dojox.storage or a third-party solution

}


Local Storage

  • El almacenamiento de HTML5 estábasado en pares de nombre / valor. El nombrees un string y el valor es un object.

  • Podemosescucharcambios en el local storage paranuestras apps

  • El resultadocontiene

    • Key

    • oldValue

    • newValue

    • url

var foo = localStorage.getItem("bar");

// ...

localStorage.setItem("bar", foo);

if (window.addEventListener) {

window.addEventListener("storage", handle_storage, false);

} else {

window.attachEvent("onstorage", handle_storage);

};


Offline storage

  • HTML5 tiene soporte para aplicaciones offline.

  • Las aplicaciones tienen recursos externos que son necesarios para que las aplicaciones puedan funcionar.

  • Para solucionar los recursos externos se ha definido un manifiesto de cache.

<!DOCTYPE HTML>

<html manifest="/cache.manifest">

<body>

...

</body>

</html>

CACHE MANIFEST

NETWORK:

/tracking.cgi

CACHE:

/clock.css

/clock.js

/clock-face.jpg


CSS3

  • Bordesredondeados

  • Sombreado

  • Opacidad

  • Soporte de color RGBA


CSS3 Media Queries

  • Media Queries permite definir propiedades de CSS para determinados medios, haciendo que se apliquen para determinados escenarios.

  • Hay definidos varios medios como screen, printer, ect

  • Por ejemplo en Windows8, Microsoft ha definido una serie de Media Queries para las aplicaciones portrait, landscape, ect.

Full screen

@media screen and (-ms-view-state: snapped)

{ /* Re-arrange and hide/show content */}

@media screen and (-ms-view-state: device-portrait)

@media screen and (-ms-view-state: fill)

@media screen and (-ms-view-state: full-screen)

Fill

Snap

  • Portrait


SVG

  • Formasbásicas

  • Paths

  • Texto

  • Transformaciones

  • Dibujado, Relleno, Color

  • Scripting

  • Styling

  • Gradientes, Patrones


CSS

  • Soportecompleto CSS 2.

  • Selectores

  • Border Radius

  • Backgrounds

  • Color & Opacidad

  • Fuentes WOFF

  • Box Shadow

  • Transformaciones 2D


DOM/ECMA Script 262

  • addEventListener

  • GetElementByClassName

  • Métodospara arrays

    • indexOf, lastIndexOf, forEach, every

  • Modelo de objetosmejorado

    • defineProperty,create, getPrototypeOf

  • Métodoscomputacionales

    • string.Trim, toISOString, data.parse, date.now, bind


HTML5 en IE9


Ejemplo de Video de HTML5


Ejemplo de Canvas de HTML5


Hasta el 8 de Mayo1. No Plugins. Solo HTML/CSS/JS en el lado del cliente.2. Internet Explorer 9, Firefox 4 y la última versión estable de Chrome.3. Viaje al MIX en las Vegaso 40.000$ en premios. PPT + Página de Test + Zip (5Mb Max)

MÚSICA

JUEGOS

http://www.beautyoftheweb.com/#/unplugged


Más información de HTML5 en

http://www.beautyoftheweb.com/

http://geeks.ms/blogs/intensificatuexplorer/

msdn.com/ie

http://dev.w3.org/html5/spec/Overview.htmlhttp://twitter.com/HTML5

http://www.html5doctor.com/

http://html5-showcase.com/

http://html5demos.com/


  • Login