MercadoLibre con CSS

AlZuwaga · #1 (**permalink**) 04/04/2006, 13:04

Hola, quería que me digan si estaría masomenos bien implementado tanto el CSS como el HTML en esta versión de MercadoLibre.
El HTML me parece que está bastante semántico aunque no sé hasta qué punto. Eso si, lo reconozco, usé unos nombres malísimos para los selectores CSS. Además me parece que la hoja de estilos me quedó demasiado graaande.

http://www.alzuwaga.com.ar/facultad/spi2/mercadolibre/

Ocurre que... si bien el diseño final está muy parecido al original... tengo dudas (y muchas) acerca de si los estoy haciendo de manera correcta.

Gracias y un saludo

jesusbet · #2 (**permalink**) 04/04/2006, 15:02

muy bien, está muy semántico, con muchos divs 'limpiar', pero bien, en general.

NopalStudio · #3 (**permalink**) 04/04/2006, 15:03

woooo.. esta de lujo a mi en lo personal me encanto..
oye tu me puedes ayudar con mi problema de capas (posicion:absolute) esta en este mismo foro.. gracias

Hereje · #4 (**permalink**) 04/04/2006, 20:53

Al !! Buenisimo !! No sabia que también adabas en estas cosas, felicitaciones!

AlZuwaga · #5 (**permalink**) 05/04/2006, 10:33

hola,

¿Entonces debo pensar que estoy haciendo las cosas bien? :)

Sé que siempre se puede mejorar, por eso me gustaría que me marquen por lo menos un ejemplo de mala implementación en ese código y una posible solución o reemplazo. Por ejemplo el de exceso de div's "limpiar"... ¿cómo los evitarían?

Se me ocurre que usando un <hr class="limpiar" /> sería válido, pero no quiero andar metiendo hr's innecesarios porque en la vista sin estilos los hr's se ven, pero los div's no.

Hereje, estoy incursionando por el momento y te digo que me quedé sorprendido, tanto de css como de mi mismo, mientras iba rehaciendo mercadolibre

Saludos

webosiris · #6 (**permalink**) 05/04/2006, 10:47

Cita:

Iniciado por Al Zuwaga

pero no quiero andar metiendo hr's innecesarios

yo uso <br/>...

En lo que no estoy muy de acuerdo es con el uso que le distes a los <h1>... soy de los que piensan que debe de haber uno solo por página.

Otra cosa que creo que es mejorable es no usar px en los tamaños de las fuentes... mejor em

PD: hay que ver el orden de tu código comparado con el desorden de mercadolibre.com.ar... una joyita

Buen trabajo

tunait · #7 (**permalink**) 05/04/2006, 11:03

Óle qué bueno te quedó

AlZuwaga · #8 (**permalink**) 05/04/2006, 11:18

webosiris, ocurre que una vez leí en ala... dejá que lo busco... ya, esto:

Cita:

...To prevent subsequent page elements from being affected by the float I’ve contained the list in a <div> and cleared the float with a (non-semantic) <br />

(no recuerdo si era exactamente ese, pero para el caso sirve)
Entonces, estaríamos en la misma en cuanto a la semántica ¿no?
Con los <h1>, de acuerdo.
EMss...EMssss... ¡no los termino por entender!

tunait, gracias

Me olvidé antes de NopalStudio: La verdad que lo mío es prueba y error. Seguro otro te ayudará mejor que yo.

DeLaVega · #9 (**permalink**) 08/04/2006, 12:48

Al Zuwaga, quedó muy bueno! Como crítica (constructiva) te diría lo siguiente. Para ordenar los css, está bueno separarlos por categorías, es decir, por cada categoría, un archivo css distinto. Por ejemplo, yo acostumbro tener una categoría general (general.css) en donde pongo a, body, h1, h2, p, etc. Otra puede ser forms (forms.css) en donde pongo todos los estilos relacionados con formularios, otra llamada layout, donde pongo todo lo relacionado a las columnas y disposición del sitio. Luego usando un import desde la página principal (para evitar que NS4 y IE4 activen los estilos), llamo a una página donde agrego cada uno de esos archivos .css. De esta manera queda todo ordenado y cuando vos tenés que cambiar un determinado estilo, sabés enseguida en donde lo tenés ubicado (no sabés lo útil que es cuando tenés un montón de estilos). La otra sugerencia, es usar orden alfabético, tanto para cada estilo como para las propiedades de los mismos. Por ejemplo, en general.css quedaría en este orden: a, body, h1, h2... y con las propiedades, lo mismo: color, font-size, margin, padding-left, padding-right, etc. (todo en orden alfabético).
A mí se me simplifica mucho trabajar así, obviamente, con la experiencia y el tiempo lo aprendí, al principio metía todo junto y mientras crecían los estilos, más tardaba en encontrar algo y se hacía todo un lío. Y te sirve muchísimo cuando trabajás en equipo, por si otro tiene que tocar algo que hiciste vos o viceversa.
A modo de detalle, abrí la página en IE 5.5 y se ve bien excepto lo que dice "Es gratis y fácil" y la imagen de "los más calientes", el resto, perfecto. Basándome en estadísticas de algunos sitios que tengo, yo todavía sigo probando para IE 5 y IE 5.5 (con las versiones standalone) porque hay personas que no actualizaron al 6 todavía y me siguen llegando visitas con estas versiones (más que nada con el 5.5).

