Añade skins a tu página web

ByLuis

Muy buen truco para añadirle pieles (skins) a tu página web. Normalmente una página web no suele tener la necesidad de modificar el diseño, pero una aplicación web del estilo comunidad de usuarios si puede ser buena idea el personalizar la apariencia de la página.
En este caso se trata de un método para que el usuario modifique la página que ve, aunque pequeños cambios pueden hacer que sea el programador quien modifique la piel según circunstancias.
El método es sencillo, nos creamos un directorio dónde almacenaremos todas las pieles, cada una en un directorio. En cada directorio de pieles habrá una página que contenga la cabecera, el pie de página, la barra lateral y el resto de partes de la página que queramos personalizar.
Mediante cookies almacenaremos la piel que el usuario desea ver o que haya usado con anterioridad. En esta cookie lo que guardaremos realmente será el nombre del directorio de la piel, aunque claro, esto no es muy seguro y yo más bien almacenaría un índice que corresponda al directorio.
Si le damos un par de vueltas más, podríamos tener una piel por defecto y en el caso de que un elemento de la página (por ejemplo el footer) no se encuentre, obtener ese elemento en la piel por defecto (algo parecido usa Seagull).
Podéis ver el código necesario en el enlace que os ofrecemos.
Skinning Your Website
Vía / Good PHP Tutorials

| | |

Personaliza los radio y los checkbox

ByLuis

Muchas veces los diseños no suelen ir de acuerdo con el aspecto de los radio y los checkbox que nos ofrecen los navegadores.
Crear controles que sustituyan los ya existentes puede darnos problemas de accesibilidad, salvo en este caso (bueno, y supongo que en otros), ya que lo que hace este script es aprovechar la funcionalidad de las etiquetas label para que el funcionamiento recaiga sobre estas etiquetas y no sobre las checkbox o los radio.
radiocheckbox.png
El script buscará los inputs radio y checkbox y los ocultará y cambiará el estilo de las label asociadas para que el funcionamiento sea el mismo.
ARC – Adam’s Radio/Checkbox customisation
Vía / Infected-FX

Microsoft liderará el grupo de trabajo HTML en la W3C

ByLuis

El grupo de trabajo que, dentro de la W3C, se encargará de la controvertida misión de “reinventar el HTML“, estará liderado por Chris Wilson, el jefe del proyecto IE7. Este grupo de trabajo colaborará con WHATWG de evolucionar el HTML de forma paralela al XHTML.
Personalmente me llevé una grata impresión de Chris, al que muchos pudimos escuchar en la pasada edición de Fundamentos Web, y hay que reconocerle su gran labor acercando IE7 a los estándares.
Pero que sea un alto responsable de Microsoft el que se encarge de liderar la evolución de un lenguaje que esa empresa ha respetado tan poco a largo del tiempo es algo que nos produce inquietud y desasosiego.
No puedo estar más de acuerdo con Daniel Glazman cuando considera que:

No puedo entender cómo y porqué el liderazgo del Grupo de Trabajo del HTML se da al vendedor mayoritario de navegadores, en este caso Microsoft. Microsoft, Mozilla, Opera y Apple deberían estar fuera de este liderazgo de este nuevo grupo de trabajo para preservar su independencia total o al menos añadir un co-lider independiente para mantener este propósito.

Creo que los que piensan que esto significa que Microsoft se acercará a los estándares y a la W3C pecan de ingenuos y que esta no es una buena noticia.
Vía / 456BereaStreet

DOM Tool: transforma HTML en código DOM

ByLuis

A la hora de generar nuevo código HTML mediante Javascript, nos enfrentamos a la decisión de utilizar innerHTML o DOM. El problema de usar DOM es que nos puede llevar mucho tiempo generar el código Javascript necesario para crear el HTML necesario.
Todo este proceso se puede hacer de forma mucho más sencilla mediante DOM Tool, una aplicación que nos devolverá el código Javascript necesario para pasar un HTML que introduciremos mediante un formulario.
Ya no hay excusas para no usar DOM.
DOM Tool
Vía / dzone

|

Referencia HTML con ejemplos

ByLuis

Muchas de las veces, cuando estamos realizando páginas web y no usamos un editor HTML completo, nos puede ocurrir que no nos acordamos de una etiqueta HTML, de su utilización o de sus atributos.
Si te encuentras en esa situación, HTML Playground puede serte de mucha utilidad, ya que te muestra todas las etiquetas HTML, con su descripción y un código de ejemplo, el cual se puede visualizar y modificar.
htmlplayground.png
HTML Playground
Vía / Ajaxian

Opciones de una SELECT agrupadas

ByLuis

