• Añade comentarios en el cierre de las etiquetas html para facilitar la comprensión del código de un solo vistazo
• Resetea los valores CSS por defecto del navegador antes de empezar con el diseño
• No uses @import para linkar hojas de estilos. Es mucho más lento que el método tradicional.
• Optimiza el tamaño de tus imágenes con aplicaciones online como smush it
• Procura no mezclar html y css mediante atributos style
• Procura no mezclar html y javascript. Linka siempre a ficheros externos .js y evita eventos inline como onClick
• Incluye las hojas de estilos especificas para IE6/7 mediante condicionales (<!–[if lte IE 6]>)
• Coloca los ficheros javascript al final del documento para mejorar la carga de la página
• Usa HTML semánticamente. Ajem: Agrupa elementos “hermanos” como los items de un menu en <ul> u otro tipo de etiquetas que los agrupe
• Comprueba la compatibilidad entre navegadores según vas programando, y no al final del diseño, para evitar futuros dolores de cabeza

Veamos un par de ejemplos:

• Acceder a elementos HTML

  // Create DOM from URL or file
  $html = file_get_html(‘http://www.google.com/’);

  // Find all images
  foreach($html->find(‘img’) as $element)
  echo $element->src . ‘<br>’;

  // Find all links
  foreach($html->find(‘a’) as $element)
  echo $element->href . ‘<br>’;

• Modificar elementos HTML

  // Create DOM from string
  $html = str_get_html(‘<div id=”hello”>Hello</div><div id=”world”>World</div>’);

  $html->find(‘div’, 1)->class = ‘bar’;

  $html->find(‘div[id=hello]‘, 0)->innertext = ‘foo’;

  echo $html; // Output: <div id=”hello”>foo</div><div id=”world” class=”bar”>World</div>

• Extraer contenido

  // Dump contents (without tags) from HTML
  echo file_get_html(‘http://www.google.com/’)->plaintext;

Simple HTML DOM Parser requiere PHP 5 o superior para su correcto funcionamiento y es capaz de trabajar con HTML no valido.

Web oficial de Simple HTML DOM Parser
Descargar desde sourceforge

Vía sentidoweb

• Elementos de bloque
• Elementos en línea
• Marcadores básico de texto
• Etiqueta span
• Espacios en blanco, tabuladores y caracteres de nueva línea
• Etiqueta pre

Podeis descargar el vídeo aquí (16 min – 41mb – 1440×900)

Os dejo con la primera parte: organización de carpetas y cortar las imágenes necesarias para empezar a maquetar.

Si os gusto el vídeo aquí tenéis los links al resto del material:

• Segunda entrega: Organizar y cortar los elementos del diseño .PSD
• Tercera entrega: Estructura Visual y Armado de XHTML
• Cuarta entrega: Concepto del Modelo de Bloque y Armado completo de Estructura con el CSS
• Quinta entrega: Javascript

En esta clase haremos un acercamiento a como se hacen las paginas web, también tocaremos algunos conceptos y definiciones básicas de HTML y CSS conforme a estándares.

En el segundo video seguimos con el curso de xHTML y CSS, en esta clase estudiaremos y escribiremos en código lo elementos de estructura como párrafos divs bloques de cita y lineas horizontales.

Para finalizar dejamos el ejercicio practico. Eso es todo y hasta el próximo videotutorial.

descargar introducción
descargar primer video práctico