Si acabas de entrar al mundillo del desarrollo web, y estás perdido (rediseñaste miles de veces tu website), o simplemente entraste a trabajar y te has dado cuenta que todo cambia, esta guÃa te va a contar prácticamente todos los puntos necesarios que debes pensar a la hora de desarrollar un website.
Viene de la Parte I
Que tu sitio sea legible
Una vez que uses tipografÃas aptas para websites, otra cosa importante es el tamaño de las mismas, la medida mÃnima para una buena lectura sin que canse la vista es una tipografÃa sans serif (por ejemplo Verdana), y el tamaño óptimo y mÃnimo es 11px (pixeles), ése es el mÃnimo. Cuanto más grandes, más fáciles de leer. * Recuerda usar contraste de colores en tu página para una mejor lectura.
Como segundo consejo, te recomiendo que experimentes por tu cuenta, modifica una página donde haya texto para leer, y intenta cambiar las tipografÃas, fÃjate cual de todas queda más apta para el diseño de tu página y también que te resulte cómoda para leer, pero ¡ójo! que tu puedas leerlo a la perfección no significa que a otros les cueste por eso otra recomendación: Pregúntale a amigos, familiares que naveguen tu sitio y te cuenten su experiencia, si les cuesta leer, si los colores le cansan la vista o son molesto, todo esa información que recopiles ayudará a que puedas hacer un sitio más general para todos.
Diseña para pantallas 640×480
Esto es todo un tema, si habrás notado, muchas páginas tienen escrito una famosa frase la cual reconocemos como “esta página esta hecha para resoluciones…”, esto es un error grave, asumir que la otra persona tiene la computadora con una placa de vÃdeo que le permita ver en resoluciones altas como por ejemplo 1024×768, ó 800×600, está mal. No todo el mundo posee el mismo equipo que tú posees, hay gente, como es mi caso, que usa diariamente una configuración alta como por ejemplo 1600×1200, pero hay gente que tiene una tremenda PC o Mac y no sabe cambiar la resolución de pantalla, entonces cuando entre a tu sitio quizás aparezcan barras de desplazamiento o “Scrollbars”, esto le quitará prolijidad.
Mucha gente no puede trabajar, leer o hacer determinadas tareas en resoluciones altas, es por eso que trabaja en 640×480, ó 800×600.
Según varias consultoras, hay un predominio de más del 70% de la gente que usa monitores con 800×600 como resolución, igualmente asà ¿DejarÃas al gran resto fuera de poder ver tu página bien prolija? No.
Por eso una solución es armar la página para tamaños de 640×480 harán posibles que tu website sea visto bien en todos los tamaños.
Una solución adicional es diseñar el layout lÃquido, ¡woa!… qué nombre ;-)… un layout lÃquido es una página que se ajusta a cualquier tamaño. Esto está hecho con algunas modificaciones de HTML. Un buen ejemplo es http://www.amazon.com/, su diseño se ajusta a varios tamaños sin perder la prolijidad, ni tener que hacer varias versiones del sitio para varios tamaños.
Mantener el sitio
Un sitio bien mantenido es un placer volverlo a visitar, imagino que vos querés que la gente visite tu página. Para eso debes mantenerla, actualizando la información.
Como primer consejo para que no te aburras en la primera semana, cambia el contenido cada 1 o 2 semanas, luego cuando veas que tu página entra mucha gente por dÃa, actualÃzala cada 1 semana, y asà hasta que llegue un ritmo de actualizar en determinada hora.
Examina tu website
Examina tu website periódicamente, en busca de errores. Puedes mirar tu website en diferentes navegadores, buscar las diferencias entre ellos y elegir un método para que cuando arregles los errores, sea observar bien en ambos browsers.
Chequea la ortografÃa de tu sitio
Esto es algo importante… ya que cuantos menos errores ortográficos haya, más profesional quedará tu página. Es cuestión de revisar los textos con algún corrector ortográfico. Hat trick: si tienes Microsoft Word o algún otro Procesador de textos, podéis modificar todos los errores antes de volcar el texto en tu página.
Hahah, podrá sonar irónico pero en este artÃculo hay muchos errores ortográficos, es por eso que si encuentras uno puedes enviarme el error y lo corregiré con todo gusto.
En la lista se pueden agregar más pero solamente quiero poner las más conocidas, igualmente puedes leer tutoriales sobre tipografÃa en para websites en este mismo sitio.
Evita usar “página en construcción”
Crea una sensación parecida a los dead links (links muertos), si tu sitio tiene muchas páginas con ese tÃpico mensaje, te recomiendo preferiblemente que retires los links por los que se accede a esas páginas. Es preferible tener menos secciones, pero que estén libres de esos mensajes.
Mantén tus datos en el tiempo
Cuando escribas anuncios sobre eventos que van a ser mostrados en un tu página asegúrate de quitar toda la información una vez pasada dicha fecha.
Pequeños tips de HTML
Es hora de revisar algunos tips de HTML para que tu página esté bien hecha. Esto no es un tutorial de HTML… quizás necesites comprarte un libro o aprender HTML desde algún sitio, la mayorÃa están en inglés pero yo próximamente escribiré un mini-curso de HTML para gente que se inicia en la programación de sitios web.
Aprender a programar páginas a mano
Programar páginas webs a mano (hand-code) escribiendo lÃnea por lÃnea, te asegura tener resultados muy buenos, además te permite aprender más rápido, y cuando ves alguna página que posea cosas que te interesen cuando mires el código lo comprenderás al instante.
Programar a mano influye mucho en como se va a encontrar el código luego: un código limpio de errores, sin código de más. Esto se logra no usando herramientas como Dreamweaver, Frontpage, etc, o sea editor WYSIWYG (What You See Is What You Get), éstos generan código de más, por que se basan en los comandos que vos realizás con el ratón (y eso es sinónimo de que con el Mouse no sois preciso), y en la mayorÃa de los casos uno debe saber como mover el Mouse para que el código quede bien armado.
Utiliza la propiedad alt=”texto” y title=”texto”
Para las imágenes debes agregar una propiedad dentro del tag < img >, la propiedad alt=”texto”, esto es muy importante para que todas tus imágenes en el caso de que no se carguen, puedan saber de que se trata, además es una recomendación y un requerimiento que la W3C advierte.
Para los links existe la propiedad title=”texto”, y esta se escribe dentro del tag < a >, de esta forma informas al usuario que se va a encontrar cuando haga clic en ese link. Si posas el cursor mouse sobre este link podéis ver el texto.
Final del artÃculo
Espero que hayas disfrutado de este artÃculo. Quizás no te haya satisfecho tanto como esperabas pero este artÃculo no fue ideado para enseñar HTML sino para explicar qué cosas son buenas, malas y cual te conviene usar para que tengas una página bien hecha.
Recuerda aprender mucho HTML. Si quieres diseñar tu website sin problemas debes aprender mucho HTML, CSS y a algunos programas gráficos, no todo se aprende en dos dÃas, esto es una disciplina complicada y recordarás lo que digo, en muchos casos sentirás que todo lo que haces lo haces al cohete.
Mil disculpas a si no he sido claro en algunas explicaciones, créanme que enseñar es bastante difÃcil, y mucho más cuando es una nueva tecnologÃa, siempre trato de explicar las cosas lo más didácticamente posible.
Si tienes dudas puedes escribirme y con gusto te responderé.
¡Recuerda que debes seguir estas indicaciones al pie de la letra! Tampoco es el fin del mundo si no puedes realizar alguno de los puntos, pero esmérate en cumplirlos todos, cuantos más puedas cumplir, mejor será la experiencia de navegar tu sitio.
Minid
Minid es el autor de Minid.net un Weblog de tecnologÃa, Diseño, Usabilidad, Arquitectura de la Información, Geeks vs. Nerds. Este artÃculo está publicado con su permiso.
