Posts Tagged ‘HTML’

Alternar el color de las filas con CSS3

Escrito por Oriol Navascuez en 03/05/2011

Los que trabajamos programando o diseñando front-end i/o back-end nos hemos dado muchas veces con la necesidad de, a la hora de generar una tabla, que esta intercale los colores de sus filas de forma automática.  Y cuando digo automática, me refiero a que no lo tengamos que hacer mediante programación en la creación de la tabla.

Si alguna vez habéis participado en la mejora de un site, o habéis visto el código de webs que no son vuestras, quizá hayáis dado con alguna que solucione esto de la siguiente forma:


<tbody>
	<tr class="odd">
		<td>Contenido</td>
	</tr>
	<tr class="even">
		<td>Contenido</td>
	</tr>
	<tr class="odd">
		<td>Contenido</td>
	</tr>
	<tr class="even">
		<td>Contenido</td>
	</tr>
</tbody>

Muchas veces se crean dos clases “odd” (impar) y “even” (par), para dar un color distinto a cada fila, y así al generar la tabla se intercala la clase a medida que se genera. Es una solución, pero no la mejor de ellas. Sin contar en que tenemos que crear una condición en el bucle de la programación para que itere entre las dos opciones si es par o impar.

La mejor solución, y que para eso existe, es usando selectores de tercer nivel que nos ofrece CSS3.
Si ahora mismo no sabéis de que estoy hablando, seguro que este trocito de código os suena:

a:hover{}

:hover es un selector de tercer nivel, clasificado como una pseudo-clase de acción, ya que se encarga de cambiar el formato de un elemento según pase el ratón por encima.

Y ahora que sabemos bien que son los selectores de tercer nivel, os enseñamos como hacer el cambio de color de las filas, usando :nth-child, que es una pseudo-clase estructural.

:nth-child(n): Este selector selecciona el elemento indicado con la condición de que sea el hijo enésimo de su padre. Es útil para seleccionar el segundo elemento de una lista, el quinto párrafo de un texto, etc.

La explicación matemática es la siguiente:
Representamos el elemento que queremos seleccionar con la expresión (an+b) e identificaremos una lista con “a” elementos en la que queremos destacar el elemento “b“.

EJEMPLO:

tr:nth-child(2n+1) /* representa cada fila impar de una tabla HTML */

tr:nth-child(odd)  /* igual al anterior */

tr:nth-child(2n+0) /* representa cada fila par de una tabla HTML */

tr:nth-child(even) /* igual al anterior */</pre>

Podemos jugar tanto como queramos con esto, por ejemplo, si queremos seleccionar un elemento de cada nueve de una lista infinita. Sería algo como (10n-1) o (10n+9):

:nth-child(10n-1)  /* representa el 9, 19, 29, etc, elementos */

:nth-child(10n+9)  /* igual al anterior */</pre>

Si lo queréis ver ejemplificado, aquí podéis ver una demo en acción:
DEMO

Más info:
Selectors Level 3 [W3C]

Initializr, plantilla HTML5 en 15 segundos!

Escrito por Oriol Navascuez en 17/02/2011

Poco a poco ya se va haciendo eco y se va usando en más y más webs el HTML5. Pero aun le queda un largo camino que recorrer hasta que no veamos versiones completas de este. Tan largo, que la W3C anunció hace a penas 4 días que el proceso de desarrollo del HTML5 durará hasta 2014. Podéis ver la noticia en este enlace.

Pero lo que os traemos con esta nueva entrada es una pequeña, pero útil, herramienta que tener en cuenta a la hora de empezar un nuevo proyecto que queramos desarrollar con HTML5. Se llama Initializr, que con 5 sencillos clics tenemos a nuestra disposición una plantilla en HTML5 incluso con las librerías JavaScript que queramos usar, o incluso con el fichero de configuración para nuestro servidor.

Así que os invito a poner este recurso en vuestras barras de favoritos. Os ahorrará mucho tiempo en evitar escribir de cero la estructura básica HTML a la hora de hacer una plantilla.

Aviary se embeda en nuestras webs

Escrito por Oriol Navascuez en 25/11/2010

Hace un par de días los chicos de Aviary anunciaban en su blog, el lanzamiento del HTML5 Photo Editor.

