Recursos y plantillas para RWD

Con el título no quise mas que generar algo de intriga para los que no están mucho en el diseño web… lo reconozco. Las siglas RWD no son mas que otra cosa que Responsive Web Design, algo que con la llegada del HTML5 comenzó a sonar mas fuerte. Y básicamente es porque hoy en día se puede pensar en hacer un único sitio “adaptable” a todos los medios y formatos: PC, tablet, teléfonos, etc.

En verdad hace tiempo que quería escribir sobre este tema, pero no encontraba la cantidad de recursos que imaginaba necesario para hacer del tema un buen artículo.

Comencemos a ver (y a pensar) algo de diseño adaptable con estos recursos y plantillas recomendadas:

Borradores

Todo diseño comienza (o debería comenzar) en una hoja de papel en lo que usualmente se llama por mis pagos borrador. Esto no es mas que la estructura dibujada a mano de como será el sitio.

Comenzar a pensar en un diseño adaptable para todos los medios no es simple. Es por eso que ya hay en la web una buena cantidad de estructuras (wireframes) compartidos para ayudarnos a ver nuestro sitio para varios soportes.

Responsive Wireframes

Ir a Responsive Wireframes >

Style Tiles

Ir a Style Tiles >

Continuar leyendo…

Plantilla de una sola pagina gratuita en HTML5

Debo admitir que fueron unas vacaciones largas pero les puedo asegurar que necesarias. No solo para refrescar mi mente sino también para poder ver claramente el nuevo material dispuesto por colegas y blogs amigos.

Para retomar el trabajo en el blog he decidido comenzar con este recurso que publicaron en Speecky Boy hace muy poco. Se trata de una plantilla gratuita en HTML5 junto a PSD para que realicen las modificaciones que deseen.

Para los que no recuerdan este tipo de sitios de una sola página, hace unos meses ya habíamos publicado aquí en el blog una recopilación de portfolios de una sola página para inspirarse.

Demo y Descarga | Free Single-Page Scrolling HTML5 Portfolio Template

Uploaders: soluciones para subir archivos en tus proyectos

Hace poco me preguntaba una persona si conocía algún enlace con este tipo de material y la verdad es que en ese momento no contaba con este enlace.

Seguramente alguna vez han necesitado poner la opción de subir archivos a un sitio y la verdad es que, para el diseñador, esto se puede tornar complicado… ya que si no contamos con el código que haga de motor entre el sitio y el servidor, poco podremos hacer.

Para suerte de esta persona y seguramente de muchos diseñadores mas, hoy me encuentro con un buen enlace acerca de este recurso, en donde podremos probar y descargar varios tipos de uploaders múltiples. Continuar leyendo…

Plantilla de página única gratuita

Siempre es bueno tener este tipo de recurso a mano, sobre todo para aquellos que solo se dedican a la imagen y poco saben sobre creación de sitios web. En este caso, les traigo una plantilla de página única con una simple navegación pero que con un poco de jQuery la hace ideal para una buena presentación.

Solo bastará con agregar nuestro logo, modificar si deseamos los colores desde el archivo css y añadir nuestra información. La plantilla tiene un código amigable para un buen posicionamiento y sirve tanto para sitios pequeños como para mostrar nuestros trabajos (para esto simplemente copiar y pegar el bloque de código que hace a los item del menú y al bloque de información.

Siguiendo el enlace podrán encontrar la demo y la descarga.

Enlace | Free XHTML & CSS3 One-Page Template

¿Cómo incluir videos con HTML5?

La inclusión de videos en los sitios Web es uno de los procesos en constante evolución dentro de la maquinaria de los navegadores, desde aquellos videos cargados en un reproductor arcaico mediante un plug-in, hasta la actualidad donde la mayoría recurre a archivos .flv cargados en streaming.

Windows Media Player, Quicktime y Real Player, fueron de las primeras propuestas serias, claras y relativamente sencillas para incluir videos en los portales de Internet. Estas opciones requerían de la instalación de un plug-in que permitía al navegador cargar un reproductor en el interior de la página web y empezar a reproducir los videos que habías cargado con anticipación en tu servidor. Continuar leyendo…

Libro gratuito de diseño: Photoshop + Dreamweaver

Como todos saben, hoy fue la presentación de la línea de productos de Adobe CS4. La verdad es que ya habrán leído la noticia en mas de un sitio, por lo que saltearé los comentarios y seguiré con los recursos. Si aún no saben absolutamente nada, recomiendo la lectura de la noticia en Photomagazine y un poco mas ilustrada (incluyendo el video del lanzamiento) en Cristalab.

Ahora si, vamos a lo nuestro. Vagando por las noticias relacionadas con Photoshop en Google me encontré con un ebook gratuito sobre diseño de sitios web utilizando Photoshop y Dreamweaver.

Para serles sincero no lo leí por completo, pero el comienzo tiene buena pinta… y recuerdo que no hace mucho me habían solicitado libros de diseño gratuitos. Ya me dirán Uds. si les ha sido de utilidad.

Descarga | Diseño Photoshop + Dreamweaver (2.28 Mb)
Vista online | e-book
Vía | Soluciones SEO (autor del libro)

Extensiones para Dreamweaver

Extensiones para Dreamweaver

Visitando el blog de Unijimpe me encuentro con algunas extensiones para Dreamweaver que creo son realmente útiles para el trabajo diario.

  • Dreamweaver Tools for Google tiene 3 herramientas básicas. La primera es Google CheckOut, la cual te permite integrar una tienda de ventas, previo registro en el sistema mencionado. Luego nos encontramos con Google Maps, con el cual podemos insertar un mapa mostrando una dirección y personalizar el mismo (te pedirá el “key” de Google Maps).
    Por último está Google Search, con quien podremos ubicar un buscador de Google personalizado en nuestro sitio.
  • Sitemap Everyday es otra extensión que nos ayudará a crear un sitemap para que Google indexe mejor nuestro sitio. Como nos cuenta en su post: “El archivo generado cumple con las especificaciones de Sitemaps, estas especificaciones están listadas en www.sitemaps.org. Si deseas una breve explicación de su funcionamiento, puedes visitar el post de Unijimpe.
  • TAGStention es una extensión que relaciona a Dreamweaver con WordPress, la cual nos hace mas fácil la tarea de creación de plantillas.

Vía | Unijimpe
Enlace 1 | Dreamweaver Tools for Google
Enlace 2 | Sitemap Everyday
Enlace 3 | TAGStention