Cristalab |
- Página en Construcción estilo minimalista en HTML5 y CSS3
- Animar figuras punteadas con CSS3
- Funciones matemáticas en Python
- Agregar imagen destacada automáticamente en Wordpress
| 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 archivosVamos 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:
Estructura de la página índex.htmlEste 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 HeaderComo 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 principalEl á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áginaEn 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 jQueryVamos 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 8Sí, 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.
|
| Animar figuras punteadas con CSS3 Posted: 27 Aug 2012 02:22 AM PDT En este tutorial os enseñaré un ejemplo de las animaciones que se pueden hacer con CSS3 gracias a Animation y a transform:rotate() con unos simples puntos e imaginación. Para hacer estas animaciones simplemente hago girar todos los puntos que suben y bajan simplemente (más adelante explicaré como).  El ejemplo está en funcionamiento en la página de referencia (link abajo) con varios diseños (gota, corazon, flor y aro) y se puede cambiar el sentido de la rotación y ver los elementos de la animación con sus bordes. Cómo animar los puntosPara empezar esto se hace con animaciones CSS3 y el código HTML consiste en un DIV que contiene a 18 DIV más con un punto dentro de cada uno. [nota:1123565cdd]El código CSS3 real tiene prefijos -webkit- y -moz- (en la propiedad animation y transform) pero los omitiré en el resto de artículo.[/nota:1123565cdd] Código : <div> <!-- Contenedor --> <div>•</div> <!-- 18 x DIV --> <div> La explicación la haré con el círculo (lo podemos seleccionar con el formulario de abajo del ejemplo). La animación del círculo simplemente es una rotación, más lenta en el punto central, y el keyframe del círculo, que es añadido a todos los DIV con el punto dentro es el siguiente (Si no sabes aún que es un keyframe puedes verlo en la documentación de animaciones). [css:1:1123565cdd]@keyframes Circulo { 0%{transform:rotate(0deg);} 20%{transform:rotate(120deg);} 80%{transform:rotate(240deg);} 100%{transform:rotate(360deg);} }[/css:1:1123565cdd] Para crear el propio dibujo hay que hacer la animación con el trazado (de gota, círculo...) y de ésta forma se moverán los puntos, pero irán todos juntos, para separarlos tenemos que establecer un retardo a la animación de cada punto, es decir: si cuando el primer punto lleva 10px recorridos y sale el siguiente, y cuando éste lleve 10px sale el siguiente, haremos una línea que parecerá contínua (para ver cómo funciona este paso en el ejemplo, visualízalo con el borde en un punto). Cómo calcular el retardoPara añadir el retardo usamos la propiedad animation-delay y en este caso además usamos la pseudo-clase de CSS3 nth-child (que ahora lo que hará es seleccionar cada DIV numéricamente).[css:1:1123565cdd][Segundos que dura la animación] / [Número de DIV] = [Retardo] 3s / 18 = 0.166s[/css:1:1123565cdd] Ahora tenemos que añadir el retardo a todos los DIV incrementando el retardo de todos a 0.166s: [css:1:1123565cdd]/* Al primer DIV le ponemos un retardo de 0.166s */ .CONTENEDOR div:nth-child(1) {animation-delay:0.167s;} /* En el segundo 2 x 0.166s */ .CONTENEDOR div:nth-child(2) {animation-delay:0.333s;} /* En los siguientes es el mismo procedimiento */[/css:1:1123565cdd] Los códigos son muy extensos, por ese motivo no he podido añadir todos en el tutorial, aún así puedes descargar el código CSS en la página de referencia. Aquí encontrarás el ejemplo en funcionamiento
|
| Funciones matemáticas en Python Posted: 08 Aug 2012 08:39 AM PDT En este videotutorial de Python veremos cómo manipular datos numéricos para cumplir ciertos requisitos, lo cual es, sin duda, una práctica frecuente en el desarrollo de software, pero existen funciones creadas para resolver problemas cotidianos, que conviene conocer y dominar para desarrollar de forma más ágil.
|
| Agregar imagen destacada automáticamente en Wordpress Posted: 08 Aug 2012 02:45 AM PDT Una imagen vale más que mil palabras y es bastante cierto, por eso es que en nuestro artículos agregamos imágenes que digan algo a los usuarios, en este tutorial agregaremos de forma automática una imagen destacada por si se nos olvida alguna vez y en su caso configuramos una imagen por defecto. Con este fragmento de código explicaremos cómo extraer una imagen destacada (feature image) de forma automática en los post de wordpress, dejaré el código necesario y tratare de explicar cada trozo de código y la función que realiza cada linea. Esta función además de capturar la primera imagen del post si no existe imagen destacada, también puede agregar una imagen por defecto para el caso en que el post no tenga ninguna imagen. Esto es muy útil ya que no todos los post tienen imagen y con esta opción podemos agregarle una por defecto. Código completoCódigo : function auto_post_thumbnail() { global $post; $already_has_thumb = has_post_thumbnail($post->ID); if (!$already_has_thumb) { $attached_image = get_children( "post_parent=$post->ID&post_type=attachment&post_mime_type=image&numberposts=1" ); if ($attached_image) { foreach ($attached_image as $attachment_id => $attachment) { set_post_thumbnail($post->ID, $attachment_id); } } else { set_post_thumbnail($post->ID, 'ID_imagen_por_defecto'); } } } //Final de la función add_action('the_post', 'auto_post_thumbnail'); add_action('save_post', 'auto_post_thumbnail'); add_action('draft_to_publish', 'auto_post_thumbnail'); add_action('new_to_publish', 'auto_post_thumbnail'); add_action('pending_to_publish', 'auto_post_thumbnail'); add_action('future_to_publish', 'auto_post_thumbnail');En esta función llamamos la imagen o las imágenes adjuntas si existen, utilizando las distintas funciones que wordpress nos proporciona, a continuación las más importantes. Verificamos si hay imágenes destacadasCódigo : $already_has_thumb = has_post_thumbnail($post->ID);
Extraemos la primera imagen del post si no hay destacadasCódigo : if (!$already_has_thumb) { $attached_image = get_children( "post_parent=$post->ID&post_type=attachment&post_mime_type=image&numberposts=1" );Agregamos una condicional que dice: si no hay imagen adjunta if (!$already_has_thumb), mostramos la primera imagen del post utilizando la función get_children(); en el code de wordpress explica perfectamente esta función y el funcionamiento con ejemplos de cada uno de estos parámetros. Mostramos la imagen capturadaCódigo : if ($attached_image) { foreach ($attached_image as $attachment_id => $attachment) { set_post_thumbnail($post->ID, $attachment_id); } } else { set_post_thumbnail($post->ID, 'ID_imagen_por_defecto'); } } En esta parte con otro condicional preguntamos si hay algún valor en la variable $attached_image, que es la que contiene el valor de la función get_children() y si es así con un bucle foreach agregamos los datos capturados en la variable $attachment_id, ahora podemos postrar la imagen utilizando la función set_post_thumbnail($post->ID, $attachment_id); con sus dos parámetros, necesarios para saber respectivamente el post de donde vamos a extraer la imagen y el id o nombre de adjunto a mostrar. Si no tenemos (else) ninguna imagen adjunta mostramos un archivo adjunto por defecto que podemos asignar nosotros mismos, simplemente agregando el ID de dicho archivo en esta parte del código. Código : else { set_post_thumbnail($post->ID, 'ID_imagen_por_defecto'); }Buscar el id del archivo por defectoPara agregar una imagen predeterminada en los post si no hay imágenes destacadas o imágenes en el post, podemos crear una imagen personalizada subirla desde la Librería multimedia y fijarnos en el ID de esa imagen, lo agregamos en nuestra función y listo.  Agregar la función auto_post_thumbnail() a los hook de wordpressEsta es la última parte del código y creo que la más importante, la función anterior sin estos ganchos o hook no realiza ninguna acción, esta es la parte del código donde se le dice a la función cuando tiene que trabajar. En nuestro caso nos interesa que esta función trabaje cuando se publica alguno de los tipos de post que trae wordpress, esto lo haremos utilizando la función add_action(), a esta función les pasamos 2 parámetros:
Código : add_action('the_post', 'auto_post_thumbnail'); add_action('save_post', 'auto_post_thumbnail'); add_action('draft_to_publish', 'auto_post_thumbnail'); add_action('new_to_publish', 'auto_post_thumbnail'); add_action('pending_to_publish', 'auto_post_thumbnail'); add_action('future_to_publish', 'auto_post_thumbnail');Si quiere aprender un poco más sobre las acciones de wordpress aquí tiene un listado completo de estas acciones. ConclusiónSólo con pegar esta función y agregar el ID de una imagen por defecto te ahorra trabajo como lo de agregar imágenes a tus post. Es una función muy interesante y útil, y espero la explicación le sea de utilidad y se entienda perfectamente.
|
| 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