viernes, 21 de septiembre de 2012

Cristalab

Cristalab

Cristalab

Cómo agregar una imagen de header a tu perfil de Twitter

Posted: 21 Sep 2012 11:24 AM PDT

Al igual que Facebook y Google+, Twitter anunció esta semana la capacidad de agregar una imagen de header a tu perfil. Es una copia, sin duda, pero igual se puede ver más lindo tu perfil con un header bien elegido.

Sin embargo el cambio no es automático y tienes que editar tu perfil a mano y tener varias cosas en mente antes de cambiar el header, aquí te decimos cómo. Iniciando con el perfil aburrido de @cristalab.


Edita tu perfil en Twitter


El screenshot de arriba es la típica, aburrida imagen de perfil de una cuenta en Twitter. Vas a tu cuenta y buscas el "Edit profile" o "Editar perfil". En él, van a la opción "Design":


Cambia la cabecera de tu cuenta en Twitter


Dentro del editar perfil, abajo, tras hacer scroll, encontrarás esta opción de cambiar la cabecera o header:


Al darle click, eliges una imagen en tu disco. El editor de Twitter te permitirá redimensionarla y ajustarla, pero lo recomendado es que la prepares. La dimensión recomendada es 1200 x 600 pixeles.
[nota:a66d577cd7]Nota: Intenta que la mitad inferior de la imagen sea oscura, porque el texto encima es blanco y no se leerá fácil si es un area clara. FAIL de los diseñadores de Twitter. Quizás lo arreglen a futuro. [/nota:a66d577cd7]

Tras elegir tu header, ya estás, un perfil lindo :)

Ejemplos de perfil








¿Lo lograron con sus cuentas?

Enviar comentario

Efecto cámara en mano en After Effects

Posted: 21 Sep 2012 06:04 AM PDT

Usaremos las poderosas cualidades de las expresiones dentro de After Effects, para obtener un movimiento mas natural de la cámara, utilizando para ello la asignación de código específico que interaccionará sobre la animación inicial, con el ajuste de varios atributos de posición y rotación, que nos permitirán simular el efecto cámara en mano, al que estamos tan acostumbrados.

Compondremos una escena simple, sobre la que añadiremos formas rectangulares con estilo de trazos en un entorno 3D, para que el efecto funcione de la forma más clara.

Continuaremos añadiendo la expresión Wiggle, con los ajustes más indicados, sobre diferentes atributos de la cámara, para completar el trabajo y visualizar cómo se desplaza entre los elementos, sin la necesidad de generar un sinfín de keyframes.



Saludos.

Enviar comentario

Personalizar la barra de administración de wordpress

Posted: 28 Aug 2012 03:43 AM PDT

Mientras más fácil nos ponemos las cosas a nosotros mismos en la administración de nuestro blog, más llevadera será esta tarea. WordPress desde la versión 3.1 agregó la barra de administración para ayudarnos en la administración del blog, y muchos la eliminan por que les estorba. En este post agregaremos botones que funcionen como acceso directo a las tareas más comunes que realizamos sin necesidad de ir al panel de control del blog, y eliminaremos los que no nos interesen, además agregaremos un enlace para eliminar entradas y páginas desde la barra y moveremos la barra de administración de lugar.

En wordpress no existe un entorno gráfico para agregar botones personalizados a esta barra, pero los agregaremos añadiendo funciones y utilizando los ganchos que nos proporciona el API de wordpress. En este tutorial explicaré cómo agregar vínculos individuales y vínculos anidados en la barra de administración de wordpress.



Agregar un enlace simple a la barra de administración



Para agregar un nuevo enlace personalizado en la barra de administración de WordPress, agregamos la siguiente función en el archivo function.php de tu theme.

Aprovecharé y utilizarée mi blog como ejemplo, agregarée algunos botones de zonas que visito con mucha frecuencia y un enlace a la zona de descargas y otro al panel de estadísticas, y los organizaré de la siguiente forma.

  • Mis Herramientas
    - Descargar
    - Estadísticas
    - Comentarios

Código :

