Buenas prácticas de desarollo web

El desarrollo de un front-end html parece sencillo, pero lograr un código limpio, semánticamente correcto y compatible con los distintos navegadores termina por ser un duro trabajo. A continuación os dejo un estracto de un post original de catwhocode en el que se hace un repaso a 10 buenas prácticas para el desarrollo web.

• 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

Parsear HTML con PHP

PHP Simple HTML DOM Parser es una librería pensada para manipular código HTML de forma sencilla con PHP. Siguiendo una sintaxis que recuerda a jQuery, permite acceder a tags, modificar elementos HTML o extraer contenido en poquísimas lineas de código.

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

Curso de xHTML/CSS – segundo capítulo

Segunda parte del curso de XhTML y CSS. A partir de este vídeo tomo el testigo de Adrian, autor original del curso, debido a la imposibilidad de que este continuara con el mismo. A lo largo del tutorial trataremos los siguientes puntos:

• 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)

Convertir PSD a CSS y XHTML

Hace poco más de un mes comenzó en cristalab un curso en vídeo sobre la maquetación de diseños photoshop en CSS y xHTML, creado por micha. El curso no ha finalizado aún pero ya alcanza su quinta entrega.

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

Curso de xHTML 1.0 strict y CSS 2.1

Hola amigos damos inicio al curso de xHTML y CSS, aquí tenéis los 2 primeros videos.

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.

Read more