Recursos para Diseñadores Gráficos y Web | Creativos Online » html http://www.creativosonline.org/blog Los mejores recursos para diseño gráfico, diseño web, diseñadores flash, logotipos y retoque fotográfico. Aprende a utilizar Photoshop, Dreamweaver, Frontpage, Corel Draw y muchas herramientas más. Sun, 12 Feb 2012 13:31:17 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Fractal, una WebApp para validar código HTML y CSS (para emails) http://www.creativosonline.org/blog/fractal-una-webapp-para-validar-codigo-html-y-css-para-emails.html http://www.creativosonline.org/blog/fractal-una-webapp-para-validar-codigo-html-y-css-para-emails.html#comments Sat, 25 Jun 2011 10:35:30 +0000 Carlinhos http://www.creativosonline.org/blog/?p=10631
Cuando escribimos código a veces podemos fallar -os recuerdo que somos humanos- o podemos cometer algunos errores mínimos pero que afectan al código. Para solventar esas cosas están los validadores. Con Fractal podrás testear tu código HTML/CSS con una particularidad muy grande: está orientado a la gente que crea plantillas de emails, por lo que [...]]]>

NewImage8 Fractal, una WebApp para validar código HTML y CSS (para emails)

Cuando escribimos código a veces podemos fallar -os recuerdo que somos humanos- o podemos cometer algunos errores mínimos pero que afectan al código. Para solventar esas cosas están los validadores.

Con Fractal podrás testear tu código HTML/CSS con una particularidad muy grande: está orientado a la gente que crea plantillas de emails, por lo que lo comprobará a lo largo de diversos servicios de correo como Gmail.

Me parece una WebApp fantástica, y encima te sugiere como solventar los errores. ¡Fantástica!

Enlace | Fractal

Fuente | WebResourcesDepot

]]> http://www.creativosonline.org/blog/fractal-una-webapp-para-validar-codigo-html-y-css-para-emails.html/feed 1 Chuleta con herramientas para HTML5 http://www.creativosonline.org/blog/chuleta-con-herramientas-para-html5.html http://www.creativosonline.org/blog/chuleta-con-herramientas-para-html5.html#comments Thu, 19 May 2011 16:57:00 +0000 Gema http://www.creativosonline.org/blog/chuleta-con-herramientas-para-html5.html
Chuleta con herramientas para HTML5]]>

Si estás empezando a programar con HTML5 o si ya sabes pero los tags que utilizas son demasiado para memorizarlos, aquí te dejo esta gran infografía (que no viene siendo otra cosa que una chuleta con colores y presentada de una forma muy bonita :-P ) para que la tengas a mano siempre que la necesites.

En ella encontrarás los nuevos tags que aparecieron con HTML5, los que siguen en esta nueva versión pero ya estaban en versiones anteriores y también aquellos que funcionaban hasta la versión HTML 4 pero ya no funcionan en esta…además de información sobre navegadores y atributos.

Clica en aqui para ver la chuleta

infografia HTML5 chuleta thumb Chuleta con herramientas para HTML5

Fuente | Inspiredm

]]> http://www.creativosonline.org/blog/chuleta-con-herramientas-para-html5.html/feed 1 Tomando el control del “mailto:” http://www.creativosonline.org/blog/tomando-el-control-del-mailto.html http://www.creativosonline.org/blog/tomando-el-control-del-mailto.html#comments Mon, 28 Mar 2011 14:09:16 +0000 Carlinhos http://www.creativosonline.org/blog/?p=9756
¿Crees que el comando “mailto:” simplemente se limita a añadir una dirección de correo y ya? Pues te equivocas, es muy personalizable y yo os voy a enseñar como hacerlo. La teoría Lo primero que hay que tener claro es que el comando “mailto:” se utiliza igual que las strings de HTML, así que para [...]]]>

Mail Tomando el control del mailto:

¿Crees que el comando “mailto:” simplemente se limita a añadir una dirección de correo y ya? Pues te equivocas, es muy personalizable y yo os voy a enseñar como hacerlo.

La teoría

