Iconos Grunge y Pink

Extreme grunge
	Contiene 12 íconos de 256x256, en formato PNG. descargar

Pink ribbon
	Contiene 24 128x128, 256x256 y 512x51, en formato PNG. descargar

Es común utilizar etiquetas INPUT para que los usuarios ingresen alguna clase de dato, por ejemplo, buscar algo. Suelen ser etiquetas a las que no prestamos atención ni personalizamos aunque, como cualquier otra, admiten el uso de CSS (más información: 1 | 2).

Básicamente dicen esto aunque podrían tener más atributos:

<input type="text" value="" />

Y en estos ejemplos, todas tienen una clase con esta regla de estilo:

input.demos[type=text] {
  background: #FFF;
  border: 2px solid Chocolate;
  border-radius: 4px;
  color: #888;
  font-size: 20px;
  height: 32px;
  margin: 10px 0;
  padding: 0 10px;
  text-align: center;
  width: 300px;
}

Se vería así:

Así, sin nada extra, suele ocurrir que el usuario no sepa qué tipo de dato poner o que formato debería tener por lo que es común que se le adose esa información; si esto lo hacemos en el atributo value será incómodo ya que quien lo use, deberá borrar ese texto y luego poner el dato:

<input type="text" value="el texto por defecto" />

Para evitar eso, muchas veces debemos haber visto que se usan dos eventos extras: onblur y onfocus a los que se les agrega un poco de JavaScript que lo que hace es permutar el valor del atributo value, si el control no está activo y no hay nada agregado, se ve el texto por defecto y ese texto desaparece cuando hacemos click dentro para escribir algo.

<input type="text" value="el texto por defecto" onfocus="if (this.value=='el texto por defecto') this.value='';" onblur="if (this.value=='') this.value='el texto por defecto';" />

Funciona perfectamente pero es un código largo y engorroso que las nuevas técnicas del HTML5 y el CSS3 hacen innecesario ya que para eso, ahora podemos usar un nuevo atributo llamado placeholder que hará todo eso de modo automático aunque, en versiones de Internet Explorer viejas no tendrá ningún efecto:

<input type="text" placeholder="el texto por defecto" value="" />

También es posible personalizar placeholder para que se vea "distinto" pero, eso requiere el uso de propiedades con prefijos que son tres:

:-moz-placeholder {} /* para Firefox */
::-webkit-input-placeholder {} /* para Chrome */
:-ms-input-placeholder {} /* para Internet Explorer */

Lamentablemente, por ahora, las diferencias entre los navegadores también son varias; por ejemplo, en Firefox se pueden usar propiedades como background-color, border y padding pero en Chrome no o bien son mostradas de modo extraño. Además, se debe tener en cuenta que estas reglas de estilo hay que aplicarlas de modo individual y no pueden ser agrupadas:

input.demos:-moz-placeholder {
  background: #DDD;
  color: Chocolate;
  font-size: 16px;
  font-style: italic;
  font-weight: bold;
  letter-spacing: 3px;
}
inputdemos::-webkit-input-placeholder {
  background: #DDD;
  color: Chocolate;
  font-size: 16px;
  font-style: italic;
  font-weight: bold;
  letter-spacing: 3px;
}
input.demos:-ms-input-placeholder {
  background: #DDD;
  color: Chocolate;
  font-size: 16px;
  font-style: italic;
  font-weight: bold;
  letter-spacing: 3px;
}

Aunque este script tal vez no tenga demasiado uso en Blogger, no deja de ser una alternativa interesante, bastante fácil de usar y realmente potente dado su escaso tamaño. Se trata de List.js y no requiere librerías extras.

Una vez insertada en un sitio, nos permite transformar listas (UL LI) de tal modo que pueda buscarse en ellas de modo dinámico, filtrarlas, ordenarlas e incluso editarlas, agregando o borrando items. Obviamente, en Blogger, la parte de edición carece de sentido porque no podríamos guardar esos cambios pero, el resto de las opciones pueden ser aplicadas sin inconvenientes.

Descargamos el archivo, lo alojamos en algún servidor como DropBox o Google Sites y luego, lo agregamos a la plantilla:

<script src='URL_list.min.js' type='text/javascript'></script>

