Programación Web y Scripting > HTML

 Buenos Tips Para El Diseño Web

(1/3) > >>

ArKaNtOs:
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/

Bicholey:

--- Cita de: "ArKaNtOs" --- 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.

 
--- Fin de la cita ---
 :P  :P  :P

Me podrias explicar que esto y como lo hago en codigo  ????

ArKaNtOs:
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 :)

x.cyclop:

--- 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.
--- Fin de la cita ---
¿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.


--- Citar ---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.
--- Fin de la cita ---
No sirve de mucho. Mejor describes todo lo que puedas y haces intercambios de banners. :P


--- Citar ---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.
--- Fin de la cita ---
Más bien, no optimizar tu presentación para Flash Player>7 porque los malditos de Adobe no han sacado una nueva versión de su reproductor y podrías perder bastantes visitas, GNU/Linux crece cada día más. :whistling:


--- Citar ---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.
--- Fin de la cita ---
Tonterías. Si quieres guardar una página, abres el link en una ventana nueva y listo.


--- Citar ---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.
--- Fin de la cita ---
Para vagos...


--- Citar ---13. Para el manejo de gráficos Photoshop es la herramienta indicada para eficientar y editar imágenes.
--- Fin de la cita ---
¿Adobe les pagó para que digan eso? ¿Si quiero usar The GIMP o Corel Draw? :scream:


--- 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.
--- Fin de la cita ---
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. :scream:

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


--- Citar ---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.
--- Fin de la cita ---
Adobe les pagó... :whistling:

Eso depende de ti, no es una ley.

RadicalEd:

--- Cita de: "X.Cyclop" ---
--- 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.
--- Fin de la cita ---
¿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.
--- Fin de la cita ---
Se puede hacer con las etiquetas '<!-- !-->'


--- Citar ---
--- 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.
--- Fin de la cita ---
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?
--- Fin de la cita ---

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.

Navegación

[0] Índice de Mensajes

[#] Página Siguiente

Ir a la versión completa