Lo primero que hay que tener claro es que el comando “mailto:” se utiliza igual que las strings de HTML, así que para añadir cosas las concatenaremos así: esteeselcomando:haciaquienlodirigimos?primera=prim&segunda=seg&tercera=terc.

Si no lo habéis entendido yo os lo explico: el comando va lo primero, después de los dos puntos ponemos el receptor, la primera query va con la interrogación y el resto se concatenan con el ampersand.

Los comandos

  • Dirección: mailto:dirección
  • Múltiples receptores: mailto:dirección1,dirección2
  • Con copia: mailto:dirección?cc=direccióncopia
  • Con copia privada: mailto:dirección?bcc=direccióncop
  • Con asunto: mailto:dirección?subject=Asunto
  • Con mensaje: mailto:dirección?body=Hola%0ACarlinhos (%0A salta de línea).

El ejemplo

Vamos a crear un mail a una dirección ficticia que tenga asunto, cuerpo y copia.

mailto:carl@inhos.com?bcc=linhos@car.com&subject=Asunto de correo&body=Hola%0ACarlinhos.

Puedes comprobar que funciona pulsando aquí.

]]> http://www.creativosonline.org/blog/tomando-el-control-del-mailto.html/feed 0 Cuidado con los comentarios condicionales HTML http://www.creativosonline.org/blog/cuidado-con-los-comentarios-condicionales-html.html http://www.creativosonline.org/blog/cuidado-con-los-comentarios-condicionales-html.html#comments Fri, 03 Sep 2010 12:15:28 +0000 Carlinhos http://www.creativosonline.org/blog/?p=7588
Una práctica habitual en el diseño web con HTML es la de usar comentarios condicionales especialmente para tratar diversos comportamientos erráticos del lamentable Internet Explorer 6, pero eso tiene una repercusión: bloquea la carga de los CSS hasta el final y hace que nuestra página cargue mucho más lento. La solución es tremendamente sencilla a [...]]]>

CapturaDePantalla 2010 09 03 a las 14.14.06 Cuidado con los comentarios condicionales HTML

Una práctica habitual en el diseño web con HTML es la de usar comentarios condicionales especialmente para tratar diversos comportamientos erráticos del lamentable Internet Explorer 6, pero eso tiene una repercusión: bloquea la carga de los CSS hasta el final y hace que nuestra página cargue mucho más lento.

La solución es tremendamente sencilla a la par que sorprendente, pero después de mirar test hechos por gente y por mí mismo he de decir que funciona a la perfección aunque parezca imposible, y es que únicamente debemos poner un comentario condicional vacío después del title de la página para que todo vaya sobre ruedas.

Ya no tendremos más bloqueos de CSS ni lentitud en la carga, y todo con una simple línea como esta:

<!–[if IE 6]><![endif]–>

]]> http://www.creativosonline.org/blog/cuidado-con-los-comentarios-condicionales-html.html/feed 1 Optgroup, ese gran desconocido http://www.creativosonline.org/blog/optgroup-ese-gran-desconocido.html http://www.creativosonline.org/blog/optgroup-ese-gran-desconocido.html#comments Sat, 21 Aug 2010 21:13:08 +0000 Carlinhos http://www.creativosonline.org/blog/?p=7303
Hay muchos tags HTML, pero estoy seguro que a la mayoría de vosotros no os suena Optgroup. No pasa nada, es totalmente normal y lógico al tratarse de un elemento raramente utilizado, pero es un tag al que le podemos sacar un rendimiento interesante cuando trabajamos con <select>, ya que nos permite clasificarlos muchísimo más. [...]]]>

Optgroup, ese gran desconocido

Hay muchos tags HTML, pero estoy seguro que a la mayoría de vosotros no os suena Optgroup.

No pasa nada, es totalmente normal y lógico al tratarse de un elemento raramente utilizado, pero es un tag al que le podemos sacar un rendimiento interesante cuando trabajamos con <select>, ya que nos permite clasificarlos muchísimo más.