Lo interesante de Feather, así es como han bautizado al editor, es que además de estar realizado en HTML5 y no en flash como muchos editores online, es embedable, lo que significa que lo podremos incluir en nuestras web sin necesidad de cambiar de pagina o de pestaña, etc.

Con esta nueva herramienta podemos hacer posible que en nuestros desarrollos, se puedan editar al vuelo las fotografias. Claro que no pensemos que tenemos todas las herramientas a nuestra disposición, solamente hay algunas herramientas básicas, brillo, rotación de las imegenes, redimensionarlas, cortarlas, quitar ojos rojos, y alguna cosita más.

En resumen, Aviary nos ofrece un pequeño, pero potente editor online, que tanto podemos usar desde su web, como desde la nuestra sin necesidad de hacer nada más que no sea copiar el código para hacer el embed. Lo cierto es que tiene muy buena pinta.

DataTables, el plugin de jQuery para manejar tablas

Escrito por Víctor Mundet en 04/08/2010

¿Quién había dicho que usar tablas en HTML estaba anticuado?

La realidad es que hoy en día aún se utilizan, hay ocasiones que una tabla puede ahorrarnos mucho trabajo para colocar ciertos datos, ¡y encima queda mejor! Pero como en todo, no se ha de abusar.

El problema llega cuando debemos trabajar con cantidades grandes de datos. Puede ser desastroso, aparte de poco práctico y de poca utilidad. Pero claro, a todo problema llega su solución, que en este caso es un fantástico y completo plugin para jQuery llamado DataTables.

 

 

Con ésta herramienta conseguimos:

  • Controles interactivos de una tabla de HTML
    • Ordenar por campos
    • Paginador
    • Filtros
    • Sistema de búsqueda
    • Posibilidad de obtención de datos dinámicos (Ajax)
  • Totalmente traducible con las palabras que tu quieras
  • Diseño personalizable con skins o css

Incluso existen plugins para DataTables, uno de los que más utilidad he podido encontrar es TableTools. Con él podrás exportar los datos de la tabla a un Excel por ejemplo, muy útil para según que ocasiones!

Si os interesa podéis echarle un ojo a las demos, y para más información podéis entrar a la página oficial del plugin.

Tengo pensado hacer una segunda entrega sobre éste plugin, explicando como crear vuestros filtros personales para cada ocasión. ¡Estad atentos!

Estructura básica [Iniciación al HTML II]

Escrito por Oriol Navascuez en 14/07/2010

En el primer post de este manual, os introducíamos al HTML con el identificador DOCTYPE. Algo esencial para identificar el HTML con el que está escrito nuestra pagina.

Para seguir este manual con un poco de sentido a la hora de escribir un documento HTML, os explicaremos la estructura básica que este documento tiene que tomar tras la identificación del DTD. La estructura básica de toda web, tiene que contener estas etiquetas <html>, <head>, <title> y <body>. Cada una muy importante en su función, y es más que recomendable memorizarlas, y no dejarnos ninguna.

Así pues, la estructura de cualquier web, como mínimo tiene que tener esta estructura:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML  4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title></title>
    </head>
    <body></body>
</html>

Bien, pues ahora que ya vemos más o menos la estructura de cualquier documento HTML, y antes de explicaros la utilidad de cada etiqueta, vamos a ver como quedaría si le damos cierto contenido, y seguro que ya deduciréis el uso de cada etiqueta. Veamos como queda:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML  4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Este es el título de la pagina</title>
    </head>
    <body>
        Entre estas etiquetas va el cuerpo de nuestra pagina.
    </body>
</html>

Por si os ayuda, en la siguiente pagina, podréis ver el resultado de estas pocas líneas: DEMO

Visto un claro ejemplo del funcionamiento de los tags básicos del HTML, veamos para que sirve cada uno de ellos.

Tag <html>

El tag <html> es el encargado de decirle al navegador de que a partir de esa línea, lo que se va a encontrar es texto HTML. Ésta, es la etiqueta más externa de cualquier documento, por ello también se la nombra como la etiqueta raíz. Y a pesar de ser el elemento raíz, siempre, antes de la etiqueta <html> debemos indicar el elemento DOCTYPE.

