SoloCodigo

http://www.isopixel.net/archivos/2004/08/t...o-y-diseno-web/

1. Utilizar imágenes optimizadas. Es decir que pesen pocos kilobytes. Decidir que formato es el idóneo a utilizar. Ya sea GIF, JPG o PNG.

2. Se debe lograr un equilibrio entre imagen e información, no es conveniente saturar el sitio con peso extra de imágenes que no aportan demasiado al objetivo del mismo.

3. Condensar la información y jerarquizarla. Es distinto un impreso de la página web, donde la lectura en bloques grandes y largas líneas se dificulta.

4. Utilizar buenos contrastes en el diseño. Fondo claro contra texto oscuro o viceversa.

5. Si el sitio posteriormente va a ser desarrollado o retomado por terceros, es conveniente hacer comentarios dentro del código HTML para una mejor ubicación de elementos.

6. En el mismo tenor que el punto anterior, docuemnta en lo posible el desarrollo y evolución del sitio. Manejo de los CSS, estructura del sitio, etc.

7. Conviene usar etiquetas META o Meta Tags, ya que algunos buscadores suelen utilizarlas para ponderar sus búsquedas. Así mismo ofrecen información extra acerca del sitio.

8. Dosificar el uso de Flash e incluirlo solo donde sea indispensable. Algunos navegadores requieren actualizar o descargar la aplicación para ver este tipo de archivos. Actualmente es posible realizar sitios dinámicos e interesantes con CSS y XHML.

9. Si se usa Flash, es conveniente salvar la película para versiones anteriores del visor Flash Player para evitar incompatibilidades y que el usuario no tenga instalada la última versión del visor.

10. Evitar el uso de Frames salvo que sea estrictamente necesario. Generalmente es posible hallar una alternativa al uso de esta tecnología HTML. El uso de Frames conflictua un poco al usuario y en ocasiones le imposibilita de poder guardar en favoritos algún tipo de información que le interese.

11. Evita colores muy brillantes, tanto en el fondo de las páginas como en el texto.

12. Dentro de la maquetación HTML el programa Dreamweaver es uno de los estándares de la industria. Además de ser eficiente, respetar el código, permite automatizar diversas tareas.

13. Para el manejo de gráficos Photoshop es la herramienta indicada para eficientar y editar imágenes.

14. Procura que la información no se extienda demasiado hacia abajo, el usuario suele leer la información que esta en la primera pantalla del navegador.

15. La información relevante, menues, promociones, noticias, etc. deben estar siempre a la mano del usuario.

