Eligiendo los colores para tu diseño

esto es siempre un problema,así que…

hay que tener en cuenta 4 variables:

1- tener el cuenta en cuenta el “target”: esto es básico en el marketing y el diseño,ahí que buscar los posibles tipos de visitantes van a visitar la pagina ahí varios tipos de visitantes,que son:

-los niños: visitan para entretenerse,jugar o por solo mover el mouse,dales un aspecto bonito y simple de navegar ademas de usar un lenguaje claro.

-los estudiantes: estos buscan imformacion accesible y una navegación rápida,dale los que quieren,es fácil,un buen ejemplo es la wikipedia.

-profesionales: esto engloba a los que a los que ya desempeñan cierta actividad profesional ya sea el diseño,la arquitectura,la construcción,etc.

-Los ciudadanos: esta es mas general,se trata de un sitio para los ciudadanos como los del gobierno o los de política.

-los veteranos: personas mayores,necesitan una interfaz simple y alto contraste entre texto y fondo.

2- Elegir colores apropiados para la actividad: crucial,no tengo mucho que decir,tendran como ejemplo imformacion mas abajo.

3- No utilizar demasiados colores: al menos no para fondos y texto,pero,las imagenes,siente libre de usar los colores que quieras.

4- debe ser legible: obvio.

Ahora, cortesía de http://www.infoeditores.com/ aca les traigo una lista de varios colores con sus significados:

Rojo: acción, energía, fuerza, pasión, fuego, calor, energía, ambición. Un color masculino fuerte. El rojo es un buen color para llamar a la acción. El rojo es entusiasmo, y calor. El color de rosa es una versión suave del rojo y es el más asociado con el romance, pero es un color femenino.

Azul: confianza, trascendencia, libertad, verdad, profesionalismo, abundancia y energía. También tranquilidad, confiabilidad, aceptación, paciencia, comprensión, cooperación, comodidad, lealtad y seguridad. Es uno de los colores que calman y se asocia al cielo y el mar, la inteligencia y la confianza. El azul también se ha asociado a la supresión del apetito, así que no sería bueno para los libros de cocina o recetas, pero puede utilizarlo para las actividades o productos asociados a dietas.

Verde: dinero, abundancia, prosperidad, calma, salud, alimento, naturaleza, esperanza, crecimiento, frescura, el compartir, y la sensibilidad. El verde simboliza la renovación y la fertilidad.

Anaranjado (naranja): salud y vitalidad, otoño, juventud, fuego cálido, valor, confianza, amistad, calor, entusiasmo y energía estimulante. Se ha asociado a la estimulación del apetito. Vibrante y caliente, el color naranja se asocia al otoño y a la tierra.

Amarillo: luz, pureza, comprensión, precaución, brillo, inteligencia, alegría, organización, actividad. El amarillo representa a menudo al sol, el calor y la luz, la energía y la felicidad.

Púrpura: dignidad, sofisticación, creatividad, espiritualidad y misterio. El morado oscuro se asocia a los derechos y a la riqueza, mientras que la lavanda se asocia a romance y a nostalgia.

Marrón: credibilidad, estabilidad, el hogar, la tierra, la madera, la comodidad y la fuerza. El marrón se puede utilizar como un color neutro o color caliente, se adapta al contexto (Por ejemplo las aberturas de madera no solo quedan bien en su color natural, sino que son casi un toque obligado en el diseño).

Negro: espacio, noche, autoridad, dramático, confiado, seriedad, energía y dureza, elegancia, y sofisticación.

Blanco: pureza, paz, perfección, frescura, facilidad, limpieza, calidad y espiritualidad. El blanco representa la vida y la unión en la cultura occidental tradicional, pero representa muerte y dolor en culturas orientales.

Gris: un color conservador, simboliza la seguridad, madurez y confiabilidad.

Recuerden,también pueden usar un color que represente el producto que tratan de dar.

Espero que les sirva.

Integrar GIMP a Kompozer

logo de kompozer

Algo que el software libre para diseño gráfico y web siempre a envidiado a los propiedades (Microsoft Expression,Suite Adobe,Corel Graphic Suite) es la integración con el resto de los productos de las suite.

Ahora si bien yo en mi Post anterior sobre convertir Gráficos y vectores en CYMK con Scribus.

Si bien la suite B.I.G (Blender,Inkscape,GIMP) como le dicen algunos,se integra perfectamente,cosa que pueden comprobar y Scribus y OpenOffice tambien se integran al 100% entre ellos y con la Suite BIG.