El uso es muy sencillo: primero abrimos un select y luego vamos abriendo los optgroup necesarios para posteriormente meter los option dentro de los optgroup. Os dejo un ejemplo tras el salto.

]]> http://www.creativosonline.org/blog/optgroup-ese-gran-desconocido.html/feed 0 40 buenas plantillas XHTML gratuitas http://www.creativosonline.org/blog/40-buenas-plantillas-xhtml-gratuitas.html http://www.creativosonline.org/blog/40-buenas-plantillas-xhtml-gratuitas.html#comments Fri, 06 Aug 2010 13:22:10 +0000 Carlinhos http://www.creativosonline.org/blog/?p=7104
Cuando hacemos un sitio web basándonos en una plantilla suele ser bastante ideal hacerlo con una de calidad y de pago, pero también podemos encontrar a veces plantillas de calidad gratuitas. La recopilación que queda tras el salto es un ejemplo de que se pueden encontrar cosas de calidad aunque estén a coste cero, sobre [...]]]>

web layout 02 40 buenas plantillas XHTML gratuitas

Cuando hacemos un sitio web basándonos en una plantilla suele ser bastante ideal hacerlo con una de calidad y de pago, pero también podemos encontrar a veces plantillas de calidad gratuitas.

La recopilación que queda tras el salto es un ejemplo de que se pueden encontrar cosas de calidad aunque estén a coste cero, sobre todo en el ámbito de las plantillas corporativas sencillas sin muchas páginas y con un layout bastante típico.

Fuente | Speckyboy

Corporate Layouts

Lawyer&Attorney

web layout 01 40 buenas plantillas XHTML gratuitas
Download Page ?

Darkness

web layout 02 40 buenas plantillas XHTML gratuitas
Download Page ?
Preview ?

DesignHQ

web layout 03 40 buenas plantillas XHTML gratuitas
Download Page ?

Distinctive

web layout 04 40 buenas plantillas XHTML gratuitas
Download Page ?

Lawyer Marketing

web layout 05 40 buenas plantillas XHTML gratuitas
Download Page ?

Prestigious

web layout 06 40 buenas plantillas XHTML gratuitas
Download Page ?
Preview ?

Internet Encyclopedia

web layout 07 40 buenas plantillas XHTML gratuitas
Download Page ?

Outliers

web layout 08 40 buenas plantillas XHTML gratuitas
Download Page ?
Preview ?

237 Extreme

web layout 09 40 buenas plantillas XHTML gratuitas
Download Page ?
Preview ?

Mondays

web layout 10 40 buenas plantillas XHTML gratuitas
Download Page ?
Preview ?

BizGroup

web layout 11 40 buenas plantillas XHTML gratuitas
Download Page ?
Preview ?

Nova Studio

web layout 12 40 buenas plantillas XHTML gratuitas
Download Page ?
Preview ?

Aurelius

web layout 13 40 buenas plantillas XHTML gratuitas
Download Page ?
Preview ?

iPhone App Template

web layout 14 40 buenas plantillas XHTML gratuitas
Download Page ?
Preview ?

YIW Minimal

web layout 15 40 buenas plantillas XHTML gratuitas
Download Page ?
Preview ?

CleanInterface

web layout 16 40 buenas plantillas XHTML gratuitas
Download Page ?
Preview ?

Minimalistica

web layout 39 40 buenas plantillas XHTML gratuitas
Download Page ?

Wing the Air

web layout 17 40 buenas plantillas XHTML gratuitas
Download Page ?
Preview ?

Blog Layouts

Cool Blue

web layout 18 40 buenas plantillas XHTML gratuitas
Download Page ?
Preview ?

Nautica

web layout 19 40 buenas plantillas XHTML gratuitas
Download Page ?

RS19

web layout 20 40 buenas plantillas XHTML gratuitas
Download Page ?
Preview ?

OWMX (HTML5 & CSS3 Template)

web layout 21 40 buenas plantillas XHTML gratuitas
Download Page ?

Free HTML5 and CSS3 Theme

web layout 22 40 buenas plantillas XHTML gratuitas
Download Page ?
Preview ?

DigitalWeb

web layout 23 40 buenas plantillas XHTML gratuitas
Download Page ?
Preview ?

Magazine Layouts

Ost Magazine

