Zoom sobre texto con CSS3 usando transiciones

Otra nueva entrada sobre las virtudes de CSS3, en este caso vamos a hacer una pequeña introducción a las transiciones creando un código que nos permita que la letra de un párrafo aumente de tamaño cuando el ratón esté sobre ella.

Para ello por un lado tendremos que definir la transición sobre el elemento a modificar y luego la modificación cuando se produzca el evento.

Lo primero sería así:

.aumenta {
    font-size: 1.1em;
    width: 300px;
 
    -moz-transition: font-size 500ms linear 0s; 
    -webkit-transition: font-size 500ms linear 0s;
    -o-transition: font-size 500ms linear 0s;
    transition: font-size 500ms linear 0s;
}

Explicación: tras definir el tamaño del texto para la clase aumenta (1.1 em) definimos la transición. Hay varios métodos para la transición, así que he usado la propiedad shorthand de transition. El primer parámetro (font-size) es para especificar a qué propiedad se aplicará la transición, el segundo el tiempo que tardará, el tercero que se hará siempre a la misma velocidad (linear) y el cuarto que se haga sin delay.

Y ahora que tenemos la transición definida para todos los navegadores (ojo!!! Explorer 9 no soporta todavía transiciones, dice Bill Gates que igual para la 10) toca definir cómo se transformará el texto cuando esté sobrevolado por el ratón:

.aumenta:hover{
    font-size:1.6em;
}

Definimos que en el evento hover la fuente pase a ser más grande. Con esto ya tenemos nuestra transición lista.

Cinco frameworks a tener en cuenta para desarrollo web

Soy evangelista de jQuery, lo sabéis, estoy enamorado, tando de jQuery (sobre todo para frontend), jQueryUI (este mejor para backend) o jQueryMobile. Es fácil de usar, productivo y libre, por lo que merece la pena usarlo. Pero no todo en esta vida es jQuery, por lo que hoy voy a hablar de cinco frameworks que os pueden interesar:

  • backbone.js: Con una documentación muy completa, este proyecto está siendo una de las estrellas de los frameworks javascript de los últimos dos años. Además de un catálogo de eventos y un API bastante entendible, el atractivo de backbone.js es que nos permite implementar el patrón Model-View-Controller en nuestra apliación de javascript. Sí, MVC en el lado del cliente. Piensa todo el código que se aprovechará, y la independencia que ganarás sobre el marcado.
  • Image Mapster:: En este caso nos encontramos con un plugin de jQuery para crear interacción con las imágenes. ¿Quieres un mapa donde haya un enlace sobre cada provincias? ¿quieres unas siluetas en negro que al sobrevolarlas con el ratón muestren la foto de la persona? Echa un ojo a la página de demos y hazte una idea de las posibilidades de este framework.
  • QUnit: Y si arriba hablábamos de implementar el patrón MVC en Javascript ¿por qué no hacer tests unitarios? QUnit es un proyecto de los creadores de jQuery, en principio pensado para testear su propio código, y que han liberado para uso y disfrute de la comunidad.
  • Canvas Query: Usar el elemento Canvas de HTML5 con sintaxis de jQuery. Eso es lo que nos ofrece Canvas Query, una herramienta que facilitará la vida del desarrollador que se lance a trastear con Canvas. Principalmente está pensado para el desarrollo de juegos en HTML5, donde puede tornarse una enorme ayuda a la hora de manipular sprites, jugar con paletas de colores…
  • Junior: Y termino con un framework para la creación de apps móbiles en HTML5. He de decir que ayer me encontré uno que me gustaba más, trasteando por la web, pero que no apunté el nombre… por lo que le he perdido la pista. En todo caso, este Junior puede ser una buena alternativa a jQueryMobile, dándonos una presentación diferente, más atractiva. Implementa varias librerías, como la antes citada backbone.js.

Y una cosa que me pregunto ¿realmente hacen falta tantos frameworks de maquetaciones tipo grid y metro? Los hay a patadas en los últimos tiempos.

Botón de «Compartir en Facebook», «Compartir en Twitter» y «+1» de Google+

¿Deseas integrar un botón de «compartir en Facebook en tu página»? Es una opción muy útil para que tus lectores hagan publicidad de tu sitio en la popular red social. Y como por otra parte eso también es publicidad gratuita para ellos ya se han encargado de que la cosa sea facilita.

