Cristalab |
- Animación en sincronía con audio en After Effects
- Template de Wordpress: pasar HTML5 a Wordpress (II)
- Ruta de respaldo en enrutamiento estático en Redes
- 10 tecnologías web a aprender en el 2012
- Coloreado de dibujos en Flash
| Animación en sincronía con audio en After Effects Posted: 04 Apr 2012 06:05 AM PDT Vamos a descubrir cómo utilizando únicamente las herramientas más sencillas de After Effects, es posible generar interesantes y dinámicas animaciones de alta calidad, al mismo tiempo que nos introducimos en el uso de elementos de Audio dentro de nuestras composiciones. Saludos.
|
| Template de Wordpress: pasar HTML5 a Wordpress (II) Posted: 04 Apr 2012 05:35 AM PDT Retomamos la segunda parte de la conversión de HTML5 a Wordpress, en esta segunda parte configuraremos el archivo single.php que es el archivo que muestra los post completos, sus comentarios y un formulario para que los usuarios puedan enviar comentarios a la entrada. Descargas y resultados del tutorial
Aspecto final de la página single.php Tutoriales anteriores
En esta segunda parte trataremos los siguientes temas:
Dividir el archivo index.phpPara iniciar con el tutorial vamos a dividir el archivo index.php en tres partes(header.php, footer.php y sidebar.php). El código que tenemos en el archivo index.php será dividido entre estos tres archivos, como se muestra en la siguiente imagen. Para empezar crearemos los tres archivos antes mencionados y deberíamos de tener una estructura de archivos hasta este punto del tutorial como muestra la siguiente imagen.  Código para el header.phpEmpezaremos a trabajar con el header.php, para ello cortaremos del index.php el siguiente trozo de código y lo pegaremos en el header.php, no explicaré todo el código ya que lo explicamos anteriormente en la codificación del index, además lo dejo comentado por si no se acuerdan para qué sirve cada trozo de código.Código : <!DOCTYPE HTML> <html <?php language_attributes(); ?>> <head> <!-- METAS --> <meta charset="<?php bloginfo( 'charset' ); //cambiamos <meta charset="utf-8"> por su ?>" /> <!-- /METAS --> <title><?php /*Con este código agregamos a wordpress un título que cambia dependiendo * del lugar donde te encuentres en el blog. También puede utilizar <?php bloginfo('name'); ?> * Muestra en la etiqueta <title> el nombre de lo que está viendo, la forma en la que lo estamos creando * es mucho más amigable para los navegadores ya que muestra información de cada lugar que estés. */ global $page, $paged; wp_title( '|', true, 'right' ); // Agrega el nombre del blog. bloginfo( 'name' ); // Agrega la descripción del blog, en la página principal. $site_description = get_bloginfo( 'description', 'display' ); if ( $site_description && ( is_home() || is_front_page() ) ) echo " | $site_description"; // Agrega el número de página si es necesario: if ( $paged >= 2 || $page >= 2 ) echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) ); ?> </title> <!-- CSS --> <link href='<?php bloginfo( 'stylesheet_url' ); ?>' rel="stylesheet" /> <!-- /CSS --> <!-- RSS & PINGBACKS --> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <link rel="alternate" type="application/rss+xml" title="<?php bloginfo( 'name' ); ?>" href="<?php bloginfo( 'rss2_url' ); ?>" /> <!-- /RSS & PINGBACKS --> <?php /* Para compatibilizar HTML5 con navegadores antiguos */ ?> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <?php /*Siempre agrege wp_head antes del cierre de </ head> de su thema, * si no lo agrega puede que muchos plugins no funcionen ya que * lo utilizan este gancho (hook)para agregar elementos al head. */ wp_head(); ?> <script> $(document).ready(function() { //Slider Show var pager = true;//ESTABLECE A FALSE PARA DESACTIVAR LA PAGINACIÓN. var oSlider = $('#slider-wrapper'); if(oSlider.length > 0) { oSlider.tinycarousel( { pager: true, //paginación interval: true, //Auto Play duration: 300 //retardo de pase de imagen }); } }); </script> </head> <body <?php body_class(); ?>> <!-- WRAPPER --> <div id="wrapper" class="clearfix"> <!-- NAV#TOP-MENU --> <nav id="top-menu" role="navigation" class="clearfix"> <!-- ul Menú --> <?php wp_nav_menu( array('theme_location' => 'MenuPrincipal', 'container' => 'false' )); ?> <!-- final ul Menú--> <!-- .Top-search --> <div class="top-search"> <form method="get" id="searchform" action="#"> <input type="text" value="" name="s" id="s" placeholder="Buscar..." /> <button id="searchsubmit">Go</button> </form> </div> <!-- Final .Top-search --> </nav> <!-- FINAL NAV#TOP-MENU --> <!-- HEADER --> <header id="header" class="clearfix"> <?php $query = new WP_Query(); $query->query('posts_per_page=5&cat=9'); $post_count = $query->post_count; ?> <!-- #slider-wrapper --> <div id="slider-wrapper"> <!-- .viewport --> <div class="viewport clearfix"> <div> <ul class="overview"> <?php if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post(); ?> <li> <a href="<?php the_permalink();?>"><?php the_post_thumbnail('slider-thumbnail') ?></a> </li> <?php endwhile; ?> </ul> </div> </div> <!-- Final .viewport --> <!-- .slider-controls --> <div class="slider-controls"> <!-- .pager --> <ul class="pager"> <?php for($i = 0; $i < $post_count; $i++ ){ echo'<li><a href="#" class="pagenum" rel="'.$i.'">'.$i.'</a></li>';}?> </ul> <!-- Final .pager --> <!-- .button-left , .button-right --> <div class="button-left"> <a class="buttons prev" href="#">left</a> <span></span> </div> <div class="button-right"> <a href="#" class="buttons next">right</a> <span></span> </div> <!-- Final .button-left , .button-right --> </div> <!-- Final .slider-controls --> <?php endif?> </div> <!-- Final #slider-wrapper --> <!-- #logo --> <h1 id="logo"> <a href="<?php echo home_url(); ?>" title="<?php bloginfo('description')?>"> <?php bloginfo('name');?> </a> </h1> <!-- Final #logo --> <!-- .vermasVideos --> <div class="vermasVideos"><a href="#">Ver Más videos</a></div> <!-- Final .vermasVideos --> </header> <!-- FINAL HEADER --> <!-- #MAIN --> <div id="main" class="clearfix"> <!-- .main-content --> <div class="main-content clearfix"> En el mismo lugar del index.php donde cortamos ese código incluiremos el archivo header.php mediante la función get_header(), con esto ya tenemos el header incluido en el index.php desde un archivo externo.Código : <?php get_header(); ?> Código para el footer.phpPara el footer.php haremos lo mismo, del index.php cortaremos el siguiente código y lo pegaremos en el archivo footer.php que creamos anteriormente.Código : </div> <!-- final .main-content --> </div> <!-- FINAL #MAIN --> <!-- #FOOTER --> <footer id="footer" class="clearfix" role="contentinfo"> <!-- .Copy --> <p class="copy">©2010 Music.com. All rights reserved.</p> <!-- Final .Copy --> <!-- Menu Footer --> <?php wp_nav_menu( array('theme_location' => 'MenuFooter', 'container' => 'false' )); ?> <!-- Final Menu Footer --> <!-- .GoTop --> <a href="#" class="goTop">Ir Arriba</a> <!-- Final .GoTop --> </footer> <!-- FINAL #FOOTER --> </div> <!-- FINAL WRAPPER --> <?php wp_footer();?> </body> </html> Para terminar con el footer sólo nos queda llamar el archivo footer, para ello utilizaremos la función get_footer() desde el archivo index.php en el mismo lugar donde cortamos el código en el index.php.Código : <?php get_footer(); ?> Código para el sidebar.phpPara el sidebar lo mismo, cortamos el siguiente código del archivo index.php y lo pegamos en el archivo sidebar.php.Código : <!-- #sidebar --> <aside id="sidebar" role="complementary"> <!-- Widget Últimas Noticias --> <aside class="widget" id="ultimas-noticias"> <h3>Últimas Noticias</h3> <ul> <li> <a href="#">Alejandro Sanz</a> <p>Miércoles - 8-09-2010</p> <p>Palacio de los Deportes Madrid</p> </li> <li> <a href="#">Alejandro Sanz</a> <p>Miércoles - 8-09-2010</p> <p>Palacio de los Deportes Madrid</p> </li> <li> <a href="#">Alejandro Sanz</a> <p>Miércoles - 8-09-2010</p> <p>Palacio de los Deportes Madrid</p> </li> </ul> </aside> <!-- Final Widget Últimas Noticias --> <!-- Widget Últimos Videos --> <aside class="widget" id="ultimos-videos"> <h3>Últimas Noticias</h3> <ul> <li class="clearfix"> <img src="images/tmp/list-video1.jpg" alt=""> <p><a href="#">Mi princesa</a></p> <p>David Bisbal</p> </li> <li class="clearfix"> <img src="images/tmp/list-video2.jpg" alt=""> <p><a href="#">Desde Cuando</a></p> <p>Alejandro Sanz</p> </li> <li class="clearfix"> <img src="images/tmp/list-video3.jpg" alt=""> <p><a href="#">Mientes</a></p> <p>Camila</p> </li> <li class="clearfix"> <img src="images/tmp/list-video4.jpg" alt=""> <p><a href="#">Bad Romance</a></p> <p>Lady Gaga</p> </li> </ul> </aside> <!-- Final Widget Últimos Videos --> <!-- Widget Contáctenos --> <aside class="widget"> <h3>Contáctenos</h3> <form id="wiget-contact" action="#" method="post" name="Widget-Contact"> <p><input id="form-nombre" type="text" placeholder="Nombre" name="Nombre"></p> <p><input id="form-email" type="email" placeholder="Email" name="Email"></p> <p><textarea id="form-mensage" cols="0" rows="8" placeholder="Su Mensaje..." name="Mensaje"></textarea></p> <p><button id="form-enviar">Enviar</button></p> </form> </aside> <!-- Final Widget Contáctenos --> </aside> <!-- Final #sidebar -->Para llamar el sidebar desde el index.php utilizaremos en el mismo lugar donde cortamos el código anterior la función get_sidebar(). Código : <?php get_sidebar(); ?> Las funciones utilizadas para incluir estos archivos nos dan algunas funcionalidades más avanzadas, esta función acepta parámetros que en algún momento pueden ser de mucha ayuda. Por ejemplo: si queremos tener un sidebar en distintas situaciones podemos crear un archivo para cada situación, si creamos un archivo sidebar-404.php, podemos incluir este archivo cuando la página que se muestra sea la página 404.php utilizando la misma función pasándole como parámetro el nombre del archivo(get_sidebar('404')) y haciendo uso de las funciones condicionales de wordpress para gestionar la visualización de los archivos. Esto solo es un ejemplo, lo mismo puede hacerlo con los demás archivos, para ampliar la información sobre esto puede visitar la información completa en codex wordpress Con esto ya tenemos los archivos separados cada uno en su fichero independiente e incluido en el index mediante sus respectivas funciones. Lo siguiente será configurar el archivo single.php que es donde se visualizarán las entradas. Configurar el archivo single.phpNuestro single.php es bastante simple, estará formado por el contenido, una imagen representativa del post, el listado de comentarios, el formulario para comentar y el sidebar.Para crear el archivo single.php duplicamos el index.php y cambiamos su nombre a single.php, este archivo prácticamente tiene lo que necesitamos, solo eliminaremos algunas líneas de código y agregaremos otras. Contenido del postEn el single.php buscamos las líneas correspondientes al loop. Tienen una consulta personalizada que no necesitamos en el single.php, con lo cual eliminaremos las líneas de código del loop y lo cambiaremos por el loop simple de wordpress. Código : <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> Para mostrar el contenido completo del post sustituiremos la función the_excerpt(); por la función the_content();. A esta función se le puede pasar algunos parámetros muy interesantes en los cuales no entraré en detalle, pero pueden verlo en el codex de wordpress si quieren ampliar la información sobre esta función.  Código : <?php the_content();?> En el index.php teníamos un código de error que se mostraba si no había post en la base de datos, en el single.php no necesitamos este trozo de código, con lo cual lo eliminaremos y editaremos el final del loop, ya que contiene parte del código que no utilizaremos, el código debe quedar como en la imagen siguiente.  Código : <!-- Eliminamos todo este código --> <?php endwhile; else: ?> <article class="posts"> <p><h2><?php _e('Ha ocurrido un error.'); ?></h2></p> <p><?php _e('Disculpe, no existen post relacionados con su criterio de busqueda'); ?></p> <?php get_search_form();?> </article> <?php endif; ?> <!-- Se sustituye por este --> <?php endwhile; ?> Por último eliminaremos el número de comentarios y el botón "leer más" que se utilizaban en el index, para ello eliminaremos el siguiente trozo de código.  Navegación de los postsDebajo del contenido del post agregaremos dos botones de navegación los cuales enlazarán la entrada anterior y la siguiente a la actual, para ello utilizaremos las funciones previous_post_link() y next_post_link() las cuales nos proporcionan dichos enlaces a sus respectivas entradas, solo debemos agregar el siguiente código html después del final de la etiqueta article class="posts".Código : <section class="newer-older"> <p class="older"><?php previous_post_link('%link', '« Post Anterior') ?> <p class="newer"><?php next_post_link('%link', 'Siguiente Post »') ?></p> </section> Código Css para la navegaciónCódigo : /* =ESTILOS PARA LA PÁGINA SINGLE -------------------------------------------------------------- */ /*Parrafos*/ .entry-content P{ line-height: 20px; margin-bottom: 15px; } /* Navegador de post */ .newer-older{ display: block; height: 30px; clear: both; padding: 20px 0; } .older{float: left; text-align:left;} .newer{float: right; text-align:right;} .newer-older p{ display:inline-block; width: 150px; background: #c4c4c4; border-radius: 5px; box-shadow: 1px 1px 0px 0px #e1e1e1; overflow:hidden; } .newer-older p a{ display: inline-block; height: 30px; line-height:30px; padding: 0 20px; color: #777777; text-decoration: none; font-weight: bold; text-shadow: 1px 1px 0 #e1e1e1; width:110px; } .newer-older p:hover{background:#c9c8c8;} .older:hover a{ color: #6d9110; margin-left: -10px; } .newer:hover a{ color: #6d9110; margin-right: -10px; } El resultado sería algo como la imagen siguiente: Configurar los comentarios de cada postA mi entender creo que ésta es una de las partes que más puede sufrir un usuario que se inicia en el desarrollo de theme de wordpress, al listar los comentarios no tienen más que utilizar la función correspondiente para realizar esa llamada, hasta aquí todo fácil, pero ¿y si quieres crear una lista personalizada de comentarios? Si quieres utilizar esta opción de crear una función personalizada para listar los comentarios de wordpress podemos utilizar este artículo: (Mostrar de forma personalizada los comentarios en wordpress), que pone a nuestra disposición el codex de wordpress.No me atrevo a meterme a explicarlo ya que sería alargar bastante más el tutorial y creo que ese tema se merece un tutorial ya que es un tema que puede ampliarse bastante, en nuestro caso utilizaremos la salida por defecto de los comentarios y lo adaptaremos a nuestro gusto solo utilizando CSS, vamos a ello. Para listar los comentarios y el formulario para enviarlos utilizaremos la función comments_template( '', true );, esta función muestra los comentarios tanto en las páginas como en la página single. Utilizar solo esta función tiene sus ventajas y sus desventajasEsta función utiliza el archivo comment-template.php ubicado en la carpeta wp-include, para mostrar los comentarios y el formulario.Ventajas:
Des Ventajas:
 Código : <?php comments_template( '', true ); ?> Esta función nos da como resultado la siguiente estructura HTML la cual adaptaremos a la plantilla a continuación con CSS.  Tomando como referencia los selectores (ID y class) que nos proporciona esta función aplicaremos CSS. Css para el listado de comentariosCódigo : /* ESTILOS PARA LISTA DE COMENTARIOS*/ h3#comments{ font-size: 16px; color: #437201; background:url(images/title-bg.png) no-repeat left top; height: 55px; line-height: 55px; margin: 0 0 15px -22px; padding-left:20px; color: #e1e1e1; } .commentlist{ border: medium none !important; list-style: none outside none; margin-left: 0; } .commentlist li .children > li{ padding-left: 25px; } .comment-awaiting-moderation{color:red;text-align:center;} .commentlist li > .children #respond h3{margin: 0 0 15px -46px;} .commentlist li > .children li > .children #respond h3{margin: 0 0 15px -71px;/*nivel 2 comentarios anidados*/} .commentlist li > .children li > .children li > .children #respond h3{margin: 0 0 15px -96px;/*nivel 3 comentarios anidados*/} .comment-body{ padding-bottom:25px; position:relative; overflow:hidden; } .reply{ bottom: 25px; position: absolute; right: -76px; opacity:0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .comment-body:hover > .reply{ right:0px; opacity:1;} .comment-body p{ margin:15px 0; padding-left:15px; } .comment-author{ background: #EEEEEE; border-radius: 5px; border: solid 1px #cbcbcb; height: 50px; } .comment-author img{ background: #f1f1f1; padding:3px; margin: 5px; border: 1px solid #cbcbcb; } .comment-author .fn, .comment-author .says{ position: relative; top: -20px; font-style:italic; } .commentmetadata{ position: absolute; right:10px; top: 15px; } Aplicando el CSS anterior organizamos los comentarios adaptándolos al estilo de nuestra plantilla, obtendremos un resultado como muestro en la siguiente imagen. He aplicado los estilos de manera que los comentarios anidados se muestren dentro del comentario padre, solo lo he probado con los comentarios anidados hasta nivel 3. Estilos para el formulario de envío de comentarioPara el formulario de envío de comentarios utilizaremos los siguientes estilos.Código : /* FORMULARIO DE COMENTARIOS */ #respond{ clear: both; display: block; border-top: solid 1px #ecede9; padding: 15px 0; position:relative; } #respond h3{ font-size: 16px; color: #437201; background:url(images/title-bg-sidebar-right.png) no-repeat left top; height: 55px; line-height: 55px; margin: 0 0 15px -22px; padding-left:20px; color: #e1e1e1; } #respond #cancel-comment-reply { position: absolute; right: 0; top: 35px; } #respond #cancel-comment-reply a{color:red; font-style:italic;} #respond #cancel-comment-reply a:hover{text-decoration:none; border-bottom: 1px dotted red;} div#respond form#commentform p{ margin: 15px 0;} div#respond form#commentform input[type=text]{ width: 230px; height:20px;} #commentform #submit{width: auto !important;} div#respond form#commentform textarea{ width: 400px;} #commentform label{font-size:11px;margin-left:10px;} .nocomments{color:red; text-align:center;}/*Comentarios Cerrados*/ .page .nocomments{display: none;} Para los input, el textarea y el botón del formulario de comentario reutilizaremos el código utilizado para el widget de contacto, y para el botón reutilizaremos el código css utilizado para el botón leer más que creamos en el index, de esta forma nos evitamos crear nuevas reglas css para el formulario.Para el css del input y el textarea buscamos la línea #546 ó el selector #sidebar #wiget-contact input, en esta parte agregaremos los selectores del input y el textarea para aplicarle el mismo estilo. No es nada del otro mundo, sólo es agregar el selector separado por comas, pero por si alguno no sabe a qué me refiero trataré de ilustrarlo en la siguiente imagen.  Código completo Código : #sidebar #wiget-contact input, #sidebar #wiget-contact textarea, form#commentform p input, form#commentform p textarea { width: 100%; padding: 5px; text-transform: uppercase; font-size: 12px; text-shadow: 1px 1px 0px #dedede; color: #9a9b9d; background: #c4c4c4; border:none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 1px 1px 0px 0px #f4f4f4, 1px 2px 1px 0px #b1b3b5 inset; -webkit-box-shadow: 1px 1px 0px 0px #f4f4f4, 1px 2px 1px 0px #b1b3b5 inset; box-shadow: 1px 1px 0px 0px #f4f4f4, 1px 2px 1px 0px #b1b3b5 inset; } #sidebar #wiget-contact input:focus, #sidebar #wiget-contact textarea:focus, form#commentform p input:focus, form#commentform p textarea:focus{ -moz-box-shadow: 0px 0px 8px 0px #afafaf inset, 0px 0px 5px 0px #efefef, 1px 1px 0px 0px #f4f4f4, 1px 2px 1px 0px #b1b3b5 inset; -webkit-box-shadow: 0px 0px 8px 0px #afafaf inset, 0px 0px 5px 0px #efefef, 1px 1px 0px 0px #f4f4f4, 1px 2px 1px 0px #b1b3b5 inset; box-shadow: 0px 0px 8px 0px #afafaf inset, 0px 0px 5px 0px #efefef, 1px 1px 0px 0px #f4f4f4, 1px 2px 1px 0px #b1b3b5 inset; color: #707070; background: #cdcdcd; } Esto mismo haremos con el botón de enviar el formulario, igualaremos sus estilos con el botón leer más que creamos en el tutorial anterior, exactamente en la línea #659 de nuestra hoja de estilo, de todas forma les dejo el código completo para estos botones.Código : .leermas, #wiget-contact #form-enviar, #commentform p input#submit{ display: inline-block; padding: 5px 10px; border-radius: 5px; border: solid 1px #558300; text-shadow: none !important; color: #fff !important; background: #6aa103; box-shadow:none !important; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .leermas:hover, #wiget-contact #form-enviar:hover, #commentform #submit:hover{ text-decoration: none; color: red; -moz-box-shadow: 0px 0px 0px 1px #77b800 inset !important; text-shadow: 0px 0px 3px #FFFFFF !important; cursor:pointer; } ConclusiónCon esto ya debemos tener tanto la lista de comentarios y el formulario ya con estilos y adaptado al estilo de nuestra plantilla, y con esto pueden darse cuenta de lo sencillo que puede ser si no necesitamos utilizar formulario ni listas de comentarios personalizadas.Como puedes notar en el código CSS3 he utilizado prefijos específicos para los navegadores, si no quieres marearte con los prefijos esta a opción de cada uno utilizar alguna utilidad para eliminar los prefijos o dejarlo tal cual está en el tutorial. Disculpa por coger la forma fácil para mostrar el listado de comentarios, es que si empiezo a explicar lo de crear una lista personalizada de comentarios el tutorial se me alarga mucho y este es un tema bastante amplio del cual se puede hablar mucho. En la siguiente y última parte del tutorial trataremos los siguientes temas: Tercera parte:
|
| Ruta de respaldo en enrutamiento estático en Redes Posted: 15 Mar 2012 01:26 AM PDT Cuando uno de los dispositivos de nuestra red falla, es buena idea mantener rutas adicionales que conserven la conectividad de la topología para mantener un servicio estable en los puntos más importantes de nuestra red y en este episodio aprenderemos a configurarles y a evitar el balanceo de carga usando la métrica. Saludos.
|
| 10 tecnologías web a aprender en el 2012 Posted: 14 Mar 2012 10:53 PM PDT Este es el año más divertido para ser un tejedor de experiencias web. El 2011 fue un año de DOLOR. HTML5 era brillante y raro. Flash fue herido por el presidente de Adobe, quizas el CEO más idiota de la industria. Android aplastaba al iPhone pero era aplastado por el iPad. Y la gente, al fin, entendió que usar Blackberry en ésta decada es como ver TV blanco y negro en un mundo HD. Este año 2012, si eres frontend, backend, diseñador, programador o te encargas de cualquier cosa que tenga que ver con poner colores en una pantalla conectada a Internet, estas son las 10 tecnologías que, sin duda, debes amaestrar:
 HTML5 y CSS3... duh!Es obvio, pero lo reiteramos. No saber HTML5 es irresponsable. No conocer CSS3 es odiarte y un signo de masoquismo. HTML5 y CSS3 hacen todo TAN FÁCIL que no usarlos es autodestructivo. ¿Quieres detectar eventos touch en móviles o tablets? ¿Acelerometros? ¿Saber la latitud y longitud de un usuario? ¿Guardar en disco? ¿Crear bordes redondeados? ¿Transparencias? ¿Animaciones? Todo desde el navegador. ¡Aprende HTML5! (Introducción a HTML5 y muchos, muchos tutoriales de HTML5 y tutoriales de CSS3) Stylus o LESSCSS es el lenguaje declarativo más estúpido del mundo. CSS fue creado por gente que odia el amor. ¿Cómo es posible no tener herencia real? ¿No tener variables? ¿No tener sumas y restas básicas? No pido ciclos y condiciones, ¡Pido sentido común y decencia! Stylus y LESS, dos "pre-procesadores" de CSS, lo arreglan. Compatibles con CSS3, generan un CSS limpio, lindo y optimizado, compatible con todos los navegadores y que agrega lo que a CSS le falta. Cristalab usa Stylus. (Tutoriales de Stylus y LESS) Node.jsNode.js es un servidor que corre cada webapp en un nodo independiente por usuario, comunicables entre sí a través de una grilla al estilo de los Apaches mejor configurados. PERO además se programa con Javascript. Ni PHP, ni Python, ni Java: El buen y viejo Javascript. PERO además es REAL TIME y estupidamente veloz. Es magia de la buena. Mejorando.la usa Node.js. (Tutoriales de Node.js, fuck yeah!) CoffeeScriptJavascript es el lenguaje más famoso y usado del mundo web. En serio. Más que PHP. Y similar a PHP, es horrible, feo, viejo, mal hecho, lleno de malas prácticas y similar a afeitarse con un cactus. CoffeeScript hace por Javascript lo que Stylus y LESS hacen por CSS. Agrega una sintaxis decente y elegante, orientada a objetos y llena de sentido común, el cual exporta a Javascript de toda la vida, compatible con jQuery y cualquier otro JS que tengas allá afuera. Cristalab usa CoffeeScript. (Tutoriales de CoffeeScript) jQuery Mobile, en serioSi no conoces jQuery este no es tu negocio. En serio, aunque seas de marketing. jQuery es la forma fácil, de rápido desarrollo (y lenta ejecución) de hacer web apps. ¿Y jQuery Mobile? Es una obra tan linda que si fuera más inteligente sería millonaria. La forma más fácil de crear no sólo interacción en móviles, sino diseños enteros de apps compatibles con TODOS los teléfonos modernos. TODOS. Aprendanlo por el amor a los tubos. O si son muy fancy, tienen dinero y no les gusta jQuery Mobile vean Sencha Touch. (Tutoriales de jQuery y de jQuery Mobile) PhoneGap/Cordova y Flash/Flex MobilePhoneGap es una idea digna de un nobel de paz. Crea apps en HTML5, CSS3 y Javascript, usa el "API" de PhoneGap para acceder a los APIs de teléfonos Android y iPhone y con el mismo código, en un click, compila apps nativas completas para iPhone y Android que puedes vender o regalar en el Google Play (Android Market) o la App Store. Belleza. Belleza que Adobe compró y renombró como el Proyecto Cordova. PERO si quieres hacer videojuegos móviles, Flash/Flex es la MEJOR opción. Actionscript 3 es un excelente lenguaje y ahora que Steve Jobs está muerto, el compilador de Flash para iPhone y Android con AIR Mobile tiene mucho futuro. ESTE es el futuro de Flash. Apps móviles interactivas multiplataforma. (Tutoriales de PhoneGap y claro, de Flash, Flex y Flash en el iPhone) MongoDB, Redis o... cualquier base de datos NO relacionalSQL no es tan buena idea siempre. A veces las DBs son tan sencillas que una base de datos SQL relacional sólo crea problemas y cuellos de botella. Hay un nuevo tipo de bases de datos basadas en el concepto de "nombre => valor" donde sólo hay un "key", no hay relaciones ni intersecciones de conjuntos, sino más teoría de matrices, hashes y/o diccionarios. ¿Muy técnico? Hay DBs que en su simpleza son MUCHO más veloces que las SQL. Se llaman "no relacionales" y vienen en varios sabores ¿Las más famosas? MongoDB y Redis. Aunque hay más, como BigTable de Google o SimpleDB de Amazon. (¿Quien se anima a hacer un tuto de esto? Publicalo en Cristalab) Django/Python¿Siguen con PHP? Dejen de sufrir. En el 2012, programar en PHP desnudo es cómo hacer un sitio con CSS3 para IE6. Conoce el mundo del futuro: Node.js, Ruby on Rails y sobre todo, Django con Python. Lenguajes modernos, con experiencia y caracteristicas futuristas que los PHPeros no conocen. Una simple prueba: Django viene con un sistema de manejo de base de datos que abstrae SQL, lo hace innecesario y vuelve imposible las inyecciones SQL. Pero ADEMÁS crea automaticamente los sistemas de administración de los sitios web al entender de manera inteligente la estructura de la información. (Tutoriales de Python y Django) "Responsive Design"El "diseño receptivo adaptivo" o Responsive Design es una nueva corriente. El mismo diseño que pones en una web a 1024px lo puedes "reorganizar" para que se vea lindo en un iPad, en un iPhone o en un Android. No se trata de hacer sitios móviles, sino mantener una unidad de diseño a través de los dispositivos, cambiando de diseños multicolumna a una sola sin sacrificar muchos elementos, sino reorganizar. Dos ejemplos que resaltan de Responsive Design: La app móvil de la Wikipedia para teléfonos y tablets. Windows Phone 7 junto a Windows 8. El iPadEl iPad ganó y darme cuenta me dolió. He probado tablets Android chinas, el Samsung Galaxy Tab 10.1, el Blackberry Playbook, el Kindle Fire, la Asus Transformer, el Galaxy Tab 7" y hasta el desproposito de Chromebook. Ya está, Apple ganó. Contra el iPhone se podía pelear. No tuvieron una App Store en lanzamiento, todos en la industria estaban aprendiendo y había suficiente interés porque Android fuera el sistema que compitiera con fuerza. Android ya había entendido los teléfonos antes que el iPhone saliera al mercado. ¿Pero el iPad? El iPad se adelantó al futuro por completo. Un diseño simplón y obvio por fuera, un iPhone grandote, pero al probarlo, un mundo diferente. El Galaxy Tab 10.1 es lo más cercano y NO es cercano. No tiene la calidad de apps, la calidad de interfaz, la calidad de gestos, la calidad de construcción. El iPad ganó. Es la mejor tablet, de lejos. 3 años adelante de Samsung, de Asus, de Microsoft. Y me jode un montón. Con el iPad Pepito (O New iPad o iPad 3 o como se llame), Apple simplemente aplastó a todos. Pasará un año o dos antes que veamos un Retina Display de 10 pulgadas en otra tablet. Pasarán AÑOS antes que veamos apps con la calidad de iPhoto o Keynote de iPad en Android. Pasará una decada antes que cualquier otra tablet llegue al market share que el iPad ha consolidado. Si te importa el futuro post-PC y el tipo de experiencias web que serán creadas en ese futuro, comprate un iPad ya y empieza a testear.
|
| Posted: 09 Aug 2009 05:00 PM PDT En este tutorial de coloreado digital, veremos el proceso de entintado de personajes y dibujos usando Adobe Flash como herramienta. |
| You are subscribed to email updates from Cristalab To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
No hay comentarios:
Publicar un comentario