web layout 24 40 buenas plantillas XHTML gratuitas
Download Page ?
Preview ?

News Magazine

web layout 25 40 buenas plantillas XHTML gratuitas
Download Page ?
Preview ?

Opportunity

web layout 26 40 buenas plantillas XHTML gratuitas
Download Page ?
Preview ?

Simple Magazine

web layout 27 40 buenas plantillas XHTML gratuitas
Download Page ?
Preview ?

Canuckington Post

web layout 41 40 buenas plantillas XHTML gratuitas
Download Page ?
Preview ?

Portfolio & Gallery Layouts

MyFolio

web layout 28 40 buenas plantillas XHTML gratuitas
Download Page ?
Preview ?

Simolio

web layout 29 40 buenas plantillas XHTML gratuitas
Download Page ?
Preview ?

PhotoBusiness

web layout 30 40 buenas plantillas XHTML gratuitas
Download Page ?
Preview ?

234 Portfolio

web layout 31 40 buenas plantillas XHTML gratuitas
Download Page ?
Preview ?

Touch The Future (HTML 5 And CSS3)

web layout 32 40 buenas plantillas XHTML gratuitas
Download Page ?
Preview ?

Portfolio Site

web layout 33 40 buenas plantillas XHTML gratuitas
Download Page ?
Free CSS template by ChocoTemplates.com”>

Professional Portfolio

web layout 40 40 buenas plantillas XHTML gratuitas
Download Page ?

StudioClick

web layout 34 40 buenas plantillas XHTML gratuitas
Download Page ?
Preview ?

One Page Portfolio (HTML5 and CSS3)

web layout 35 40 buenas plantillas XHTML gratuitas
Download Page ?
Preview ?

Studio 980

web layout 36 40 buenas plantillas XHTML gratuitas
Download Page ?
Preview ?

Classic Luxury

web layout 37 40 buenas plantillas XHTML gratuitas
Download Page ?
Preview ?

Exquisite

web layout 38 40 buenas plantillas XHTML gratuitas
Download Page ?
Preview ?

CV/Resume Templates

Minimalist Resume : A Free Web Template

web layout 44 40 buenas plantillas XHTML gratuitas
Download Page ?
Preview ?

CSS3 CV/Resume Template

web layout 45 40 buenas plantillas XHTML gratuitas
Download Page ?
Preview ?


]]> http://www.creativosonline.org/blog/40-buenas-plantillas-xhtml-gratuitas.html/feed 5 Cuidado con la propiedad z-index (CSS) http://www.creativosonline.org/blog/cuidado-con-la-propiedad-z-index-css.html http://www.creativosonline.org/blog/cuidado-con-la-propiedad-z-index-css.html#comments Thu, 29 Jul 2010 00:59:49 +0000 Carlinhos http://www.creativosonline.org/blog/?p=6865
Es una de mis propiedades favoritas ya que me encanta eso de esconder ciertas partes de los elementos web al superponer otras, pero en ocasiones es una propiedad altamente desesperante por los bugs en los navegadores y por los bugs de nuestra propia cabeza. Es por ello que hay dos consejos básicos cuando utilizamos z-index: [...]]]>

Cuidado con la propiedad z index (CSS)

Es una de mis propiedades favoritas ya que me encanta eso de esconder ciertas partes de los elementos web al superponer otras, pero en ocasiones es una propiedad altamente desesperante por los bugs en los navegadores y por los bugs de nuestra propia cabeza.

Es por ello que hay dos consejos básicos cuando utilizamos z-index:

  1. Intenta definir siempre position:relative, pero si no es posible al menos define una posición, no lo dejes heredado.
  2. Trata de no usar z-index negativos, ya que Firefox (en la versión 3 no lo tengo seguro, en la 2 sí) utiliza z-index:0 para el <body>, así que si pones -1 no se verá tu elemento.

Lo dicho, cuidado y no os desesperéis, lo más seguro es que si no os funciona sea por una tontería.

Enlace | Z-index Test

]]> http://www.creativosonline.org/blog/cuidado-con-la-propiedad-z-index-css.html/feed 1