Antaño la cosa se hacía con un simple javascript, pero a día de hoy Facebook incluso te facilita la creación del botón con un formulario en su página de desarrolladores

Con Twitter, tres cuartos de lo mismo: un simple formulario y te genera botones para compartir, mencionar, like, etc en la popular red de microbloggin.

En cuanto a Google+, la cosa tampoco es compleja. En su API de Javascript no sólo te dan un formulario de creación sino que también te facilitan una explicación de todo el funcionamiento del botón.

En definitiva, cualquiera de las tres redes sociales más populares te facilita la vida a la hora de crear un botón de compartir que integrar en el código de tu página o blog.

Tres consejos para el diseño responsivo

Había dejado un poco tiradas las traducciones de Web Designer Wall tras haber hecho dos sobre diseño responsivo y media queries. Ahora voy con el tercer artículo (que curiosamente era el primero que leí) sobre cómo hacer una página con diseño responsivo en tres cómodos pasos.

El primer paso es desactivar la propiedad que hace que en algunos navegadores móviles el tamaño de la página se reduzca al de la pantalla (se reduzca a saco, sin adaptar nada más, dando como resultado muchas veces páginas inusables):

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Bueno, se me olvidaba comentar que como en todas las entradas de esta web hay una demo. Lo siguiente para el diseño es usar adecuadamente la estructura de HTML5, que en el ejemplo sería:

<div id="pagewrap">
  <header></header>
  <content></content>
  <sidebar></sidebar>
  <footer></footer>
</div>

En un principio la altura del header sería de 180 px, la anchura del content de 600 px y la del sidebar de 300.

Y finalmente toca la hora de las media queries para que el diseño se adapte.

Por ejemplo, para una dispositivo con una resolución máxima de 980px pasamos a tamaños relativos:

@media screen and (max-width:980px){
 #pagewrap{
    width:94%;
 }
 content{
    width:65%;
 }
 sidebar{
    width:30%;
 }
}

Para una de menos de 700px modificamos la hoja de estilos para que se posicione la sidebar debajo del contenido:

@media screen and (max-width:700px){
 content{
    width:auto;
    float: none;
 }
 sidebar{
    width:auto;
    float:none;
 }
}

Y para una pantalla de un móvil (máximo de 480 px) reducimos el tamaño de los títulos, dejamos que el ancho de la cabecera (header) se ajuste automáticamente y directamente quitamos la sidebar:

@media screen and (max-width:480px){
 header{
    height:auto;
 }
 h1{
    font-size:24px;
 }
 sidebar{
    display:none;
 }
}

Concluye el artículo remitiendo al de diseño con media queries que yo también traduje en este blog y referencié antes.

Espero que esta pequeña guía tutorial que he traducido, junto a las otras dos traducciones sobre media queries, os hayan servido de ayuda en la edición de vuestros proyectos web. Y si no… jQueryMobile siempre es una ayuda.

Datepicker fácil en tu web