Algo que no mucha gente suele conocer es que en una select de un HTML se pueden agrupar opciones. Algunos pensarán que esto es una tontería y que es imposible no saberlo, pero conozco bastantes casos de gente que usa selects y que no se fija en toda su especificación, lo cual no me extraña, porque yo jamás he tenido que crear una select agrupada, y supongo que es porque la “opción” que agrupa no es seleccionable.

Para agrupar opciones se necesita la etiqueta optgroup, la cual encerrará las opciones que pertenecen al mismo grupo, y dispondrá de un atributo label que será el texto que aparecerá agrupando las opciones.

<select name="prueba">
<option value="1">Opción 1</option>
<optgroup label="Opción 2">
<option value="2.1">Opción 2.1</option>
<option value="2.2">Opción 2.2</option>
<option value="2.3">Opción 2.3</option>
</optgroup>
<option value="3">Opción 3</option>
<optgroup label="Opción 4">
<option value="4.1">Opción 2.1</option>
<option value="4.2">Opción 4.2</option>
</optgroup>
</select>

A la hora de modificar los estilos de optgroup, hay que tener cuidado que algunos los heredarán las opciones que contenga, por ejemplo el color de la letra.

Ejemplo

gotApi: colección de APIs

ByLuis

gotapi.pngYa hace tiempo hablamos de una web de referencias para programadores, y como cuanta más variedad de servicios parecidos tengamos, mejor que mejor. En esta ocasión os mostramos un directorio de APIs, que accediendo a las páginas originales, nos muestran las referencias que necesitamos.
Dentro de las distintas APIs encontramos referencias sobre HTML, Javascript (Prototype incluida), CSS, XML, C++, PHP, bases de datos, Java, Apache, ActionScript y mucho más que va creciendo poco a poco.
Lo que más me gusta es poder elegir el origen de referencia del API, por ejemplo para HTML puedes mirar en w3.org o en msdn.microsoft.com, aunque me hubiera gustado que se pudiera buscar también en xulplanet.com.
gotAPI.com
Vía / dzone

Crea ‘destacados’ sin duplicar texto

ByLuis

Entendemos destacados como esa parte de un artículo de especial interés que se repite en otra parte del artículo y que se resalta. Quizás otra alguien de periodismo lo podría definir de otra forma o llamarlo de distinta manera, pero creo que con la imagen siguiente nos entenderemos todos.
destacados.png
En 456 Barea Street nos ofrecen un javascript para realizarlo directamente sin necesidad de duplicar el texto.

La forma de realizarlo es sencillo, marcas el texto que quieres resaltar entre un elemento span, que tenga un estilo específico. Después tan solo tenemos que obtener esta etiqueta, hacer una copia de su contenido, crearnos una capa que tenga el estilo float con valor left, incluir la capa nueva antes del padre del texto original, y ya está, tenemos el texto destacado resaltado sobre el texto normal.

Automatic pullquotes with JavaScript and CSS

Vía / Site Point

Obtener información de páginas remotas con PHP

ByLuis

En ciertos momentos nos puede ser útil obtener información de páginas remotas, por ejemplo si tenemos un listado de páginas favoritas, pues obtener las palabras clave que tengan en el metatag, para poder clasificarlas con tags propias.

El proceso es sencillo mediante PHP, el problema es que algunos servidores, creo que pasa con DreamHost, no permiten el abrir ficheros de forma remota.

Primero debemos leer el fichero:

$url = "http://www.pagina.com/";
$fp = fopen( $url, 'r' );
$cont = "";
while( !feof( $fp ) ) {
$buffer = trim( fgets( $fp, 4096 ) );
$content .= $buffer;
}

Después podemos mirar cual es el título de la página:

$start = '<title>';
$end = '<\/title>';
preg_match( "/$start(.*)$end/s", $content, $match );
$title = $match[1];

Y por último obtener las metatags, usando para ello la función de PHP get_meta_tags, lo cual nos facilita el trabajo:

$metatagarray = get_meta_tags( $url );
$keywords = $metatagarray[ "keywords" ];
$description = $metatagarray[ "description" ];

Puedes verlo con una explicación más extensa en el artículo original.

Get Remote Web Page Information Using PHP

| |

Laboratorio: control input selector para HTML

ByLuis

Uno de los controles que he visto en alguna aplicación (sobre todo de tipo editor gráfico), es aquella en la que el valor numérico de una caja de texto se puede modificar mediante botones y mediante una barra de progreso.
input-selector.png
La versión que he realizado modifica los input type=”text” que haya en la página que tengan el atributo rel el valor selector[min,max], siendo min y max los valores mínimos y máximos que permite el controlador.

Entre otras cosas, el controlador permite modificar el valor mediante la forma tradicional (usando la caja de texto), usando las flechas, pinchando en la barra de progreso o haciendo drag en la misma barra.

Read More “Laboratorio: control input selector para HTML”