16. No dejes caminos sin salida. Proporciona siempre a tu usuario una manera fácil e intuitiva de navegar en tu sitio. No lo lleves 2 0 3 niveles dentro del sitio y de pronto no encuentre una manera de regresar a las opciones principales. (evita el uso del botón regresar del navegador (back).

17. Siempre que sea posible, es conveniente probar y visualizar los sitios web en diferentes navegadores y, sistemas operativos y resoluciones de pantalla. Esto con la finalidad de descubrir posibles fallos antes de la publicación final.

18. Piensa en el usuario siempre, no en la estructura de la empresa. El personal generalmente ya conoce como funciona su compañía, no así el usuario que viene de fuera. Pon la información relevante a la mano, y la estructura orgánica colócala en el apartado “Acerca de”

19. Es recomendable diseñar bocetos y prototipos del sitio antes de implementarlo en HTML., de este modo es más factible hacer correcciones e ir haciendo mejoras o modificaciones. Photoshop y Dreamweaver son excelentes herramientas que pueden ayudar en estas funciones.

http://www.isopixel.net/archivos/2004/08/t...o-y-diseno-web/

http://www.w3.org/TR/REC-html40/struct/global.html#h-7.4.4.2

Las etiquetas meta son utilizadas por robots de busqueda como google, para buscar acerca de tu sitio, mas se basa en la etiqueta meta Description y Keywords, en la primera etiqueta das una descripcion de tu sitio y en la segunda, las palabras clave con las que podras ser buscado

¿ahora donde las aplicas?, pues justamente al inicio de tu sitio

Cita de: "ArKaNtOs"

5. Si el sitio posteriormente va a ser desarrollado o retomado por terceros, es conveniente hacer comentarios dentro del código HTML para una mejor ubicación de elementos.

¿Eh? HTML no es C++ ni PHP ni ningún lenguaje de programación como para tener que comentar los "bloques de código".

NUNCA vi una página en HTML comentada.

Se puede hacer con las etiquetas '<!-- !-->'

Citar

17. Siempre que sea posible, es conveniente probar y visualizar los sitios web en diferentes navegadores y, sistemas operativos y resoluciones de pantalla. Esto con la finalidad de descubrir posibles fallos antes de la publicación final.

Se nota que el que escribió esto no tiene idea de nada.

Vas a instalar Internet Explorer, Firefox, Opera, Safari, Windows, Mac, GNU/Linux, Solaris, *BSD y vas a cambiar a 800x600, 1024x768 y 1200x1024 solamente para que tu web se vea bien.  

¿No es más fácil usar XHTML y CSS apegado a los estándares?

Eso es verdad hay archivos png transparentes que se pueden ver bien en Firefox y en la chucha del IE no funciona y se ve una imágen en blanco.

Se puede hacer con las etiquetas '<!-- !-->'

Ya se, pero me refiero a que nadie lo hace, no es el lugar ni lenguaje adecuado para hacerlo.

Eso es verdad hay archivos png transparentes que se pueden ver bien en Firefox y en la chucha del IE no funciona y se ve una imágen en blanco.

Tienes que agregar por allí un script de Alpha y listo.

no se si leiste donde dice siempre que sea posible, ahora si es valido esto porque no todos los sitios se ven igual en un navegador que otro.

ejem si tu usas la etiqueta BLINK y la pruebas en tu firefox o en NETSCAPE va a funcionar si te vas a explorer nop

otro ejemplo si usas marquesinas (no son parte del estandar de W3C) van a verse bien en Explorer pero en firefox no se veran bien o fallar cuando utilizas mouseover y mouseout

Por eso dije...

¿No es más fácil usar XHTML y CSS apegado a los estándares?.

1. Utilizar imágenes optimizadas. Es decir que pesen pocos kilobytes. Decidir que formato es el idóneo a utilizar. Ya sea GIF, JPG o PNG.

PNG LIVIANO?? JPG TE CREO. GIF TAMBIEN .PERO PNG??

TA BIEN NO ES UN BMP NI UN TIF PERO NO ES LIVIANO.

13. Para el manejo de gráficos Photoshop es la herramienta indicada para eficientar y editar imágenes.

LA VERDAD RECOMIENDO EL FIREWORKS. NO ES TAN POTENTE COMO EL PHOTO SHOP PERO ES MAS LIVIANO DE CORRER, MAS FACIL DE TRABAJAR Y AL FIN Y AL CABO ESTA HACO PARA EDICION DE IMAGENES WEB.

NADA MAS.

BUEN POST. UTIL PARA GENTE COMO NOSOTROS QUE COMO DISEÑADORES SOMOS MUY BUENOS PROGRAMADORES   .

BYTES GUYS

hola, soy nuevo por aca
sobre el tema de los divs vs las tablas, me parece q no es cuestion de que se puede hacer con una cosa y q con otra. el tema es q la forma mas "correcta" de hacer las cosas es con divs, salvo que se desean mostrar datos tabulares
el codigo queda mas corto (lo que facilita las busquedas de, por ejemplo, el google, y te posiciona mejor tus sitios) y mas facil de mantener. sobretodo se mantenes una buena hoja de estilos
por otro lado, or ahora lo q me quedo mas comodo es probar todo sobre el firefox y cuando queda como yo quiero, le pongo los conocidos parches para que ande en el IE.
por ejemplo, quiero una propiedad para un div de id="coso", entonces le pongo la propiedad como siempre, y despues, para el caso de IE pongo
* html #coso{la propiedad}
igual si haces las cosas mas o menos bien son muy pocas las veces en q tenes q hacer esto
un buen sitio q muestra buenas practicas sobre esto, y esta en español, es:
http://www.estadobeta.com
bueno, para ser mi primer mensaje, bastante largo no?