Curso HTML 5 y CSS 3 · Canvas Application · JQuery
Una Plataforma para el desarrollo basado en Web

HTML 5 · CSS 3 · Interfaces · Usabilidad · Accesibilidad · Semantica
Audio y Video sin Pluggins · Client-Side Storage · Geolocation · JQuery

Curso Html 5, Css 3, Interfaces, Usabilidad, Semántica, Accesibilidad
Client-Side Storage, Geolocalización
Audio y Video sin pluggins
Canvas Application, JQuery, Javascript
Mobile Web · Xhtml Mp válido · Mobile Ok
La plataforma web de codigo abierto W3C

© Carlos D. González - Update: Feb - 2012
Contacto: usabilidadweb @ usabilidadweb.com.ar

HTML5 es la piedra angular de la plataforma web de codigo abierto W3C, un marco diseñado para apoyar la innovacion y fomentar el pleno potencial que la web tiene para ofrecer. Anunciando este revolucionario conjunto de herramientas y estandares, el sistema de identidad HTML5 proporciona el vocabulario visual para clasificar claramente y comunicar nuestros esfuerzos colectivos. [W3C] No son necesarios conocimientos previos, para abordar este curso. Formación Continua en la Nube: Durante su curso HTML5, CSS3, JavaScript, tendrá acceso FREE al Entorno de Estudio y Consulta en la Nube de Usabilidad Web. Información en w3codigo.com.ar.

Introducción

HTML 5 (HyperText Markup Language, versión 5) es la quinta revisión importante del lenguaje básico de la World Wide Web, HTML. HTML 5 especifica dos variantes de sintaxis para HTML: un HTML (text/html), la variante conocida como HTML5 y una variante XHTML conocida como sintaxis XHTML5 que deberá ser servida como XML (XHTML) (application/xhtml+xml). Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo. HTML5 logo

HTML 5 no es sólo una nueva especificación HTML, sino, una nueva plataforma para Desarrollos Basados en Web, junto a CSS 3. Uno de los principales cambios es la inclusion de DOM (Modelo de Objetos de Documento) en el estándar. HTML 5 es una herramienta enfocada en resolver problemas prácticos. Imagine la Web 3, Web Semántica o Web de Datos junto a una Web de presentación más util y mejorada en muchos aspectos, con la plataforma de desarrollo HTML 5, CSS 3.

Estoy en contacto con HTML desde Octubre de 1991, cuando un documento informal del CERN (European laboratory for particle physics) mencionaba publicamente 12 tags del HTML. He conocido y usado todas las especificaciones de HTML y seguido sus evoluciones. Cuando grupos numerosos de desarrolladores en el mundo, esperabamos a XHTML 2, el grupo de trabajo del Consorcio W3C detuvo sus actividades, los recursos que estaban utilizándose para el XHTML 2 se transfieren al grupo de trabajo de HTML 5 y hoy estamos en presencia, precisamente, de HTML 5, situación que fue vivida con distintos estados de ánimo, reflejada en bits, en su momento.

HTML 5 y CSS 3 proponen mejoras interesantes para el desarrollo de interfaces, mejor Accesibilidad, operaciones en el cliente, antes reservadas al lado servidor, integración de video y audio sin necesidad de pluggin, nuevas estructuras, integración de DOM, etc.. Esta sigue siendo la web de presentación, con muchas mejoras y opciones.

Actualmente, la Web de Datos, Web Semántica o Web 3 tiene un desarrollo diferente, desde los Microformatos hasta las Ontologias OWL. Estaremos integrados a la Web, por la Web de Datos; luego la web de presentación hará su trabajo. La Plataforma de Desarrollo HTML 5 / CSS 3 convivirá con los desarrollos Semánticos, esta integración, posibilitará la web pensada por TBL, desde un principio: Una Web para personas que luego integra a la Web de Datos, capaz de ser comprendida por Aplicaciones Inteligentes.

El Curso: Plataforma de Desarrollo HTML 5 y CSS 3
Opcional: Web Semántica y su Integración a HTML 5