Para usarlo, sólo necesitamos un DIV al que identificaremos con un ID y adentro, agregaremos una lista cuya clase será list y donde cada item puede contener cualquier tipo de etiqueta que también deberemos identificar con una clase que será la que nos sirva para, por ejemplo, ordenarlas.

Un ejemplo:

<div id="miprimerejemplo">
  <span class="sort" rel="nombre"> NOMBRE </span>
  <span class="sort" rel="apellido"> APELLIDO </span>
  <ul class="list">
    <li>
      <span class="nombre"> texto 1 </span>
      <span class="apellido"> texto 2 </span>
    </li>
    <li>
      <span class="nombre"> texto 3 </span>
      <span class="apellido"> texto 4 </span>
    </li>
    .......
  </ul>
</div>

Si debajo del HTML llamamos a la función:

<script>
  var opciones = {valueNames: [ "nombre","apellido" ]};
  var featureList = new List("miprimerejemplo", opciones);
</script>

tendremos una lista que podrá ser ordenada haciendo click en los textos NOMBRE o APELLIDO.

Las características gráficas son las que se nos ocurra, no hay limitaciones al respecto.

Un poco más espectacular es la forma de buscar en una lista ya que se hace de manera dinámica, a medida que vamos ingresando el texto, la lista se va filtrando.

Es similar al ejemplo anterior, acá, lo haremos sobre una lista que contiene algunas entradas del blog:

<div id="otralista">
  <span>buscar</span> <input class="search" />
  <ul class="list">
    <li><a class="orden" href="URL_1"> título 1</a></li>
    <li><a class="orden" href="URL_2"> título 2</a></li>
    <li><a class="orden" href="URL_3"> título 3</a></li>
    ......
  </ul>
</div>
<script>
  var opciones = {valueNames: [ "orden" ]};
  var featureList = new List("otralista", opciones);
</script>

before es lo que está antes , after es lo que está después ... los pseudo-elementos ::after y ::before resultan ser muy sencillos de manejar y tener infinitas posibilidades ya que nos permiten agregar contenido utilizando el CSS.

leer artículo actualizado

jFlip es un plugin de jQuery que genera una galería de imágenes con un singular efecto donde los cambios se ven como si se diera vuelta una página de un libro.

De todos los que he visto similares, es uno de los más simples ya que sólo requiere agregar el script y ejecutar la función, aplicándola sobre listas simples, pudiéndose agregar varias en una misma página.

Lamentablemente, como este tipo de efecto se realiza con etiquetas canvas, en Ias versiones viejas de Internet Explorer hay problemas y proponen usar algún script adicional como ExplorerCanvas peo, no veo que funcione bien así que acá, lo pasaré por alto.

El plugin lo descargamos desde la página del autor, ya sea en su versión full como minimizada y lo agregamos comos siempre, antes de </head>

Luego, el HTML no tiene misterio alguno, colocamos una lista con un ID y las imágenes a mostrar:

<ul id="jflipDEMO">
  <li><img src="URL_IMAGEN_1" /></li>
  <li><img src="URL_IMAGEN_2" /></li>
  <li><img src="URL_IMAGEN_3" /></li>
  <!-- seguimos poniendo cuantas imágenes se nos ocurra -->
</ul>

Y lo ejecutamos de este modo:

<script>
  $("#jflipDEMO").jFlip(300,300,{background:"#903941",cornersTop:true,scale:"fit"});
</script>

Allí es donde podemos establecer algunas opciones; en este caso:

300,300 son el ancho y alto del contenedor (por defecto 300x300)
background es el color de fondo si la imagen es más chica (por defecto es verde)
cornersTop indica si los enlaces para "dar vuelta las hojas" se verán arriba (true) o abajo (false)
scale tiene tres valores posibles:
noresize no hará nada, las imágenes se mostrarán tal cual son
fit ajusta su tamaño para que "entren" en el contenedor
fill re-dimensiona las imágenes para mantener la proporción del aspecto del contenedor

Otro ejemplo:

$("#jflipDEMO").jFlip(350,350,{background:"#903941",cornersTop:false,scale:"fill"});

La etiqueta canvas es muy simple de agregar, sólo tiene tres atributos posibles, el ID con que la identificaremos, el ancho y el alto. Incluso estos dos últimos son opcionales y si no los ponemos, tendrá un tamaño por defecto de 300x150:

<canvas id="nombre" width="valor" height="valor"></canvas>