function add_custom_link_admin_bar() {     global $wp_admin_bar;     if ( !is_super_admin() || !is_admin_bar_showing() )        return;     $wp_admin_bar->add_menu( array(     'id' => 'CustomLink',//ID del link     'title' => __( 'Mis herramientas'),//Nombre a mostrar en el enlace     'href' => __('http://www.web-desings.com/'),//Enlace del link     ) );  }  add_action('admin_bar_menu', 'add_sumtips_admin_bar_link',25);

Es una función bastante simple, sólo debes editar los valores de ID, title, href, por el valor que desees.

Agregar sub-menú en la barra de administración de wordpress


Para agregar otros enlaces como sub menú al link Mis Herramientas, sólo debemos agregar un valor más al array, este es el valor parent=>id_link_padre, de esta forma los enlaces que contengan parent=>CustomLink serán agregados como hijos del link Mis Herramientas, analicen el siguiente código y lean los comentarios y seguro lo entienden perfectamente.



Código :

// Add sub menu link "Descargas"     $wp_admin_bar->add_menu( array(        'parent' => 'CustomLink',//Nombre del link padre        'id'     => 'downloadLink',//ID del link        'title' => __( 'Descargas'),//Nombre a mostrar en el enlace        'href' => __('vinculo aqui'),//Vínculo del link     ));       // Add sub menu link "Estadísticas"     $wp_admin_bar->add_menu( array(        'parent' => 'CustomLink',//Nombre del link padre        'id'     => 'Estat',        'title' => __( 'Estadísticas'),        'href' => __('vinculo aqui'),     ));       // Add sub menu link "Comentarios"     $wp_admin_bar->add_menu( array(        'parent' => 'CustomLink',//Nombre del link padre        'id'     => 'Comment',        'title' => __( 'Comentarios'),        'href' => __('vinculo aqui'),     ));

Eliminar enlaces de la barra de administración de wordpress


Ademas de agregar podemos eliminar cualquiera de los enlaces que por defecto de la barra de administración, para este ejemplo eliminare la alerta de actualizaciones, esta es una función interesante cuando se le entrega una web creada con wordpress a un cliente.

Código :

function remove_admin_bar_links() {      global $wp_admin_bar;      // Elimina el logo de WordPress (desaparece también todo el submenú)      $wp_admin_bar->remove_menu('wp-logo');      // Elimina el icono de notificación de actualizaciones      $wp_admin_bar->remove_menu('updates');  }  add_action( 'wp_before_admin_bar_render', 'remove_admin_bar_links' );

Además de wp-logo y updates, wordpress nos ofrece la posibilidad de eliminar los demás enlaces solamente agregando una nueva linea de código pasando los siguientes parámetros.

  • search:para eliminar la caja de búsqueda.
  • comments:Para eliminar el aviso de comentarios
  • updates:Eliminar el aviso de actualizaciones
  • edit:Elimina editar entrada y páginas
  • get-shortlink:Proporciona un enlace corto a esa página/post
  • my-sites:Elimina el menu my sitios, si utilizas la función multisitios de wordpress
  • site-name:Elimina el nombre de la web
  • wp-logo:Elimina el logo(y el sub Menú)
  • my-account:Elimina los enlaces a su cuenta. El ID depende de si usted tiene Avatar habilitado o no.
  • view-site:Elimina el sub menú que aparece al pasar el cursor sobre el nombre de la web
  • about:Elimina el enlace "Sobre WordPress
  • wporg:Elimina el enlace a wordpress.org
  • documentation:Elimina el enlace a la documentación oficial (Codex)
  • support-forums:Elimina el enlace a los foros de ayuda
  • feedback:Elimina el enlace "Sugerencias"

De esta forma podemos eliminar algunos de los botones que trae wordpress por defecto en la barra de administración.

Mover de posición la barra de administración de wordpress


Para realizar esta tarea solo debemos agregar la siguiente función en el archivo function.php y editar el código css que contiene dependiendo el lugar donde necesitemos mover la barra de administración.

Código :

function custom_move_adminbar() {      echo '<style type="text/css">     body {        margin-top: -28px;        padding-bottom: 28px;     }     body.admin-bar #wphead {        padding-top: 0;     }     body.admin-bar #footer {        padding-bottom: 28px;     }     #wpadminbar {        top: auto !important;        bottom: 0;     }     #wpadminbar .quicklinks .menupop ul {        bottom: 28px;     }     </style>';  }  add_action( 'admin_head', 'custom_move_adminbar' );  add_action( 'wp_head', 'custom_move_adminbar' );


Si mueves la barra en la parte inferior de tu pantalla, debes tener en cuenta que los menús desplegables de deslizan hacia abajo y puede que no se visualicen, con lo cual tendrás que tocar el css de los sub-menú, mi recomendación es dejarla la cual está, para evitar perdidas de tiempo.

Cambiar el aspecto visual de la barra de administración de wordpress


Código :

// Editamos el aspecto visual de la barra  function custom_style_adminbar() {     $adminlogo = '/images/adminlogo.png'; // Especificar ruta (tamaño = 20 x 20 px)       echo"<style>           #wpadminbar { background: #000 !important; }           #wp-admin-bar-wp-logo &gt; .ab-item .ab-icon {           background: ('URL de la imagen') left top !important;}       </style>";     }  add_action('admin_head', 'custom_style_adminbar');
Para personalizar la barra de administración solo debemos editar el código css de la barra de administración y colocarlo dentro de la función anterior, si quiere cambiar el logo se coloca en esta función la ruta de la imagen a colocar.

Desactivar la barra de administración en wordpress 3.3


En wordpress 3.3 los desarrolladores recomiendan y pretenden evitar la desactivación de la barra de administración, o al menos ponerlo un poco más difícil al usuario, ellos dicen que hacen esto por que esta barra de administración tiene información de mucha utilidad para el usuario y además se combina con funciones de header y por ello no recomiendan eliminarla totalmente.

En wp.tutsplus.com explican cómo eliminar la barra de administración de wordpress 3.3, pueden mirar este tutorial si les interesa eliminar la barra o utilizar alguno de estos pluguins.

Conclusión


A muchos puede parecer estúpido el editar o agregar funcionalidades a esta barra de administración, pero puedo decirles que esto puede sacarte de algún apuro con algún cliente, a los clientes mientras mas fácil le pones las cosas mejor para tí y para él. Esta barra puede servir para agregarles accesos directo a zonas que deben de visitar frecuentemente.

Sólo hay que saber sacarle provecho a estas herramientas y seguro que pueden servirte para algo, espero sea de ayuda y alguna vez puedan utilizarlo.

Enviar comentario

Página en Construcción estilo minimalista en HTML5 y CSS3

Posted: 27 Aug 2012 03:12 AM PDT

En este tutorial vamos a crear una página de "Próximamente en línea", o "En construcción" (conocidas en inglés como "Coming Soon"), usando HTML5 y CSS3 con un estilo minimalista y colores ligeros. Para esta página vamos a usar una plantilla diseñada previamente en Photoshop.



Como puedes observar, la página contiene algunas sombras y degradados. Estos efectos fueron creados usando únicamente CSS3. Por si no lo sabías (muchos en Cristalab seguramente ya lo saben por otros tutoriales), CSS3 provee de varias propiedades nuevas que nos permiten crear efectos llamativos y agradables sin la necesidad de usar imágenes.

En este tutorial vamos a explorar nuevas etiquetas de HTML5 (y de cómo hacerlas funcionar en Internet Explorer 7 y 8, aunque a estas alturas estos navegadores cada vez pierden más participación del mercado) y de nuevos atributos para el formulario, como el "Placeholder" y el "required".

El atributo placeholder nos permite introducir un texto por defecto en las cajas de comentarios o cajas de texto de un formulario cuando éstas se encuentran vacías (es así como, una vez se introduzca texto en ellas, este texto por defecto desaparecerá). Así mismo, el atributo required que se introduce en los campos que se deseen de un formulario, impide que éste sea enviado si la etiqueta no cumple con su función (por ejemplo, un campo de tipo mail no permite enviar a menos que tenga el esquema ejemplo@pagina.com). Sin embargo, en este ejemplo vamos a tener atributos Jquery en caso que estemos en un navegador viejo que no soporte estos atributos, no se afecte el funcionamiento.

Estructura de archivos


Vamos a crear una nueva carpeta y la vamos a llamar "coming-soon-page" (o el nombre que tú desees). Dentro de esta carpeta, vamos a tener los siguientes archivos y subdirectorios:
  • index.html: nuestro archivo principal.
  • css: la carpeta donde estarán los archivos de estilos cascada.
  • style.css: nuestro archivo de estilos principal.
  • reset.css: El archivo que se encarga de borrar todas las características por defecto de las etiquetas.
  • ie.css: el archivo de estilos para internet explorer 7 y 8.
  • js: carpeta donde estarán contenidos todos los archivos de javascript.
  • jquery.countdown.js: es el plugin de jQuery con el que haremos la cuenta regresiva.
  • script.js: este será el archivo javascript que tendrá el inicializador de la cuenta regresiva, algunas funciones de animación y la solución para "required" y "placeholder" en los navegadores antiguos.
  • modernizr.custom.js: librería en javascript que nos permitirá detectar si el explorador soporta "required" y "placeholder".
  • images: carpeta donde estarán las imágenes.
  • fonts: en esta carpeta tendremos la fuente que se usará en el contador.


Estructura de la página índex.html


Este será el código de la estructura principal:

Código :

  <!DOCTYPE html>  <html>  <head>      <meta charset="utf-8" />      <title>Página minimalista de 'En construcción'</title>      <!-- CSS -->      <link rel="stylesheet" href="css/reset.css">      <link rel="stylesheet" href="fonts/stylesheet.css">      <link rel="stylesheet" href="css/style.css">      <!--[if lt IE 9]>          <link rel="stylesheet" href="css/ie.css">      <![endif]-->      <!-- IE fix for HTML5 tags -->      <!--[if lt IE 9]>          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>      <![endif]-->      <!-- jQuery and Modernizr-->      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>      <script src="js/modernizr.custom.js"></script>      <!-- Countdown timer and other animations -->      <script src="js/jquery.countdown.js"></script>      <script src="js/script.js"></script>  </head>  <body>      <header>          <!-- El título y la descripción de nuestro sitio -->      </header>      <div id="main">          <div id="links">              <!-- Los links principal, de soporte, descargas, etc. -->          </div>          <div id="counter">              <!-- La cuenta regresiva (el contador) -->          </div>          <form action="" method="get">              <!-- El formulario de suscripción -->          </form>          <div class="social-media-arrow">              <!-- La flechita de social media al lado derecho del monitor -->          </div>          <footer>              <!-- El pie de página que tendrá los íconos de las redes sociales -->          </footer>      </div>  </body>  </html>


Como podemos observar, el código HTML es muy sencillo y se explica él mismo. En la etiqueta "head" importamos todos los archivos CSS y Javascript que necesitamos. También están los comentarios condicionales (en caso de estar en exploradores de la Segunda Guerra Mundial como Explorer 7 y 8 ) y una nota adicional: el archivo html5.js contenido en los servidores de Google Code que nos permitirá que cualquier explorador interprete las etiquetas footer y header.

El cuerpo de nuestra página también es sencillo de comprender. Está la etiqueta "header" donde estará la línea principal o título de nuestra página y su descripción. Y la etiqueta div principal (main) donde estarán la cuenta regresiva, los links de las redes sociales, el formulario de suscripción y el pié de página.

Respecto a la configuración del cuerpo es simple: tendrá su etiqueta de cabecera donde estará la descripción, el contador y el formulario de suscripción.

Luego sigue el estilo que vamos a usar para la fuente y la imagen de fondo de la página (es decir, la configuración de los estilos principales). El código es el siguiente:

[css:1:9a24ab3813]body {
background: url(../images/body-pattern.jpg) top left repeat;
font-family: Arial, Helvetica, sans-serif;
padding-bottom: 40px;
}[/css:1:9a24ab3813]

El Encabezado, Cabecera o Header


Como ya lo habíamos mencionado, el header de nuestra página tendrá el título y la descripción de la página.

Código :

<header>      <h1>Estamos trabajando para tener listo el sitio web pronto.</h1>      <p>Nuestro desarrollador inmaculado John W. Martinez, está haciendo su mayor esfuerzo para finalizar el sitio web antes que este conteo termine. Favor, tenedle paciencia. (Es mentira lo de inmaculado, lo tenemos amarrado a una mazmorra y lo azotamos para que trabaje 20 horas al día).</p>  </header>


Y este es el respectivo código CSS:

[css:1:9a24ab3813]/* ---- Header ---- */

header {
width: 720px;
margin: 80px auto 0 auto;
}
header h1 {
font-size: 30px;
font-weight: bold;
color: #272727;
text-shadow: 0 1px 0 #fff;
}
header p {
margin: 20px 0 0 3px;
font-size: 14px;
color: #272727;
}[/css:1:9a24ab3813]

[nota:9a24ab3813](interrupción momentánea: recuerde que tanto en la parte inferior como en la superior hay un link de "Ver demo" y allí podrá descargar los archivos en Zip. Este tutorial no es para que lo haga paso a paso sino para que lo aprenda paso a paso. Continuemos… )[/nota:9a24ab3813]

El área principal


El área principal de la página contiene el div "main" que lo pudimos observar en el código anterior. Esta área contendrá los links, la cuenta regresiva (contador), el formulario de suscripción, el pie de página y la flecha de "social media". A continuación el estilo CSS de esta área:

[css:1:9a24ab3813]/* ---- Main Area ---- */

#main {
position: relative;
width: 700px;
margin: 50px auto 0 auto;
padding: 20px 0 0 25px;
background: url(../images/main-content-pattern.jpg) top left repeat;
}[/css:1:9a24ab3813]

Los enlaces (links)



A continuación el código de nuestros links:

Código :

<div id="links">      <div class="home"><a href="">http://1stwebdesigner.com/</a></div>      <div class="support"><a href="">http://support.1wd.com/</a></div>      <div class="browser"><a href="">Google Chrome OS. 10.X.23</a></div>      <div class="books"><a href="">http://1wd.co/e-books/</a></div>      <div class="download"><a href="">http://1wd.com/download/</a></div>      <div class="ups"><a href="">UPS Signed Worldwide</a></div>  </div>


Nada del otro mundo, simplemente un listado sencillo para cada uno de los links.

[nota:9a24ab3813]Otra forma de hacerlo sería con listas (<ul><li>Link!</li></ul>), pero eso será caso de otro tutorial.[/nota:9a24ab3813]

Y el código CSS de estos links es:

[css:1:9a24ab3813]/* ---- Links ---- */
#links {
width: 700px;
font-size: 12px;
font-weight: bold;
color: #aaa;
line-height: 18px;
overflow: hidden;
}
#links a {
position: relative;
color: #aaa;
text-decoration: none;
}
#links a:hover {
color: #aaa;
text-decoration: none;
}
.home, .support, .browser, .books, .download, .ups {
float: left;
width: 180px;
margin-left: 42px;
padding-left: 25px;
}
.home { background: url(../images/home.png) left center no-repeat; margin-left: 0; }
.support { background: url(../images/support.png) left center no-repeat; }
.browser { background: url(../images/browser.png) left center no-repeat; clear: right; }
.books, .download, .ups { margin-top: 10px; }
.books { background: url(../images/books.png) left center no-repeat; margin-left: 0; }
.download { background: url(../images/download.png) left center no-repeat; }
.ups { background: url(../images/ups.png) left center no-repeat; clear: right; }[/css:1:9a24ab3813]

