Enjoy CSS: Generador avanzado de CSS3

¿Eres desarrollador web y estás cansado de olvidar prefijos? ¿Estás cansado de olvidar el orden de las propiedades? ¿Estás cansado de no tener una forma rápida y fácil de ver los diferentes estados de un elemento? ¿Estás cansado de no poder alinear verticalmente ese texto rápidamente? Si respondiste si alguna de estas preguntas Enjoy CSS es definitivamente para ti.

Screen Shot 2014-09-29 at 2.37.57 PM

 

Enjoy CSS es un generador muy muy avanzado de CSS3, la nueva especificación de CSS que ya lleva algunos años entre nosotros, si lo estás empezando a estudiar te darás cuenta que algunas cosas han cambiado y otras son completamente nuevas, o si ya lo has implementado pero todavía no tienes suficiente experiencia con las nuevas reglas y las formas cortas de escribir algunas propiedades, bueno, ya no tienes que rajarte la cabeza pensando en el orden en que escribir esto o aquello o el nombre de los malignos prefijos para cada navegador, Enjoy CSS hace todo esto por ti.

Enjoy CSS te permite crear tres tipos de elementos: Input, Block o Button, al cual le puedes editar absolutamente todo: Texto, Clase, Estados (Active, Hover, Before y After), Fondo, Transiciones, Transformaciones,  Posición, Márgenes y Bordes. Cada una de estas opciones tiene un editor visual, no tienes que tocar nada de código para editarlo, el editor posee selector de colores, fuentes, gradientes y demás, y en el caso de las transiciones están todas las diferentes funciones de tiempo disponibles, por supuesto cada cambio se inmediatamente reflejado en el elemento.

Screen Shot 2014-09-29 at 2.50.54 PM

Si tal vez necesitas algo rápido para comenzar existe una extensa galería de elementos de todo tipo para ayudarte a realizar la creación de tu elemento.

Screen Shot 2014-09-29 at 2.38.24 PM

La función más destacada de Enjoy CSS es la exportación del código, esto lo puedes por cada una de las diferentes categorías de estilo o por todo el elemento, en este aspecto Enjoy CSS no deja de ser avanzado, te permite seleccionar la versión de todos los navegadores para los cuales estás trabajando y si estás utilizando un preprocesador de CSS como Sass y Less también puedes exportar el código en estos formatos.

Espero que les sea de utilidad este completo generador de CSS y disfruten más de su CSS.

Enjoy CSS

 

NTH-Test: Aprende fácilmente como utilizar CSS nth-child y nth-of-type

Nth-test

En la versión número 3 de CSS se introdujo una característica increíblemente útil: la posibilidad de seleccionar determinados elementos hijos de un elemento padre en común, es decir, si tienes una lista desorganizada <ul> con varios items <li> ahora puedes seleccionas alguno de ellos o definir una sumatoria para seleccionarlos, por ejemplo, los items pares o impares, o cada 3 items.

A pesar de la excelente especificación que tiene siempre es un poco complicado comprender perfectamente como funciona, el ejemplo más claro es con las listas pero prácticamente se puede aplicar a cualquier listado de etiquetas que sean hijas de otra.

Si deseas aprender mejor como funciona este pseudo-selector te recomiendo NTH-Test, una pequeña aplicación web para que compruebes visualmente y de manera rápida lo que estás seleccionando actualmente cuando utilizas este selector.

NTH-TEST

Mario Bros creado con SCSS

Screenshot_115

 

HTML, CSS y JavaScript son solo la punta del iceberg en cuanto a desarrollo web se refiere, una vez conozcas como funcionan, sus especificaciones y sus estrechas relaciones apenas estarás entrando al maravilloso mundo de la web.

Como los desarrolladores evitamos a toda costa repetir lo que escribimos se crearon los preprocesadores de CSS, los cuales permite establecer variables, crear funciones y realizar operaciones matemáticas con las hojas de estilo, de esta forma te ahorrarás muchísimo tiempo al no tener que estar cambiando muchas líneas de código cuando deseas hacer una actualización o añadir una margen o espaciado a algún componente.

Bueno, después de la pequeña ilustración sobre preprocesadores de CSS hoy les presento otra excelente prueba del poder de la nueva versión de CSS: CSS3, esta vez es una pequeña pero increíble detallada animación de Mario Bros saltando para obtener una moneda, la animación fue creada solamente utilizando un elemento HTML y el resto lo hace el procesador de CSS, Sass.

Pueden ver la animación completa y su código cuente en CodePen

Tutorial interactivo gratuito para aprender PHP

Screenshot_109

PHP continua siendo el lenguaje de programación web más utilizado, aunque en los últimos años han surgido otros que cada vez cogen más fuerza como Python y Ruby todavía no han logrado destronar el reinado de más de 10 años que sustenta PHP en nuestros corazones (?).

