image/svg+xml
image/svg+xml

Responsive Image Maps

Los imágenes en html se pueden «Mapear», es decir… asignarle a una misma imagen distintas áreas clickables.
Dreamweaver permite hacerlo de forma muy sencilla mediante un editor visual, pero cuando la imagen no tiene un tamaño fijo, la cosa se complica.
Para solucionarlo existe:

http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

Menu responsivo

10 Soluciones responsivas de navegación:

http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/

Formulario de contacto (para IDEP)

Implementar un formulario utilizando un shortcode creado con pluguin Fast Secure Contact Form

Ejemplo de shortcode: [si-contact-form form=’1′]

Javascript, que es y que permite hacer.

Javascript, que es y que permite hacer.

Usos mas comunes:

  • Desarrollo de utilidades en Dreamweaver (como el acordeón)
  • Generar consultas a bases de datos que no necesiten recargar la pagina (ajax).
  • Desarrollar aplicaciones web complejas que funcionen dentro del navegador (gmail, google doc’s etc).
  • Integración con canvas para la generación de animación, generada a través de programas con interfase gráfica (como las que generan flash y processing).
  • Papel determinante en las paginas web de diseño responsivo.
  • Librerías open source de recursos destinados a aumentar la funcionalidad de la web como Jquery y otras, basadas en esa como las galería de imágenes, etc.
  • Creación de widgets y apps para distintos dispositivos.
[...]

Fontface (para IDEP)

Utilizar grupos de tipografía proporcionados por Google.
http://www.google.com/webfonts

Google permite seleccionar grupos de tipografías, y proporciona una url para «vincular» las mismas a nuestras paginas html. En este ejemplo he seleccionado 3 tipografías diferentes (‘Share Tech’,’Offside’ y ‘Chela One’).
La url que Google me proporciona para incluir en el <head> de mis páginas html es:

<link href=’http://fonts.googleapis.com/css?family=Share+Tech|Offside|Chela+One’ rel=’stylesheet’ type=’text/css’>

[...]

HTML5Rubik: cómo programar un cubo de Rubik en CSS3/JavaScript

Básicamente es una explicación paso-a-paso de cómo construir un cubo de Rubik interactivo empleando únicamente CSS3 y JavaScript. Funciona en cualquier «navegador web moderno» y también en iPhone/iPad y dispositivos Android.
HTML5Rubik.

Vía. microsiervos.com

El arte del diseño web

Este video narra la historia del diseño en la web y las técnicas que se usaban en aquellos sitios pioneros hasta la actualidad (<table> incluidos): desde las cavernas del HTML, la llegada del CSS, la era del Flash, el renacimiento de JavaScript, la Internet móvil… hasta llegar al HTML5 actual.

Vía: microsiervos.com

Cómo empezar a utilizar Adobe Edge Web Fonts en tres pasos

Adobe Edge Web Fonts es un amplio catálogo con cientos de tipografías listas para utilizar, de forma gratuita e ilimitada, en cualquier página web (de forma similar a como funciona Adobe Typekit) facilitando enormemente el uso de tipografías en la Web más-allá-de-las-letras-de-siempre, que al fin y al cabo el diseño Web es 95% tipografía.

En TNW explican cómo empezar a utilizar Adobe Edge Web Fonts en tres pasos sencillos que sólo requieren algo de conocimiento de los lenguajes HTML y CSS.

[...]