El CSS3 y el HTML5 se van abriendo paso e invadiendo poco a poco la red global.

Y paralelamente cada vez aparecen más herramientas online para ayudar en la ardua tarea del diseño web.

Tal como comentan en el blog DesarrolloWeb.com estas aplicaciones web son editores “de cajas al que es posible modificar visualmente aspectos como bordes, sombra, color y transparencia, y cuyo resultado podremos ir viendo en tiempo real. “

La utilización de Javascript para redondear esquinas (Nifty Corners, por ejemplo) puede ser algo más complejo teniendo la opción sencilla del CSS 3. El único problema al usar la opción de CSS3 es que el CSS no valida correctamente ya que usa una regla CSS para cada navegador.

Generadores cross-browser (http://www.desarrolloweb.com/articulos/2309.php) online de código CSS3

• http://css3generator.com/
• http://www.css3.me/

Algunos post con listados de Generadores de código CSS 3:

• http://www.land-of-web.com/resources/30-useful-css3-generators.html
• http://pelfusion.com/tools/7-useful-css3-code-generators/
• http://slodive.com/web-development/25-top-online-css-generators/

Comparativa de técnicas para redondear esquinas

• http://www.disenorama.com/articulos/tecnicas-esquinas-redondeadas-en-css

Seguiremos investigando.

Saludos y paz de Dios.

Lo más rápido (para inexepertos en programación) que he encontrado ha sido los Formularios de Google Docs.

Opción 1: Crear formulario de Google e insertarlo en el HTML de tu post/página WordPress:

Formularios de Google

En el blog  www.investitwisely.com explican muy brevemente los pasos en inglés. Aquí los traduzco al castellano:

1. En Google Docs, seleccione ”Crear nuevo-> Formulario”.
2. Elegir las preguntas y tipos de preguntas. Puede seleccionar si desea que sean obligatorias u opcionales.
3. Cuando todo se ve bien, seleccione “Más Acciones-> Insertar”.
4. Durante la edición de su entrada de WordPress en modo HTML, pegue el código en su post / página.
5. Cambiar el valor de ancho de ”100%”, y ajustar la altura como mejor le parezca.

Aquí están algunas notas para recordar durante la edición de la página / post:

• Cada vez que se active el editor de Visual, el formulario se borrará.Usted puede simplemente volver a Google Docs y agarrar el código de inserción de nuevo.
• Si actualiza su formulario en Google Docs, que se actualizará automáticamente en su página / post. Puede que tenga que ajustar la anchura / altura para deshacerse de las barras de desplazamiento.
• Para deshacerse de las barras de desplazamiento, cambie el valor del ancho de ”100%” y ajustar la altura hasta que desaparece la barra de desplazamiento.

Solución de posibles problemas

A veces el formulario puede dar problemas. El Blog Building a Brand nos da algunas soluciones

Se elimina mi iframe y deja sólo “Cargando …” (“Loading…“)

Por defecto de WordPress no permite iframes en el mensaje (que es el código dado a usted por Google Docs).

En este caso utilice la opción Embed Iframeplugin y su sintaxis:

[iframe SUPERLONGURL 760 800]

Sustituya SUPERLONGURL por la url que le da Google comenzando con https://spreadsheets … en la etiqueta iframe, y terminando antes del “. 760 es el ancho y 800 es la altura del iframe.

El formulario solapa partes de mi blog / sitio web

Eso es porque la propiedad de anchura es más grande que el espacio que su plantilla de WordPress permite. Puede solucionarlo disminuyendo la propiedad de anchura dentro del código especificado por Embed Iframeplugin hasta que encaje en el área designada para el contenido de la entrada / página.

Opción 2: Crear un formulario de Google e insertarlo en WordPress con el Plugin WordPress Google Form

Plugin WordPress Google Form

El plugin WordPress Google Form obtiene un formulario publicado en Google utilizando un shortcode o código própio WordPress abreviado [form gform =''] , elimina el HTML wrapper (contenedor) de Gooogle y luego lo integra como un formulario de HTML incrustado en su blog o página.

El único parámetro requerido es el formulario, que especifica el formulario que le gustaría recuperar. Recomendable, pero opcional, también puede pasar la dirección URL de una página de confirmación. La página de confirmación anula la página de “Gracias” por defecto  de Google y ofrece una mejor integración con su sitio de WordPress. También puede proporcionar un valor de clase a medida para el estilo del formulario.

Por ejemplo, suponga que desea integrar el formulario que se encuentra en la siguiente dirección URL:

https://docs.google.com/spreadsheet/viewform?hl=en_US&pli=1&formkey=ABCDEFGHIJKLMNOPQRSTUVWXYZ12345678#gid=0 (no es una URL real)

En ese caso debería utilizar el código abreviado siguiente en su mensaje de WordPress o en la página:

[gform form='https://docs.google.com/spreadsheet/viewform?hl=en_US&pli=1&formkey=ABCDEFGHIJKLMNOPQRSTUVWXYZ12345678#gid=0']

En la actualidad, este plugin sólo es compatible con formularios de Google que son “publicados en una página web” y por lo tanto pública. Los formularios privados de Google no son compatibles.

Artículos relacionados:

• Otros recursos gratuitos para webmasters
• Otros artículos sobre Diseño Web

Tarjeta de visita flipbook (Advertising Agency: Art&C, Natal, Brazil)

Tal como se menciona en el blog I Believe in Advertising:

Utilizando la técnica flipbook, las tarjetas de negocio especiales fueron creadas para GingaFilmes, una empresa de producción de vídeo. La última pieza es desmontable, por lo que es posible para el cliente mantener sólo una tarjeta normal, si así lo desea.

Créditos de la pieza:

• Agencia de Publicidad: Art&C, Natal, Brazil
• Director creativo: George Wilde
• Director de Arte: Jackson Williams
• Copywriter: Daniel Felix
• Director de cuentas: Aline Pampalon

Artículos relacionados:

• Anatomía de una agencia de publicidad
• Definición de los roles en una agencia de publicidad

Aquí os dejo tres botones de muestra de lo que os podéis encontrar en un paseo matutino:

¿Óleo sobre valdosa? Fachada de edificio de viviendas en Calle Verdi

Adhesivo en calle Verdi: Grafismo Mural Urbano

Viñeta gráfica sobre persiana de local comercial

Artículos relacionados:

• Grafismo mural urbano_101213
• Dan Witz: street art desde 1979

Carta a los usuarios de Humyo.

Llevamos años acostumbrados a los servicios completamente gratuitos de Google.  Aún así cada vez que nos registramos en un nuevo servicio gratuito o Freemium solemos tener la sospecha de que en algún momento nos pedirán dinero por seguir usándolo.

Esa desagradable sorpresa nos ha pasado a los que usábamos Last.fm y Spotify. Nos prometieron horas de música y diversión y muchos nos lo creímos (ilusos…) y al final nos echaron el jarro de agua fría diciéndonos: “Paga un poquito y la fiesta seguirá como siempre”

Ahora le toca el turno a Humyo, un servicio de disco duro virtual que aprovecha todos la tecnología orientada a la nube (Cloud Computing)  y combina alojamiento de archivos, de lo que nos ofrecía 30 GB de espacio para cuentas gratuitas, cuyos 25 GB es para archivos multimedia y los 5 restantes para otro tipo de documentos, más el componente comunitario.

Aquí reproduzco el mensaje de su carta a los usuarios registrados:

Su cuenta de Trend Micro SafeSync será gratuita hasta el 1 de julio de 2012. Después de eso, SafeSync por tan sólo £ 24.95/año. Sentimos no poder seguir prestando su servicio de forma totalmente gratuita. Esperamos que usted disfrute de la experiencia SafeSync y si no quieren pagar, usted puede conseguir un mes adicional gratis para cada uno de tus amigos que pruebe SafeSync!

Es una pena. Y más teniendo en cuenta que la cuenta de Humyo no te permite descargar archivos en bloque sino uno por uno. Es una molestia que podrían habernos evitado la gente de SafeSync.

Infografía: Anatomía de una agencia de publicidad (Fuente: The Big Orange Slide)

Artículos relacionados:

• Roles en una agencia de publicidad

Procesadores Intel y AMD: Equivalencias y comparativa

En algún momento u otro de nuestras vidas como diseñadores gráficos tenemos que enfrentarnos al tedioso trabajo de tener que renovar la flota informática de nuestro estudio.

Resumen de equivalencias y comparativa de procesadores Intel y AMD

Supongo que con los ordenadores Mac ya llevas unas garantías aseguradas por el precio. Pero en el mundo de los PCs hay toda una serie de detalles técnicos que te pueden llegar a exasperar: si el PC es clónico o no, la marca de la tarjeta gráfica, el sistema operativo, el modelo de la memoria RAM, la marca del procesador, el modelo de procesador, la velocidad de procesador….

Sobre este tema del procesador he topado con la web de la División de Tecnologías de la Información de la Universidad de  Wisconsin-Madison que tienen una interesante  Guía del Comprador de Informática.

En concreto muy útil el Resumen de equivalencias y comparativa de procesadores Intel y AMD, tanto de ordenadores portátiles como de ordenadores de sobremesa.

Es de agradecer el trabajo que han hecho desde la Universidad de Winsconsin. Pero siempre me queda la duda ¿Por qué todos los informes útiles o que tienen cierta relevancia están hechos por alguna universidad de Estados Unidos? Creo que Wisconsin, Massachussets y Carolina del Norte son los que se llevan la palma en esto de elaborar informes mediáticos No hay diario español donde no aparezcan mencionadas alguna de estas universidades. Quizá es porque los nombre estadounidenses suenan más “cool” o mediaticamente serios. A lo mejor tendríamos que empezar a empezar a pensar en nuevos nombres más “enrollados” para nuestras universidades en España .

Saludos y paz de Dios.

Aquí os dejo algunas imágenes de sus trabajos:

Intervención gráfica en señal de trafico

Intervención gráfica en casa de 2 pisos

Intervención gráfica en pared urbana

Artículos relacionados:

• Grafismo mural urbano_101213
• Calle Verdi: grafismo mural urbano en Barcelona

Logo Tipográfico Sintético: O cómo decir HIP HOP en una sola sílaba

Visto en el blog  de Bindall: http://bindall.tumblr.com/post/10771333207

Ilustración Web Fonts. De: http://creativethemesdesign.com

Métodos de sustitución de texto html por una imagen:

Método de sustitución de texto html por una imágen Gilder/Levin

Consiste en introducir un elemento <span> como hijo del elemento de texto (<h1> , por ejemplo). Mediante CSS y la propiedad <position> se coloca la imagen como <background-image> de <span> y se posiciona encima del texto.

http://www.ehow.com/how_2224447_use-gilderlevin-image-replacement-headings.html

Método de sustitución de texto html por una imágen PHARK

En este método se usa la propiedad text-indent (sangría) para desplazar el texto y dejar ver la imágen de fondo (background-image) en su lugar

http://www.domedia.org/oveklykken/css-image-replacement.php

Método de sustitución de texto html por una imágen FIR

En este caso se ensucia un poco el código HTML ya que se debe encerrar el texto que queramos ocultar entre las etiquetas <span> para luego ocultarlo mediante CSS con la propiedad display: none;. Así se oculta el hijo <span>  sin afectar al padre. Y la imagen sigue viéndose pues está como background-image del elemento padre.

http://en.wikipedia.org/wiki/Fahrner_Image_Replacement

Métodos de sustitución de fuentes

Método FLIR (Facelift Image Replacement): Usa cualquier tipografía en tus diseños web

Está técnica usa un script PHP que llama a las fuentes que habremos subido al servidor previamente. Para poder probarlo en tu ordenador local tendrás que instalar XAMPP para que funcione PHP (Descargar Xampp y  Tutorial de Instalación de Xampp)

• Video de introducción a la técnica FLIR: http://css-tricks.com/video-screencasts/54-introduction-to-flir/
• Tutoriales completos de cómo aplicar la técnica FLIR:
• http://net.tutsplus.com/tutorials/php/how-to-use-any-font-you-wish-with-flir/
• http://divitodesign.com/typography/install-flir-typography-solution-for-the-web/

Método CUFON

Trabaja con Javascript.

• Cufón. Usar fuentes no estándar: http://oloblogger.blogspot.com/2010/01/cufon-usar-fuentes-no-estandar.html
• Cufón: Reemplazo de texto dinámico http://dixso.net/javascript/cufon-reemplazo-de-texto-dinamico/

Método sIFR

Funciona con Flash.

• Qué es sIFR http://es.wikipedia.org/wiki/Scalable_Inman_Flash_Replacement
• Usando sIFR: http://blog.unijimpe.net/sifr-tipografias-en-html/

Algunos artículos de opinión y comparativa sobre las diferentes técnicas CSS:

• Cufon vs sIFR vs FLIR: http://thinkclay.com/technology/cufon-sifr-flir
• Ultimate Image Replacement http://schoberg.net/2008/09/ultimate-image-replacement/

Método Google Web Fonts (free)

Google Web Fonts. (Imagen del blog: http://www.ellenswpnotizen.de)

Método Type Kit (freemium)