Puesta así no veremos absolutamente nada ya que es transparente aunque con CSS es posible agregarle algunas propiedades como márgenes, bordes, fondos, etc. Es que, en realidad, lo que hace la etiqueta no es otra cosa que crear un "lienzo", un espacio particular en donde podremos dibujar pixel por pixel utilizando JavaScript.

Como aún no todos los navegadores la soportan, es aconsejable colocar algún tipo de contenido alternativo, un texto, una imagen, algo que advierta que allí habrá algo; por ejemplo:

<canvas id="nombre" width="valor" height="valor"> ... aquí hay algo ... </canvas>

Una alternativa para que internet Exporer soporte esta etiqueta es agregar el script ExplorerCanvas y es lo que está agregado en esta entrada así que el demo (en teoría) también debería verse en ese navegador.

El script lo descargamos y lo agregamos de manera condicional (más información):

<!--[if IE]><script src="URL_excanvas.js"></script><![endif]-->

Para empezar a manipular el contenido de nuestro canvas, debemos empezar a escribir scripts; lo elemental es poder identificarla y para eso está el ID:

var miCANVAS = document.getElementById("nombre");
if (miCANVAS.getContext) {
var canvas = miCANVAS.getContext("2d");
// aquí lo manipularemos
} else {
// advertencia : el navegador no soporta canvas
}

A partir de eso, usaremos la variable para darle órdenes y lo primero será colocarle un color de fondo.

var miCANVAS = document.getElementById("nombre");
if (miCANVAS.getContext) {
var canvas = miCANVAS.getContext("2d");
canvas.fillStyle = "#FFF";
canvas.fillRect (0,0,300,200);
} else {
// advertencia : el navegador no soporta canvas
}

Usamos dos funciones, fillStyle y fillRect() que son las elementales. Con la primera, definimos el color de lo que dibujaremos:

