Curso de HTML5: Etiquetas Semánticas

8 diciembre 2013
Categories: curso html5, etiquetas semanticas html5

Nuevas etiquetas semánticas

A continuación detallaremos las principales nuevas etiquetas semánticas de HTML 5:
  • header: el típico div id=”header” sería lo más aproximado, debería contener la cabecera del documento, lo típico que remetimos en la plantilla a lo largo de todo el sitio web.
  • footer: lo mismo pero con el pié de página, donde solemos colocar el copyright el mapa de la web , la dirección de la empresa etc…
  • section: aquí el tema no es tan fácil de definir. Se refiere a las distintas zonas dentro de una determinada web, las áreas donde vamos colocando los widgets, los contenidos, los menús, las partes en las que está compuesta la página. También puede representar distintas partes de una noticia o un post de un blog.
  • article: en si sentido más genérico sería una noticia, un post, un artículo de un blog, o incluso la ficha de un producto en la tienda. En su sentido más académico serían artículo publicados. 
  • nav: es la etiqueta que debería englobar los menús o las barras de navegación, las migas, etc…
  • aside: todo contenido complementario al contenido principal, que debería estar o dentro de una section o un article, debería estar dentro de un aside. Un ejemplo podrían ser los apartados de productos relacionados con un producto que estoy visitando. 
  • hgroup: debería agrupar aquellas cabaceras, h1, h2, etc.. que van relacionadas. Nombre de empresa y eslogan, sería un ejemplo. 
  • figure: típico gráfico relacionado con el texto, donde visualmente podemos ver algo que nos están explicando en texto, tablas, imágenes, gráficas, etc.. serían figure’s
  • time: se ofrece a escribir una fecha o una hora, cuidado con el atributo datetime 🙂
Lo bueno de la semántica es que no hay maneras correctas o incorrectas de aplicar estas etiquetas, sino maneras lógicas para el autor de colocarlas. No existe una regla definida de si los article deben contener sections o no. Aunque sería lógico pensar en un apartado de la web con los últimos artículos sería una sección que dentro tuviera un listado de artículos.

Práctica propuesta

Intenta ir a la web de amazon de un producto, e intenta definir que etiquetas asociarías a que apartados de la web. Repite ese proceso con un blog, la portada de un periódico y un sitio de recetas. 
Abre un comentario y deja tus impresiones.

Licencia Creative Commons

Curso de HTML5: Estructura Básica

8 diciembre 2013
Categories: curso html5, esqueleto html5, estructura básica HTML5

Cambios en la estructura de un HTML5 respecto a HTML4 y XHTML1

