Responsive Inspector, comprueba la adaptabilidad de cualquier web a cualquier resolución de pantalla

Responsive Inspector

Ya sabemos que uno de los aspectos fundamentales a tener en cuenta por cualquier web actual es que pueda adaptar su diseño a cualquier tipo de pantalla donde se pueda visualizar, sobre todo con el uso cada vez mayor de tablets y smartphones con acceso a Internet. De entre las extensiones existentes en Chrome Web Store enfocadas a los diseños web adaptativos, se encuentra Responsive Inspector, cuya misión es mostrar el nivel de adaptabilidad de cualquier web.

Basta con que nos instalemos dicha extensión, la cual nos incluirá un nuevo botón junto a la barra de direcciones. Ya tan sólo tenemos que irnos a cualquier web y presionar el botón antes mencionado, el cual nos sacará una ventana emergente, mostrándonos los distintos tamaños de pantalla soportados a través de diferentes barras, ajustada a la escala de resoluciones. Sobre cada barra, si nos situamos encima de cada una de ellas, nos mostrará un botón que, al presionar, nos ofrecerá el código de la hoja de estilos CSS que hace que el diseño se ajuste a ese tamaño de pantalla.

Responsive Inspector tiene además una herramienta interesante, y la tenemos en su escala, sobre la cual podemos movernos a través del ratón. Esta herramienta nos permite escalar nuestro navegador a la resolución indicada en la posición que tengamos fijada, lo que nos permite ver la reacción de la adaptabilidad del diseño de la web, y además, contamos con una cámara, la cual nos permite realizar capturas, las cuales podemos guardar en local o subir a través de Behance.

De este modo, a pesar de las escasas opciones para diseñadores y desarrolladores web que dispone Chrome de serie, disponemos de una serie de extensiones que nos ayudará a mejorar los aspectos de los sitios web que podamos trabajar, o incluso tener como referencia.

Enlace: Responsive Inspector en Chrome web Store | Ví­a: AddictiveTips

css3ps – Pasando de PSD a CSS3

Crear el diseño de un sitio web y transformarlo en plantillas con hojas de estilo CSS son dos trabajos que en muchas ocasiones requieren dos tipos de profesionales diferentes, siendo necesario invertir una gran cantidad de tiempo en la transformación de la idea en archivos que un navegador reconozca como «página web».

Si trabajáis con photoshop y queréis agilizar el trabajo, podéis usar varias opciones que ayudan a crear la hoja de estilo, total o parcialmente, opciones que pueden ayudar a ahorrar varios dí­as en la creación del proyecto. Aunque en muchos casos el código generado es bastante «sucio», es una buena forma de no comenzar desde cero.

Una de las últimas opciones que han aparecido en esta categorí­a es css3ps.com, herramienta que se integra en forma de plugin y trabaja con CSS3.

css3

Es un plugin gratuito para Photoshop que realiza el trabajo en la nube para convertir las capas en CSS3. Tarda bastante en realizar la transformación, pero hay algunas demostraciones en su web que muestran como el resultado puede ser bastante completo.

Aquí­ tenéis un ví­deo mostrando su funcionamiento: Continúa leyendo «css3ps – Pasando de PSD a CSS3»

Slid.es (antes Rvl.io), la brillante alternativa para crear presentaciones online

slides

Hace unos meses destacaba un par de librerí­as en Javascript, impress.js y reveal.js, que permití­an crear presentaciones al estilo Prezi pero permitiendo editar directamente el código del contenido de las diapositivas y sus respectivas transiciones, algo perfecto para no depender estrictamente de un servicio online como Prezi.com y trabajar incluso de forma offline. Los requerimientos: conocimientos básicos en CSS y HTML, y un navegador de Internet para ejecutar las diapositivas resultantes.

Con un control absoluto del código los lí­mites a las funciones dadas en Prezi casi que desaparecen ya que ahora la cuestión es apenas de nivel de conocimiento. Sin embargo, como no querí­a dejarse a un lado a quienes apenas conocí­an de edición de diapositivas a través de herramientas ofimáticas, los creadores de la segunda librerí­a, reveal.js, pusieron junto a ésta un cómodo editor gratuito llamado rvl.io.

Pues bien, hace algunos dí­as decidieron renovar toda la herramienta cambiándole su nombre a slid.es, mejorando su interfaz, agregando más estilos predeterminados, manteniendo los planes gratuitos junto a nuevos planes de pago, y resaltando su renovado editor que prescinde de su extrema sencillez…

rvlio Continúa leyendo «Slid.es (antes Rvl.io), la brillante alternativa para crear presentaciones online»

Recursos web para practicar y trabajar con CSS

Si estáis aprendiendo diseño web y os gustarí­a practicar hojas de estilo sin necesidad de instalar nada en vuestro ordenador, podéis hacer uso de varias aplicaciones web que ayudan con el tema.

Os dejamos algunos de los enlaces más populares en el mundo de los editores online de CSS, todos ellos semejantes en su funcionamiento, esperando que os sean de utilidad:

cssizer.com

css

Podemos editar el código HTML y el CSS de la sección izquierda de la página y ver el resultado alterado en tiempo real a la derecha del sitio.
Continúa leyendo «Recursos web para practicar y trabajar con CSS»