El curso Plataforma de Desarrollo HTML 5 y CSS 3 revisa el histórico de la tecnologia de Marcas, su evolucion y la necesidad de una web de datos, paralela a la web de personas; como asi tambien, las caracteristicas importantes que hacen a la web el Medio, frente a los tradicionales: Radio, TV, Publicaciones de papel, etc..

Formación Continua en la Nube

Durante su curso HTML5, CSS3, JavaScript, tendrá acceso FREE al Entorno de Estudio y Consulta en la Nube de Usabilidad Web. Información en w3codigo.com.ar.



Semántica

Dar sentido a la estructura y a la semántica con HTML5. Un conjunto más rico de etiquetas, junto con RDFa, microdatos, y microformatos, están permitiendo una mayor utilidad web, basadas en datos de ambos programas y sus usuarios.

Almacenamiento Offline

Web Apps pueden iniciar más rápido el trabajo, incluso si no hay conexión a Internet, gracias a la caché de la aplicación HTML5, así como el almacenamiento local, base de datos indexadas, y las especificaciones del archivo de la API.

El Acceso a Dispositivos

A partir de la API de geolocalización, las aplicaciones Web pueden presentar características completas, tanto del dispositivo y la experiencia. Increíbles innovaciones de acceso al dispositivo se están desarrollando y aplicando, desde audio / vídeo entrada de acceso a los micrófonos y las cámaras, a los datos locales, tales como contactos y eventos, e incluso la inclinación de orientación.

Conectividad

Conectividad más eficiente significa más charlas en tiempo real, juegos más rápidos, y una mejor comunicación. Sockets Web y Eventos Enviado al Server están presionando los datos entre el Cliente y el Servidor de manera más eficiente que nunca.

Multimedia

Audio y Video son ciudadanos de primera clase en la web HTML 5, que viven en armonía con sus aplicaciones y sitios.

3D, gráficos y efectos

Entre SVG, Canvas, WebGL y CSS3 características 3D, van a sorprender a sus usuarios con impresionantes efectos visuales de forma nativa representados en el nevegador web.

Integración y Rendimiento

Realiza tus aplicaciones web y contenido web dinámico más rápido con una variedad de técnicas y tecnologías tales como los Servicios Web y XMLHttpRequest 2. Ningún usuario debe esperar más.

CSS3

CSS3 ofrece una amplia gama de estilización y efectos, la mejora de la aplicación web sin sacrificar su estructura semántica o de rendimiento. Además Web Open Font Format (WOFF) proporciona flexibilidad y control tipográfico más allá de lo que ha ofrecido la web antes.

Fuente: Traducción W3C

La redefinición Estructural y Semántica del marcado de Sitios Web, Blogs y Aplicaciones forman parte del comienzo del estudio de la Especificacion. Un detallado análisis Semántico - Estructural está presente durante el estudio de todos los módulos:

  1. Analisis de las Tecnologias de Marcas
  2. Estructura
    • Creación de parrafos: Conceptos, Semántica, Usabilidad
    • Creacion de Titulos: Conceptos, Semántica, Usabilidad, Motores de busquedas
    • Especificacion de Keywords: Motores de busquedas, Tipos de Metadatos, Metadatos XML, Metadatos Dublin Core
  3. Modulo de Texto
    • Análisis Semántico - Estructural, Atributos, Conceptos, Semántica, Usabilidad
    • Elementos Estructurales
    • Elementos Semánticos
    • Estilos y Usabilidad en Texto
  4. Modulo de Listas
    • Creación de Listas: Tipos, Conceptos, Semántica, Usabilidad
    • Listas anidadas, Accesibilidad
    • Semántica y Motores de busquedas
    • Estilos en Listas
  5. Modulo de Links
    • Creación de Links: Tipos de links, Conceptos, Semántica, Usabilidad
    • Links y Motores de busquedas
    • Links y Documentos alternativos
    • Estilos en Links
  6. Modulo Grafico
  7. Analisis y uso de las nuevas Estructuras en HTML 5
  8. Sistemas de Navegacion
  9. Tablas
  10. Formularios
  11. Audio y Video en HTML 5
  12. Canvas Application
  13. JQuery
  14. GeoLocalizacion
  15. Eventos de Almacenamiento en el Cliente
  16. History API
  17. Drag Files
  18. Contenido Editable
  19. Video
  20. Video Sincronizado
  21. Storage
  22. Bases de datos en el cliente
  23. Juegos en el cliente, programas de dibujo
  24. Google Maps: Integrando distintas utilidades de Google Maps a sus proyectos