El área de enlaces tiene un ancho de 700px y cada enlace tiene su propio ícono. Luego aplicamos un pequeño espacio con márgenes y relleno (margins y paddings) y por último le agregamos una pequeña animación usando jQuery (que recuerden, se pronuncia "yeicueri").

La cuenta regresiva (El contador)


Para esta función vamos a usar un plugin en jQuery que se llama "jQuery countdown plugin" (o mejor no lo descargue, va incluido en el paquete de este tutorial). El contador estará introduciéndose en la etiqueta de id "counter".

Código :

<div id="counter"></div>


La etiqueta div con "id" counter estará vacía porque el código en html será generado por el plugin de jQuery. A continuación presentamos el código que el plugin genera:

Código :

<div id="counter" class="countdownHolder">      <div class="countDays">          <span class="position">              <span class="digit static">0</span>          </span>          <span class="position"              <span class="digit static">0</span>          </span>          <span class="boxName">              <span class="Days">DAYS</span>          </span>      </div>      <span class="points">:</span>      <span class="countDiv countDiv0"></span>      <div class="countHours">          <span class="position">              <span class="digit static">0</span>          </span>          <span class="position">              <span class="digit static">0</span>          </span>          <span class="boxName">              <span class="Hours">HRS</span>          </span>      </div>      <span class="points">:</span>      <span class="countDiv countDiv1"></span>      <div class="countMinutes">          <span class="position">              <span class="digit static">0</span>          </span>          <span class="position">              <span class="digit static">0</span>          </span>          <span class="boxName">              <span class="Minutes">MNTS</span>          </span>      </div>      <span class="points">:</span>      <span class="countDiv countDiv2"></span>      <div class="countSeconds">          <span class="position">              <span class="digit static">0</span>          </span>          <span class="position">              <span class="digit static">0</span>          </span>          <span class="boxName">              <span class="Seconds">SECS</span>          </span>      </div>  </div>