¿Necesitas un «datepicker»? Con esto quiero decir necesitas introducir un calendario en un formulario web, a día de hoy hay muchos sencillos métodos para hacerlo. Pero estas son las dos más fáciles:

  • Campo date en HTML5: Un campo del formulario definido como de tipo date ya te arregla en gran parte el problema. Tiene el handicap de que cada navegador te saca el calendario con el formato que le da la gana
    <input type="date"/>
  • Calendario datepicker con jQueryUI: Esta opción incluye más opciones de personalización. Lo primero es descargar la librería jQuery y lo siguiente bajar los componentes de jQueryUI necesarios, incluyendo sus estilos. Luego para implantarlo debes cargar las dos librerías en la cabecera del documento, usar un campo input normal (en el ejemplo se llamará #calendario) y un script como el siguiente:
    <script>
    	$(function() {
    		$( "#calendario" ).datepicker({
    			changeMonth: true,
    			changeYear: true
    		});
    	});
    	</script>
    
    <div class="ejemplo">
    
    <p>Date: <input type="text" id="calendario"></p>
    
    </div>
    

En fin, para el caso del jQueryUI tienes muchos más ejemplos en la propia página con las distintas opciones.

Diseño responsivo con media queries de CSS3

Siguiendo con los artículos de Web Designer wall, continuamos con el tema de las media queries de CSS3, en este caso con otra traducción/explicación de uno de sus artículos.

En este artículo comienza repitiendo lo que ya hablamos en la otra entrada sobre media queries, que el diseño responsivo a día de hoy cobra mayor imortancia por la variedad de resoluciones que pueden usar los usuarios, y que por tanto el aspecto tiene que adaptarse a la ventana. El ejemplo del resultado que se busca conseguir es este.

El conceto, como diría Manquiña (el conceto es el conceto), es el siguiente: La página tiene un contenedor de tamaño fijo (980px) optimizado par una resolución mayor de 1024 px. La media query se utiliza para saber si el tamaño es menor de 980px, en cuyo caso se pasa a un diseño fluido. Y si el caso es que es menor de 650px entonces, directamente se convierte en un diseño con una sola columna.

El marcado HTML es el siguiente, donde se ha creado un contenedor pagewrapper que envuelve cabecera, cuerpo y pie:

<div id="pagewrap">

	<header id="header">

		<hgroup>
			<h1 id="site-logo">Demo</h1>
			<h2 id="site-description">Site Description</h2>
		</hgroup>

		<nav>
			<ul id="main-nav">
				<li><a href="#">Home</a></li>
			</ul>
		</nav>

		<form id="searchform">
			<input type="search">
		</form>

	</header>
	
	<div id="content">

		<article class="post">
			blog post
		</article>

	</div>
	
	<aside id="sidebar">

		<section class="widget">
			 widget
		</section>
						
	</aside>

	<footer id="footer">
		footer
	</footer>
	
</div>

Como hemos comentado miles de veces, el marcado HTML5 no se lleva bien con las veriones de IE anteriores al 9, pero puedes solucionarlo introduciendo esta línea en la cabecera, que enlazan con una librería de javascript que subsanará el problema:

<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Tras esto toca comenzar con el css, y lo primero es resetar todos los elementos de HTML5 a elementos de bloque:

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}

Y tras esto toca la estructura principal del css. El contenedor principal ha sido fijado en 980px, el header tiene una altura fija de 160px, el contente un ancho de 600px flotado a la izquierda y el sidebar, flotado a la derecha, de 280px.:

#pagewrap {
	width: 980px;
	margin: 0 auto;
}

#header {
	height: 160px;
}

#content {
	width: 600px;
	float: left;
}

#sidebar {
	width: 280px;
	float: right;
}

#footer {
	clear: both;
}

Todo esto, así de momento, daría lugar a un diseño estático tal que el de esta demo. Ahora toca la parte divertida: CSS3 Media Queries. Como el HTML5, CSS3 tampoco es que furrule muy bien en IE pre-9, así que de nuevo habrá que tirar de una librería de .js para solventar el problema.

<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

La idea es hacer un css externo con las media queries, introduciéndolo en el documento tal que así

<link href="media-queries.css" rel="stylesheet" type="text/css">

Luego vendrán las siguientes líneas para cuando la ventana donde visualicemos sea menor de 980px se aplicarán las siguientes reglas:

  • El contenedor principal se resetea al 95%
  • El contenedor de contenido pasa al 60%
  • El contenedor lateral pasa al 30%

El usar el % hace los contenidos fluídos:

@media screen and (max-width: 980px) {

	#pagewrap {
		width: 95%;
	}

	#content {
		width: 60%;
		padding: 3% 4%;
	}

	#sidebar {
		width: 30%;
	}
	#sidebar .widget {
		padding: 8% 7%;
		margin-bottom: 10px;
	}

}

Luego tocará hacer el media query para tamaños menores de 650px, con una única columna:

  • header = resetear la altura a auto
  • searchform = lo mandamos a una posición absoluta, a 5px del borde superior
  • main-nav = se reseta su posición a estatic
  • site-logo = lo mismo
  • site-description = lo mismo también
  • content = devolvemos el ancho a auto
  • sidebar = ponemos el ancho al 100% y quitamos la propiedad de flotado
@media screen and (max-width: 650px) {

	#header {
		height: auto;
	}

	#searchform {
		position: absolute;
		top: 5px;
		right: 0;
	}

	#main-nav {
		position: static;
	}

	#site-logo {
		margin: 15px 100px 5px 0;
		position: static;
	}

	#site-description {
		margin: 0 0 15px;
		position: static;
	}

	#content {
		width: auto;
		float: none;
		margin: 20px 0;
	}

	#sidebar {
		width: 100%;
		float: none;
		margin: 0;
	}

}

