Los que nos dedicamos al desarrollo web tendemos a usar IDEs pero acabamos tecleando mucho código HTML. ¿No hay alguna forma de hacer más cómodo el escribir HTML y CSS? Sí, hay una forma, y es espectacular: Zen Coding.

Zen Coding es una extensión para los IDEs y editores de código más conocidos:  Aptana/Eclipse, Visual Studio, Netbeans, Coda, TextMate, Komodo, Notepad++, Dreamweaver, Ultraedit, BBEdit... que se basa en la expansión de expresiones para autocompletar código HTML, XML y XSL. Basta con instalar el plugin en nuestro IDE favorito y escribir la estructura que deseamos usando una sintaxis muy similar a los selectores CSS. Así, para escribir toda la estructura de un menú en HTML bastaría con escribir:

div#dvContainer>div#dvHeader>div.dvUser+div#dvMenu>ul#ulMenu>li.liMenuItem*4

Lo que, una vez expandido, da como resultado:

<div id="dvContainer">
    <div id="dvHeader">
        <div class="dvUser"></div>
        <div id="dvMenu">
            <ul id="ulMenu">
                <li class="liMenuItem"></li>
                <li class="liMenuItem"></li>
                <li class="liMenuItem"></li>
                <li class="liMenuItem"></li>
            </ul>
        </div>
    </div>
</div>

Cualquier desarrollador web puede escribir selectores CSS a gran velocidad, así que, ¿por qué no dejar de teclear docenas de etiquetas HTML y que ese trabajo lo haga nuestro IDE?

Las posibilidades de Zen Coding son inmensas, es lo suficientemente flexible como para escribir casi cualquier estructura que necesitemos:

div#dvContainer>div#dvHeader>(div.dvUser+div#dvMenu>ul#ulMenu>li.liMenuItem*5)+div#dvContent>form#fLogin[name=loginform method=post action]>fieldset>(label[for=login]{Usuario}+input[type=tex name=login])+(label[for=pass]{Password}+input[type=tex name=pass])+input[type=submit]

Y por supuesto, no sólo para HTML, ya que podemos generar cualquier estructura XML:

libraries>library#id$*5>address[type]+tlf[type]

Así que, baja el plugin para tu IDE e instálalo, y deja de teclear etiquetas eternamente; deja que tu IDE haga el trabajo sucio.

Cuando estamos haciendo un boceto de web o diseñando una nueva web pero aún no tenemos material del cliente solemos usar imágenes de stock para rellenar los huecos, lo que se llaman placeholder images. Pero hay una forma más cómoda: usar servicios de imágenes automáticas, basta con poner el src de la img apuntando a uno de estos servicios para tener imágenes aleatorias acordes a nuestro diseño. Conozco dos servicios así:

Lorem Pixum

Con un nombre que recuerda al conocido Lorem Ipsum, Lorem Pixum nos devuelve una imagen aleatoria del tamaño indicado, con la ventaja de que podemos pedir además una temática concreta. Por ejemplo:

src="http://lorempixum.com/400/200/sports/1/Texto de la imagen"

La sintaxis de la ULR es:

http://lorempixum.com/ANCHO/ALTO/CATEGORÍA/ID/TEXTO 

siendo todos los parámetros opcionales. En categorías, podemos elegir entre abstract, animals, city, food, nightlife, fashion, people, nature, sports, technics y transport.

Placehold

La otra opción es más simple pero también muy útil. Placehold.it nos permite insertar una imagen plana con el tamaño escrito en ella. Si Lorem Pixum es ideal para diseño terminados a falta de material por parte del cliente, Placehold.it es perfecto para bocetos. Basta con llamar a la URL pasándole el tamaño deseado:

src="http://placehold.it/350x309"

La sintaxis de la URL es:

http://placehold.it/TAMAÑO/COLORFONDO/COLORTEXTO.TIPO&text=TEXTO

Siendo todos opcionales excepto el tamaño. El tamaño puede ser de la forma ANCHOXALTO o sólo ANCHO, en cuyo caso la imagen será un cuadrado. Los colores de fondo y texto van en hexadecimal, por ejemplo, 99FF99. El texto debe ponerse siempre al final de la URL y los espacios cambiarse por el símbolo '+'. El tipo puede ser .jpg, .gif o .png (por defecto es GIF) y puede ponerse detrás de cualquier otro parámetro aunque por claridad es mejor ponerlo al final. Un ejemplo más elaborado sería:

src="http://placehold.it/430x285/99FF99/22CC00.jpg&text=Probando+Placehold.it"

Conclusión

Con estos dos servicios de imágenes de relleno podemos acelerar el trabajo con bocetos y diseños de webs al no tener que andar buscando imágenes, recortando... ya que nos permiten insertar imágenes de cualquier tamaño sin salir de nuestro editor de código favorito.