Ahora hablaremos sobre como integrar Kompozer y GIMP como si se tratasen de Dreamweaver y Fireworks o Photoshop.

Si bien no me gusta usar programas WYSIWYG pero… Kompozer tiene usos adecuados que ya e mencionado antes.

Asique… Comenzemos.

Abrimos el kompozer y vamos a Herramientas > Preferencias.

https://i2.wp.com/img219.imageshack.us/img219/3929/screen1yr.png

Bien,vamos a la pestaña aplicaciones y seleccionamos la opcion de Editor de Imagenes en la parte de aplicación.

Ok,busquemos el link del ejecutable de GIMP,en mi caso (y en el de la mayoria si usan Windows) es:

C:\Archivos de programa\GIMP-2.0\bin\gimp-2.6.exe

La configuracion les quedara asi:

Ven,ya los mejores Software libres para diseño se integran entre si como las suites privativas.

Saludos.

Diseñando webs en Gimp

yo la verdad tengo una practica en Gimp que es muy poco común en el,pero,MUY común en Photoshop. Se trata de hacer plantillas para web sites desde un editor de imágenes profesional como photoshop o Gimp.

Bueno,buscando por internet sobre diseño web (siempre vale la pena aprender mas) me encontre con 2 tutoriales muy interesantes sobre la misma tecnica de la estoy hablando pero enfocados a GIMP,que sorpresa!. Buena les dejo los links:

http://www.scarfive.com.ar/tutoriales-gimp/sitio-web-estilo-grungy/ (esta explica como hacer un diseño en espefico,no como en general,pero te puedes fijar al menos en como es la técnica,si ya lo haz hecho en photoshop,en GIMP te sera pan comido,fijense que en el diseño que se muestra no se aplican las normas de accesibilidad).

y este:

http://www.tribulinux.com/como-crear-una-barra-navegacion-web-con-gimp.html (este es basico pero es muy util,lo malo es que no enseña a guillotinar la imagen,pero bueno…)

Bueno,el chiste es que,yo para aprender a diseñar plantillas webs con gimp solo tuve que leer un tutorial de photoshop y con los conocimientos que tenia en ese entonces de gimp,que eran,pocos,por no decir nulos,me las ingenie y me fije en el nombre de las funciones y fui probando,en media hora aprendí a hacerlo de manera fluida,aca te doy los pasos:

1- haces el diseño del sitio en GIMP como si se tratase de una imagen,recuerda respetar la legibilidad,la usabilidad,etc. Recuerda dejar un espacio para lo que seria el texto,como ancho recomiendo para los siempre de ancho 960 para que sea en resoluciones de 1024×768 que espacio,esto contribuye al descanzo visual del usuario,recuerda que estas maquetando un sitio,no una imagen o un afiche. aca ahí un tutorial para photoshop,con el te puedes guiar un poco en el uso de esta técnica:

http://www.solophotoshop.com/tutorial/diseno-de-una-pagina-web-con-photoshop-cs-parte-1/284/

2- hacer las lineas guia necesarias,les dire que las opciones para las lineas guias están en la barra de herramientas de GIMP en la sección “imagen”,las opciones para las lineas guia están en la sub-sección “guias” y la opción de guillotinar (partir la imagen en varias según las lineas guia,como en el photoshop) esta donde mis están las opciones de las lineas guia,pero en el sub-seccion “transformar”.

3-cuando se guillotinice la imagen ,cierra las imágenes que categorizaras como “basura” porque al guillotinar por las lineas guias quedan,por decirlo asi,partes que no sirven para nada a la hora se armar el sitio. recuerda guardar las imagenes en una carpeta como es normal cuando diseñas un sitio.

4- armar el sitio con codigo XHTML valido y CSS también valido,también valida el sitio con tawdis. las partes que haz hecho usalas como imagen,normalmente.

Consejos y trucos:

-en gimp,la pagina hazla sin fondo,el fondo lo haces cuando ya estes escribiendo el codigo.

-haz un codigo semantico

-NO USES TABLAS PARA HACER EL DISEÑO.

-cuando hagas el sitio,diseña todo dentro una Container,que contendra todo y a ese container lo centras con CSS de la siguiente manera: poniendole:

position: relative;
margin:0 auto;

-Haz un “reset” del css,añadiendo las siguientes lineas en la hoja de estilos:

* {
margin: 0px;
padding: 0px;
}

-ten en cuenta los consejos que di en este post:

https://josewebmasterlibre.wordpress.com/2010/09/04/consejos-para-disenar-tu-sitio/

los mejores CMS para webs empresariales,foros,blogs,noticias…

si algo hemos aprendido es que los CMS son muy IMPORTANTES en la actualidad,toda empresa quiere su sitio y sin estudiar nada,quieren encargarse de ellos para que?

para sentirse alguien importancia y porque no esta suficientemente ocupado para hacer lo que a el toca y ya…

Eso si,aveces los CMS no son un capricho sino una necesidad,si,olleron bien y la verdad es obvio.

haz intentado hacer un buen blog sin un CMS?? CLARO QUE NO,no es posible o almenos,no para un humano….

bueno,para cada cosa ahi un CMS,claro que aveces el menor no usar uno.

yo personalmente no hago casi ningun proyecto sin un CMS o por lo menos armar todo con includes PHP y dar estilos en CSS (como en todos los proyectos… SIEMPRE USO ARCHIVOS EXTERNOS,nada de style como atributo o como Tag) ya es lo que puedo hacer sin un CMS para ahorrar tiempo.

aca les dire cual en mi opinion es el mejor CMS para cada cosa y analizare cada una,manejando temas como accesibilidad,usabilidad,interfaz,panel de control,consumo de recursos,etc.

Foros: MyBB

Es el mas seguro de todos los foros,es casi inhackeable es mas,con la ayuda de donaciones de los usuarios,cuando es posible,se paga a una empresa Auditora en Seguridad para que Auditase el Codigo fuente de MyBB y corrigiera errores de seguridad y posibles hoyos de ataques.

su apariencia,es mejor que la de vbulletin y phpBB,por mucho,el cms con mejor interfaz que e visto desde que diseño webs,ademas hablando de plug-ins,ahi cientos y cientos de plug-ins para descargar y introducir facilmente en tu foro,es el foro tambien mas ligero que e visto aunque al ponerle muchos plug-ins su peso,obviamente aumenta.

MyBB es el cms para foros con mayor comunidad y soporte en internet,ademas de que tiene las ventaja de ser software libre.

Es mas,la pagina MPSounds que es el repositorio oficial de sonidos,scripts y skins para msn plus usa mybb para
todo,es demasiado personalizable.

aprende mas sobre MyBB en la web del autor:


http://www.mybb.com/

Blogs: WordPress

Bueno,no tiene competencia,nisiquiera tengo que analizarlo,quien no lo conoce?

puedes leer sobre wordpress en el sitio web oficial en español:

http://es.wordpress.org/

Noticias: Cutenews

porque no usar WordPress?,pues Cutenews es mas semantico en noticias.

las noticias son faciles de redactar y son muy configurables,ademas,si quieres darles buen aspecto,distinto a el de lo demas,puedes!.

solo necesitas aprender a editar sus templates,no te asustes,son solo divs con un texto adentro,el texto que esta adentro de los divs de las templates nombra un elemento,es como el echo en PHP,el editor de plantillas incluye las instrucciones,solo debes saber un poco de css y lograras grandes cosas,tambien puedes usar CSS para mejorar el aspecto de las noticias y su presentacion,puedes darles Class (ojo,no uses los ID en las templates) a los divs de la plantilla para mejorar el aspecto y la estructura mediante CSS.

es excelente y es seguro (pero usen una buena clave para entrar al panel de control)

Pueden descargarlo y leer mas sobre el en su sitio web:

http://cutephp.com/

Web empresariales: Joomla!

Joomla! es el original nombre de un sistema de administración de contenidos (CMS), heredero directo de Mambo, que te permite crear y mantener una página web de forma sencilla, al tiempo que ofreces una amplia variedad de funciones y servicios a tus visitas.

Basado en el potente lenguaje de programación PHP, con Joomla! podrás diseñar desde una página web personal hasta la página corporativa de una empresa, con posibilidad de gestionar y configurar tu página cómodamente a través de una interfaz web.

Podrás publicar noticias y contenido multimedia, ofrecer canales RSS, publicar encuestas, así como añadir o eliminar módulos y extensiones con total libertad para adaptarlo a tus gustos y necesidades.

http://www.joomlaspanish.org/

y diganme,para ustedes,cual es el mejor CMS para cada cosa?

Nuevo diseño

El blog hoy estrena nuevo diseño y el fondo a sido transformado a una imagen de 16 colores (4 bits) lo cual reduce el peso pero la calidad es identica.

Plan de estudio

