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

a more PowerPoint PPT Presentation


  • 50 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

a more

web

¿Cómohemosllegadoaquí?

Luis Guerrero Guirado

Software developer at PlainConcepts

[email protected]

twitter.com/guerrerotook


Los primeros d as

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 primeros d as1

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

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

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

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

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

XHTML 1.1

Apéndice C es borrado

2001


Todo lo que sabes sobre xhtml es falso

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

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 group1

WHAT Working Group

Deciden trabajar fuera del W3C:

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

2004


W3c what

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

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

a more

web

HTML5

Alejandro Hidalgo Fernández

MVP Internet Explorer.

Development Advisor, Plain Concepts


Qu es html5

¿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

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


En cuanto a seo usar html5 puede afectar a mi web

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


Ventajas

Ventajas

  • Elementos semánticos

  • Compatibilidad hacia atrás

  • Orientado a aplicaciones web

  • Renderización muy rápida


El mapa de html5

El mapa de “HTML5”


Specification status

Specification Status

  • First Public Working Draft

  • Working Draft

  • Candidate Recommendation

  • Proposed Recommendation

  • Recommendation

  • Call to implement

  • Last call

HTML5


Html5readiness com

Html5readiness.com


Es verdad que html5 tiene una sintaxis m s permisiva

¿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

<!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

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

Codificación

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

XHTML 1.0 Strict

HTML5

  • <meta charset=”utf-8”>


Links

Links

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

XHTML 1.0 Strict

HTML5

  • <link rel=stylesheethref=style.css>


Script

Script

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

XHTML 1.0 Strict

HTML5

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


Estructura antigua

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


Etiquetas sem nticas1

Etiquetas semánticas


Polyfills

Polyfills

<!-- [iflt IE 9]>

<script

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

</script>

<![endif] -->

html5shim


Html5

HTML5

  • <Canvas>

  • <Audio>

  • <Video>

  • Elementossemánticos

    • Article, Section, Nav

    • Aside, Hgroup, Header,

    • Footer

    • Figure, Figcaption

    • Address


Geolocalizaci n

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?

}

}


A more

demo

GEO


Local storage

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 storage1

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

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


A more

CSS3

  • Bordesredondeados

  • Sombreado

  • Opacidad

  • Soporte de color RGBA


Css3 media queries

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


A more

SVG

  • Formasbásicas

  • Paths

  • Texto

  • Transformaciones

  • Dibujado, Relleno, Color

  • Scripting

  • Styling

  • Gradientes, Patrones


A more

CSS

  • Soportecompleto CSS 2.

  • Selectores

  • Border Radius

  • Backgrounds

  • Color & Opacidad

  • Fuentes WOFF

  • Box Shadow

  • Transformaciones 2D


Dom ecma script 262

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

HTML5 en IE9


Ejemplo de video de html5

Ejemplo de Video de HTML5


Ejemplo de canvas de html5

Ejemplo de Canvas de HTML5


A more

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

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