fillStyle = "color" donde el color puede escribirse en cualquier formato ( "white"; "#FFFFFF", "rgb(255,255,255)", "rgba(255,255,255,1)"

y con la segunda, dibujamos un rectángulo lleno:

fillRect(x,y,ancho,alto) donde x e y son las coordenadas de inicio

así que simplemente, hemos hecho que nuestro canvas sea de color blanco, dibujando un rectángulo lleno que es igual al tamaño total.

Los rectángulos son las formas más simples y tenemos dos opciones disponibles, rectángulos llenos como el anterior o rectángulos que sólo tengan un borde, para esto último usamos otra función:

strokeRect(x,y,ancho,alto)

Para estas cosas básicas, hay una función más que nos permite "borrar" (hacer que algo sea transparente):

clearRect(x,y,ancho,alto)

Todas esas funciones tienen los mismos parámetros, definimos dónde se dibujará (con x e y) y definimos su tamaño.

Algunos ejemplos para jugar.

Creo tres funciones; con una, inicializo el lienzo, con otra dibujo rectángulos llenos y con otra cuadrados sin fondo; nada espectacular pero, para quien nada sabe de esto (yo) es un paso comparable al primer viaje a la luna.

<script type="text/javascript">
function iniCANVAS(cual){
var miCANVAS = document.getElementById(cual);
if (miCANVAS.getContext) {
var canvas=miCANVAS.getContext("2d");
canvas.fillStyle="#FFF";
canvas.fillRect (0,0,300,200);
}
}
function drawSQUARES(cual,x1,y1,w,h,c) {
var miCANVAS = document.getElementById(cual);
if (miCANVAS.getContext) {
var canvas=miCANVAS.getContext("2d");
canvas.fillStyle=c;
canvas.fillRect(x1,y1,w,h);
}
}
function drawRECS(cual,x1,y1,w,h,c) {
var miCANVAS = document.getElementById(cual);
if (miCANVAS.getContext) {
var canvas=miCANVAS.getContext("2d");
canvas.fillStyle=c;
canvas.strokeRect(x1,y1,w,h);
}
}
</script>

<canvas id="demo" width="300" height="200"> <img src="URL_imagenAlterna" /> </canvas>

<script>iniCANVAS('demo')</script>

<button type="button" onclick="drawSQUARES('demo',10,20,50,50,'#F00');"> rectangulo 1 </button>
<button type="button" onclick="drawSQUARES('demo',30,100,70,50,'#00F');"> rectangulo 2 </button>
<button type="button" onclick="drawRECS('demo',50,10,50,50,'#000');"> rectangulo 3 </button>
<button type="button" onclick="drawRECS('demo',160,110,70,50,'#000');"> rectangulo 4 </button>

REFERENCIAS:Mozilla Canvas Tutorial

¿Qué diferencia hay entre una tabla y una tabla? Que una es una tabla y la otra no es una tabla pero ambas son tablas.

Parece un galimatias pero es lo que ofrecen algunas propiedades recientes del CSS que tienen algún uso práctico cuando se trata de alinear cosas verticalmente pero que no estoy muy seguro que aporten nada nuevo aunque ya se sabe que en estas cosas, a veces, lo sencillo se complica porque es más cool.

Acá hay dos modelos ¿hay alguna diferencia ente ellos?

esta es una tabla que es tabla

Columna 1	Columna 2	Columna 3
Fila 1 Celda 1	Fila 1 Celda 2	Fila 1 Celda 3
Fila 2 Celda 1	Fila 2 Celda 2	Fila 2 Celda 3
Fila 3 Celda 1	Fila 3 Celda 2	Fila 3 Celda 3

una tabla que no es tabla

Columna 1Columna 2Columna 3

Fila 1 Celda 1Fila 1 Celda 2Fila 1 Celda 3

Fila 2 Celda 1Fila 2 Celda 2Fila 2 Celda 3

Fila 3 Celda 1Fila 3 Celda 2Fila 3 Celda 3

Pocas. Así, sin propiedades extras, dependiendo del navegador, veremos alguna fila centrada en lugar de alineada a la izquierda o una diferencia en la fuente de los textos, tamaños levemente distintos. La primera, es una tabla tabla es decir, está armada con etiquetas HTML:

<table>
  <caption>esta es una tabla que es tabla</caption>
  <tr>
    <th>Columna 1</th>
    <th>Columna 2</th>
    <th>Columna 3</th>
  </tr>
  <tr>
    <td>Fila 1 Celda 1</td>
    <td>Fila 1 Celda 2</td>
    <td>Fila 1 Celda 3</td>
  </tr>
  .......
</table>

La segunda, es un conjunto de DIVs con ciertas propiedades CSS:

<style>
  #tabla {display: table;}
  #tabla .caption {display: table-caption}
  #tabla .fila {display: table-row;}
  #tabla .celda {display: table-cell;}
  #tabla .filatitulo {display: table-row;}
  #tabla .filatitulo .celda {display: table-cell;}
</style>

<div id="tabla">
  <div class="caption">una tabla que no es tabla</div>
  <div class="filatitulo">
    <span class="celda">Columna 1</span>
    <span class="celda">Columna 2</span>
    <span class="celda">Columna 3</span>
  </div>
  <div class="fila">
    <span class="celda">Fila 1 Celda 1</span>
    <span class="celda">Fila 1 Celda 2</span>
    <span class="celda">Fila 1 Celda 3</span>
  </div>
.......
</div>

La propiedad básica que permite "simular" una tabla es display y puede tener estos valores:

table es el equivalente a la etiqueta TABLE
table-row es el equivalente a la etiqueta TR
table-cell es el equivalente a las etiquetas TD y TH
table-caption es el equivalente a la etiqueta CAPTION
table-header-group es el equivalente a la etiqueta THEAD
table-row-group es el equivalente a la etiqueta TBODY
table-footer-group es el equivalente a la etiqueta TFOOT
table-column-group es el equivalente a la etiqueta COLGROUP
table-column es el equivalente a la etiqueta COL

Si bien pueden usarse en cualquier navegador, incluyendo IE8, al igual que su pariente HTML, las tablas con CSS pueden verse de modo diferente en cada uno de ellos.

Más allá de algún uso concreto, el resultado final será similar, unas y otras tienen ventajas y desventajas y las discusiones sobre cual es mejor o peor, hay que dejárselas a lo interesados en estas cuestiones que casi son religiosas; como usuarios, si algo se ve bien y funciona en al mayoría de los navegadores, es que está bien. Podrá mejorarse pero nada más. Mucho más interesante será cuando los navegadores comiencen a soportar el llamado Grid Layout, algo que por ahora, sólo es parte del futuro incierto.

REFERENCIAS:vanseodesign.com