lunes, 24 de septiembre de 2012

Cristalab

Cristalab

Menú de navegación con CSS3

Posted: 24 Sep 2012 07:56 AM PDT

Hace unos días que estaba con la idea de crear mi primer tutorial en Cristalab, y ahora que tengo tiempo libre me tomé unas horitas en lograr este resultado. En este pequeño tutorial crearemos un menú de navegación a partir de una lista desordenada <ul>, y con la magia de CSS3 obtendremos un menú como este:



Para empezar creamos nuestro archivo index.html que debe quedar así:

Código :

  <html>  <head>     <meta charset="utf-8">     <title>Tutorial - Menu de Navegación</title>     <link href='http://fonts.googleapis.com/css?family=Aldrich' rel='stylesheet' type='text/css'>     <link rel="stylesheet" type="text/css" href="estilos.css">  </head>  <body>     <div class="contenedor">                 <ul class="menu">           <li>              <h2>Inicio</h2>              <p>Bienvenido</p>           </li>           <li>              <h2>Mi perfil</h2>              <p>Algo más de mi</p>           </li>           <li>              <h2>Portafolio</h2>              <p>Mis trabajos</p>           </li>           <li>              <h2>Contacto</h2>              <p>Déjame un mensaje</p>           </li>        </ul>        <hr>     </div>  </body>  </html>

Como verán en el <head> hay un <link> que hace referencia a las Google Web Fonts, específicamente a la fuente con nombre "Aldrich" la cual utilizaremos en este tutorial.

Por otro lado tenemos que agregar lo siguiente en nuestra hoja de estilos:
[css:1:ee10167911]
* {margin: 0; padding: 0;}
body {
background: #1E6381;
font-family: 'Aldrich', sans-serif;
}
.contenedor{
width: 960px;
margin: auto;
}
[/css:1:ee10167911]
Con esta línea de código * {margin: 0; padding: 0;} estamos creando un pequeño reset que hará que todos los elementos html tengan 0 de margin y 0 de padding. En el body vamos a definir el color de fondo y el tipo de fuente. En el contenedor indicamos el ancho y margin: auto; para que esté centrado.
[css:1:ee10167911]
.menu {
margin: 50px 110px;
background: #fff;
width: 740px;
overflow: hidden;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.9);
}
.menu li {
width: 160px;
border-left: 5px solid #999;
float: left;
cursor: pointer;
list-style-type: none;
padding: 10px;

-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
}
.menu li h2 {
font-weight: normal;
font-size: 18px;
}
.menu li p{
font-size: 14px;
color: #999;

-webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
}
[/css:1:ee10167911]
Ahora si pasamos al diseño del menú, que en este caso es la lista desordenada que pertenece a la clase "menu" vamos a indicar el margen, color de fondo, el ancho y una pequeña sombra.

Para el elemento "li" de la lista estamos agregando border-left: 5px solid #999; que crea un borde al lado izquierdo de 5px de grosor y un color #999.

Luego indicamos tamaño de fuente y color para "h2" y "p".

transition: all 0.1s ease-in es un efecto que permite hacer que un elemento cambie poco a poco de un estilo a otro.

Por último vamos a cambiar los estilos de los elementos del menú una vez que el cursor esté encima de éstos. El código es sencillo, sólo define color de fondo, color de texto, y en el caso de "p" añade un pequeño padding a la izquierda.

[css:1:ee10167911]
.menu li:hover {
background: #000;
border-left: 5px solid #FFC661;
}
.menu li:hover h2 {
color: #fff;
}
.menu li:hover p {
color: #ccc;
padding-left: 10px;
}
[/css:1:ee10167911]

Con esto ya tendríamos el menú listo! :cool:

Demo

Enviar comentario

Analizamos Adobe Edge, el compromiso de Adobe por HTML5

Posted: 24 Sep 2012 07:30 AM PDT

Adobe tuvo hoy el evento Create the Web, donde anunció un compromiso total por HTML5, CSS3 y el nuevo Javascript. Adobe está trabajando en CSS Shaders (animaciones complejas 2D/3D en CSS) y en una suite de herramientas llamada Adobe Edge Tools & Services.

Editores de código, sistemas visuales para generar Responsive Design, fuentes abiertas para la web, suites de animación CSS3/JS y compiladores de código web a apps nativas para móviles. Esta es la respuesta de Adobe y está muy interesante.


Edge Animate


Adobe Edge Animate es un sistema de animación con el nivel de complejidad y detalle de Flash y exportación directa a CSS3. La interfaz está completamente basada en Webkit y hecha en HTML5 (como casi todo de Adobe). Las herramientas vectoriales no son tan poderosas como en Flash, pero la idea es usar Adobe Illustrator u otras herramientas externas para crear los assets que dentro de Edge Animate serán animados.


Adobe Edge Animate precarga jQuery 1.7 además de múltiples librerías de animación de jQuery. Aunque la mayoría de animaciones se hacen a través de propiedades de CSS3, asumo que se usa jQuery como fallback para que sea compatible con navegadores viejos. Esto es un ejemplo del CSS3 que genera Animate:
[css:1:0b155b2a40]-webkit-transform-origin: 50% 50%;
-webkit-transform: translate(318.44999999999993px, 200px) translateZ(0px) rotate(0deg) skewY(0deg) scale(1, 1);[/css:1:0b155b2a40]

Edge Reflow


Esta fue una sorpresa. Adobe Edge Reflow es una herramienta visual para crear sitios web basados en grillas que se autoadapten a cualquier resolución. Sí, una app para hacer Responsive Design o Diseño Adaptable. Una idea interesante, aunque no he podido ver qué tan limpio es el código que genera.



