Diapositiva 1

Introduccin a HTML 5 / CSS 3

HTML 5 / CSS 3INTRODUCCIN

HTML 5 / CSS 3

OFFLINE

OfflineWEBConectividadAcceso a ficherosSemnticaAudio/Video3D/GrficosPresentacinRendimiento

AlmacenamientoONLINE

Permite realizar aplicaciones web offline application cache localStorage

web SQL y BBDD online/offline events

HTML 5 / CSS 3ALMACENAMIENTO

OfflineConectividadAcceso a ficherosSemnticaAudio/Video3D/GrficosPresentacinRendimientoAlmacenamiento

Permite que las aplicaciones web guardendatos en el dispositivoWeb Storage: sessionStorage/localStorage Web SQL Database- IndexedDB

HTML 5 / CSS 3CONECTIVIDAD

OfflineConectividadAcceso a ficherosSemnticaAudio/Video3D/GrficosPresentacinRendimientoAlmacenamiento

Mejora el rendimiento del acceso en tiempo real entre aplicaciones / dispositivos / servidor Cross Document MessagingXMLHTTPRequest 2 Web Sockets Server-Sent Events

HTML 5 / CSS 3

ACCESO A FICHEROS

OfflineConectividadAcceso a ficherosSemnticaAudio/Video3D/GrficosPresentacinRendimientoAlmacenamiento

Permite que las aplicaciones webs puedan acceder (a)sincronamente a ficheros del dispositivo File API FileReader API Filesystem & FileWritter API BlobBuilder API Blob URLs

File APIFilerReader APIFilesystem & FileWritter APIBlobBuilder APIBlob URLs

HTML 5 / CSS 3SEMNTICA

OfflineConectividadAcceso a ficherosSemnticaAudio/Video3D/GrficosPresentacinRendimientoAlmacenamiento

Permite el uso de nuevas etiquetas / atributos que determinan la naturaleza del contenido. Elementos multimedia Elementos estructurales Atributos semnticos Nuevos tipos / atributos de campos de formulario Sintaxis de Microformatos / microdata-Etc

HTML 5 / CSS 3

AUDIO / VIDEO

OfflineConectividadAcceso a ficherosSemnticaAudio/Video3D/GrficosPresentacinRendimientoAlmacenamiento

Permite no solo incluir contenido multimedia (audio / video) sino acceder, controlar y mani-pular determinados aspectos de los mismos

VideoAudio

HTML 5 / CSS 33D/GRFICOS

OfflineConectividadAcceso a ficherosSemnticaAudio/Video3D/GrficosPresentacinRendimientoAlmacenamiento

Permite crear animaciones y/o efectos visuales en websites/aplicaciones web sin necesidad de plugins adicionales (por ej: flash) 2D Canvas WebGL SVG 3D CSS transforms

HTML 5 / CSS 3

PRESENTACIN

OfflineConectividadAcceso a ficherosSemnticaAudio/Video3D/GrficosPresentacinRendimientoAlmacenamiento

Permite crear sitios web/aplicaciones vistosas y visualmente enriquecidas que producen mejores experiencias de usuario. CSS3 3D Transforms CSS3 Transforms CSS3 Animation CSS3 Transition Webfonts

3D transformsCSS3 TransformsCSS3 AnimationCSS3 Transitions

HTML 5 / CSS 3RENDIMIENTO

OfflineConectividadAcceso a ficherosSemnticaAudio/Video3D/GrficosPresentacinRendimientoAlmacenamiento

Permite crear aplicaciones que rivalizan en rendimiento a las aplicaciones nativas, ms responsivas que las aplicaciones tradicionales Webworkers (procesos en background) Almacenamiento local Carga asncrona App cach Webfonts

HTML 5 / CSS 3

2004200520072009201220202022Apple, Mozilla & Opera no consiguieron crear un estndar HTML4.En consecuencia forman la Web WHATWGSe publica el borrador Web Applications 1.0W3C adopta a WHATGW y publica el borrador HTML5Finalizacin del borradorGracias a Google, Apple y los dispositivos mviles HTML5 surge con fuerzaPrimer Release Candidate de HTML5 [previsin W3C]Finalizacin de test [previsin W3C]Creacin del estndar HTML5 [previsin W3C]HISTORIA DE HTML 5

HTML 5 / CSS 3

ESTADO ACTUAL (MAYO 2012) www.findmebyip.com/litmus/#html5-web-applications