Finalmente tenemos la versión para menos de 480px, pensada para el iPhone. Implica evitar el zoom que automáticamente hace Safari sobre el texto y toquetear el menú de navegación principal:

@media screen and (max-width: 480px) {

	html {
		-webkit-text-size-adjust: none;
	}

	#main-nav a {
		font-size: 90%;
		padding: 10px 8px;
	}

}

Ahora toca el truquito para imágenes flexibles, con un pequeño hack para que funcione en IE8 (el width: auto\9; de la línea final):

img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

Con los vídeos va igual, menos para Safari, dode max-width no va con vídeos (con fotos sí, extraño). Finalmente, y siguiendo con el iPhone de los huevos, toca metar una meta-tag de escala inicial, ya que el iPhone tiende a modificar las páginas para adaptarlas a la pantalla del dispositivo:

<meta name="viewport" content="width=device-width; initial-scale=1.0">

Y con esto está el tutorial terminado, en el artículo citado podrás encontrar además todo el código y las imágenes de la página de ejemplo. Un placer el haberos traducido esto, y todavía me queda al menos una tercera entrada sobre diseño responsivo. Esta semana creo que la cosa va a andar chunga para conectarme mucho rato, así que igual tarda hasta el viernes o sábado. O igual lo puedo hacer mañana, a saber. En todo caso, un saludo.

CSS3 Media Queries

La verdad es que no hace mucho Web designer Wall me ha salvado el culo en el tema del diseño responsivo (hacer que una web se adapte al tamaño de la ventana). Tras mucho tiempo rompiéndome la cabeza, tirando de jQuery y Javascript con pirulas cosa mala para lograr modificar el tamaño del texto, las posiciones de las imágenes… un coñazo y además ineficiente y poco compatible entre navegadores (menos mal que para móviles jQueryMobile me safaba muchas veces), pues tras mucho tiempo, como te iba diciendo, me encuentro este artículo, que ya tiene un par de años y me quedo como «coño, así es más fácil«. La siguiente explicación es una medio traducción/adaptación/explicación del tema, ya que se que en muchos casos lo que buscáis en este blog es una explicación en castellano de algo que ya hay en inglés. Espero que os sirva de ayuda.

Bueno, empezando desde un principio ¿por qué es importante el diseño responsivo? Porque los tiempos en los que el usuario visualizaba webs en su ordenador, con un rango de pantallas que solía oscilar entre las 14 y las 20 pulgadas en el 90% de los casos, ya pasó, es una reliquia de la década pasada, como MySpace, las PDA’s o que en la liga de fútbol española pueda ganar algo un equipo que no sea Madrid o Barcelona. Ahora te puedes encontrar desde el que usa una tele con una definición de 2560px al que lo ve en su teléfono móvil con una de 320px. Los tamaños fijos son un coñazo, y el usar porcentajes para todo… no siempre funciona, porque el tamaño de la fuente o las imágenes no se adaptan, y a veces hay que usar posicionamientos absolutos y te da la risa. CSS2 permitía diferenciar entre una hoja de estilos para la impresión y otra para la presentación en pantalla. CSS3 nos permite ir más allá, nos permite conocer el tamaño de la ventana/pantalla del dispositivo y aplicar un estilo diferente para cada pantalla. Voy a aprovecharme del artículo antes citado y enlazarte aquí con un ejemplo donde verás cómo funciona esto.

Visto esto, aquí tienes la explicación del cómo se hace, sacada del mismo artículo:

Max Width
En este caso el css se aplicará si trabajamos con una resolución de un máximo de 600 pixeles:

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

Si quieres enlazarlo a una archivo CSS distinto, puedes hacerlo poniendo esta línea en la cabecera del documento:

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

Min Width
Al contrario que en el ejemplo de arriba, en este caso se especificará un tamaño mínimo para utilizar este estilo (en este caso, se aplicará a toda las resoluciones mayores de 900px).

@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }
}

Media Queries múltiples
Tienes también la opción de utilizar dos valores a la vez, máximo y mínimo, para que el estilo se aplique a los comprendidos entre esos valores. En este caso, entre 600 y 900 px.

@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #333;
  }
}

Max device
Finalmente está la opción de adaptarlo a la máxima resolución del dispositivo. Los ejemplos anteriores hacen referencia al tamaño de la ventana/area de visualización, mientras que este se referiría a la resolución máxima que pueda mostrar el teléfono/ordenador/tableta en cuestión.

