___layouts: crear layouts de forma sencilla

ByLuis

___layouts te ayuda a crear tus layouts de forma fácil y automática (mediante un constructor para Firefox).

____layouts.png

Permite:

  • Diseño fluido con ancho 100%.
  • Diseño estático con tamaños de 640px, 760px, , 900px y 1000px
  • Personalización del ancho para diseños estáticos de forma sencilla
  • Posibilidad de hacer diseños flexibles en respuesta a configuraciones iniciales del tamaño de fuente realizadas por el usuario.
  • Centrado en la página para diseños de ancho menor de 100%.
  • Facilidad para reescribir las clases CSS para aquellos que quieran diseños con tamaños exactos.

___layouts

Vía / Ajaxian

Nuevos elementos y atributos para HTML 5

ByLuis

En WHATWG están trabajando en el borrador de la especificación de HTML 5. Entre los elementos y atributos nuevos que nos encontramos esta:

  • article: una sección de la página que es una parte independiente de un documento, página o sitio.
  • aside: contenido que está relacionado tangencialmente al contenido, suele representarse con los sidebars.
  • dialog: una conversación.
  • footer: pie de página de una sección.
  • header: cabecera de una sección.
  • nav: representa la navegación de la página.
  • section: documento genérico o parte de una aplicación.

A parte de los que se mencionan en el artículo, yo he encontrado otros que también me han llamado la atención:

  • ping: atributo de los enlaces que contiene una lista de URIs que son interesantes de ser notificadas si el usuario sigue por ese enlace.
  • datagrid: corresponde a una represntación interactiva de una lista, árbol o datos tabulados.
  • progress: barra de progreso para representar el desarrollo de una tarea.

HTML5 Elements and Attributes

Vía / 456 Berea Street

|

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

37 pasos para un perfecto etiquetado HTML

ByLuis

Para aquellos que empiecen o para quienes aún sean un poco de la vieja escuela, el artículo al que hacemos referencia puede ser de gran ayuda ya que te explica desde lo más elemental a lo más semántico.
Hay un total de 37 puntos que nos explican qué es lo que debemos hacer o qué es cada cosa dentro de una página web. Empieza explicando lo que es un HTML, luego un XHTML, los diferentes tipos de XHTML, el DOCTYPE, la validación del documento, la codificación (recomendando UTF-8), el BOM dentro de un archivo UTF-8, las entidades, la semántica (el uso de cabeceras y de em o strong), los párrafos o los saltos de línea y muchas otras cosas más que recomendamos que leaís.
Bulletproof HTML: 37 Steps to Perfect Markup

|

Crea una guía de estilos

ByLuis

Un gran consejo que deberíamos llevar todos a cabo, es crearnos una guía con los estilos que tiene nuestra aplicación. No solo si trabajamos en nuestro propio diseño, porque siempre se nos acaban olvidando y podemos caer en el error de crearnos estilos repetidos, sino también para cuando trabajamos en proyectos grandes y o bien los estilos ya están creados pero no los conocemos, porque una cosa es leer un css y otra es adivinar que pinta tiene, o bien porque creamos alguno para que se sepa que existe.
cssguide.png
Uno de esos documentos que odiamos hacer, pero que siempre echamos de menos tener.
Creating a Style-Guide for your site
Vía / SitePoint

| |

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”

| |

Laboratorio: listas con descripción en HTML

ByLuis

Muchas veces el diseño que creamos nos hace usar listas no ordenadas, las cuales queremos que tengan descripción, pero por la falta de espacio, queremos que esta ocupe poco espacio.

lista-descripcion.png

Para crear este efecto, usaremos una lista y una capa por cada descripción que queremos mostrar, a parte de un script que mostrará la descripción cuando pasamos el ratón sobre el elemento de la lista.

Read More “Laboratorio: listas con descripción en HTML”

Cuidado con el XHTML

ByLuis

Ahora que está más extendido el uso de XHTML, siempre viene bien darse cuenta de cosas en las que no caemos. He encontrado un artículo que me parece bastante interesante que nos avisa sobre el uso del XHTML.
Antes de nada diferenciar entre HTML y XHTML para poder comprender mejor con qué nos vamos a encontrar. HTML está definido por SGML y no necesita ser validado y los navegadores al encontrar errores en el uso de las etiquetas las ignoran y siguen presentando el documento. XHTML está basado en XML y como tal tiene que ser validado.
Un error común es usar el mismo Content-Type para ambos documentos, mientras que para HTML es text/html, para XHTML es application/xhtml+xml, por lo que cuando mandamos un XHTML como HTML, realmente le estamos eliminando todo aquello que le hace diferente, el XML, si no es XML no valida. El navegador trataría el XHTML como un conjunto de etiquetas sin orden, y cuando encuentre errores, los obviará o solucionará.
Otro problema que nos podemos encontrar es que si en un documento XHTML encerramos los scripts y las hojas de estilo entre comentarios HTML (&lt!– … –&gt), tal y como se hace en HTML, el validador XML lo tomará como comentario y lo ignorará. Recordad que los estilos y los scripts se deben encerrar entre <![CDATA[ … ]]>.
Tambien hay que pensar que si no lo tratamos como XHTML tendremos problemas si incrustamos código SVG o MathML ya que el navegador lo ignorará.
Más problemas, en XHTML todas las elementos deben tener su etiqueta de cierre, lo cual puede ser un problema si se trata como un HTML, ya que una etiqueta del tipo <br/> entrará en conflicto con las null end tags de SGML, algo que casi nadie usa. En SGML podemos traducir <title>Mi página</title> por <title/My page/, por lo que si se encuentra con un <br/>, si sigue esta regla de SGML, nos dirá que sobra un >.
Para variar, IE no acepta XHTML, y cuando recibe un documento con este formato, nos mostrará la ventana para guardar o abrir el documento.
Como conclusión, casi mejor pasarlo como HTML, nos evitamos problemas con IE y a parte la validación de XML es costosa.
Beware of XHTML
Vía / dzone