Máxima Eficacia de Imágenes de Productos

Las imágenes fotográficas de productos son parte de la información valiosa que despliega un sitio web. La posibilidad de hacer Zoom sobre partes de imágenes reducidas, la creacion de desplazamientos manuales o automatizados, la creacion de Slides son capacidades disponibles y soportadas por todos los navegadores web mas usados. El tratamiento de imágenes con PHP y Ajax, proponen una interaccion rica para el usuario. Las gallerias de imágenes, son otra opcion. Desde el punto de vista de la Web de Datos, es posible la descripcion de imagenes con vocabularios RDF, conectados a las estructuras de la Interfaz HTML 5.

Multimedia y HTML 5

El curso propone conocer y aplicar los elementos de Video / Audio en HTML 5:

  1. Elementos de Audio y Video
  2. Estilo con CSS 3
  3. El API JavaScript
  4. HTML5 Media y Canvas
  5. HTML5 Media y Web Workers
  6. HTML5 Audio API
  7. Media Accessibility & Internationalization

HTML 5, Texto y JQuery

Algunos componentes JQuery nos permiten mejorar la experiencia de usuario:

  1. Creacion de Tooltips
  2. Controles para aumentar / disminuir el size de la fuente
  3. Tabbing a traves de documentos
  4. Texto normal / angosto
  5. Texto desplegable

Durante el Desarrollo del curso, teoria e implementacion, se alternan hasta alcanzar los objetivos. Esta previsto una importante cantidad de material que puede ser usado por los alumnos en sus trabajos. Todo lo mencionado en la lista anterior se programa y observa operativo. El JavaScript, JQuery y AJAX necesarios, son abordados.

Lo mejor de JavaScript y JQuery, bien usados: Este lenguaje no ha formado parte de mis cursos por distintas razones: Propenso al uso inadecuado (links con JavaScript), ventanas emergentes, Navegadores web con el soporte bloqueado para JavaScript, problemas de Seguridad, usos contraproducentes (Navegacion con JavaScript), sobrecarga de codigo en la interfaz, la validacion en el lado cliente, y muchos etc.. Ha sido un recurso de aprendizaje facil, frente a los lenguajes de servidor, por supuesto, con funcionalidades acotadas.