A continuación se verán los principales cambios de la estructura básica o el esqueleto de una página HTML5, con comentarios HTML 😉
<!DOCTYPE html>
<!– Lo primero que llamará la atención es el hecho del nuevo doctype simple y efectivo–>
<html lang=“ES-es”>
<!– el idioma definido de manera clara dentro de la etiqueta html–>
    <head>
       <title>Documento HTML</title>
        <!– se acabó el content-type, bienvenido el charset para definir la codificación del fichero –>
       <meta charset=“UTF-8”>
       <meta name=“autor” content=“David Vaquero” />
       <meta name=“copyright” content=“dvaquero.blogspot.com” />
        <!– adios a los type en los scripts y en los estilos 🙂 –>
       <script src=“init.js”></script>
       <script>
       
       </script>
       <link rel=“stylesheet” href=“estilo.css” media=“screen” />
       <style>
        *{
       
        }
    </style>
    </head>
    <body>

       <!– nueva etiqueta heder para identificar la cabecera –>

       <header>
       <img src=“logo.jpg” />
        <!– agrupaciones de H’s –>
       <hgroup>
      <h1>Empresa .com</h1>
      <h2>Somos los mejores en lo que hacemos</h2>
       </hgroup>
        <!– nuevo etiqueta nav para los menús y sistemas de navegación por el sitio y la página –>
      <nav id=“mainmenu”>
      <ul>
      <li><a href=“estructura_base.html”>Estructura base</a></li>
      <li><a href=“fundamentos.html”>Fundamentos</a></li>
      <li><a href=“video.html”>Video</a></li>
      <li><a href=“form.html”>Formulario</a></li>
      <li><a href=“canvas.html”>Canvas</a></li>
      </ul>
      </nav>
       </header>
       
       <div id=“content”>
        <!– el contenido se organizará en artículos y secciones –>
       <article>
      <section id=“titulos”>
      <hgroup>
      <h1 class=“clase”>Titulo</h1>
      <h2>Sub Titulo</h2>
      <h3>Sub sub titulo</h3>
      </hgroup>
      </section>
      <section id=“explicacion”>
      <p id=“iden”>
      Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas “Letraset”, las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
      </p>
      <p id=“aviso” class=“clase”>
      Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas “Letraset”, las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
      </p>
      </section>
       
       </article>
        <!– aside representará el contenido adosado al contenido principal –>
       <aside>
       <section id=“tablas_relacionadas”>
      <table class=“clase” border=“2”>
      <tr>
      <td>1.1</td>
      <td>1.2</td>
      <td>1.3</td>
      </tr>
      <tr>
      <td>2.1</td>
      <td>2.2</td>
      <td>2.3</td>
      </tr>
      <tr>
      <td>3.1</td>
      <td>3.2</td>
      <td>3.3</td>
      </tr>
      </table>
      </section>
       </aside>
       </div>
       <!– el pie ya tiene su etiqueta –>
       <footer>Copyright by Pepesan 2013</footer>
    </body>
</html>

Curso de HTML5: Introducción

7 diciembre 2013
Categories: curso html5, Introducción HTML5

Introducción

HTML5 es la evolución del estándar HTML4 por lo que para poder entender este curso será necesario conocer la base de HTML4. 
Lo primero que debemos saber es que lo que se está definiendo con HTML5 es un nuevo estándar que se intenta dar solución a los actuales usos de HTML incluyendo en la especificación nuevas etiquetas y API’s Javascript que permitan solventar aquellos problemas típicos que nos daban las web HTML4. 
De cara a conocer las novedades de HTML5 veamos un pequeño listado:
  • Nuevas etiquetas: Semántica y estructuración de Contenido
  • Nuevos Campos de formulario
  • Etiquetas de Audio y Video, adios al FLASH para video.
  • Etiqueta Canvas, un lienzo en el que pintar lo que queramos
  • Websockets, comunicación bidireccional entre cliente y servidor sin peticiones XMLHTTPRequest
  • Comunicaciones, nuevas funciones para las peticiones web desde JS y mensajes entre páginas.
  • Aplicaciones Offline, o cómo hacer que la página funcione sin necesidad de tener conexión a internet
  • Almacenamiento Web: datos simples o bases de datos enteras manejadas desde Javascript
  • File: manejo de sistema de ficheros en local, carpetas y archivos.
  • WebWorkers, hilos de ejecución en JS
  • Geolocalización: o cómo consultar las coordenadas del equipo para hacer búsquedas más efectivas
  • Drag And Drop: desde el DOM básico, nuevos eventos para arrastrar y soltar elementos dentro del documento.
  • History: manejo del histórico de URL’s que se han visitado en la página
Todas esta novedades sobre el estándar están en algunos casos en plena definición y en otros ya completamente definidos.

Soporte por parte de los navegadores

Es importante conocer el soporte de estas funcionalidades por parte de los navegadores en sus distintas versiones. Para ellos disponemos de herramientas que nos van a permitir conocer de antemano o en tiempo de ejecución si el navegador soporta o no una funcionalidad en concreto.

Caniuse

Caniuse es una página en la que podemos consultar todas y cada una de las nuevas funcionalidades y nos indicará en que navegadores y versiones de cada navegador nos va a permitir realizar un uso total o parcial de una determinada funcionalidad.
En la caja de búsqueda indicaremos el nombre de la etiqueta el atributo o incluso el api y nos mostrará una tabla de soporte, muy útil para el análisis de requisitos al empezar o presupuestar un proyecto. 