Dependiendo del tiempo que nosotros instalemos cuando implementemos el contador, el mostrará los números correspondientes a las cuatro casillas (días, horas, minutos y segundos).

[nota:9a24ab3813]No explicaré la función del plugin en este tutorial. Sin embargo, Martín Angelov creador del susodicho, lo explica a la perfección. Puedes leer dicha explicación aquí: http://tutorialzine.com/2011/12/countdown-jquery/ (puede que en un futuro me dedique a traducirlo para ustedes, no sé, prendan las velitas a sus santos a ver si se hace el milagrito).[/nota:9a24ab3813]

Ahora, a continuación colocamos el código CSS de nuestro contador:

[css:1:9a24ab3813]/* ---- Counter ---- */
#counter {
width: 700px;
height: 145px;
margin: 55px auto 0 auto;
font-family: 'LeagueGothicRegular', Arial, Helvetica, sans-serif;
font-size: 92px;
color: #272727;
text-shadow: 0 1px 0 #fff;
overflow: hidden;
}
.countDays, .countHours, .countMinutes, .countSeconds {
float: left;
width: 102px;
height: 138px;
padding-left: 36px;
background: #e7e7e7;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.1)), to(rgba(0,0,0,.07)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07));
background-image: -moz-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07));
background-image: -ms-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07));
background-image: -o-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07));
background-image: linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07));
border: 1px solid #ccc;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow:
0 2px 3px 0 rgba(255,255,255,.2) inset,
0 2px 2px 0 rgba(0,0,0,.1);
-webkit-box-shadow:
0 2px 3px 0 rgba(255,255,255,.2) inset,
0 2px 2px 0 rgba(0,0,0,.1);
box-shadow:
0 2px 3px 0 rgba(255,255,255,.2) inset,
0 2px 2px 0 rgba(0,0,0,.1);
}
.points {
float: left;
width: 40px;
margin: 0;
font-family: Georgia, serif;
font-size: 44px;
font-weight: bold;
text-align: center;
line-height: 138px;
text-shadow: none;
}
.position {
position: relative;
float: left;
width: 35px;
height: 92px;
margin: 8px 0 0 0;
}
.digit {
position: absolute;
top: 0;
left: 0;
}
.boxName {
float: left;
width: 80px;
margin: -5px 0 0 7px;
font-size: 36px;
color: #a6a6a6;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.Hours { margin-left: 5px; }
.Seconds { margin-left: 2px; }
[/css:1:9a24ab3813]
Para el contador hemos usado la fuente "League Gothic" que puedes encontrar en los archivos fuentes que acompañan este tutorial. Si deseas usar esta fuente en tus diseños, la puedes descargar de aquí.

Como podemos observar en el código anterior, los degradados y las sombras las hemos realizado únicamente con las propiedades de CSS3. Estas nuevas propiedades de CSS3 permiten crear diseños complejos sin la necesidad de imágenes recortadas o sectorizadas, permitiendo que la página tome mucho menos tiempo de carga.

Las propiedades de CSS3 usadas fueron "border-radius", "box-shadow", "linear gradient", y "text-shadow". Son fácilmente entendibles en el momento que se lee su nombre.

Luego usamos el atributo "rgba" para asignar el color, y este ajuste es bastante útil porque se puede manejar no sólo el color por canales, sino también la transparencia del contenedor. Ahora, vamos a iniciar la cuenta regresiva incluyendo las siguientes líneas en el archivo "script.js" (que está dentro de la carpeta js).

Código :

$(document).ready(function(){         /* ---- Countdown timer ---- */         $('#counter').countdown({          timestamp : (new Date()).getTime() + 51*24*60*60*1000      });  });


El contador mostrará el tiempo que queda para dentro de 51 días desde ahora.

Formulario de inscripción (o suscripción)


Para este formulario hemos usado dos nuevos atributos de HTML5: "placeholder" y "required". Este es el código:

Código :

<form action="" method="get">      <input type="text" class="email" placeholder="Escriba su e-mail en este campo" required />      <input type="submit" class="submit" value="Mantenerme al tanto" />  </form>


Tenemos un campo de texto que sirve para recoger el correo electrónico y un botón para enviar. El campo de correo electrónico deberá estar diligenciado antes de enviar el formulario, de lo contrario la página no lo dejará proseguir. A continuación veremos el código en CSS:

[css:1:9a24ab3813]/* ---- Subscription Form ---- */

form {
position: relative;
margin: 40px auto 0 auto;
}

.email {
width: 498px;
height: 35px;
padding: 0 15px;
background: #f1f1f1;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.02)), to(rgba(0,0,0,.02)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02));
background-image: -moz-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02));
background-image: -ms-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02));
background-image: -o-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02));
background-image: linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02));
border: 1px solid #cbcbcb;
-moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
-webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #b3b2b2;
font-style: italic;
}