cssmatic – Herramientas CSS para diseñadores web

Joaquí­n Cuenca (Panoramio y thumbr.it) y Alejandro Sánchez Blanes (freepik.com) nos presentan www.cssmatic.com, una aplicación que ofrece 4 herramientas indispensables para diseñadores web, prometiendo que irán añadiendo nuevas opciones según la vayan demandando los usuarios.

Con un gran trabajo de desarrollo Javascript, perite crear efectos de varios tipos y copiar el código necesario para aplicarlo en nuestras paǵinas web, existiendo en estos momentos cuatro opciones: gradiente, bordes, texturas y sombras.

css gradiente

En la primera opción podemos elegir cualquiera de los gradientes predefinidos para trabajar sobre ellos, seleccionando colores, orientación, transparencia y otras variables que ayudarán a obtener el resultado deseado para nuestro diseño. En el panel derecho tendremos siempre disponible el código que podremos copiar para simular el trabajo.

Continúa leyendo «cssmatic – Herramientas CSS para diseñadores web»

Nuevos cursos de HTML y CSS en Codecademy

html

Os hemos hablado muchas veces de Codecademy, la academia para programadores que nos permite aprender código para crear proyectos interactivos, juegos y aplicaciones.

Ahora, apenas dos meses después de estrenar su proyecto de programación para jóvenes, nos presentan unos nuevos cursos de HTML y CSS con los que podremos aprender a programar desde cero en estos dos lenguajes, y además en español. Miles de usuarios están traduciendo Codecademy para que hispanohablantes tengan acceso a los cursos, y por lo tanto ya tenemos listo el curso de HTML y CSS sin limitaciones de idioma a la hora de aprender.

Puedes acceder al curso haciendo clic aquí­, empezando por los conceptos básicos de HTML y sus ejercicios correspondientes.

Ví­a: Codecademy

scratchpad, escribe HTML y CSS y consulta el resultado en tiempo real

Ideal para quien está aprendiendo diseño de páginas web, scratchpad se presenta como una solución fantástica para ver lo que podemos hacer con HTML y CSS.

Solo tenemos que abrir scratchpad.io y empezar a escribir nuestro código en la parte izquierda de la aplicación, viendo el resultado en la parte derecha, cambiando en tiempo real.

La url que usemos podrá ser compartida, lo que permite que otras personas vean lo que se está haciendo, con los cambios realizados, siendo así­ una excelente opción para uso académico (el profesor escribe mientras los alumnos consultan en sus ordenadores, por ejemplo).

Sin necesidad de registro, la aplicación, creada por firebase.com, ya está disponible para su uso gratuito en todo el mundo.

generatepattern – Diseña patrones pintando pí­xel a pí­xel

En generatepattern.com tenemos una aplicación que nos permite diseñar en un cuadro de 50×50 pí­xeles para obtener un fondo que podremos usar en nuestros diseños.

Es posible elegir un color diferente para cada pí­xel, alterando la forma del resultado en tiempo real. La galerí­a de lo más popular nos muestra las posibilidades de la herramienta, permitiendo exportar el resultado en forma de imagen o icono.

Es también posible obtener el código CSS para usar el patrón como findo en nuestra página web, sin necesidad de realizar registro y de forma completamente gratuita.

Una buena herramienta para diseñadores meticulosos.

Mozilla Thimble, sencillo editor online de HTML

Te habí­amos contado en un artí­culo anterior de Mozilla Webmaker. La premisa del programa es ofrecer herramientas para que todos puedan aprender a crear contenido en la web desde cero. Como parte de este compromiso de parte de Mozilla, ya podemos conocer Thimble, un sencillo editor online de HTML.

Cuenta con una interfaz muy sencilla, sin ningún tipo de complicaciones, ni distracciones para los usuarios. Verás la pantalla dividida en dos columnas, para que a medida que vayas ingresando el código puedas verlo reflejado en tiempo real. De esa manera, podrás ver los resultados inmediatamente, detectando los errores o cambios a realizar.

A medida que vas utilizando Thimble verás que contarás con varias ayudas, como por ejemplo, al situarte sobre una etiqueta surgirá información sobre la utilidad de la misma, con la posibilidad de conocer más desde otra página de Mozilla. Luego podemos guardar nuestro trabajo a través de un enlace, obtener una URL para integrarla a nuestro sitio web o compartirlo en las redes sociales.

Esto es lo que puede verse por el momento en Thimble, que aún no ha sido lanzado oficialmente, por lo que quizás podamos ver más detalles integrado cuando salga de su versión de prueba.

Enlace: Mozilla Thimble | Ví­a: Webmonky

Google publica una nueva guí­a de estilos HTML/CSS

En el blog de Google para webmasters presentan una nueva guí­a para quienes trabajan con HTML y CSS, disponible en wwhts.com/IxMXyf y clasificada por temas.

El objetivo de crear este tipo de guí­as es permitir que el código escrito sea coherente y fácil de entender, ocupándose en este caso de una gran cantidad de asuntos relacionados con el formato HTML y CSS comentando las mejores prácticas para animar a los desarrolladores a trabajar con elegancia y siempre pensando en que alguien más leerá esas lí­neas de código.

Un buen lugar para encontrar consejos creados por una empresa que, desde luego, sabe del tema.