Tecnologías web 2.0. David Ramos Valcárcel MÓDULO IV: Tecnologías y frameworks de desarrollo de software libre

Transcripción

1 Tecnologías web 2.0 MÓDULO IV: Tecnologías y frameworks de desarrollo de software libre

2 HTML 5 Etiquetado semántico Mejora búsquedas Mejora comprensión Mejora estructura (encabezado, agrupaciones, menú, secciones, artículos, pie, contenido relacionado ) Vídeo y audio nativo con controles Dibujo con canvas Aplicaciones off- line

3 HTML 5 Elimina definitivamente etiquetas <font><b><center><frame> Edición de texto en contenido Almacenamiento local David Ramos Valcárcel +10Mb & cookies 4kB Geolocalización Mejora interacción usuario- interfaz drag&drop

4 HTML 5 Tiene una sintaxis más clara Elementos semánticos más concretos Nuevos elementos de formulario que facilitan la programación de los mismos

5 HTML 5 Evolution, not Revolution

6 HTML 5 Adopción completa en los navegadores Estandares de audio y video indefinidos Chrome, Safari: mp3, h264 Firefox, Opera: ogg, David WebM Ramos Valcárcel La especificación de HTML 5 no ha finalizado

7 HTML 5 Video y audio Estandarización de formatos abiertos Se comporta como imagen No control streaming No control del vídeo No información adicional al video (subtitulos, anuncios, anotaciones ) Sin cámara y microfono - > Flash más completo

8 HTML 5 HTML5CheatSheet.png table.html woorkhtml5cheatsheetw.jpg

9 HTML5

10 Maquetación con HTML5 Etiquetado de un blog con HTML

11 Maquetación con CSS HTML5CheatSheet.png Listas ordenadas cronológicamente <ol id="timeline"> <li> <time datetime=" ">july 1990</time> <p>born</p> </li> <li> <time>september 1994</time> <p>started first school</p> </li>... </ol>

12 Maquetación con CSS CSS (style.css) #timeline{ width:820px; padding:50px 0; margin:0 auto 50px auto; overflow:hidden; list-style:none; position:relative; } #timeline li:nth-of-type(even){ float:right; text-align:left; } -moz-border-radius:0; //mozilla -webkit-border-radius:0; //chrome,safari border-radius:0; // explorer

13 HTML5 & CSS Ejercicio Crea el documento HTML5 Modifica la hoja de estilos Identifica una nueva utilidad de este formato

14 Contenido Editable - contenteditable designmode: permite editar el texto de un documento HTML contenteditable: indica cuales son los contenedores editables David Ramos Valcárcel Mejoras con respecto editores WYSIWYG Estandarización Integración nativa con los navegadores

15 Contenido Editable - contenteditable <article> <section> <ol contenteditable="true"> <li>preparar ejercico curso GIMP</li> <li>redactar informe de infraestructura</li> <li>pedir toner impresora</li> <li>enviar para convocatoria sábado</li> </ol> </section> </article>

16 Contenido Editable - contenteditable Ejemplo a desarrollar Lista de tareas pendientes diarias Ejemplo: contenteditable Añadir hoja de estilos

17 Almacenamiento local - localstorage Similar a las cookies Mayor cantidad de información (cookies 4KB) En local, no se envía al servidor Persistencia Las cookies tienen limitaciones de tamaño Persistencia à almacenamiento en servidor

18 Almacenamiento local - localstorage Almacena los datos en el navegador Existen 3 tipos de almacenamiento en HTML5: Local: almacena datos en pares clave/valor Los datos almacenados están restringidos al dominio Sesión: almacena datos en pares clave/valor Únicamente válidos durante la sesión Base de datos: almacena datos relacionales ofreciendo una API SQL Uso de BBDD con todo lo que ello implica

19 Almacenamiento local - localstorage Código ejemplo function supports_html5_storage() { try { return 'localstorage' in window && catch (e) { return false; } } window['localstorage']!== null; } localstorage.setitem('favoriteflavor','vanilla'); var taste = localstorage.getitem('favoriteflavor'); //que devuelve? localstorage.removeitem('favoriteflavor'); var taste = localstorage.getitem('favoriteflavor'); //que devuelve?

20 Almacenamiento local - localstorage Código ejemplo function guardasesion() { localstorage.setitem('value,document.queryselector('#session').value); sessionstorage.setitem('timestamp', (new Date()).getTime()); }; function guardalocal() { localstorage.setitem('value,document.queryselector('#local').value); localstorage.setitem('timestamp', (new Date()).getTime()); }; function borraalmacenamiento() { sessionstorage.clear(); localstorage.clear(); };

21 Almacenamiento local - localstorage Ejemplo Comprobar actualizando David Ramos página Valcárcel Comprobar cerrando pestaña navegador

22 localstorage & contenteditable Continuación ejercicio listado tareas Guardar con almacenamiento local las modificaciones realizadas sobre el contenido editable Controla el tiempo de edición

23 Geolocalización HTML5 Clásico Enlazar à copiar código Ventajas & inconvenientes??? (HTML5 & Clásico)

24 WebWorkers Permite ejecutar procesos en segundo plano concurrente Evitan que se bloquee la interfaz de usuario Las secuencias de comandos de larga duración no se ven interrumpidas por secuencias cortas Clicks, Drag and Drop Los workers estan en un fichero javascript independiente Al worker se le indica que hacer cuando se recibe un mensaje Esperar a que el javascript y el workers se comuniquen

25 WebWorkers Desventaja: Alto coste inicial de rendimiento Alto coste de memoria No se puede acceder a la página ni al DOM Actualmente se simula con: settimeout(), setinterval(), XMLHttpRequest Manejadores de eventos...

26 WebWorkers Worker.htm <h2>simple Web Worker Code Sample</h2> <p>calculating the total number of prime numbers in between 1 and </p> <div id="total">1</div> <script> </script> var worker = new Worker( worker.js'); worker.onmessage = updateresult; function updateresult(event) { document.getelementbyid('total').innerhtml = event.data; } Worker.js var total = 2; outer: for(var n=1;n<=100000;n++) { } for (var i = 2; i <= Math.sqrt(n); i += 1) { if (n % i == 0) continue outer; } total++; postmessage(total);

27 WebWorkers Ejercicio Tres situaciones donde se deberían usar workers. Porqué? Tres situaciones donde no se pueden usar workers. Porqué?

28 Microformatos Trozos de código HTML Añaden contenido semántico Facilitar la identificación de los datos De gran utilidad para buscadores De utilidad para usuarios??? Usan los atributos id y class Pueden usarse en la CSS tools ES/firefox/addon/semantic- checker/

29 Microformatos <div id="hcard-mikel-ramos-ramos" class="vcard"> <span class="fn n"> <span class="given-name">mikel</span> <span class="additional-name">ramos</span> <span class="family-name">ramos</span> </span> <div class="org">universidad de Vigo</div> <a class=" " <div class="adr"> <div class="street-address">avda Habana</div> <span class="locality">ourense</span> <span class="region">españa</span> <span class="postal-code">32005</span> </div> <div class="tel"> </div> <div class="geo"> <abbr class="latitude" title=" ">n </abbr> <abbr class="longitude" title=" ">w </abbr> </div> </div>

30 Microformatos Ejercicio Realiza una propuesta de microformato para una web inmobiliaria Contempla: Localización Nº habitaciones Dimensiones Características Dirección

31 Wireframe & Mockup >> HTML5 Implementa en HTML5 y CSS3 Trabajo TFM Propuesta Wireframe Mockup Incluye microformatos