Usabilidad Web

Cursos de Tecnologías desde 1994

Curso Integral HTML 5 y CSS 3, Canvas Application, Javascript, JQuery, JSON.
Interfaces Web, Usabilidad, Accesibilidad, Optimización SEO
Análisis de las especificaciones W3C, Semántica en HTML 5, Schema Vocabulary
Canvas Application. Local Storage

Presencial e individual en Buenos Aires (Desde 1994), sin conocimientos previos
Cursos Regulares, Intensivos. Teoría e Implementación. Consultoría

Carlos González, autor de Usabilidad Web

Clases Presenciales e Individuales de Desarrollo Web Profesional (Desde 1994), en Buenos Aires, Argentina.

Estudio Integral de los Estándares Web HTML 5, CSS 3. Tecnologías complementarias: Javascript, JQuery. Nuevas Interfaces, Usabilidad, Accesibilidad

Se puede acceder al curso integral sin tener conocimientos previos y alcanzar niveles avanzados que le permita Emprender, Trabajar Profesionalmente, Autogestionarse y Desarrollar Productos Digitales.

Carlos Daniel González, Curso Integral de Estándares Web HTML 5, CSS 3, Usabilidad, Accesibilidad y Tecnologías complementarias: Javascript, JQuery..
Argentina, Ciudad Autónoma de Buenos Aires, Barracas
Contactar por mail

Curso HTML 5 y CSS 3, Canvas Application, JQuery, json. Análisis de las especificaciones estándares del W3C, semántica en html 5, schema vocabulary

Descripción del curso:

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, Ajax tendrá acceso FREE al Entorno de Estudio y Consulta en la Nube de Usabilidad Web. Información en w3codigo.com.ar.

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.

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 Tim Berners-Lee, desde un principio: Una Web para personas que luego integra a la Web de Datos, capaz de ser comprendida por Aplicaciones Inteligentes.

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

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

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:
HTML 5 y Bases de Datos Relacionales
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
  2. Conectando las Interfaces HTML 5 a Base de Datos Postgres con PHP
  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 página
    • El valor económico de las Parcelas
    • Arquitectura de Información y Navegación
    • Usabilidad de Formularios
    • Usabilidad de Imágenes
    • Usabilidad del Módulo 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.

Referencias a Estándares Web W3C

HTML5 HTML5: A vocabulary and associated APIs for HTML and XHTML by
HTML+RDFa 1.1 Support for RDFa in HTML4 and HTML5 by
HTML Microdata HTML Microdata by
HTML Canvas 2D Context Canvas 2D Context by
HTML5: Edition for Web Authors Edition for Web Authors by
HTML5 differences from HTML4 HTML5 differences from HTML4 by
HTML Weekly Issue/Action Summary Issue/Action Summary by
Share: News and Opinions about HTML News and Opinions about HTML by

CSS current work CSS SPEC­I­FI­CA­TIONS by
CSS Color Module Level 3 CSS Color Level 3 by
Selectors Level 3 CSS Selectors Level 3 by
Media Queries Media Queries by
CSS Fonts Module Level 3 CSS Fonts Module Level 3 by
CSS Flexible Box Layout Module CSS Flexible Box Layout Module by
CSS Animations CSS Animations by