http://www.elwebmaster.com/ es una muy buena web para webmasters que desean estudiar eso,si en el curso de Html usan dreamweaver y en el imágenes usan photoshop,pero bueno.

yo personalmente ,como estoy de vacaciones y sin trabajo,me cree un plan de estudios donde 2 de los dias estudio con los talleres de http://www.elwebmaster.com/:

Lunes -PHP: http://www.elwebmaster.com/talleres/taller-de-php-introduccion

Martes -CSS: http://www.manualdecss.com/ (Ya se css pero ahí que practicar para trabajar mas fluido )

Miercoles -GIMP: http://www.imh.es/dokumentazio-irekia/manuales/curso-de-tratamiento-de-imagenes-con-gimp (lo se usar pero vamos siempre es bueno practicar,además todo lo explican bien,ya voy por la mitad y aprendí una que otra cosa útiles)

Jueves -Fotografia digital: http://www.elwebmaster.com/talleres/taller-de-fotografia-digital-temario (es bueno saber de todo y saber sobre fotografía es muy beneficioso para tu curriculum,es facil y MUY relajante)

Viernes -PHP: http://www.w3schools.com/php/ (despues de relajarse,ahi que cerrar con broche de oro y este tutorial es lo que mas me ayuda con php avanzado)

Sabado -XML: http://www.4shared.com/document/Hz0lOhK0/IntroduccionaXML.html
(subido por mi,pero lo hizo un programador web bastante conocido)

¿que editor web elegir o IDE elegir? Geany VS notepad++ VS Bluefish

esta es una decisión muy MUY importante y acá te dejare una comparación de las principales opciones a tener en cuanta comparando varios aspectos: (soy completamente imparcial)

Facilidad de uso:
Ganador: UN EMPATE notepad++ y bluefish

notepad++ es muy facil de usar,esta hecho para usuarios novatos,usuarios regulares,webmasters y programadores,pero no es tan productivo y rapido de trabajar como geany o VIM.

Funciones:
Ganador: UN EMPATE geany y bluefish

Comodidad al trabajar con HTML:
Ganador: Notepad++

DEMASIADO BUENO PARA HTML.

Comodidad al trabajar con CSS:
Ganador: Geany

el navegador de etiquetas,explorer de archivos,block de notas incorporado y las opcion de buscar en la barra de herramientas sin tener que abrir otra ventana o navegar un menu,lo hacen lo mejor para CSS,ademas de su intellisence,auto-cerrado de signos y su gran cantidad de snippets para ser mucho mas eficiente.

Comodidad para javascript:
Ganador: Bluefish

gracias a sus snippets,intellisense,insertor de etiquetas,auto-cerrado de signos,lo hacen muy productivo.

PHP:

Ganador: Geany

si lo sabes usar tiene docenas de funciones de que facilitan el PHP.

yo personalmente me quedo con Geany,y tu?

Usos adecuados de Kompozer

como sabrás kompozer es un editor WYSIWYG,es decir,es visual y nos genera el codigo HTML y CSS.

Es útil para diseñar sitios web profesionales,validos y accesibles. La pregunta es,me estoy volviendo loco?

NO,mira,kompozer si bien es un editor WYSIWYG y por lo tanto no es una buena practica hacer sitios con el,junto a el tienes un editor que te ayudara a hacer menus con CSS,un asistente para tablas,etc.

aca señalare buenos usos y consejos sobre kompozer:

Haciendo menus con CSS: el usar CSS para los menus y darle dinamismo con las multiples opciones que nos da CSS,es ademas de potente y mas comodo que usar las llamadas “javascript stylesheet” que se usaban en netscape,aunque,aun se usan lineas de comandos de javascript stylesheet para hacer algunos menus. Eso si,CSS con la potencia que nos da a la hora de maquetar y diseñar menus,se vuelve un poco tedioso el hacer menus con CSS si son muy complejos,por eso mismo,un asistente con los menus siempre nos viene bien y kompozer,genera el codigo del menu bastante limpio,asi que hacemos el menu en kompozer y luego copiamos el html y css en el sitio entero,es decir en la pagina web que lo desees,asi mismo te recomiendo que una vez insertado el menu,valides el html y css del sitio y tambien valides con tawdis.


Asistente para tablas:
quien no se rompe la cabeza por las tablas a la hora de presentar datos tabulados,bueno,usa el asistente para tablas de kompozer y haz el mismo proceso de limpiado y de validacion que con el menu,aunque kompozer crea codigo bastante limpio,solo que ahi que quitar los
que tanto les gusta poner y validar por si un warning en el html y bueno,para darle accesibilidad a la tabla.