Saludos!

u_goldman · #10 (**permalink**) 09/04/2006, 22:48

Da gusto ver cosas bien hechas!

Saludos AZ

uamistad · #11 (**permalink**) 09/04/2006, 23:23

WOW, FASCINADO CON EL DISEÑO, ESTÁ IDÉNTICO.

Yo vendo en ML y paso mucho tiempo ahí. Por otro lado, también soy fanático de los estándares.

Así que ver tu diseño fue como juntar mis dos cybermundos en uno, una obra de arte.

AlZuwaga · #12 (**permalink**) 10/04/2006, 09:58

DeLaVega, muy buen consejo

(entre que está todo el css junto, desordenado y con algunos nombres criptográficos, finalizando el trabajo me costó un infierno encontrar el estilo que quería editar :p)

No sabía que se podía tener instalado en un PC más de una versión de IE! ¿cómo se hace?

ug, uamistad, gracias! (pero lo de una obra de arte me parece un exceso ;)

Saluds

webosiris · #13 (**permalink**) 10/04/2006, 10:16

Cita:

Iniciado por DeLaVega

yo todavía sigo probando para IE 5 y IE 5.5 (con las versiones standalone) porque hay personas que no actualizaron al 6 todavía y me siguen llegando visitas con estas versiones (más que nada con el 5.5).

esto no lo comparto. Es como decir que hay que considerar a la gente que entra a internet con un 386... cuando *no cuesta nada* actualizar el navegador. Dar soporte a una versión que salió hace 7 años es retroceder en el avance que suponen los nuevos navegadores.

Si los usuarios no actualizaron el navegador después de 7 años... QUE SE JODAN de la misma forma que yo me jodo si quiero instalar el XP en un 386.

En el resto si estoy de acuerdo

DeLaVega · #14 (**permalink**) 10/04/2006, 12:28

Cita:

Iniciado por webosiris

esto no lo comparto. Es como decir que hay que considerar a la gente que entra a internet con un 386... cuando *no cuesta nada* actualizar el navegador. Dar soporte a una versión que salió hace 7 años es retroceder en el avance que suponen los nuevos navegadores.

Si los usuarios no actualizaron el navegador después de 7 años... QUE SE JODAN de la misma forma que yo me jodo si quiero instalar el XP en un 386.

En el resto si estoy de acuerdo

La decisión está en cada uno... yo por experiencia propia y seguramente hasta que salga el IE7 lo seguiré haciendo (por ejemplo, hace rato que ya deseché el NS4, pero hace unos años atrás, antes de que que salga el NS8 seguía probándolo por la misma razón). Más de una vez me pasó de que un cliente tuviera instalado el IE 5.5 en su máquina (incluso esto pasa en muchas empresas, bancos, etc. donde todavía lo usan y no está actualizado). No queda bien que si le mandás una demo de un trabajo a un cliente, por el tema de que tanto IE 5 y 5.5 toman mal el modelo de la caja (que se soluciona con el famoso Tan hack), el cliente vea el layout mal, corrido, con medidas inexactas. Por más que vos le digas que se ve así porque no tiene el navegador actualizado, el cliente no entiende razones muchas veces y seguramente te va a decir como van a ver el sitio la gente que tenga la misma versión que él... pero, como dije al principio, es una decisión personal de cada uno. Además, también depende de las estadísticas personales de cada uno.

Al Zuwaga, acá está:
http://www.forosdelweb.com/f53/pruebas-versiones-anteriores-internet-explorer-233724/

Fijate que el primer link, lo dieron de baja (parece que se los hicieron sacar), pero el segundo todavía está activo.

Saludos!

RoQ · #15 (**permalink**) 14/04/2006, 14:44

Hola Al, que bien te quedo

Vengeurman · #16 (**permalink**) 30/04/2006, 05:56

