Encuentra los colores perfectos para tu web

La elección del color es una decisión crucial en el diseño de una web. En ocasiones debemos diseñar la estructura de una web para una empresa que ya tiene establecida su paleta de colores, por lo que no es necesario crearla desde el principio. Pero la mayoría de veces la creación de una web requiere un estudio previo de los colores que se van a utilizar en la web. Es sumamente importante la elección de estos colores, IMPORTANTÏSIMO. Al igual que una buena estructuracion de la página. Afortunadamente en la red existen cientos de manuales y estudios sobre la teoría del color y hacernos con unos mínimos conocimientos no nos va a ser demasiado dificil.
El problema es poner esos conociemientos en prática.
Pero no partismos de cero, ahi fuera en la red tenemos miles de ejemplos de grandes proyectos, inspiración de css, etc que nos van a ayudar a la hora de tomar una correcta elección del color.
Siempre lo diré, la vida de un diseñador se basa en buena parte de sus hora en navegar por la red y abrirse una luz entre los miles y miles de diseños que va encontrando.
A continuación una serie de links interesantisimos sobre el mundo del diseño y del color.

Articulos:

• Color Psychology in Online Marketing
• Color Theory from Wikipedia
• Color Theory
• Color Meanings
• The Meaning of Colours
• Why Color Matters
• See Color Theory In Action

Selección del color:

• Choosing the Right Colors for Your Website
• Choosing Appropriate Colors for Your Website
• Choosing Colors for Your Website
• Choosing Colors for Your Design
• Website Design: Choosing the Right Colors for Your Website
• Choosing Colors for Your Website
• Learning to Use Color On Your Website
• Choosing Color Combinations
• Find Out What Colors Will Cause Your Visitors to Hate You

Herramientas:

• Color Schemer Scheme Gallery (Editor’s Choice) Browse through sample color schemes that have been submitted by users.
• COLOURlovers - sample color combinations
• Kuler from Adobe
• Daily Color Scheme
• Colr.org
• Color Combos
• Top Color Combinations in Web Design
• Color Schemes
• ColorBurn Winners

• Website Color Picker (Editor’s Choice) A simple tool that lets you quickly choose background color, text color and link color for a sample page
• Color Schemer Online
• ColorJack Sphere
• EasyRGB - Color harmonies, complements, and themes
• ColorBlender
• Steel Dolphin Color Scheme Tool
• Color Hunter
• Color Mix

Herramientas para coger los colores utilizados en una web:

• DeGraeve.com Color Palette Generator (Editor’s Choice)
• Color Palette Generator
• What’s Its Color
• Palette Generator

Otras herramientas:

• I Like Your Colors (Editor’s Choice) If you like the color’s of a particular website, enter the URL and you will get the html numbers for the colors that are used on that page.
• Color Blender
• Web-Smart Palette
• 100 Random Colors
• Multiple Color Tools from Limov.com
• Find the Average Color of a Photograph

Fuente: http://vandelaydesign.com/blog/design/find-the-perfect-colors-for-your-website/

Video-seminarios de Adobe

Me ha quedado bien la palabra video-seminarios. Así es.

La palabra seminario suena a algo muy profesional. Bueno la verdad que estos no lo son tanto.
Algunos de los videos si que son muy interesantes, todos sobre software adobe para tecnologias web.

Enlace: http://trucosyconsejos.com/

Maquetacion CSS on Speed

No tengo más palabras que esta: ESPECTACULAR.

Ganarse la vida en la web

Quiero exponer mis pensamientos referentes a un tema muy interesante en la web. El tema lucrativo. Ahora al final del post pondré los enlaces a un curso de videotutoriales interesantisimo, la verdad que muy interesante sobre "tips and tricks" de photoshop orientado al diseño de interfaces web.
De ahí viene mi reflexión. El CRACK que vende este curso se merece todo mis respetos, me sabe muy mal no comprarle el curso y buscar por la red. Y muchas otras personas que lo hacen. Está muy bien la verdad. Y seguro que les sale rentable.
Sin intención de predicar ni aconsejar quiero exponer mi posición referente a esto.
He encontrado su web de casualidad, he visto un curso de videos que a mi modo de ver me parecen sensacionales, he visto su precio y no lo he comprado. Antes he pensado navegar por la red y buscarlo en descarga directa (DD) por shareminer. La verdad que lo he encontrado bastante rapidamente. Que pasa ahora? Pues que no creo que me pase a menudo por la web de esta persona, quizás lo haga para ver si ha sacado otro curso e intentar encontralo en DD. En vez de venderlo, seguramente hubiera sido mejor para el, el crear un pequeño portal o blog donde subiera sus videos, incorporara publicidad y así poco a poco irse haciendo un hueco en la red. Seguramente mi instancia en dicha web sería muchisimo más larga si pudiese ver los videos directamente desde ahí, y además sería mas habitual ya que diariamente revisaría su RSS para ver si ha habido alguna novedad. Estoy seguro de que la página hubiera sido mucho más importante.
Me quedo aqui, ya no digo nada más y a acontinuación paso a detallar la web y los preciados links de descargas del curso que vende.