Si todavía no sabes PHP o apenas estás entrando en este infinito mundo de bits y algoritmos te recomiendo Learn PHP, un sitio similar a CodeAcademy en el cual puedes aprender PHP de forma interactiva y divertida, sin necesidad de instalar algo y directamente en el navegador.

El sitio ofrece todo lo básico pero fundamental de PHP, como son las estructuras, cadenas, ciclos, funciones y objetos, cada sección con información precisa explicándote que estás aprendiendo y como funciona en general el lenguaje.

Learn PHP

Botones sociales con Bootstrap

botones sociales con bootstrap

Cada vez es más común ver que las nuevas aplicaciones web o servicios en Internet que requieres de una cuenta para iniciar sesión nos facilitan hacerlo a través de nuestra cuenta en alguna red social, esto con el fin de hacer muchísimo más fácil y rápido el registro y en el camino obtener parte de nuestra información desde la red social.

Por el otro lado, del de los desarrolladores implementar estas integraciones no es nada fácil, cada red social ofrece métodos y formas diferentes de integración, pero por el lado de la estructura visual ya nos podemos tranquilizar un poco, gracias a Social Buttons for Bootstrap, un pequeño pero útil proyecto que nos entrega los botones de inicio de sesión de 12 redes y servicios sociales diferentes, cada uno con su color distintivo y en diferentes formas y tamaños.

Para utilizarlo lo único que tiene que hacer es descargar el proyecto desde Github e incluirlo en su proyecto web, después de eso utilizar algunas de las 12 diferentes clases y ya esta, tienen su botón para iniciar sesión desde las redes sociales.

Social Buttons for Bootstrap

Herramientas online para probar código en vivo

stoy seguro que se han encontrado con la situación de necesitar probar un segmento de código rápidamente para ver que tal funciona o tal vez porque se te ocurrió una idea genial y quieres implementarla al vuelo, o también porque no estás en tu computador de trabajo y necesitas algo similar a tu IDE o Editor de código para jugar un rato con algo de código.

Te cuento que ya no es necesario una aplicación de escritorio ni un editor de código ni un lento y pesado, pero robusto IDE para editar código, ahora ya existen aplicaciones y herramientas online para ejecutar cualquier código que necesites y ver los cambios en vivo a medida que escribes el código.

A continuación les dejo una lista de editores de código en vivo y en la web, todos absolutamente gratuitos y sin nada que envidiarle a un editor de código como aplicación de escritorio:

CodePen

Screenshot_81

CodePen te permite incluir tu HTML, CSS y JavaScript en los panales destinadas para cada tecnología web y ver en vivo como cambia la forma final de tu código mientras lo editas. Permite guardar todos tus códigos, compartirlos, incrustarlos en otros sitios web e incluso ejecutarlos en los smartphones.

JSFiddle

Screenshot_80

JSFiddle es uno de los más populares porque es uno de los más completos, te permite agregar cualquier librería de JavaScript o CSS, pero lo mejor es que ya tiene un listado con docenas de las librerías más populares como jQuery, Mootools, YUI, e incluso frameworks JavaScript como AngularJS o EmberJS, permite además hacer peticiones AJAX dentro del editor, limpiar el código JavaScript y guardar varias versiones de tu edición.

Mozilla Thimble

Screenshot_79

Mozilla Thimble es uno de los últimos esfuerzos por la empresa Mozilla, quien esta detrás del popular navegador Firefox, de llevar a más personas las hermosas capacidades de las tecnologías web, aunque no tiene muchas opciones, es uno de los más rápidos, como punto a favor te muestra errores en tu HTML rápidamente y subrayado de etiquetas, puedes incluir CSS y JavaScript en el documento sin problemas, pero no tiene guardado de código, así que ten cuidado con cerrar la pestaña del navegador.

dabblet

Screenshot_78

dabblet es un editor enfocado al CSS y HTML, tiene dos vistas principales, el HTML y el resultado o el CSS y el resultado, como lo pueden notar esta enfocado al CSS de la página, puedes escribir cualquier CSS que se te ocurra y funcionará directamente en la previsualización, la forma final de tu código se puede compartir o ver a pantalla completa, también guarda todos las versiones que hagas del código.

CSSDeck

Screenshot_77

CSSDeck, como su nombre lo indica está completamente enfocado al CSS, te muestra un panel pequeño para el HTML, uno más grande para el CSS y por último el panel con el resultado de tu código, como punto a favor de CSSDeck, puedes cambiar el fondo de la página de resultados y crear enlaces únicos que puedes compartir para que cualquiera vea tu nueva creación, por último puedes descargar el resultado en un archivo .html.

JSBin

Screenshot_76

Lo mejor para el finalJSBin es una completa joya en cuanto a editores de código online se refiere, puedes incluir CSS, JS y HTML, agregar una o varias de las más de 50 librerías que tiene disponibles para importar, por supuesto puedes compartir el código final, incrustarlo en sitios web seleccionando que paneles deseas mostrar en el resultado final, exportar el código a un Gist de Github, guardarlo como plantilla y navegar desde la misma ventana a través de todos tus Bins.