.email:focus {
outline: 0;
border: 1px solid #c0c0c0;
-moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,.2) inset;
-webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.2) inset;
box-shadow: 0 2px 3px 0 rgba(0,0,0,.2) inset;
}

.submit {
width: 140px;
height: 37px;
margin: 0 0 0 5px;
padding: 0;
background: #888;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.1)), to(rgba(0,0,0,.1)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1));
background-image: -moz-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1));
background-image: -ms-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1));
background-image: -o-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1));
background-image: linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1));
border: 1px solid #636363;
-moz-box-shadow:
0 1px 2px 0 rgba(253,252,252,.35) inset,
0 -1px 2px 0 rgba(0,0,0,.15) inset;
-webkit-box-shadow:
0 1px 2px 0 rgba(253,252,252,.35) inset,
0 -1px 2px 0 rgba(0,0,0,.15) inset;
box-shadow:
0 1px 2px 0 rgba(253,252,252,.35) inset,
0 -1px 2px 0 rgba(0,0,0,.15) inset;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.35);
line-height: 13px;
cursor: pointer;
}
.submit:hover {
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,.1)), to(rgba(0,0,0,.1)));
background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1));
background-image: -moz-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1));
background-image: -ms-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1));
background-image: -o-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1));
background-image: linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1));
-moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset;
-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset;
box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset;
}
.submit:active {
-moz-box-shadow:
0 1px 2px 0 rgba(0,0,0,.15) inset,
0 3px 13px 3px rgba(0,0,0,.3) inset;
-webkit-box-shadow:
0 1px 2px 0 rgba(0,0,0,.15) inset,
0 3px 13px 3px rgba(0,0,0,.3) inset;
box-shadow:
0 1px 2px 0 rgba(0,0,0,.15) inset,
0 3px 13px 3px rgba(0,0,0,.3) inset;
color: #ddd;
}[/css:1:9a24ab3813]