La web es: http://expression.com.do/dvd/

Enlaces de descarga directa del curso:

http://rapidshare.com/files/123220586/E-DPCS3A.By.Eduman.part01.rar
http://rapidshare.com/files/122304572/E-DPCS3A.By.Eduman.part02.rar
http://rapidshare.com/files/122318258/E-DPCS3A.By.Eduman.part03.rar
http://rapidshare.com/files/122336794/E-DPCS3A.By.Eduman.part04.rar
http://rapidshare.com/files/122357982/E-DPCS3A.By.Eduman.part05.rar
http://rapidshare.com/files/122383074/E-DPCS3A.By.Eduman.part06.rar
http://rapidshare.com/files/122408111/E-DPCS3A.By.Eduman.part07.rar
http://rapidshare.com/files/122432947/E-DPCS3A.By.Eduman.part08.rar
http://rapidshare.com/files/122462488/E-DPCS3A.By.Eduman.part09.rar
http://rapidshare.com/files/122488831/E-DPCS3A.By.Eduman.part10.rar
http://rapidshare.com/files/122506852/E-DPCS3A.By.Eduman.part11.rar
http://rapidshare.com/files/122522989/E-DPCS3A.By.Eduman.part12.rar
http://rapidshare.com/files/122535990/E-DPCS3A.By.Eduman.part13.rar
http://rapidshare.com/files/122550550/E-DPCS3A.By.Eduman.part14.rar
http://rapidshare.com/files/122569202/E-DPCS3A.By.Eduman.part15.rar
http://rapidshare.com/files/122592300/E-DPCS3A.By.Eduman.part16.rar
http://rapidshare.com/files/122617388/E-DPCS3A.By.Eduman.part17.rar
http://rapidshare.com/files/122642944/E-DPCS3A.By.Eduman.part18.rar
http://rapidshare.com/files/122668902/E-DPCS3A.By.Eduman.part19.rar
http://rapidshare.com/files/122668902/E-DPCS3A.By.Eduman.part19.rar
http://rapidshare.com/files/122694295/E-DPCS3A.By.Eduman.part20.rar
http://rapidshare.com/files/122718352/E-DPCS3A.By.Eduman.part21.rar
http://rapidshare.com/files/122737023/E-DPCS3A.By.Eduman.part22.rar

Manual Mootools

Doy por sentado que se conoce Mootools, un framework de javascript creado por expertos del lenguaje y que ayuda muchisimo en la creación de efectos web.2.0 de la actualidad.
Actualmente el mejor manual a parte del libro Mootools Essentials de la editorial Apress es este que os presento aqui: http://www.mootorial.com/wiki/ en inglés.

Además de conocer y saber crear scripts y aplicaciones en javascript es esencial hoy en día conocer los diferentes tipos de frameworks, trabajar con ellos y saber profundamente lo que te permiten hacer cada uno de ellos. Una vez sabido esto y experimentado estaremos en disposición de escoger el framework para nuestro proyecto web.

Maquetación CSS e interface web

Buenísimo articulo en inglés que explica como abarcar las etapas que engloban el diseño de una interface web de nivel profesional. No explica como enmaquetar con HTML y CSS pero si da consejos varios sobre el diseño de una interface. Articulo para guardar.

Articulo: http://www.digital-web.com/articles/redesigning_the_expressionengine_site/

Otro enlace interesante aunque bastante antiguo es a la web de Tallerwebmaster donde publicaron hace años un capitulo completo de como realizar un sencillo pero compacto diseño de una interface web para posteriormente maquetarla con DreamWeaver y FrontPage. Explica el sencillo y antiguo modo de maquetación con tablas. Algo pasado de moda en la actualidad.
Pasado de moda porque actualmente se maqueta con divs y classes, mecanismo que ofrece muchisimas ventajas. pero ahi teneis esa reliquia.

Enlace: http://www.tallerwebmaster.com/Tutorial-Disenio-Web-con-Adobe-Photoshop-CS3-c-96.html

En el siguiente articulo o conjunto de capitulos mejor dicho (en inglés). Alejandro Gervasio explica detalladamente el proceso de maquetación de una simple web.

Enlace: http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/

