Cuando un navegador comienza a parsear una página, comienza a leer desde el encabezado, claro. Si la respuesta del encabezado del content-type especifica un atributo charset, esos bytes pueden ser interpretados inmediatamente como texto utilizando el encoding determinado. Sin embargo, si una declaración charset no está presente, el browser comienza a escanear los bytes de de respuesta del cuerpo, buscando por algún marcador unicode ó algún elemento dentro del meta http-equiv que especifique el charset. Cuando lo encuentra el parser vuelve a leer el documento para asegurarse que lo anterior sea leído correctamente. Ahora, si una declaración de charset no está definido, el browser está obligado a autodetectar el encoding dependiendo del contenido, lo que puede provocar errores de caracteres o en la página misma.
Luego, son leídos el título, favicon y los estilos (<link>) los que deben estar en concordancia con el charset definido anteriormente.
Finalmente, el orden ideal propuesto por la mayoría de los navegadores modernos es el siguiente:
<doctype>
<html>
<head>
<meta http-equiv content-type charset>
<title>
<link rel="alternate" />
<link rel="shortcut icon" />
<link rel="stylesheet" type="text/css" />
Parece obvio, pero no muchas veces se cumple.
No incluí <script></script> intencionalmente ya que existen escuelas que dicen que es mejor incluirlos abajo del código de tu página, antes del </body>, lo que no valida en el código HTML pero acelera la carga de los elementos del DOM y deja para el final la carga de los scripts. Mejor lo dejo a criterio de cada desarrollador.
Links:
]]>El atributo rel describe la relación del presente documento al link (href) o ancla (name) especificado en el atributo href="". El valor de este atributo puede ser más de uno y al igual que las clases, separados por espacio.
Tiempo de una pausa para un pequeño detalle.
Este atributo dentro de un link <a></a> no es utilizado ni reconocido por ningún browser actualmente (por eso seguramente ha sido menospreciado y olvidado por tanto tiempo).
Entonces, ¿para qué seguir gastando nuestro tiempo? Pues rel="" sí es considerado por los buscadores para obtener más información sobre los enlaces, y es muy difundido mediante microformatos.
Los valores de este atributo para HTML 4.01 son (o eran, como quieras verlo):
- alternate
- una versión alternativa del documento (por ej. una traducción, página para impresión, etc).
- stylesheet
- este es familiar; es una hoja de estilos linkeada externamente.
- start
- el primer documento de un conjunto de documentos. Este valor le indica a los buscadores que la página es considerada el punto de inicio de la colección.
- prev, next
- documento anterior y siguiente de una misma colección de documentos; podría utilizarse para pre-cargar los documentos siguientes.
- contents
- una tabla de contenidos para el conjunto de documentos.
- index
- una página que ofrece un índice para los documentos.
- glossary
- una página con un glosario de términos para el conjunto de documentos.
- copyright
- textos legales para todo el documento.
- chapter
- pagina que abre un capítulo.
- section
- pagina que abre una sección.
- subsection
- pagina que abre una sub-sección.
- appendix
- el apéndice.
- help
- una página de ayuda (más información, otras fuentes de información, instrucciones, etc).
- bookmark
- pagina con enlaces a contenido dentro del mismo conjunto de documentos.
Para HTML 5 y a través de los microformatos (prácticamente XFN), se ha privilegiado la relación de enlaces a personas más que a documentos o partes de él. Los siguientes son los -hasta ahora- aprobados para HTML 5:
- acquaintance
- la persona linkeada ofrece conocimiento anexo al documento actual.
- child
- la persona referenciada es hija de la persona autora del documento.
- co-resident
- la persona referenciada vive en la misma casa del autor.
- co-worker
- la persona referenciada trabaja con el autor.
- colleague
- la persona referenciada es colega del autor.
- contact
- el autor considera a la persona referenciada como un contacto.
- crush
- la persona referenciada atrae al autor.
- date
- el autor está saliendo con la persona referenciada.
- kin
- la persona referenciada es parte de la gran familia del autor.
- me
- la persona referenciada y el autor son la misma persona.
- met
- el autor conoce a la persona referenciada.
- muse
- la persona referenciada inspira al autor.
- neighbor
- la persona referenciada vive cerca o es vecino del autor.
- parent
- la persona referenciada es padre del autor.
- sibling
- la persona referenciada es hermano(a) del autor.
- spouse
- la persona referenciada es cónyugue del autor.
- sweetheart
- el autor considera al(a) referenciado(a) como su cariño.
A partir de necesidades específicas de fabricantes de browsers y de tecnologías, se han creado algunos valores que son específicos, como:
- nofollow
- es utilizado por Google para especificar que el spider de indexación no debe seguir ese link.
- shortcut icon
- reconocido por los browsers modernos para enlazar un archivo favicon.ico.
- apple-touch-icon
- utilizado por Apple para especificar un archivo ícono para un sitio web.
Pues como leen, este malhogrado atributo está resucitando y nos permite vincular objetos y documentos con una semántica nunca antes vista. Queda en nosotros utilizarla correctamente y sacarle provecho en nuestros proyectos.
Links:
]]>
En esta ocasión el layout es bastante simple, uno típico que encontrarás en cualquier sistema de comentarios para blogs. Pero es un buen puntapié para que veas de qué se trata esto. Además, contiene las etiquetas fundamentales y más utilizadas para capturar datos de usuarios.
Espero sea de ayuda y que se entienda, como siempre lo muestro en 2 formatos: streaming para web y uno en alta calidad para que lo bajes y estudies offline. Además, puedes descargar el material utilizado para este videocast.
]]>Bien eso era lo primero que quería dejar claro; he visto demasiados <li>, <h1>, incluso <p> clickeables. Ahora, a lo que va este artículo es cómo la semántica se está dejando atrás por la comodidad de escribir eventos mediante JS. Me culpo también por caer en lo mismo, pero me interesa ahora mostrarles la mejor solución que he encontrado al respecto.
Pongámonos en un caso de ejemplo. Supongamos que se agrega una función para ejecutar un slideToggle a un enlace; por lo que he visto generalmente esto se hace de 2 maneras:
<a href="#" id="ejecuta_toggle">Ejecutar slideToggle</a>
Cumples con tener un href funcional (no vacío) pero puede hacer que al hacer click la página haga scroll hasta el inicio dado que tienes un ancla vacío en el href y quizás tengas que dar un return false al final de la función del slideToggle, ó
<a href="javascript:void(0)" id="ejecuta_toggle">Ejecutar slideToggle</a>
Que hace que el browser no ejecute el enlace y no se salga de la misma página.
Enfin, son 2 métodos similares y que cumplen con el objetivo primario de ejecutar algun comportamiento mediante Javascript a través de un hyperlink. Pero nuevamente mi pregunta: ¿Qué sucede con la semántica? ¿Cómo le digo al buscador, indexador, robot que ese <a> no es un enlace realmente? ¿Que lo estoy disfrazando para cumplir con mis objetivos?
Complicada pregunta y simple respuesta. Con esta inquitud espero que puedan ir más allá en sus desarrollos; recuerden que un simple click puede desencadenar muchos más eventos que los que tienen planificado para él, eventos que benefician a sus usuarios mediante indexaciones más precisas.
La solución
Entreguen una ancla semántica al hyperlink, pero una ancla sobre sí mismo. Ejemplifico con lo mismo que he estado utilizando:
<a href="#ejecuta_toggle" name="ejecuta_toggle" id="ejecuta_toggle">Ejecutar slideToggle</a>
Con este método conservan la semántica indicando a través del atributo name qué hará ese mismo enlace y al mismo tiempo evitan el movimiento de scroll de la página.
]]>Me puse a indagar por la web y encontré varias discusiones sobre qué solución es mejor que otra, y ninguna fue conclusiva. No hay solución aparente que funcione de igual manera para todos los browsers y que sea utilizada, por ejemplo, con comentarios condicionales. Básicamente me encontré con 2: una que involucra HTML pero la mejor manera de implementarlo es mediante Javascript y la segunda sencillamente con Javascript. Explicaré ambas a continuación, pero antes el HTML común que sería del tipo:
<select>
<option>Primero</option>
<option disabled="disabled">Segundo</option>
<option>Tercero</option>
</select>
Solución 1
Para que IE interprete la opción <option disabled="disabled">Segundo</option> como deshabilitado, debes cambiar la etiqueta <option> por <optgroup>; el problema es que <optgroup> se compone ligeramente diferente de <option> por lo que el HTML quedaría así:
<select>
<option>Primero</option>
<optgroup label="Segundo">Segundo</optgroup>
<option>Tercero</option>
</select>
Esta solución funciona perfecto en todos los browsers, por lo que puede ser hecho automáticamente mediante jQuery:
$('option:disabled').each(function(){
var texto = $(this).text();
$(this).replaceWith("<optgroup label='"+texto+"'>"+texto+"</optgroup>")
});
Como el problema es sólo de IE, prefiero encerraro en un if() que detecte el browser como podrán apreciar en el ejemplo. Además, notarán que <optgroup> tiene una leve diferencia de estilo que <option disabled="disabled"> pero que se puede subsanar fácilmente mediante CSS.
Ver solución 1 (en IE notarán)
Solución 2
Esta solución no es una solución en sí sino un parche para el problema: ya que IE no considera el atributo disabled, entonces cada vez que el <option disabled="disabled"> sea seleccionado por el usuario (tomando en cuenta que todos los otros browsers no dejarán que sea seleccionado) la selección será automáticamente trasladada al primer <option> del <select>, vale decir del ejemplo HTML si hago click a <optgroup label="Segundo">Segundo</optgroup>, automáticamente seré redireccionado a <option>Primero</option>. El JS:
$('option:disabled').css('color','gray');
$('select').change(function(){
checkDisabledOptions(this);
});
function checkDisabledOptions(el){
if(el.options[el.options.selectedIndex].disabled){
el.selectedIndex = 0;
}
}
Esta solución es una mezcla entre jQuery y Javascript puro, tomada de la mejor implementación encontrada de entre 20 otras vistas; es la más simple y con menos líneas de código. Además, para esta solución es bueno siempre en el primero item del <select> la opción <option>Seleccione</option> o cualquiera que sea que no tenga un value válido (value=""), así aportamos a la accesibilidad y podremos validar ese ítem de formulario.
Ver solución 2 (en IE notarán)
Espero Rodrigo te haya servido, y gracias por hacer me ver este tema; me entretuve bastante resolviéndolo.
Links:
]]>Elementos tan simples como links vacíos, o que no llevan a ningún lado (<a href="#">), imágenes sin definición de atributo alt (<img alt="">) o el mismo uso del atributo style="" dentro de cualquier etiqueta son detectados y mostrados con un estilo que traté de que fuera bastante notorio: bordes gruesos o colores poco comunes de fondo, por ejemplo.
En el ejemplo 1, podrán ver (si ven el código fuente) que la estructura de esa página está bastante mal hecha, seguramente por algún software que hace el trabajo fácil. Al aplicar la hoja de estilos rayos-x.css, podrán notar todo lo que hace evidente:
La hoja de estilos que hace la detección, contiene lo siguiente:
/* — atributos del <body> obsoletos — */
body[bgcolor], body[background], body[link], body[alink], body[vlink] {
border: 3px dashed red;
}
/* — etiquetas obsoletas desde HTML 4.01 — */
font, center, marquee, b, i, u, strike, menu, basefont, applet {
background: fuchsia;
font-weight: bold;
}
/* — atributos de estilo dentro de etiquetas, obsoletos todos — */
*[align], *[color] {
border: 2px double blue;
}
/* — atributos de estilo para etiquetas comunes — */
div[bgcolor], div[background], table[bgcolor], table[background], td[bgcolor], td[background], th[bgcolor], th[background] {
background: lime;
}
/* — detectando etiquetas vacias — */
div:empty, span:empty, li:empty, p:empty, td:empty, th:empty {
background: yellow;
}
/* — detectando atributo style dentro de cualquier etiqueta — */
*[style] {
border: 1px solid cyan;
}
/* — busca por algun spacer que se haya escapado — */
img[src$="spacer.gif"] {
border: 4px solid fuchsia;
}
/* — busca por atributos alt y title vacios en <img /> — */
img[alt=""], img[title=""] {
border-width: 3px;
}
/* — busca atributo title vacio en <a> — */
a[title=""] {
background: chocolate;
}
/* — busca links de ancla vacio — */
a[href="#"] {
background: lime;
}
/* — busca por links vacios — */
a[href=""] {
background: fuchsia;
}
Y para utilizarla, sólo deben linkearla a la página que deseen de la siguiente manera:
<link rel="stylesheet" href="rayos-x.css" type="text/css" media="screen" />
Descargar rayos-x.zip [1kb]
]]>Lo que se va a ver aquí, será específicamente cómo abordar la estructuración de una botonera de formularios (o de cualquier otro en realidad), y cómo lograr que se estén siempre centradas a pesar de cuántos botones tengan. El ejemplo gráfico a continuación:
He visto muchas soluciones a esto, la mayoría de ellas complicadas (mi slogan siempre es facilitar la vida en su máxima expresión). Por ejemplo, se hacen class’es para cada botón (.boton_aceptar_1, .boton_aceptar_2 etc etc etc) y se posicionan absolutamente. También se hacen class’es a cada botón y se marginan, incluso negativamente (lo que IE6 no ve con buenos ojos). Imagínense si son varias páginas de formularios y los botones se repiten (por ejemplo, el ‘Aceptar’ o el ‘Enviar’ son los más comunes) pero no siempre van de a 2, sino que a veces van solos o de a 3, 4…. enfin. Hacer class’es para cada situación no es la mejor solución, ya que llenaremos la hoja de estilos de propiedades de posicionamiento en vez de aplicar una solución global, independiente de la cantidad de botones que estén involucrados. Bueno, esa es la idea de este artículo.
Es frecuente que los temas que escribo para CSSLab se den mientras estoy en algún proyecto, y me topo con dificultades que logro solucionar, y luego las muestro y explico aquí cómo se resolvió finalmente. Este es otro de esos casos, sólo que este tema lo había resuelto hacía mucho pero se dió nuevamente a manos de otro profesional web con quien trabajo. Lo ayudé con esto y finalmente me tomo el tiempo de explicarlo aquí para todos quienes tengan la misma situación.
Vamos a lo que nos reúne. Construído el lindo formulario, con <fieldset>, <legend>, varios <label>, <input /> y <textarea> quizás, llega la hora de poner los botones de Enviar y No Enviar como en el ejemplo gráfico anterior. Mi método implica utilizar listas, ya que me gustan para contener botones como menúes (aunque puede ser un <div> si quienes, incluso un <p>. Cada uno con su gusto). El HTML de la botonera:
<ul id="botonera">
<li><input type="submit" value="Enviar" /><input type="reset" value="No Enviar" /></li>
</ul>
Como habrán notado, en vez de poner cada botón dentro de un <li></li> y flotarlos a la izquierda (como usualmente se usa para los menúes horizontales), puse todos los botones dentro de un mismo <li>, caso contrario no podrían ser centrados. Entonces, si es sólo un botón, o todos los que sean necesarios, deberán ir consecutivamente uno al lado del otro dentro de un único <li></li>.
Ahora, el CSS que hará la magia:
#botonera {
width: 400px;
margin: 20px auto;
}
#botonera li {
list-style: none;
text-align: center;
}
#botonera input {
margin-left: 10px;
}
Bastante simple. Si se han fijado, lo que hace que se centren los elementos dentro del <li> es el text-align: center; ya que como <input /> es una etiqueta lineal, se alineará tal como lo haría un texto cualquiera. Ese es todo el truco. Lo otro es darle al <input /> un margin-left de unos 10px para que se separen un poco si son 2 o más botones (he visto usar para ello… no es correcto). Saco 3 conclusiones de esta solución:
- No se usa float alguno, lo que no hace el contenedor colapsar así que nos ahorramos un clearfix. Además que no puedes centrar un float.
- Se puede usar para cualquier botón, no sólo <input />: <a> y <button> también son soportados. Así que puedes también hacer un menú horizontal centrado con esta misma técnica.
- Es soportado por todos los browsers.
<tr>
<td><img src="/imgs/spacer.gif" width="539" height="12"/></td>
</tr>
</table>
¿Un spacer? No, habían muuuuchos más de donde salió ese. Y lo peor es una tabla entera solo para contener un spacer… Sin comentarios.
]]>Sin comentarios.
<tr align="center" valign="middle">
<td class="cuerpo2"> <div align="center"><a href="entra.asp" target="_top" class="menulink Estilo1"><strong>INICIO</strong></a></div></td>
</tr>
</table></td>
</tr>
<tr align="left"> </tr>
</table>
</td>
</tr>
<!– This table was automatically created with Macromedia Fireworks –>
<!– http://www.macromedia.com –>
</table>
<!–========================= STOP COPYING THE HTML HERE =========================–>
</body>
</html>
Selectores Descendentes
Se ocupan para afectar a todos los elementos que pertenecen (o descenden) de una determinada etiqueta padre. Esto es muy común y hace falta sólo el ejemplo en CSS para que se den cuenta de lo que me refiero:
ul a {
color: red;
}
En el ejemplo anterior, vemos que el color rojo se aplicará solamente a los enlaces <a> que estén dentro de un <ul>, y no a otros. Si queremos ser más específicos, podemos definir id‘s o class‘es:
.menu a {
color: red;
}
Aquí el color rojo estará en toda etiqueta que tenga una class="menu". Y siendo más específico aún, podemos definir si esa class pertenece a cierta etiqueta:
ul.menu a {
color: red;
}
Aquí sólo se verá el rojo del link si está dentro de un <ul class="menu"> y no otra etiqueta con esa misma class.
Hay que tener cuidado con ser tan específico declarando estilos, ya que suelen haber problemas posteriores de que no se reconoce cierto estilo, siendo que está declarado por diferencias de peso entre éstas. Esta especificidad pienso abordarlo muy luego, ya que es un problema muy común e importante de conocer. Pero mientras mejor sigo con esto.
Selectores Hijo (no soportado por IE6)
Se usa para afectar a uno hijo de determinado elemento.
ul li > a {
color: red;
}
Hasta aquí suena igual que los selectores descendentes. La diferencia es que con los selectores hijo afectarán solamente los links que estén dentro del <li>, y no dentro de otra sub etiqueta.
<ul>
<li><a href="">Link 1</a></li>
<li><em><a href="">Link 1</a></em></li>
</ul>
Usando el ejemplo anterior, veremos que utilizando los selectores hijos el color rojo se aplicará sólo al <a> contenido dentro del <li>, y no al que está dentro de <em> ya que pasó a ser su hijo y no del <li> (imagina que ahora es su nieto).
Selectores Hermanos Adyacentes (no soportado por IE6)
Son los que comparten la misma etiqueta padre y que se encuentran uno a lado del otro en la estructura HTML. Se identifica con un signo + entre los hermanos, y la etiqueta que tendrá el estilo será la última declarada luego de este +.
p a+em {
color: red;
}
Finalmente, ¿qué uso tienen estos últimos 2 selectores, si no son soportados por IE6? Bien, a través de tu framework de Javascript favorito (que suelen ser crossbrowser) puedes darles un gran uso, por ejemplo manipulando classes para tablas, que suelen tener muchos elementos anidados (para una simple celda tienes que escribir <table><tr><td></td></tr></table>).
Gracias a Carlos Cazorla por las ilustraciones
]]>