@media screen and (max-device-width: 480px) {
  .class {
    background: #000;
  }
}

En el artículo original arriba referenciado podéis encontrar también código para adaptarlo específicamente para iPad y iPhone4. No tiene mucha ciencia, podréis ver los ejemplos de código pinchando allí, además hay páginas de ejemplo al final.

Lo interesante está en uno de los puntos finales, donde comentan que, como siempre, va a haber problemas con Explorer. Bueno, no hay que ser 100% injusto con Microsoft, en principio Explorer 9 va bien, pero en las versiones anteriores la cosa ya no va por ningún lado. Dan varias soluciones, pero yo recomiendo la del plugin de jQuery para hacer furrular las media queries, que está en este ejemplo. Hay varios artículos más sobre diseño responsivo en esta página, así que intentaré próximamente meter un par de estas medio traducciones.

Creando un menú de navegación con jQueryMobile

Crear un menú de navegación con jQueryMobile, adaptando la web para una mayor usabiliad en dispositivos móviles, no es complicado.

El primer paso consiste en declarar el atributo data-role del div como navbar. Dentro de este metemos una lista desordenada (ul) y en cada elemento (li) de la misma añadimos un enlace, apuntando a la página a la que tiene que ir. A los enlaces no hay que definirles data-role.

Para cambiar el color de los botones usaremos el atributo data-theme (en el ejemplo data-theme=b para ponerlos de color azul), si no lo hacemos serán del mismo color que la cabecera. Una de las ventajas de jQueryMobile es que definiendo la clase ui-btn-active se un estilo más claro al botón seleccionado, sin que tengamos que currarnos un CSS para ello.

Recuerda también definir el data-icon para que el botón quede más bonito.

<header data-role="header"> 
    <h1>SJV Town Hall</h1>
    <div data-role="navbar">
        <ul>
             <li>
                 <a href="#inicio" class="ui-btn-active" data-icon="home" data-theme="b">Inicio</a>
             </li>

             <li>
                 <a href="#favourites" data-icon="star" data-theme="b">Favoritos</a>
             </li>

             <li>
                 <a href="#contactos data-icon="grid" data-theme="b">Contactos</a>
             </li>
         </ul>
       </div>
</header>

En el ejemplo puedes ver un poco de todo lo que hemos comentado arriba.

Nuevas etiquetas en HTML5

No nuevas que se hayan añadido ahora, me refiero a nuevas en en el sentido que son las que aporta respecto a HTML 4. La lista es la que sigue


<article></article>
<aside></aside>
<audio></audio>
<canvas></canvas>
<command></command>
<datalist></datalist>
<details></details>
<dialog></dialog>

<figure></figure>
<footer></footer>
<header></header>
<hgroup></hgroup>
<mark></mark>
<meter></meter>
<nav></nav>
<output></output>
<progress></progress>
<ruby></ruby>
<rp></rp>
<rt></rt>
<section></section>
<source></source>
<time></time>
<video></video>

Las etiquetas audio y vídeo ya fueron explicadas en este blog, como también lo fue canvas y otras varias en el artículo sobre estructura en HTML5.

URI schemes en HTML 5

Al hablar de URI schemes hablamos de recursos que invocan aplicaciones ya instaladas en un dispositivo móvil y que nos permiten volcar ciertas funcionalidades en ellas, haciendo así más natural y fluída la navegación para el usuario. Aquí vamos a ver el uso de dos de las más básicas: hacer uso del sistema de SMS del teléfono y llamar a un número de teléfono.

  • SMS: Permite enviar rápidamente un mensaje de texto, indicando en el enlace un número e incluso el cuerpo del mensaje. Recuerda que debes poner el código del país antes del ńúmero, por aquello de la internacionalización. El marcado html sería:
    <a href="sms:666777888">Cuerpo del mensaje</a>
    
  • Teléfono: En este caso el enlace nos permitirá hacer una llamada a un número. Como en el anterior acuérdate del código del país antes del número. El marcado sería:
    <a href="tel:666777888">666777888</a>

Esto son ejemplos muy básicos, pero hay gran variedad de opciones: schemes para Facebook, Twitter, Pinterest… Existen múltiples schemes ya creados para iPhone, Android o HTML5 que podéis buscar en la web.

En fin, espero que os sirva de ayuda a los que como yo os estéis iniciando en la programación para dispositivos móviles