Hemos usado las seudo-classes :hover, :focus y :active para cambiar los estilos del campo del formulario y el botón de enviar. También hemos usado CSS3 que usamos anteriormente en el contador.

Ahora, hay que destacar algo: los atributos "required" y "placeholder" no están soportados en navegadores salidos en la revolución industrial (Como IE7) u otros salidos junto con la música disco (como IE8). Así que para esto, solucionaremos el problema con la librería Modernizr, que nos permitirá saber si soporta o no esa etiqueta. Así que necesitamos chequear si soporta o no estas funciones y si encontramos que no lo soporta, entonces tendremos que usar jQuery para dar una solución.

Una vez hayas incluído la librería Modernizr en la página, inserta el siguiente código:

Código :

/* ---- Using Modernizr to check if the "required" and "placeholder" attributes are supported ---- */     if (!Modernizr.input.placeholder) {      $('.email').val('Input your e-mail address here...');      $('.email').focus(function() {          if($(this).val() == 'Input your e-mail address here...') {              $(this).val('');          }      });  }    // Esto es para detectar si el explorador es Safari (que no soporta las nuevas etiquetas)  var browser = navigator.userAgent.toLowerCase();     if(!Modernizr.input.required || (browser.indexOf("safari") != -1 && browser.indexOf("chrome") == -1)) {      $('form').submit(function() {          $('.popup').remove();          if(!$('.email').val() || $('.email').val() == 'Digite su correo electrónico…') {              $('form').append('<p class="popup">Por favor llene este campo.</p>');              $('.email').focus();              return false;          }      });      $('.email').keydown(function() {          $('.popup').remove();      });      $('.email').blur(function() {          $('.popup').remove();      });  }


