Sentido Web » html

Permitir que IE aplique estilos a las etiquetas HTML5

displaynone — Wed, 18 Aug 2010 14:57:41 +0000

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

displaynone — Fri, 16 Jul 2010 21:12:44 +0000

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

displaynone — Thu, 16 Jul 2009 02:00:00 +0000

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

displaynone — Wed, 29 Apr 2009 21:45:00 +0000

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

displaynone — Wed, 18 Feb 2009 02:00:00 +0000

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

displaynone — Tue, 09 Sep 2008 18:30:00 +0000

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:

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

displaynone — Mon, 04 Aug 2008 18:00:00 +0000

CSSRound es una aplicación que nos permite generar estilos, HTML e imágenes para crear cajas con esquinas redondeadas de forma muy sencilla. 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

displaynone — Wed, 04 Jun 2008 17:29:29 +0000

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

displaynone — Wed, 05 Sep 2007 01:00:00 +0000

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

displaynone — Tue, 31 Jul 2007 23:00:00 +0000

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.

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