HTML 5 / CSS 3

HTML5 = Evolucin

Mejor manejo de errores

Mayor estandarizacin

Cdigo ms semntico

Ms accesible

Soporte multimediaBENEFICIOS

HTML 5 / CSS 3BENEFICIOSAcceso a recursos como webcams o micrfonos

Almacenamiento Local

Webworkers

Geolocalizacin

Gestin de formularios

Menor dependencia de plugins y Javascript

HTML 5 / CSS 3NOVEDADESEtiquetado del documentoDOCTYPE

Descargar cancin

Ejemplo de audio

AUDIO

HTML 5 / CSS 3FORMULARIOS

type

searchEmailphoneurltelrange (*)number (*)datedatetimedatetime-localmonthcolour min (*)max (*)

http://www.findmebyip.com/litmus/#html5-forms-inputs

HTML 5 / CSS 3FORMULARIOS

autofocus

requiredautocompletepatternplaceholder

onoff

Expresiones regulares

http://www.findmebyip.com/litmus/#html5-forms-inputs

Ejemplo de formulario

HTML 5 / CSS 3

ETIQUETAS

abbralign alinkarchiveaxisbackground bgcolorborder cellpadding cellspacing charcharoffcharsetclassidclearcodebasecodetypecompact compactdeclarehspacelinklongdescmarginheight marginwidth name nohrefnoshade nowrap profilerevrules schemescopeshapesize standbytargettexttypetype valign valuetypeversionvlinkvspacewidthATRIBUTOS REDEFINIDASELEMENTOS QUE DESAPARECENHTML 5 / CSS 3document.getElementByClassName: acceso a todos los elementos del DOM que compartan la clase especificadadocument.querySelectorAll(selector): acceso a todos los elementos del DOM con el selector especificadodocument.querySelector(selector): acceso al primer elemento del DOM con el selector especificadovar elementos1 = document.querySelectorAll("section div.wrapper"); var elementos2 = document.querySelectorAll("div.content, div.wrapper");var inputsText = document.querySelectorAll('[type=text]');var elemento = document.querySelector("section div.wrapper");JAVASCRIPTHTML 5 / CSS 3draggable (true|false): el elemento puede ser arrastrado hacia otro elementoEVENTOSdragstartdragdragenterdragoverdragleavedropdragendEjemplo de drag&dropDRAG & DROPHTML 5 / CSS 3Bases de datosLocalesLgica de la aplicacine interfaz de usuariodata generada por el usuario, o recursos solicitadosVSCacheALMACENAMIENTO LOCALHTML 5 / CSS 3ALMACENAMIENTO LOCALSe fuerza a tenerInstalado el plugin.Problemas con FirewallsSe fuerza a usar unNavegadordeterminadoPoca informacin (4 Kb)Reduce velocidadTcnicas de Almacenamiento Offline PreviasNavegadorBasado en PluginsCookiesHTML 5 / CSS 3Tcnicas de Almacenamiento con HTML5Diferentes APIs:Web Storage (Local Storage or DOM Storage)Web SQL DatabaseIndexedDBFile StoragePRINCIPIOS:Normas estndar para todos los navegadores.Informacin solo accesible desde el propio navegador.Interaccin de la API y la Base de Datos es asncronaALMACENAMIENTO LOCALHTML 5 / CSS 3Web StorageTIPOS DE DATOS:localStoragePermanecen hasta que el usuario los borrasessionStorageDesaparecen al cerrarse el navegadorEl ms compatible.Estructura clave-valorIntegridad de los datos.Race conditionshttp://html5demos.com/storagehttp://playground.html5rocks.com/#localstoragehttp://playground.html5rocks.com/#sessionstorageALMACENAMIENTO LOCALHTML 5 / CSS 3ALMACENAMIENTO LOCALWeb SQL DatabaseComo las DDBB tradicionales.Estructura relacionada (joins)Ms complejas.IE y Firefox no son compatibleshttp://playground.html5rocks.com/#async_transactionsHTML 5 / CSS 3ALMACENAMIENTO LOCALIndexedDBMezcla entre Web Storage y Web SQL DatabaseEstructura relacionada (joins)Transacciones de informacin.Pocos navegadores lo soportan, pero est previsto ser soportado por todosHTML 5 / CSS 3ALMACENAMIENTO LOCALFileStoragePuedes guardar informacin binaria (como texto), y grandes cantidades de informacin.File Reader soportado solo por ChromeFileWriter todava no soportado por nadieCuando sea soportado ser bueno para almacenar grandes cantidades de informacinHTML 5 / CSS 3LO QUIERO USAR YA!Por defecto usar WEB STORAGE (+ simple & + compatible )Ayudarse de libreras como persis.js Protegerse contra la perdida de datosNo guardar informacin privadaLos usuarios pueden borrar los datos fcilmenteSincronizarse con el servidor frecuentementeSecurizar los datosAlto riesgo en navegadores compartidosSessionStorage mejor que LocalStorageEncriptar informacinEvitar guardar cierto tipo de datosALMACENAMIENTO LOCALHTML 5 / CSS 3WebSocketsPermite la comunicacin bidireccional con cualquier servidor mediante un determinado protocolo de red.La conexin con el servidor se establece de forma asncrona, en segundo plano, y la gestin del todo su ciclo de vida se realiza a travs de callbacks que reciben eventosDebemos utilizar "ws://" para establecer conexiones con el protocolo websocket. El constructor admite adems un parmetro adicional para que indicar un conjunto de subprotocolos, pero an est sin definir.var ws = new WebSocket("ws://echo.websocket.org");la URL del cdigo de ejemplo es vlida muy til para pruebas, es un sencillo servidor websocket que acta como eco (reenva al cliente lo mismo que recibe).HTML 5 / CSS 3WebSocketsws.onopen = function(event){ //Conexin abierta}ws.onmessage = function(event){ //Mensaje recibido en event.data;}ws.onclose = function(event){ //Conexin cerrada}ws.onerror = function(event){ //Error en la conexin}ws.send("ping");//mandar mensaje al servidorws.close();// cerrar la conexinEVENTOSFUNCIONESATRIBUTOSurl (string con la direccin) protocol (string con el protocolo) readyState Conectando (0)Abierto (1)Cerrando (2) Cerrado (3)bufferedAmount (n de bytes pendientes de enviar al server)http://net.tutsplus.com/tutorials/javascript-ajax/start-using-html5-websockets-todayHTML 5 / CSS 3WEB WORKERSTareas JavaScript que pueden lanzarse en segundo plano, a modo de threads. Su objetivo es permitir que las aplicaciones web puedan lanzar hilos de ejecucin concurrentes con una gran carga de trabajo y duracin indeterminada.Las tareas funcionan al margen del proceso normal de gestin de eventos de los controles de la interface de usuario, evitando bloquear la pgina durante su ejecucin.var worker = new Worker("worker.js"); KillHTML 5 / CSS 3WEB WORKERSPueden procesar eventos, callbacks, e incluso es posible crear otros workers. Limitacin: no tienen un contexto de navegacin asociado. No pueden acceder al DOM, window, document o parent, Pero s a navigator, location, XMLHttpRequest, timers, applicationCache o Web SQL database. Permiten la posibilidad de ejecutar el cdigo de otros scriptsimportScripts("script1.js"); //De uno en uno...importScripts("script2.js");importScripts("script3.js", "script4.js"); //.. o varios a la vezHTML 5 / CSS 3WEB WORKERSPermite comunicar el hilo padre principal con el worker hijo.La comunicacin se realiza a travs de "postMessage", y el manejador "onmessage".Una comunicacin bsica entre padre e hijo tendra cuatro pasos:worker.postMessage("Informacin para el worker");self.onmessage = function(event){ //Recibe "Informacin para el worker" en event.data};self.postMessage("Informacin para el padre"); worker.onmessage = function(event){ //Recibe "Info para el padre" en event.data};1) El hilo padre manda un mensaje (evento) al worker:2) El worker recibe el mensaje en el atributo "data" del evento3) El worker termina su proceso y enva un mensaje (evento) al padre:4) El padre recibe el mensaje en el atributo "data" del eventoHTML 5 / CSS 3CSS 3HTML 5CSS 3estructurapresentacinHTML 5 / CSS 319961998200020022009CSS 1: permite dar estilos independientemente del navegador y del HTMLCSS2: nuevas funcionalidades, pero implementacin lentaSemilla del CSS3. Se plantea una lista de mejoras de CSS2Borrador de CSS3CSS2.1: Crea lo que ahora consideramos el estndarImplementacin en algunos navegadores de algunas partes de CSS32005Empieza el desarrollo de CSS3HISTORIA DE CSS 3HTML 5 / CSS 3Mejora en los selectoresNuevos estilos SombraOpacidadesquinas redondeadasMejora en tipografasTransformacionesReduce la cantidad de HTML (divitis)Reduce las peticiones de imgenesNuestra pagina va a ser ms rpida!CSS 3 VS CSS 2HTML 5 / CSS 3NOVEDADES DE CSS 3BordesFondosColorText effectsLayout multicolumnaTransicionesAnimacionesSelectoresMedia QueriesHTML 5 / CSS 3border-image: url(border.png) 27 27 27 27 round round;border-imagebox-shadow: 10px 10px 5px #888;box-shadow / text-shadowborder-radius: 15px;border-radiusBORDESborder: 5px solid #000;border-colors:#e00 #c30 #c50 #c60 #c70 border-colorhttp://www.webdesignerwall.com/demo/css3-dropdown-menu/NOVEDADES DE CSS 3HTML 5 / CSS 3background: url(../topImage.jpg) top left no-repeat, url(../centerImage.jpg) top right repeat-y, url(../bottomImage.jpg) bottom center no-repeat;top imagecenter imagebottom imageMULTIPLE BACKGROUNDShttp://www.css3.info/wp-content/uploads/2007/09/multiple-backgrounds-example.htmlNOVEDADES DE CSS 3HTML 5 / CSS 3rotate : transform: rotate(30deg);skew :transform: skew(-30deg);translate transform: translate(30px,10px);scale : transform: scale(0.5,2.0);TRANSFORMhttp://www.the-art-of-web.com/css/css-animation/http://www.ejhansel.com/transform/NOVEDADES DE CSS 3HTML 5 / CSS 3rgb(255,192,0,1);rgb(255,192,0,0.5);RGBA: (Red, Green, Blue, Alpha)Opacity: 1.0Opacity: 0.5OpacityHSLA: (Hue, Saturation, Lightness, Alpha) hsla(21,97%,52%,1);hsla(21,97%,52%,0.5);HSL: (Hue, Saturation, Lightness)hsl(21,97%,52%)COLORNOVEDADES DE CSS 3HTML 5 / CSS 3NOVEDADES DE CSS 3column-countcolumn-widthcolumn-gapcolumn-ruleMULTI-COLUMN LAYOUTHTML 5 / CSS 3WebFontsWEBFONTS@font-face { font-family: FontName'; src: url('Gondola_SD-webfont.eot'); src: local(''), url(' FontName.woff') format('woff'), url(' FontName.ttf') format('truetype'), url(' FontName.svg#webfontsgM4b18D') format('svg'); font-weight: normal; font-style: normal;}div { font-family: FontName;}http://www.fontsquirrel.com/fontface/generatorNOVEDADES DE CSS 3HTML 5 / CSS 3NOVEDADES DE CSS 3Text-shadowText-shadow: Xpos Ypos Blur Color;ejemplo de sombraText-overflowText-overflow: ellipsis-word;Lorem ipsum dolor sitWord-wrapword-wrap: break-word;This paragraph has long words thisisaveryverylongwordthatisntreallyoneword and again a longwordwithnospacesinitTEXTOShttp://lab.simurai.com/flashlightHTML 5 / CSS 3NOVEDADES DE CSS 3:enabled:disabled:checkedNUEVAS PSEUDO-CLASESHTML 5 / CSS 3NOVEDADES DE CSS 3a[href^=http://web]a[href*=.es]a[href$=.pdf][att$=val]termina por val[att^=val]empieza por val[att*=val]contiene val SELECTORES DE ATRIBUTOSHTML 5 / CSS 3NOVEDADES DE CSS 3MEDIA QUERIESmin-width & max-widthdiferentes estilos segn el tamao de la pantallahttp://mediaqueri.es/HTML 5 / CSS 3ESTADO ACTUAL DE CSS 3http://www.w3.org/Style/CSS/current-work#tablehttp://www.findmebyip.com/litmus/#target-selectorHTML 5 / CSS 3podemos usar CSS3 desde hoy!Aumentamos y ensuciamos el cdigoNo todos los navegadores lo soportanPosibles solucioneseccstender.orgless.jsFicheros .css para cada navegadorcss3generator.com-o-border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;-ms-border-radius: 10px;ESTADO ACTUAL DE CSS 3HTML 5 / CSS 3