*A pesar de tantos articulos, no me acaba de quedar claro como se le puede facilitar el trabajo al maquetador web. Ya que es bastante complejo aun teniendo experiencia con el lenguaje CSS. Los navegadores no responden de igual forma a tus instrucciones.

..sigo buscando la manera...

Desarrollo de un buen encabezado y pie de página para tus sitios web

Para un desarrollador siempre es imprescindible un encabezado y pie de página que garantice la armonía visual del diseño, una navegación cómoda para los usuarios y muestre con pocas palabras el tema principal de nuestro sitio.

Tablas vs CSS

Recuerdo mis inicios en la programación web cuando para colocar el encabezado y pié de página en nuestros sitios se lograba con una tabla de una columna y tres filas. Hoy en día las hojas de estilo, CSS (por sus siglas en inglés de Cascading Style Sheets) y el javascript han tomado gran auge gracias a las maravillas que se pueden lograr combinándolos en nuestras aplicaciones.

Un encabezado y pié de página implementados con CSS resultan muy prácticos, de este modo no es recomendable ni necesario usar tablas en nuestros sitios. Si los diseñamos completamente utilizando hojas de estilo será más manejable desde el punto de vista del diseño, ya que con sólo hacer algunas modificaciones en nuestro archivo de estilos nuestra web podrá quedar rediseñada completamente.

Esto es muy útil para la tarea de renovar el diseño y que debemos practicar cada cierto tiempo para lograr que nuestro sitio se mantenga acorde a las últimas tendencias de desarrollo y siempre disponga de un diseño fresco y renovado. Un ejemplo de esto son algunos gestores de contenido como Joomla, Drupal y Blogger que implementan plantillas y para cambiarlas sólo es necesario modificar el archivo de estilo.

Es recomendable validar siempre nuestras hojas de estilo para asegurarnos que nuestro encabezado, pié de página y nuestra web en general tendrá un aspecto similar en los navegadores más populares.

El pié de página siempre abajo

Uno de los problemas más comunes a la hora de desarrollar el pié de página de nuestro sitio es que no se comporta como tal, es decir, sube cuando el contenido de la página es poco, no se mantiene al final de la página y vemos un molesto espacio en blanco luego de nuestro pié de página.

Para este problema hay varias soluciones, quizás la más sencilla sea siempre llenar las páginas con suficiente contenido para que esto no suceda, pero el problema está en que generalmente quienes desarrollamos el sitio no somos las mismas personas que insertan el contenido, porque hacemos webs por encargo o por cualquier otro motivo. En tal caso lo ideal sería buscarle al problema una solución definitiva.

Algunos desarrolladores prefieren colocar un pié de página flotante que se siempre permanezca pegado al borde inferior del navegador, pero esto a veces es un poco molesto ya que perdemos una parte del área de la página en la que siempre se deberá mostrar el pié de página. Otros, en los que me incluyo, preferimos rompernos la cabeza con el código hasta lograr que el pié de página siempre sea el final de nuestra página y no aparezca un espacio en blanco al final de ésta.

Ryan Fait, un diseñador Web se tomó este trabajo y ha publicado en su sitio un pié de página al que él le llamó Sticky Footer (Pié de Página Pegajoso) que se adhiere al borde inferior del navegador incluso si el contenido es poco. Lo encuentro bastante útil y completo, ya que es compatible con los navegadores más populares: Firefox, Internet Explorer, Opera y Safari; además que el autor nos aclara que el código no tiene términos, licencias, es completamente gratis y puede ser utilizado por cualquiera que lo desee.

Publicidad, la necesaria

El diseño de un buen encabezado debe contener un banner como mucho, si llenamos nuestros encabezados y pié de publicidad opacaremos el nombre, slogan y logo de nuestro sitio, romperemos la estética y armonía del sitio logrando con esto que el usuario no se sienta a gusto en nuestra web y abandone el sitio.

Limpieza y sencillez

Un buen diseño de encabezado debe contener un logo, el nombre de nuestra web que será el que nos identifica y con éste el usuario debe de tener una idea de qué tipo de contenido tenemos publicado en ella. Si nuestro sitio representa una empresa debemos poner el slogan publicitario de ella.

Además, la inclusión de muchos efectos dinámicos como películas flash puede hacer que la página cargue con lentitud. Los encabezados cargados de efectos y animaciones resultan al usuario muy densos, molestos y rebosantes. También es importante tener en cuenta que nuestro encabezado y pié de página mantenga la armonía de diseño con el resto del sitio. Utilizando los mismos colores, el mismo tipo de letra y tamaños proporcionales en la fuente.