Como puedes observar, hemos agregado un párrafo al formulario que contiene la frase "Por favor llene este campo." y le hemos asignado la clase "popup". Este código mostrará este texto en los navegadores que no soporten "required" y que por lo tanto, no serían verificados correctamente (si, desafortunadamente este es uno de los contras que tiene HTML5 en distintos navegadores; pero descuida, estos problemas paulatinamente irán pasando a un segundo grado).

A continuación, el código CSS del popup:
[css:1:9a24ab3813].popup {
position: absolute;
top: 45px;
left: 0;
width: 140px;
padding: 10px;
background: #e7e7e7;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #888;
}[/css:1:9a24ab3813]

Pie de página


En el pie de página vamos a agregar los iconos correspondientes a las redes sociales.

Código :

<footer>     <ul>        <li><a class="digg" href=""></a></li>        <li><a class="twitter" href=""></a></li>        <li><a class="vimeo" href=""></a></li>        <li><a class="skype" href=""></a></li>     </ul>  </footer>


Y el CSS:

[css:1:9a24ab3813]/* ---- Footer ---- */

footer {
width: 700px;
margin: 0 auto;
padding: 35px 0 25px 0;
overflow: hidden;
}

footer ul {
float: right;
width: 125px;
height: 22px;
}

footer ul li {
float: left;
}

