Análisis sobre los menús desplegables

pues primero que nada tengo que decir sobre que hablaremos,el tema son los menús desplegables,haré un buen análisis sobre el tema.

Usabilidad:

Ventajas:

-Permite ordenar muchas opciones en un reducido tiempo,es muy recomendable para webs de software,por ejemplo,o para foros.

Desventajas:

-Las opciones no están del todo visible todo el tiempo asique el usuario tendra que buscar y tardara tiempo encontrar las opciones indicadas.

Accesibilidad:

Ventajas:

-ninguna,la verdad.

 

Desventajas:

-El uso de ellos hace que tu web sea innavegable en navegadores sin Javascript o para moviles (solo si usas JS).

-Las personas con deficiencia motora tendrán problemas con tu sitio.

SEO:

Ventajas:

-Toda tu web puede estar ínter-conectada así que junto con un sitemap.xml tendrás todo unido. (el uso de CSS es recomendable).

Desventajas:

-Al usar ciertos detalles con AJAX,el contenido ser no ser indexado por algunos buscadores (aunque se puede usar un buen sitemap.xml y listo).

Limpieza de código:

Ventajas:

-Con un código tabulado y semántico,puedes hacer menús desplegables con código muy limpio y semántico.

Desventajas:

El código puede ser muy largo si necesitamos varias opciones (a que no haz visto un código de uno de 3 niveles).

Validación:

Ventajas:

-ninguna,es en realidad neutral en este tema.

Desventajas:

-Un pequeñísimo descuido puede causar muchísimos errores de validación.

Espero que les sea útil,saludos.

Anuncios

Que DEBERIA saber un diseñador/maquetador web

primero que nada,tengamos claro todo,no es lo mismo un diseñador web a un maquetador web pero en si dejando de lado lo que realizen igual necesitaran unos conocimientos de varios temas.

Entre ellos:

  • usabilidad
  • accesiblidad
  • SEO (aunque tengan un consultor SEO propio,saber SEO aumentara la calidad de los diseños listos antes los bots de los navegadores)
  • redes (toda persona que trabaje con web debe saber que es apache,ISS,Server-side,DNS,FTP,Samba,etc)
  • lenguajes de marcado (HTML,XHTML,XML,SGML,como minimo)
  • lenguaje de hoja de estilos (CSS)
  • Lenguajes de scrips client side (javascript)
  • Lenguajes de server-side (PHP y si lo deseas,asp.net. al menos a nivel basico)
  • Edicion de imagenes (ni hace falta opinar)
  • SVG (es el futuro,se espera que pronto lo usen sistemas como google maps y muchos otros,a diferencia de flash,es 100% indexable,se puede buscar y mucho mas en el)

y bueno,con eso concluyo.

usar variables en el CSS con php

Hola,ahí algo que nos plantea el css3: las variables pero vamos,es aun un boceto que aun no esta listo,el html5 es renderizado por los navegadores modernos,pero el css3 aun no es usable sin hacks ni usar funciones experimentales no standars según el navegador,ninguna maneja el boceto actual completamente,Opera y Internet explorer son los unicos que acepta de manera standart.

 

Yo no soy fanático de IE ni del software privativo pero ahi que apreciar que sus programadores hicieron bien trabajaron para que IE use CSS3 de buena manera,lo de opera también es un logro,ademas opera siempre a sido innovador,aunque aveces innova con cosas inútiles que nunca llegan a ser standart.

cambiemos de tema,como no podremos usar aun las variables CSS3 que para aprovechar esta idea,les propongo usar un poco de PHP,empecemos. Primero enlazamos de manera standart el css pero envés de darle formato CSS al archivo le damos formato PHP:

 

<link rel="stylesheet" href="/css/estilos.php" type="text/css" />

 

ahora hagamos que PHP haga que el resultado sea leído como CSS,de la siguiente manera:

header(“Content-type: text/css; charset: UTF-8”);

ahora,declaremos las variables que usaremos,por ejemplo,yo usare estos:

 

$negro = “#000000”;

y en el CSS,por ejemplo seria:

p {

echo “color: $negro;”

}

a mi quedo el código PHP y CSS así:

header(“Content-type: text/css; charset: UTF-8”);

$negro = “#000000”;

echo “color: $negro;”

y me escribió este código:

color: #000000;

funciona 100%,espero que les sirva,aca algunas cosas que puedes hacer:

  • ahorrar tiempo y automatizar operaciones
  • hacer un sistema de temas para foros,etc.
  • Programar y diseñar menús en la mitad del tiempo.

Espero les allá gustado.