Tag <head>

La etiqueta <head> es la que se encarga de contener los elementos de cabecera de nuestra web, como puede ser el título. Esta etiqueta incluirá scripts, las rutas a las hojas de estilos, los meta tags, y otra mucha información.

Los siguientes tags, son los que podemos encontrar dentro de esta etiqueta: <base>, <link>, <meta>, <script>, <style>, y <title>. Más adelante nos adentraremos en todas estas etiquetas, por ahora no serán necesarias.

Tag <title>

La etiqueta <title> será el encargado de definir el título de nuestro documento. Esta etiqueta es esencial, ya que será la que se vea en la parte superior del navegador informando de la web que estamos visitando. Además, será el nombre que se guarde si la añadimos a nuestros favoritos y será también este título el que motores de búsqueda como Google nos muestre en sus resultados.

Tag <body>

Esta etiqueta, <body>, es la que define el cuerpo del documento HTML. Es decir, es la que indica el comienzo o el fin de un documento que contiene texto, enlaces, imágenes, tablas, listas, etc. Dentro de esta etiqueta tendremos que poner todo nuestro código HTML, y todo aquello que queramos mostrar por pantalla.

Pasa de PX a EM

Escrito por Oriol Navascuez en 06/06/2010

En el anterior artículo te dábamos nuestra opinión sobre que medida es mejor usar px o em, y te comentábamos que haríamos un segundo artículo para comprender el uso de los em’s y como pasar nuestra web de píxeles a em sin sufrir demasiado. Pues bien, ya ha llegado la hora de daros las claves básicas para ello.

Pero antes de empezar a trabajar con los em en nuestras CSS, necesitamos saber el tamaño de fuente por defecto del navegador. Por suerte, esto es fácil de saber. Todos los navegadores tienen por defecto el tamaño de fuente en 16px, o lo que es lo mismo, 1em.

Muchos diseñadores modifican el tamaño de la fuente a 10px (0.625em o 62.5%) en el <body>, para así seleccionar más fácilmente el tamaño de fuente de los hijos. Pero a nuestro parecer, nos parece más correcto dejar la fuente por defecto a 16px, y transformar la medida únicamente en los elementos que lo necesitemos, ya que así, sabremos en todo momento, que el tamaño por defecto será 16px, el mismo que los navegadores. Y así, si alguien ha modificado el tamaño por defecto del navegador, nuestro interface elástico no se romperá y seguirá ajustado perfectamente.
Para conseguir esto definimos esto en nuestra hoja de estilos:

body {
    font-size:1em;
}

El problema, como casi siempre, es Internet Explorer. IE, tiene un problema, y es que redimensiona el texto em de forma mucho mayor de lo normal. Por lo que es necesario colocar la siguiente línea en nuestras CSS:

html {
    font-size:100%;
}

Con esta línea, incluso IE redimensionará correctamente nuestra web.

Ahora viene lo “duro”, como convertimos de px a em nuestro diseño?

Como seguramente no somos expertos en matemáticas… será bueno apuntarnos o recordar solo una fórmula, no? No te asustes aun, que es facilita. Si eres diseñador/a seguro que conoces bien a los píxeles, por lo que partimos sobre esta base.

1 ÷ tamaño de fuente del padre × tamaño deseado en píxeles = valor en em

Esta fórmula funciona de la siguiente manera, calculamos cuanto mide un píxel en ems y lo multiplicamos por el tamaño en píxeles que necesitemos para obtener cada medida en ems.

Es decir, que si queremos crear un <div> que tenga de ancho 540px, sabiendo que el tamaño por defecto no lo hemos modificado, aplicaremos la fórmula así:

1 ÷ 16 × 540 = 33.75em

Pero si te quieres ayudar un poco con una tabla de conversión en la que seleccionando el tamaño de fuente por defecto, te devuelve la tabla con proporciones a esa medida… te recomendamos visitar, PXtoEM.

Pues creo que con esto ya tenéis la base para empezar a pasar vuestros diseños a ems. Es algo más de trabajo, pero mejora mucho la accesibilidad a la página web y a sus contenidos.
Suerte con los próximos diseños!