Creo que la gente está equivocada al decir que no hay qeu tener en cuenta a gente con ordenadores anticuados... porque no cuesta nada actaulizarlos.... pdado qeu al parecer, no tenemos consciencia (seguramente porque no sabemos de ello) de que hay mucha gente qeu utiliza una cosa porque kle es impsoible utilizar otra. Hay muchos ejemplos no solo en España, sino en el mismo mundo latinoamericano que no puede acceder a mayores recursos que a ordenadores dados por ONG's, que siguen siendo Pentiums 2 o Pentiums 1 y que logicamente disponene de uns oftware hoy en dia en este país obsoleto.

Creo lógico de un buen programador pensar en que desarrollar una web (ya digo comercial , de trabajo o propia) no es realizar un hecho "artístico", o de diseño, sino es crear un medio de comunicación que ha de llegar al mayor número de personas posibles, pensando en ellos y atendiendo a sus requerimientos. (en el caso comercial, logicamente, muchas veces no se quiere y solo se muestra a raíz de sus prioridades comerciales".

emiliodeg · #17 (**permalink**) 22/05/2006, 21:21

q buweno q estuvo esto!!! se puede ver la hoja de estilos en algun lugar??? para aprender a hacer esto
saliudos

AlZuwaga · #18 (**permalink**) 22/05/2006, 21:42

Wow, me perdí un montón de comentarios... raro porque estoy suscripto a este tema pero nunca me llegó un mail de nuevas respuestas hasta hoy

emiliodeg, podés ver la hoja de estilos (su ruta, en realidad) inspeccionando el código fuente de la página!

ePorroa · #19 (**permalink**) 22/05/2006, 23:34

Buenas recién me uno a la liga del post.
Con respecto a la web felicitaciones, esta quedando muy buena.

Aquí algunos consejos:
**XHTML.
- Comenzando por la imagen que esta como logo, esta puede ser reemplazada por un titulo (de primera jerarquía por ejemplo) para que si la web es visitada por un celular o un lector de paginas sea reconocida como tal (quizas si pones "MercadoLibre.com.ar") ya a este lo puedes reemplazar y cambiarlo por una imagen desde CSS.

- Para "semantizar" mejor los formularios recomiendo usar <fieldset> y <legend> por ejemplo para el formulario de "Que estas buscando?" podrías aplicarlo.

- Personalmente el uso de <hrs para separar campos de una pagina web es muy útil ya que los celulares por ejemplo, trazan una linea y dan a saber cuando has terminado una sección de la web.

- Una cosa que no me gustan es cuando unen los <ul><li>'s con imagenes (<img>'s) creo que ahi le quitan el poder al CSS ya que esto muy bien se puede hacer desde ahi.

- A la lista de "Artículos especiales" puedes darle un <br /> cuando acabe cada imagen, ya que viéndolo sin css todo se pone "inline".

** CSS.
- Con respecto al CSS creo que hubieron algunos puntos que te pude recomendar mas arriba, lo que si me gustaría decir es que si estas usando mucho código y crees que podrías terminar pesando mucho, puedes limpiarlo usando los métodos rápidos de cada regla CSS (shorthand?), por ejemplo: border:1px solid #ccc; font:1em Verdana, Arial; margin:5px 2px 3px 1px; entre otros.

- Quizas si a los menus de la parte superior (Navegar, vender, etc) le agregas un estilo para cuando el menu esta encima de cada uno de ellos (:hover), haría que uno se diera facilmente cuenta de que eso es un link.

- Enfatizar el uso de medidas porcentuales a la resolucion de la pantalla, seria una de mis recomendaciones finales.

- Si piensas crear mas archivos CSS puedes comenzar a renombrar cada uno por la accion que cumple (Algunos que uso cada tiempo son: Layout.css, design.css, font.css, entre otros).

--------------
Espero que te ayude algunas recomendaciones que te doy y si hay alguna que ya sabias pues ignora la :D.. a menos para la gente nueva en esto le podria servir ...

Salu2

tunait · #20 (**permalink**) 23/05/2006, 02:05

Excelente aportación ePorroa

AlZuwaga · #21 (**permalink**) 23/05/2006, 10:41

Hey, muchas gracias ePerroa

Cita:

Con respecto a la web ... esta quedando...

Te prometo que tendré en cuenta tus consejos para la próxima, porque esa versión de mercadolibre quedará así para la eternidad (se trató nada más de un trabajo práctico para donde estudio)

Saludos

ePorroa · #22 (**permalink**) 23/05/2006, 12:03

Pues muy buena idea la de practicar con sitios conocidos, creo que tambien comenzare a hacerlo (Microsoft quisas?) :D

Salu2!