La idea de Edge Reflow no es ser el centro de trabajo de un diseño web, sino el lugar donde testeamos la adaptabilidad de los diseños antes de pasarlo a Dreamweaver, Edge Code, Sublime Text o a lo que sea.

Edge Code y Brackets


Adobe, creo, entendió la caída fuerte de popularidad en Dreamweaver y decidió crear una herramienta con el poder y versatilidad del lider de mercado: Sublime Text 2. Adobe Edge Code está basado en el proyecto open source Brackets y es un muy interesante editor de código. 100% hecho en HTML5/JS, permite editar código en tu disco duro o en "la nube", correr desde un laptop o un iPad y soporta todas las tecnologías web.



Aún le falta mucho para competir contra Sublime (Python, Ruby, Java, plugins...) pero tiene ideas muy interesantes. Si, por ejemplo, estás en un .html que hace una llamada a una función en JS, Edge Code es capaz de encontrar esa función en el .js y mostrartela ahí mismo, en el contexto, editable inmediatamente. Lo mismo aplica a CSS y otros momentos de código distribuido entre archivos. Además tiene una función para conectarse con Chrome y editar en tiempo real, pero por lo menos usando la beta de Chrome en Mac no pude hacerlo correr.

Edge Inspect


Edge Inspect es simple: Es el mismo conocido, amado y poderodo Web Inspector de Chrome, pero con la capacidad de ser multiplataforma y revisar cambios a los elementos de diseño y CSS de un HTML en tablets, teléfonos y desktops. Muy útil y derivado del proyecto Adobe Shadow.



Es en mi experiencia, un poco lento al inicio, pero una herramienta que vale mucho la pena para evitar el F5, CTRL+R y click a refresh típico del desarrollo multiplataforma.

Edge Webfonts y el nuevo Typekit


Otra sorpresa es Adobe entrando al mundo de las fuentes Open Source. Adobe historicamente ha recibido muucho dinero por sus fuentes (Myriad Pro, Helvetica Neue, etc), pero ahora ha decidido crear fuentes gratuitas y abiertas para usarlas con font-face de CSS3. Compitiendo contra proyectos como Google Web Fonts.



También anunciaron las fuentes "Source Sans Pro" para ver texto en pantallas y "Source Code Pro" para editar código. +1 para Adobe

Phonegap Build


Mi anuncio favorito. Adobe Cordova pasa a ser oficialmente Adobe Phonegap Build. Un proyecto que nos permite convertir apps HTML5 en apps nativas para iPhone, iPad, Android y casi cualquier plataforma tanto móvil como desktop. Con Adobe Phonegap están construídas muchas de las apps presentadas hoy. Phonegap Build además es un servicio en la nube para compilar en un sólo click tus apps HTML5 a todas las plataformas. Te generará los .ipa, .apk y .app necesarios para enviarlo a las App Stores. También te enviará screenshots y permitirá probar remotamente en multiples dispositivos




¿Qué tal todos estos anuncios? Adobe ha decidido dar todo por HTML5 y no puedo estar más contento. Tal como dijo @cristalab


Y encima, Adobe Edge & Tools en su versión 1.0 será perpetuamente gratis. Sólo necesitas una cuenta gratis de Adobe Creative Cloud.

Felicidades Adobe, de nuevo por el mejor camino para la web.

Enviar comentario

Animar un elemento usando la línea de tiempo en Photoshop

Posted: 29 Aug 2012 02:21 AM PDT

En este videotutorial de Photoshop aprenderemos varios trucos de animación que nos permitirán crear un movimiento más fluído de los caminos y las trayectorias, de una forma sencilla, gracias a la interpolación manual de cada uno de los fotogramas clave y al uso del papel de cebolla, que nos ayudará a testear que el resultado sea el más indicado en cada área.

Interpolaremos el movimiento, ajustando y refinando la posición en cada paso intermedio, ayudándonos con el papel cebolla, para redirigir la trayectoria y obtener un resultado preciso en todo el recorrido.



Saludos.

Enviar comentario

Obtener ancho y alto de un video HTML5 con Javascript

Posted: 28 Aug 2012 03:51 AM PDT

Ahora que me toca desarrollar una aplicación con Canvas y Video de HTML5 me he topado con la necesidad de adaptar el lienzo al tamaño del video, que no es estático, porque depende de la resolución de cada usuario.

Lo anterior suena bastante sencillo, sin embargo no lo es tanto, a continuación te muestro como debería hacerse. Primero obviamente recolectamos el objeto.

Código :

  window.addEventListener('load',init);  function init()  {         var video = document.querySelector('video');  }

Uno podría esperar que hubiera un video.width o video.height, sin embargo, a alguien se le ocurrió una buena idea cambiar el nombre de esos atributos por los siguientes:

Código :

  window.addEventListener('load',init);  function init()  {         var video = document.querySelector('video');         var video_height = video.videoHeight;         var video_width = video.videoWidth;  }

Uno podrá pensar que no hay dificultad en ése script, sin embargo ejecutarlo nos devolvería 0 para ambos valores, ¿por qué? Porque generalmente ésta función se ejecuta cuando el video no ha cargado y no ha empezado a ejecutarse, por lo que debemos ejecutar ésto utilizando el evento loadedmetadata del objeto video.

Código :

  var video,video_height, video_width;  window.addEventListener('load',init);  function init()  {         video = document.querySelector('video');         video.addEventListener("loadedmetadata", getSize, false);  }  function getSize()  {         video_height = video.videoHeight;         video_width = video.videoWidth;  }

Ahora sí, obtenemos los valores necesarios cuando el video se ha adaptado al tamaño de la ruta que el usuario envía. No sé qué tan común sea que el source del video sea de tamaño variable, pero sí requiere conocerlo, éste script puede ayudarlos.

Enviar comentario
Publicado por en

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)