10 tips para tener un codigo (x)html limpio y legible

  • usa doctypes strict: entre mas estricto sea el doctype mejor,ya que quita elementos innecesarios.
  • no usar tablas para maquetar: no solo es inaccesible y complicado si no usas un editor en modo vista diseño,sino que ademas tardan mas en cargar que los div y te obligan a usar muchas etiquetas con atributos innecesarios aunque intentes darles estilo con css.
  • Auto-sangrado: usar un editor con auto-sangrado ofrece ventajas que hacen mas legible el codigo.
  • nada de “one-lining”: esa tecnica que se usa en la programacion para hacer muchos trabajos en una sola linea,en el html la usan para poner varios elementos y contenidos porque piensan que es mas logico.
  • codigo valido es codigo feliz: escribir codigo valido implica cerrar bien las etiquetas,usar los elementos en el lugar adecuado,etc y ademas vuelve tu sitio mas accesible y da mejor resultados a la hora de cargar la pagina ya que el navegador no gasta tiempo ni recursos en buscar formas de renderizar codigo erroreo,sino que lo hace directamente.
  • evita las divitis: si eres un maquetador web mediamente calificado sabras que es la divitis,por favor,se semantico.
  • K.I.S.S: K.I.S.S son las iniciales de “keep it simple,stupid”,se trata de intentar hacer todo la forma mas simple y por ello la mas eficaz,rapida,correcta  y standart posible.
  • evita comentarios en el (x)html: en el html no es necesario (todavia,aunque con html5 puede ser),solo ocupa mas en la pantalla a la hora de ver el codigo y no sirve para nada,ya que un codigo html semantico con ids y clases adecuadas es legible y obvio.
  • Display table: las tablas ajustan su alto muy facilmente y automaticamente segun el contenido,las div no,asi que para arreglar esto y ahorrarnos muchisimas lineas de codigo,usemos “display: table”.
  • definir lenguajes: en caso de usar en un parrafo o texto un idioma distinto a el de la pag entera,indicalo mediante el atributo lang en el html,asi sera mas legible y accesible.

Saludos,espero que les haya servido

mi regalo para el a;o nuevo

bueno,en la pestana “plantilla gratuitas” esta mi relago,una nueva plantilla,la tercera viene camino,si alguien me ayudara estarian listas en un mes cada una.

Otra cosa,el de a;o nuevo sera mejor todavia,esperenlo.

Snippets y Tags de autocompletado para geany (por mi)

Como sabran me gusta Geany y lo uso profesionalmente,asi que me vi obligado a ayudar en su desarrollo y e hecho una libreria de snippets para HTML/XHTML,XML,CSS,Javascript,PHP muy grande. Ademas,el autocompletado para Javascript lo hicieron y se cayo el servidor asi que busque el codigo fuente y genere mi propio archivo tags (para autocompletado) y lo envie a el equipo de Geany. aca les dejo el archivo RAR para que lo bajen y disfruten de el,otra novedad es que los plug-ins de HTML y XML los meti dentro de los snippets de PHP para ayudar a los desarrolladores y diseñadores aun mas. aca esta el link:

http://www.4shared.com/file/wMeRuZAU/conf_geany.html

lo subi en 4shared porque ahi nunca se borra pero si quieren un mirror diganme.

PD: incluye un paquete para plug-ins pero solo para geany en windows.

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.

50 mejores favicon segun smashing magazine

hace tiempo smashing magazine publico una lista de los 50 mejores favicons de internet:

http://www.smashingmagazine.com/2007/01/31/inspire-yourself-50-remarkable-favicons/

claro,en mi opinion,falta el de mtvla:

http://www.mtvla.com/

bueno,yo por experiencia les digo que con IcoFX y GIMP pueden hacer favicons iguales o mas bonitos todavia 😛

Como convertir notepad++ en todo un IDE para webmasters.

una vez pensemos en un editor para pags web,bajamos notepad++ y en unos momentos convertirlo en un potentisimo editor web.

1-bajamos la ultima version disponible:

http://notepad-plus-plus.org/

2-Activar opción “Autocompletar” (tambien llamada sugerencia de codigo y intellisense) en el menú “Copia de seguridad/Autocompletar”. Utilísima opción. Si está desactivada, la sugerencia de palabras se deberá hacer mediante control -> barra espaciadora. Activárla es mucho más cómodo.

3- activar autocerrado de tags HTML (intelligente):

(menú TextFX > TextFX Settigns> Autoclose XHTML/XML tag)

4-instala zen coding para notepad++:

http://code.google.com/p/zen-coding/downloads/list

5-instalar los siguientes plug-ins (mediante el plug-in manager):

-runme (para ejecutar archivos html con solo apretar shift+F5)
-XML tools (autocompletado,validacion y demas herramientas para XML)
-JSMin (comprime el codigo eliminando todo los espacios,sirve para cualquier lenguaje)
-WebEdit (botones que al pulsalos insertar el codigo correspondiente,muy util)
-Ligth Explorer (mejor que el plug-in Explorer y consume menos memoria y espacio)
-HTML Tags (es muy util,te permite convertir caracteres a entidades HTML y te opciones interesantes para navegar por el codigo html)
-Xbrackets Lite (si bien el TEXTFX de notepad++ trae esta funcion,este plug-in es mas configurable y igual de confiable)

6- en el menu de configurador de estilos elije el tema que mas te guste,yo escogi Zenburn porque es lo mas parecido a tango y los colores molan,ademas tiene fondo negro envez de blanco,asique descanza la vista.

Saludos,ojala les alla servido.

PD: aun con esto,notepad++ no consumira casi nada de ram y pesara solo 15 megas.