HTML 5 incorpora el elemento Canvas, programable en JavaScript, algunos creen que es una de las revoluciones de la nueva tecnologia. Los Google Maps hacen uso intensivo de JavaScript, tambien, Client-Side Storage y Geolocalizacion. JavaScript y Ajax aparecen vinculados a las paginas del W3C [http://www.w3.org/standards/techs/js#w3c_all] [http://www.w3.org/standards/webdesign/script]. Vale recordar que existe EcmaScript [http://www.elmundo.es/navegante/97/agosto/07/necmascript.html] que tiene como objetivo normalizar la sintaxis y la semántica de un lenguaje general e independiente de las empresas.

En resumen, como he mencionado, se incluye JavaScript y cada uno aprendera como y cuando utilizarlo, y cuando no, en el desarrollo profesional. Tambien he incluido a Ajax, en el trabajo con Base de Datos, en una de las extensiones del presente curso y en el tratamiento de imagenes, para el E-commerce. Es evidente que la nueva plataforma esta pensada para crear interfaces modernas con un poder de interaccion estandarizado y soportado, desde los borradores de trabajo.

Cursos Asociados Opcionales:
Interfaces HTML 5 y Bases de Datos Relacionales
Interfaces HTML 5 y Web Semántica

La plataforma de Desarrollo HTML 5 convivirá con la Web Semántica, el curso Web Semántica, para el desarrollo de la Web de Datos es una posibilidad avanzada disponible. Este curso requiere el estudio de las Tecnologias XML. El curso Base de Datos MySQL y PHP 6, es el cierre de una etapa que le permitira desarrollar por mucho tiempo.

  1. Conectando las Interfaces HTML 5 a Base de Datos MySQL con PHP 6
  2. Conectando las Interfaces HTML 5 a Base de Datos Postgres con PHP 6
  3. Conectando las Interfaces HTML 5 a Base de Datos MySQL con Java (JSP, Java Server Pages)
  4. Conectando las Interfaces HTML 5 a Fuentes XML con XSLT
  5. Creando Interfaces HTML 5 desde las Tecnicas de Eyetracking para Usabilidad Web
    • Diseño de pagina
    • El valor economico de las Parcelas
    • Arquitectura de Informacion y Navegacion
    • Usabilidad de Formularios
    • Usabilidad de Imagenes
    • Usabilidad del Modulo de Texto
  6. Conectando las Interfaces HTML 5 a Vocabularios RDF
  7. Conectando las Interfaces HTML 5 a Ontologias OWL
  8. Las Interfaces HTML 5 y Linked Data
  9. Las Interfaces HTML 5 y los Microdatos

Algunas Novedades en HTML 5

  • Incorpora etiquetas (canvas 2D y 3D, audio, video) con codecs para mostrar los contenidos multimedia. Actualmente hay una lucha entre imponer codecs gratuitos (WebM + VP8) o de pago (H.264/MPEG-4 AVC).
  • Etiquetas para manejar grandes conjuntos de datos: Datagrid, Details, menu y Command. Permiten generar tablas dinámicas que pueden filtrar, ordenar y ocultar contenido en cliente. Mejoras en los formularios. Nuevos tipos de datos (eMail, number, url, datetime, etc.) y facilidades para validar el contenido sin Javascript.
  • Visores: MathML (fórmulas matemáticas) y SVG (gráficos vectoriales). En general se deja abierto a poder interpretar otros lenguajes XML.
  • Drag & Drop. Nueva funcionalidad para arrastrar objetos como imágenes.
  • Un nuevo elemento HTML5 es la etiqueta canvas. Este tag, que representa a una superficie de dibujo, puede generar una pequeña revolución. Canvas puede programarse, animarse y modificarse usando solo JavaScript.

Web Semántica

  • Añade etiquetas para manejar la Web Semántica (Web 3.0): header, footer, article, nav, time( fecha del contenido), link rel='' (tipo de contenido que se enlaza).
  • Estas etiquetas permiten describir cual es el significado del contenido. Por ejemplo su importancia, su finalidad y las relaciones que existen. No tienen especial impacto en la visualización, se orientan a buscadores.
  • Los buscadores podrán indexar e interpretar esta meta información para no buscar simplemente apariciones de palabras en el texto de la página.
  • Permite incorporar a las páginas ficheros RDF / OWL (con meta información) para describir relaciones entre los términos utilizados.

Nuevas APIs y Javascript

  • API para hacer Drag & Drop. Mediante eventos.
  • API para trabajar Off-Line. Permite descargar todos los contenidos necesarios y trabajar en local.
  • API de Geoposicionamiento para dispositivos que lo soporten.
  • API Storage. Facilidad de almacenamiento persistente en local, con bases de datos (basadas en SQL Lite) o con almacenamiento de objetos por aplicación o por dominio Web (Local Storage y Global Storage). Se dispone de una Base de datos con la posibilidad de hacer consultas SQL. WebSockets.
  • API de comunicación bidireccional entre páginas. Similar a los Sockets de C.
  • WebWorkers. Hilos de ejecución en paralelo.
  • ESTÁNDAR FUTURO. System Information API. Acceso al hardware a bajo nivel: red, ficheros, CPU, Memoria, puertos USB, cámaras, micrófonos muy interesante pero con numerosas salvedades de seguridad.



Página del Autor de Usabilidad web |

Estándares Web, Bases de Datos, Web Semántica
Desarrollo de Software en la Nube
Desarrollo de software en C++, JAVA y PYTHON
Consultor independiente: Usabilidad, AI, y Estándares web W3C
Cursos en Buenos Aires, Argentina
http://www.usabilidadweb.com.ar/

Red de Formación Continua On Line de usabilidadweb.com.ar (1994 - 2012)
w3codigo.com.ar/