footer a {
position: relative;
display: block;
margin-left: 10px;
}

.digg {
width: 10px;
height: 16px;
background: url(../images/digg.png) center center no-repeat;
}

.twitter {
width: 21px;
height: 16px;
background: url(../images/twitter.png) center center no-repeat;
}

.vimeo {
width: 16px;
height: 16px;
background: url(../images/vimeo.png) center center no-repeat;
}

.skype {
width: 16px;
height: 16px;
background: url(../images/skype.png) center center no-repeat;
}[/css:1:9a24ab3813]

Ahora, vamos a agregar una hermosa y vistosa flecha que dará a entender qué son las redes sociales:

Código :

<div class="social-media-arrow"></div>


Y agregamos los estilos de esta flecha:

[css:1:9a24ab3813].social-media-arrow {
position: absolute;
top: 125px;
right: -95px;
width: 108px;
height: 256px;
background: url(../images/social-media-arrow.png) top left no-repeat;
}[/css:1:9a24ab3813]

Animaciones en jQuery


Vamos a animar los enlaces y los íconos de las redes sociales cuando se coloque el puntero sobre estos. Para esto, vamos a agregar algunas cortas líneas en el archivo script.js:

Código :

/* ---- Animations ---- */    $('#links a').hover(     function(){ $(this).animate({ left: 3 }, 'fast'); },     function(){ $(this).animate({ left: 0 }, 'fast'); }  );    $('footer a').hover(     function(){ $(this).animate({ top: 3 }, 'fast'); },     function(){ $(this).animate({ top: 0 }, 'fast'); }  );


Compatibilidad con Internet Explorer 7 y 8


Sí, estos navegadores siguen en el mercado. Afortunadamente será por poco tiempo y va descendiendo, ya que estos no tienen soporte de HTML5 ni CSS3, pero en el mundo mágico de javascript todo tiene solución. Para terminar este tutorial como Dios manda, vamos a agregar las siguientes líneas a nuestro archivo ie.css.

Código :

.email {     line-height: 35px;  }


Esto es debido a que en IE 7 y 8 el texto de los campos de formulario no se alinean verticalmente en el centro.

Conclusión


¡Por fin, hemos terminado! Hemos creado nuestra página de "Próximamente", o "En construcción", o "Coming soon", "en breve", "Ya merito", "aguanta el viaje", o como lo llamen dependiendo de su región. La idea del ejercicio era aprender conceptos básicos del HTML5 y CSS3 como los bordes redondeados, las transparencias, los degradados, etc., en este mundo mágico que evoluciona la web. Agradezco su atención y les pido el favor que comenten el tutorial, si me he equivocado en algo por favor escríbanlo en la caja de comentarios o pueden escribirme al correo electrónico: info@johnwmartinez.com. Para finalizar, les dejo el link donde está el demo de esta página y donde podrán descargar los archivos del tutorial. Muchas Gracias.

Demo del tutorial y descarga de archivos

Dudas, preguntas, sugerencias, aportes, regaños, maldiciones voodoo: En la caja de comentarios que está debajo de este tutorial o en mi twitter: @johnwmartinez. Gracias.

Enviar comentario
Publicado por en

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)