El rincón de escribir

Live Tools

Publicado el

por


Recopilación de enlaces varios sobre diseño gráfico y recursos web (IV)

Hacía más de un año que no recaía en este tipo de entrada, entre otras cosas porque -la verdad- no parece que os interese demasiado el tema. Es lo que pasa por tener un blog ecléctico. Pero, bueno, como a fin de cuentas a mí si me sirve como back-up y para repasar de vez en cuando las páginas que almaceno, aquí lo dejo: Para mi yo futura y para quién caiga despistado por aquí y se lleve una alegría al encontrarse con estos freebies.

Agilizando el trabajo con CSS

Live Tools

  • Live Tools de UIParade.com [eng]. UI Parade pone a nuestra disposición 4 herramientas de libre uso con las que podremos crear de forma intuitiva y visual botones, formularios, iconos y efectos de lazo (ribbon). Una vez toqueteados los mandos de creación, podremos obtener tanto el código CSS como el correspondiente HTML para su inserción en cualquier página web, a excepción de los iconos, caso en el que se generarán imágenes descargables.
  • 25 Fragmentos CSS para algunas de las tareas más comunes y frustrantes [esp]. Artículo del blog Webintenta que recopila pequeños fragmentos de código CSS de lo más habitual, por ejemplo: sombras, bordes redondeados, degradados, citas, estilos por tipo de enlace, fuentes y otros hacks.
  • Snippets de CSS-Tricks.com [eng]. En programación los snippets son pequeños fragmentos de código reutilizables. Esta web emplea este nombre para listar un buen puñado de ejemplos de código que podemos usar libremente en nuestros proyectos. Es un recurso similar al anterior, pero con otras variantes y algunos truquillos más no sólo de CSS.
  • Styleneat [eng]. Poco que ver con los enlaces previos ya que a esta web hay que llegar con el código escrito, pero tremendamente útil cuando se nos descontrola la estructura del CSS en el que trabajamos. Styleneat servirá para organizar nuestra hoja de estilos haciéndola inteligible para el ojo humano.
  • CSS compressor [eng]. Justamente lo contrario del punto previo. En esta ocasión, se trata de comprimir espacios, saltos de línea y demás posibles (que, por otra parte como decía, hacen legible un CSS para el desarrollador web) de manera que ocupe menos y ayude a cargar antes la web a la que estén asociados. Ayuda a la optimización web, no a nuestra comprensión lectora de código.

Plantillas HTML5

HTML5 responsive

  • HTML5 up [eng]. Plantillas sobre las cuales desarrollar sitios web en HTML5 totalmente responsives (adaptadas a dispositivos), customizables (personalizables) y 100% gratuitas bajo licencias Creative Commons.
  • 40 beautiful free HTML5 & CSS3 templates [eng]. Como reza el título, se trata de una recopilación de 40 preciosas (aunque esto depende de los gustos) plantillas HTML5 y CSS3. Algunas están un poco vistas, pero no está demás ternerlas localizadas.

Otros recursos

Codepen

  • Codepen [eng]. Es una especie de comunidad de programadores/creadores que aportan fragmentos de su trabajo para que otros puedan probarlos, jugar con ellos, sacarles partido y mejorarlos. Puede resultar útil si se quieren probar las posibilidades de un código combinando HTML, CSS, JS y pudiendo ver el resultado final «en vivo» todo dentro de la misma ventana del navegador.
  • SVG Patterns de Philbit.com [eng]. Esta página web se sirve de la herramienta citada en el punto anterior para ofrecernos una serie de patrones SVG que podremos utilizar como fondos para nuestros proyectos web.
  • Pictaculous [eng]. ¿Necesitáis sacar la paleta de colores de una imagen que os ha pasado vuestro cliente? Esta es vuestra web. Después de procesar la imagen que le indiquemos, Pictaculous -que, por lo visto, tiene también aplicación móvil- nos proporcionará los códigos hexadecimales de los colores destacados en nuestra imagen, nos sugerirá combinaciones e, incluso, nos ofrecerá la posibilidad de descargar la paleta de color para Photoshop (Adobe Swatch File, *.aco).
  • Modern.IE [múltiples idiomas]. No echéis a correr porque suenen campanas de Internet Explorer, que los chicos se lo están currando para intentar caernos bien. Esta web es un ejemplo. Se trata de una herramienta útil para comprobar la compatibilidad de un sitio web con los estándares actuales en general y con los requisitos de iE en particular. Una vez analizado el sitio que deseemos, Modern.IE nos ofrecerá una serie de consejos que deberemos contemplar como más o menos útiles, en función de la estandarización que busquemos.

Comentarios

¿Opiniones, dudas? Cuéntame…

This site uses Akismet to reduce spam. Learn how your comment data is processed.