• Viernes 29 de Marzo de 2024, 07:40

Autor Tema:  Buenos Tips Para El Diseño Web  (Leído 3410 veces)

ArKaNtOs

  • Miembro de PLATA
  • *****
  • Mensajes: 1253
  • Nacionalidad: mx
    • Ver Perfil
Buenos Tips Para El Diseño Web
« en: Lunes 11 de Septiembre de 2006, 17:37 »
0
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

  • Moderador
  • ******
  • Mensajes: 1234
    • Ver Perfil
Re: Buenos Tips Para El Diseño Web
« Respuesta #1 en: Lunes 11 de Septiembre de 2006, 18:04 »
0
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.

 
 :P  :P  :P

Me podrias explicar que esto y como lo hago en codigo  ????
[size=109]LOS GATOS SIEMPRE CAEMOS DE PIE !!![/size]


ArKaNtOs

  • Miembro de PLATA
  • *****
  • Mensajes: 1253
  • Nacionalidad: mx
    • Ver Perfil
Re: Buenos Tips Para El Diseño Web
« Respuesta #2 en: Lunes 11 de Septiembre de 2006, 18:09 »
0
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

  • Miembro de PLATA
  • *****
  • Mensajes: 1039
  • Nacionalidad: mx
    • Ver Perfil
Re: Buenos Tips Para El Diseño Web
« Respuesta #3 en: Lunes 11 de Septiembre de 2006, 19:03 »
0
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.

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.
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.
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.
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.
Para vagos...

Citar
13. Para el manejo de gráficos Photoshop es la herramienta indicada para eficientar y editar imágenes.
¿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.
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.
Adobe les pagó... :whistling:

Eso depende de ti, no es una ley.

- Great works aren't produced on the first try. [Ernest Hemingway]
- Be ambitious, yet realistic in your dreams. Do something that makes a positive impact. Don’t let the nay-sayers get you down. [Bjarne Stroustrup]

RadicalEd

  • Moderador
  • ******
  • Mensajes: 2430
  • Nacionalidad: co
    • Ver Perfil
Re: Buenos Tips Para El Diseño Web
« Respuesta #4 en: Lunes 11 de Septiembre de 2006, 19:08 »
0
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.
¿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
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.
El pasado son solo recuerdos, el futuro son solo sueños

ArKaNtOs

  • Miembro de PLATA
  • *****
  • Mensajes: 1253
  • Nacionalidad: mx
    • Ver Perfil
Re: Buenos Tips Para El Diseño Web
« Respuesta #5 en: Lunes 11 de Septiembre de 2006, 19:21 »
0
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.

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 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

x.cyclop

  • Miembro de PLATA
  • *****
  • Mensajes: 1039
  • Nacionalidad: mx
    • Ver Perfil
Re: Buenos Tips Para El Diseño Web
« Respuesta #6 en: Lunes 11 de Septiembre de 2006, 19:38 »
0
Cita de: "RadicalEd"
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. :D

Citar
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.

Citar
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?. :whistling:

- Great works aren't produced on the first try. [Ernest Hemingway]
- Be ambitious, yet realistic in your dreams. Do something that makes a positive impact. Don’t let the nay-sayers get you down. [Bjarne Stroustrup]

ArKaNtOs

  • Miembro de PLATA
  • *****
  • Mensajes: 1253
  • Nacionalidad: mx
    • Ver Perfil
Re: Buenos Tips Para El Diseño Web
« Respuesta #7 en: Lunes 11 de Septiembre de 2006, 19:41 »
0
sip, pero cuantos saben los estandares jejejeje :P no no es cierto, la cosa es que por ejemplo acabo de diseñar un sitio y cuando lo veo con firefox cambia un poco la vista y con explorer es otra cosa, lo diseñe asi porque con explorer lo checaron los dueños :P jejejeje pero el cambio no es mucho :P

geobeid

  • Miembro activo
  • **
  • Mensajes: 88
    • Ver Perfil
Re: Buenos Tips Para El Diseño Web
« Respuesta #8 en: Miércoles 13 de Septiembre de 2006, 05:13 »
0
Citar
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.

Citar
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  :P .

BYTES GUYS
[size=109]
SI QUERES ENCONTRAR A JESÚS GOOGLEALO
[/size]

Bicholey

  • Moderador
  • ******
  • Mensajes: 1234
    • Ver Perfil
Re: Buenos Tips Para El Diseño Web
« Respuesta #9 en: Miércoles 13 de Septiembre de 2006, 08:49 »
0
:D  :D  :D  :D


Podria rebatir uno que otro punto, pero algo de lo que no concuerdo en nada es que :

Citar
podrías perder bastantes visitas, GNU/Linux crece cada día más.

no porque no sea cierto, a decir verdad no estoy enterado de este dato pero si tu diseñas una pagina web y resulta que esta dirigido a usuarios meramente administrativos yo creo que el 99.99 % de ellos usa Microsoft Windows y de estos el 95 % solo usa explorer, nosotros porque estamos inmersos en el mundo de la computacion, pero la verdad una gran cantidad de gente ni siquiera conoce el mozilla mucho menos opera y otros...
[size=109]LOS GATOS SIEMPRE CAEMOS DE PIE !!![/size]


peludo_uruguay

  • Nuevo Miembro
  • *
  • Mensajes: 2
    • Ver Perfil
Re: Buenos Tips Para El Diseño Web
« Respuesta #10 en: Lunes 13 de Noviembre de 2006, 15:44 »
0
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?