Símbolos de superheroes creados solo con CSS3

Esto si que es increíble, Jordano Aragão es un conocedor avanzado de CSS3 y además aficionado a los superheroes que creo 4 símbolos de 4 superheros utilizando un solo elemento HTML, la etiqueta div con una clase y mucho CSS3 avanzado, los resultados son espectaculares y muy reales, se ven como si se tratase del trabajo profesional de un dibujante.

Gracias a que es CSS3 pueden ver el código completo y empezar a jugar con el para aprender como fue logrado tal efecto para un solo elemento HTML.

Reactor Arc de Iron Man

Screenshot_62

Green Lantern

Screenshot_60

Spiderman

Screenshot_59

Captain America’s Shield

Screenshot_57

Si jugaron un poco con el código se darán cuenta de que el truco  es utilizar las nuevo pseudoelementos :after y :before, los cuales pueden tener cualquier cosa adentro, como degradados, fondos o letras.

Vía: Google+

Chistes geek para desarrolladores web

programming-like-sex

Programar es como el sexo. Un error y tienes que dar soporte el resto de tu vida.

seo-pub

Un experto de SEO entra a un bar, bares, pub, taberna, posada, Pub irlándes, bebidas, cerveza, alcohol…

low-profile

¿Por qué el geek agregó body { padding-top: 1000px; } a su página de Facebook? Porque quería mantener un bajo perfil.

profanity

¿Cuál es el lenguaje más usado en programación? Groserías.

table-layout

¿Por qué el desarrollador web se fue del restaurante? Por el diseño de tabla.

sql-join

Una consulta SQL se acerca a dos mesas en un restaurante y pregunta: ¿Me les puedo unir?

didnt-get-arrays

 

¿Por qué el programador renunció a su trabajo? Porque no consiguió arrays. (Array similar Aprender)

Vía: Silktide

Generador visual de CSS3 válido

SDScreenshot_77

Las Web está evolucionando, está creciendo, está mejorando, está avanzando, está más Web que nunca.

Con la llegada de CSS3, en conjunto con HTML5, es cada día más común ver sitios web realmente impresionantes, con diseños increíbles, efectos muy bonitos para la vista e interactividad como nunca antes, ofreciéndole al usuario una experiencia única en todos los sentidos.

Para crear estos sitios web es necesario conocer bien las tecnologías que lo hacen posible, en este caso una de ellas es CSS3, la hoja de estilos en cascada para Internet, en la versión 3 incorporaron muchos elementos nuevos, como las transformaciones 3D, transiciones, animaciones, sombras, perspectiva, entre otros.

Si estás interesado en jugar un poco con estás tecnologías te recomiendo Create CSS3, un generador de estilos CSS3 válidos, la aplicación web tiene más de una decena de efectos disponibles en CSS3, cada uno se puede personalizar fácilmente y obtener en tiempo real una vista previa del efecto al lado derecho.

De esta forma ya no tienes excusa para probar e implementar las nuevas tecnologías que están por fin a nuestro alcance y con las cuales se puede crear experiencias enriquecidas para nuestra hermosa Web.

Create CSS3

Bento: Todo lo que necesitas saber sobre desarrollo web en un solo lugar

Screenshot_49

El Desarrollo Web dejo de ser hace mucho tiempo tan solo HTML, CSS y JavaScript, cada día son más las tecnologías que se crean, usan y se inventan para crear aplicaciones web increíble, rápidas y sin nada que envidiarle a una aplicación de escritorio.

Conocer todas estas nuevas tecnologías y estar actualizado en ellas es una tarea complicada, pero siempre es mejor hacerlo que no de hacerlo. Cada tecnología tiene sus sitios web, su documentación, sus tutoriales, sus ayudas pero debido al número de recursos disponibles a veces no sabes que leer, que tutorial seguir para empezar a conocer la tecnología o donde encontrar la documentación, información indispensable cuando estás aprendiendo algo nuevo.

Bento llega para solucionar este problema, la página recopila todas las tecnologías en cuanto a desarrollo web se refiere, cuando haces click sobre una caja de la tecnología se resaltan las otras tecnologías que deberías aprender luego de la que seleccionaste, en mi experiencia, debo decir que es la forma correcta de empezar a desarrollar para la Web, está bien organizado y los pasos a seguir con los correctos.

Los enlaces a los que lleva cuando le haces click al título de la tecnología son las páginas más confiables y con la última información sobre la tecnología seleccionada, son las páginas con la documentación actualizada, ejemplos claros y con la definición clara de todo lo relacionado con el lenguaje o tecnología web.

No dejes de visitar esta página cada vez que tengas duda sobre algo con desarrollo web.

Bento