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.

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.

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.

novedades!

estoy haciendo otra plantilla y ya pueden usar la libreria “posteomax” que ya e subido en la seccion correspondiente.

esta hecha para programadores y bloggers.

luego pienso ampliarlo para anadirle cosas que puedan servirle a disenadores que trabajen con CMS que tengan sistemas de plantillas. ( como joomla o drupal )

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/