Generalmente los visitantes entran a nuestra web en busca de algún tipo de información y dedican para ello pocos minutos, si no encuentran lo que buscan abandonarán nuestra web y perderemos con ello un futuro visitante. Es por esto que si decidimos colocar en nuestro encabezado un menú horizontal debemos organizar los elementos por temas o categorías, ayudando a una fácil navegación.

En ocasiones tenemos en el pié de página cosas que en realidad no son útiles, como varios botones RSS o elementos que se repiten en el menú lateral de la página. Es importante mantener el encabezado y pié de página limpio de imágenes y vínculos innecesarios.

Fuente: http://www.maestrosdelweb.com/editorial/desarrollo-de-un-buen-encabezado-y-pie-de-pagina-para-tus-sitios-web/

Autor: Reynier Matos Padilla

Construir formularios con css puro

Todos los diseñadores y maquetadores que sienten admiración y devoción por el css no les gusta utilizar nada de tablas. Pero a la hora de diseñar formularios web las tablas son fantasticas aunque no nos guste utilizarlas. A continuación voy a exponer un ejemplo de como realizar un formulario con puro css, sin nada de tablas. aunque a mi me gusta utilizar las tablas.

Crea un archivo index.html y pega el siguiente código:

<div id="stylized" class="myform">
<form id="form" name="form" method="post" action="index.html">
<h1>Sign-up form</h1>
<p>This is the basic look of my form without table</p>

<label>Name
<span class="small">Add your name</span>
</label>
<input type="text" name="name" id="name" />

<label>Email
<span class="small">Add a valid address</span>
</label>
<input type="text" name="email" id="email" />

<label>Password
<span class="small">Min. size 6 chars</span>
</label>
<input type="text" name="password" id="password" />

<button type="submit">Sign-up</button>
<div class="spacer"></div>

</form>
</div>

A continuación el código CSS:

<style type="txt/css">
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.myform{
margin:0 auto;
width:400px;
padding:14px;
}

/* ----------- stylized ----------- */
#stylized{
border:solid 2px #b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#stylized button{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#666666 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}
</style>

Fuente: http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html

Efectos simples de programar con jQuery

Una vez te descargas la librería jQuery y la llamas desde tu archivo html puedes hacer multitud de efectos interesantisimos con 4 lineas de código. Para ello recomiendo ver las demos que encontrarás en esta página e inspeccionar el código para ver como realizar tales efectos.

fuente: http://docs.jquery.com/Effects

Menu Acordeon con jQuery

El efecto visual que conseguimos con las librerias más vanguardistas de JavaScript es realmente sorprendente. Puede parecer que estamos inmersos en un archivo .swf. La verdad es que simplemente es código javascript. Código que aporta multitud de funcionalidades que podemos implementar en nuestros proyectos.
Con jQuery se pueden hacer cosas como esta. Un menú que se cierra y que se expande. Efecto acordeon. Muy interesante.

La librería que utiliza es ininteligible. No te esfuerces en entenderla. Para eso busca jQuery en google y podrás informarte y aprender a través de cientos de tutoriales.

Fuente: http://www.dezinerfolio.com/2007/07/19/simple-javascript-accordions/

Calendario con PHP, Javascript (Ajax)

Implementar hoy dia un calendario en un proyecto web es algo muy habitual. En este articulo hay una explicación (en inglés) de como crear un calendario de este tipo. Puedes descargarte el código e implementarlo en tu proyecto de una forma muy sencilla. Pero recominedo leerse el articulo porque vale la pena.

Fuente: http://evolt.org/node/60673

30 tutoriales - Creacion menus con css

En www.cssjuice.com encuentro 30 tutoriales sobre la creacion de menus horizontales muy variados en css y algunos con ayuda de javascript.

enlace: http://www.cssjuice.com/30-free-css-based-navigation-menus/

Diseño interface web con photoshop

Aplicacion para multiples Internet Explorer

La compatibilidad de nuestras aplicaciones web con todos los navegadores es muy complicada. Pero es algo esencial si quieres que tu aplicacion llegue al máximo número de personas. Debes probar tu aplicación en todos los navegadores posibles.
MultipleIE es una aplicación que te instala InternetExplorer3, 4, 5 y 6; así de esta manera podras probar tu web en casi todos los internet explorer.

Descarga:
http://www.4shared.com/file/57864277/e26d850f/multiple-ie-setup.html

Maquetacion background con 3 imagenes

Orientacion al diseño

60 tutoriales, tips y técnicas para Illustrator + Bonus

En http://www.diegomattei.com.ar encuentro este fabuloso enlace sobre tutoriales de ilustrator. fantasticos la verdad. Una buena forma de empezar a entender y a utilizar este programa.

http://www.noupe.com/tutorial/vector-illustration-60-illustrator-tutorials-tips-and-best-practices.html