Modernizr

Es una biblioteca JS que nos va a permitir realizar la consulta al propio navegador para saber si soporta una determinada funcionalidad de HTML5 o CSS3. de esta manera podemos disponer de un plan B por si el navegador no soporta una determinada funcionalidad. 
Página web de Modernizr: http://modernizr.com

Conclusiones

Con estos conocimientos de base podremos hacernos una idea sobre lo que puede y no puede hacer un navegador con soporte de HTML5 

Curso de Javascript: Debug con Eclipse y Firefox

7 diciembre 2013
Categories: curso de javascript, debug javascript, debug js firefox, depuración javascript

Una de las principales tareas del programador es realizar la depuración de un programa que está fallando e inicialmente se desconoce porqué.
En la presente unidad se expone una guía de instalación y configuración de las herramientas sobre eclipse y firefox que permiten realizar el debut.

Instalación de componentes

Componentes de Firefox

Componentes de Eclipse

Configuraciones

Configuración en Firefox

  • Abrir Firebug (F12)
  • Habilitar cada pestaña de Firebug
  • Arrancar el Servidor de Crossfire: Botón derecho en el botón de CrossFire (abajo a la derecha), Star Server.
  • En el diálogo: host: localhost, port: 5000
  • Pulsar Ok
  • Comprobar en la pestaña de Firebug/Remote que el servidor está arrancado.

Configuración en Eclipse

  • Menú: Window->Preferences
  • En el apartado: Run/Debug->Launching
  • Desmarcar: Build (if required) before launching
  • Pulsar Ok
  • Menú: Project
  • Desmarcar: Build Automatically

Lanzando del proyecto

  • En eclipse:
  • Abrir los ficheros del proyecto a depurar.
  • Abrir la Perspectiva de Debug: Window->Open Perspective-> Debug
  • En la barra de Iconos de acceso directo, Abrir el desplegable al lado del botón de Debug
  • Seleccionar Debug Configurations…
  • Selecionar el apartado Remote Javascript
  • Pulsar en el botón nuevo (Hoja en blanco, arriba a la izquireda)
  • Cambiar el nombre a: CrossFire
  • En el Connector: Seleccionar Remote Attach
  • Host: localhost
  • Port: 5000
  • Seleccionar todas las checkbox menos la última
  • En la pestaña Source, Añadir el proyecto: botón Add
  • Selecionar Proyecto
  • Pulsar en Ok
  • Seleccionar el proyecto a depurar
  • Pulsar Ok
  • Pulsar en Apply (abajo al a derecha)
  • Pulsar en Close
  • En Firefox:
  • Abrir el fichero html que se quiere depurar a través de la barra de navegación o el menú Archivo->Abrir Archivo
  • En el Firebug/Script
  • Añadir los Breakpoints que se quiera en el código JS, mediante dobleclick en las líneas que se desee
  • En eclipse:
  • Pulsar en el boton Debug
  • Aparecerán los procesos de debug
  • Recargar el HTML en Firefox
Tanto en el Eclipse como en Firebug aparecerá el código en la primera línea que tenga un BreakPoint.
Entonces ya podremos ver la ejecución del código paso a paso. 

Finalizando

Una vez finalizada la depuración podremos Terminar la ejecución, pulsando botón derecho sobre el proceso de Crossfire de la pestaña de debug-> Terminate
Y podemos sobre el mismo proceso eliminarlo pulsado botón derecho sobre él->Remove all terminated

Repitiendo la depuración

Una vez configurado todo simplemente pulsando en el desplegable al lado del botón de Debug, podremos seleccionar la opción Crossfire que configuramos en Debug Configurations.

Suscríbete al Boletín

Si quieres estar al tanto de las novedades del blog, ya sabes :)
* = campo obligatorio

powered by MailChimp!

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

Aviso de cookies