Permitir que IE aplique estilos a las etiquetas HTML5

ByLuis

El que los navegadores antiguos o IE no acepten etiquetas HTML5 no suele ser un problema a la hora de mostrarlas, el problema viene a la hora de aplicar estilos e IE que no le aplica los estilos, ya que IE ignora las etiquetas.

header { /* sus estilos */ }
section { /* sus estilos */ }
footer  { /* sus estilos */ }

Para ponerle solución, se puede crear un elemento dinamicamente antes de aplicar los estilos, y por arte de magia (o desesperación) tendrá los estilos al elemento.

html5shiv

DLayer: script jQuery que nos ayuda a maquetar diseños

ByLuis

Cuando nos pasan un diseño en PNG o PSD y tenemos que transformarlo a CSS y XHTML, una de las partes más tediosas es comprobar que el HTML se ajusta al diseño. Por ello, he creado un script rápido (y un tanto chapuzas) que permite añadir una imagen en el documento HTML y modificar su top y left así como el opacity para poder comprobar si vamos por buen camino.

La imagen la podemos indicar mediante una URL o haciendo drag&drop del fichero (PNG, GIF o JPEG). El D&D sólo funciona en Firefox y sinceramente, el resto del script solo lo he probado en Firefox. Luego solo nos falta cambiar el opacity, el top o el left y hacer pruebas.

Para instalarlo solo hay que añadir el script y añadir jquery si no está ya incluido.

Espero que os sea útil

jquery-dlayer

Integra las licencias Creative Commons en tu HTML con ccRel

ByLuis

ccREL es una forma de añadir la licencia Creative Commons a nuestros contenidos web. Su uso es muy sencillo, aunque a mi no me ha validado el HTML, si alguien sabe como conseguir que valide que lo diga:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:cc="http://creativecommons.org/ns">
<head>
<title>Judith Myerson's Stuff</title>
</head>
<body>
<div about="">
This page, by
<a property="cc:attributionName" rel="cc:attributionURL" href="http://jmyerson.org/">
Judith Myerson
</a>,
is licensed under a
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/">
CC Attribution License
</a>.
</div>
</body>
</html>

ccREL

Vía / IBM Developer Works

QueryPath: maneja HTML con PHP como si fuera jQuery

ByLuis

QueryPath es una librería PHP que permite trabajar con HTML, XML o web services de forma muy sencilla y parecida a la que se usa en jQuery, permitiendo usar métodos encadenados.

Puede usarse para importar documentos XML en una base de datos SQL, o pasar los resultados del SQL a un XML o HTML. Se pueden escribir documentos en HTML o convertir XML en HTML. Abrir documentos y buscar mediante selectores CSS3 o XPath.

qp('sample.html')->find('title')->text('Hello World')->writeHTML();

QueryPath

Vía / Developer Works

Parsear HTML con PHP

ByLuis

Para obtener datos de un HTML, en vez de hacerlo con expresiones regulares, hacerlo mediante DOMDocument:

$oldSetting = libxml_use_internal_errors( true );
libxml_clear_errors();
$html = new DOMDocument();
$html->loadHtmlFile( $url );
$xpath = new DOMXPath( $html );
$links = $xpath->query( '//a' );
foreach ( $links as $link ) {
echo $link->getAttribute( 'href' ), "\n";
}
libxml_clear_errors();
libxml_use_internal_errors( $oldSetting );

Se utiliza libxml_use_internal_errors para evitar HTML mal formados

Me pregunto si para obtener tan solo un dato del HTML (title por ejemplo) es mejor el DOM o las expresiones regulares.

Extracting data from HTML

Select Box Factory: combos con diseño y funcionalidades

ByLuis

Select Box Factory es un script que nos permite añadir combos en nuestra página web con un estilo propio y que además añade funcionalidades:

slectboxfactory.png

  • Usa divs en vez de options
  • Añade funcionalidades al desplegable
  • Los contenedores pueden contener lo que necesitemos
  • Las opciones pueden estar activas o inactivas
  • Los estilos se pueden modificar con facilidad
  • Distintos tipos de combos
  • Filtros

Select Box Factory

CSSRound: crear esquinas redondeadas fácilmente

ByLuis

CSSRound es una aplicación que nos permite generar estilos, HTML e imágenes para crear cajas con esquinas redondeadas de forma muy sencilla.
cssround.png
Tan solo tendremos que indicar el radio de la esquina, el color de fondo de la capa, el color de la caja redondeada, el color de la letra, el ancho de la caja y el contenido, y nos devolverá todo lo necesario para mostrar el diseño en nuestra página.
CSSRound

Consejos para desarrollar cumpliendo estándares

ByLuis

Buenos consejos a tener en cuenta cuando se trata de desarrollar cumpliendo estándares web.

  • Menos es más, no uses mas código del necesario
  • No uses CSS o Javascript dentro del HTML, ya sea en las etiquetas como en el head.
  • Usa código semántico, las cabeceras mediante etiquetas h1, h2, …, resaltar mediante strong, …
  • No uses meta etiquetas redundantes
  • Usa microformatos para hacer tu sitio legible
  • Usa tablas solo para mostrar tablas
  • Usa rel=”external” para enlaces externos, no uses target=”_blank”, hazo mediante Javascript
  • No uses Javascript mediante enlaces
  • No muestres contenido importante mediante Flash o Ajax, siempre mediante HTML plano

10 Coding Guidelines for Perfect Findability and Web Standards

jsMath: incluye fórmulas matemáticas en tu web

ByLuis

jsMath es una paquete basado en la capa de matemáticas TeX, que nos permite añadir ecuaciones y notaciones matemáticas en nuestras páginas web. Con soporte para muchos navegadores en diferentes sistemas operativos, lo cual nos ahorra un problema de compatibilidades.
jsmath.png
jsMath intenta usar fuentes TeX, y cuando no se disponga de ellas usará imágenes que son escalables y con fuentes Unicode, por lo que a la hora de imprimir no perdería resolución. No utiliza directamente MathML porque este no está pensado para ser escrito directamente y porque no hay demasiados navegadores que lo admitan.
jsMath
Vía / dzone

Spinner Control: control HTML mediante Prototype

ByLuis

Spinner Control es una librería creada con Prototype que permite crear controles HTML que modifican su valor mediante botones incluidos en ellos. Ya hace tiempo implementamos nuestro propio controlador, por lo que no es necesario explicar cómo hacerlo.

spinner.png

Entre las características que ofrece encontramos lo siguiente:

  • Pulsación continua del botón considerada
  • Aumento de velocidad según el tiempo
  • Tiene en cuenta los cursores arriba y abajo
  • Trabaja con números enteros, decimales y arrays.
  • Intervalo configurable
  • Máximo y mínimo configurable
  • Fuerza máximo y mínimo cuando pierde el foco
  • Uso de prefijos y sufijos
  • Ignora parte no numéricas escritas

Spinner Control

Vía / dzone