Procesador de texto:
con su corrector ortográfico puedes usarlo como procesador de texto para remplazar word y el codigo que te genere para el texto lo copias dentro de un

,el codigo que genera kompozer para el texto es valido,solo que no lo mete en un

,pero si lo copìas y lo megas dentro de un

es 100% valido,recuerda SIEMPRE,escoger el doctype que uses en tu sitio para que cierre las etiquetas adecuadamente segun el doctype que uses,yo suelo usar el XHTML 10 Strict,obviamente valido.

y ustedes,que otros usos adecuados creen que tenga kompozer (ademas de hacer paginas enteras,porque como es visual no es apto para webs profesionales).

consejos para diseñar tu sitio

1-Antes de empezar a hacerla en la computadora haz un boceto a lapiz de la pagina de la inicio y corrígelo hasta que tengas planteada la estructura.

2-Antes de desarrollar el contenido debes tener bien claro de qué puedes hablar y de qué no.

3-No te pases con la publicidad, puedes poner, pero no exageres.

4-Pon un enlace en javascript del tipo “Añadir a Favoritos” para que el usuario tenga la opción, sólo con hacer clic, de poner tu página entre las favoritas de su navegador.

5-Piensa en que quiere y/o necesita el usuario para saber que poner y que no poner

6-No abuses del flash, puedes poner un video, un juego e incluso una animación sencilla,pero no hagas un sitio enteramente con Flash o con un desorden de animaciones y sonidos.

7-el javascript es para hacer mas grata e interactivo la navegación en tu sitio, pero no hagas que todo dependa de el y sobre todo, no exageres en su uso.

8-no exageres con el uso de las imagenes imágenes

9-NUNCA uses imágenes en formato BMP,son demasiado pesadas.

10-optimiza tu web para la resolución 1024×768 que es la resolución mas usada a nivel mundial.

11-Evita hacer SPAM.

12-A los usuarios suscritos a tu Newletter o Feed,no les envíes mensajes a cada rato, solo lo resaltante y/o importante.

13-Da a conocer tu pagina agregándola a varios buscadores (no solo a google)

14-el diseño debe ser muy trabajado y muy sencillo ,es decir, debe ser bonito pero simple y que cargue rápido.

15-el texto debe ser interesante y claro,con titulos claros y coherentes pero a la vez atrayentes.

16-el texto no debe ir en una imagen,imagen es imagen y texto es texto.

17-el diseño debe reflejar el tema de la web.

18-Reduce el texto al mínimo, es decir no es conveniente presentar textos muy largos, ya que el usuario no los lee.

19-asegurese que su sitio se visualize correctamente en la gran mayoria de los navegadores,especialmente internet explorer y mozilla firefox y google chrome.

20-tu sitio debe ser validado en tawdis y hera al menos a AA,recomiendo usar validacion a nivel AAA.

21- el codigo debe ser valido segun el validador de la w3c,porque?,porque cuando sale a la luz  nuevo navegador se basa en una normas creadas por la w3c para los navegadores,ademas,es como hacer un edificio circular,no es un standart…

22-utiliza un editor que te ayude y que sea muy productivo y aprenderlo a usar,VIM,si lo sabes usar es tremendamente eficiente y productivo,pero tienes que saber el lenguaje que el usa,los shortcuts,etc. yo uso Geany que es igual de productivo que VIM pero es mas facil de usar (tiene casi las mismas funciones,pero no tiene la gran cantidad de shortcuts que VIM) y es un IDE,no un editor,aunque pienso que se podria ser mas mucho mas productivo con VIM. Eso si,es mas rapido usar Geany por distinto motivos,yo prefiero geany,aunque la gran flexibilidad de vim no se compara.

maquetando un sitio y as button generator – generador de botones para tus web

me encontre con un generador de botones que e usado en un diseño que el estoy haciendo a Daker software (una compañia de software y diseño y programacion web a la que me uní,es nueva).

lo interesante de este diseño es que e usado muchisimo Inkscape y paint,el pobre gimp se debe sentir solo xD.

Bueno,tengo planeado un post todo mostrare los pasos para diseñar y programar un sitio,usando como ejemplo este diseño (el de daker software),lo explicare con el software que yo uso,asi mismo mostrare alternativas para cada programa ( <por desgracia>entre las alternativas pondre las de Adobe </por desgracia> ).