Foros del Web » Creando para Internet » CSS »

MercadoLibre con CSS

Estas en el tema de MercadoLibre con CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 04/04/2006, 14:04
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
MercadoLibre con CSS

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
__________________
...___...
  #2 (permalink)  
Antiguo 04/04/2006, 16:02
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
muy bien, está muy semántico, con muchos divs 'limpiar', pero bien, en general.
  #3 (permalink)  
Antiguo 04/04/2006, 16:03
Avatar de NopalStudio  
Fecha de Ingreso: agosto-2005
Mensajes: 110
Antigüedad: 12 años, 4 meses
Puntos: 0
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
  #4 (permalink)  
Antiguo 04/04/2006, 21:53
Avatar de Hereje  
Fecha de Ingreso: junio-2002
Ubicación: Córdoba, Argentina
Mensajes: 439
Antigüedad: 15 años, 6 meses
Puntos: 2
Al !! Buenisimo !! No sabia que también adabas en estas cosas, felicitaciones!
__________________
Sergio
  #5 (permalink)  
Antiguo 05/04/2006, 11:33
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
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
__________________
...___...
  #6 (permalink)  
Antiguo 05/04/2006, 11:47
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
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
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #7 (permalink)  
Antiguo 05/04/2006, 12:03
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Óle qué bueno te quedó
  #8 (permalink)  
Antiguo 05/04/2006, 12:18
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
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.
__________________
...___...
  #9 (permalink)  
Antiguo 08/04/2006, 13:48
 
Fecha de Ingreso: julio-2002
Mensajes: 447
Antigüedad: 15 años, 4 meses
Puntos: 0
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!
  #10 (permalink)  
Antiguo 09/04/2006, 23:48
Avatar de u_goldman
Moderador
 
Fecha de Ingreso: enero-2002
Mensajes: 8.031
Antigüedad: 15 años, 11 meses
Puntos: 98
Da gusto ver cosas bien hechas!

Saludos AZ
__________________
"El hombre que ha empezado a vivir seriamente por dentro, empieza a vivir más sencillamente por fuera."
-- Ernest Hemingway
  #11 (permalink)  
Antiguo 10/04/2006, 00:23
Avatar de uamistad  
Fecha de Ingreso: diciembre-2004
Ubicación: Cd. de México
Mensajes: 1.395
Antigüedad: 13 años
Puntos: 1
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.
__________________
"Di no al Internet Explorer" -Proverbio Chino-
  #12 (permalink)  
Antiguo 10/04/2006, 10:58
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
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
__________________
...___...
  #13 (permalink)  
Antiguo 10/04/2006, 11:16
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
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
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #14 (permalink)  
Antiguo 10/04/2006, 13:28
 
Fecha de Ingreso: julio-2002
Mensajes: 447
Antigüedad: 15 años, 4 meses
Puntos: 0
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!
  #15 (permalink)  
Antiguo 14/04/2006, 15:44
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 8 meses
Puntos: 0
Hola Al, que bien te quedo
  #16 (permalink)  
Antiguo 30/04/2006, 06:56
 
Fecha de Ingreso: febrero-2005
Mensajes: 9
Antigüedad: 12 años, 10 meses
Puntos: 0
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".
  #17 (permalink)  
Antiguo 22/05/2006, 22:21
Avatar de emiliodeg  
Fecha de Ingreso: septiembre-2005
Ubicación: Córdoba
Mensajes: 1.830
Antigüedad: 12 años, 3 meses
Puntos: 54
q buweno q estuvo esto!!! se puede ver la hoja de estilos en algun lugar??? para aprender a hacer esto
saliudos
  #18 (permalink)  
Antiguo 22/05/2006, 22:42
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
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!
__________________
...___...
  #19 (permalink)  
Antiguo 23/05/2006, 00:34
Avatar de ePorroa  
Fecha de Ingreso: enero-2003
Ubicación: Lima
Mensajes: 100
Antigüedad: 14 años, 11 meses
Puntos: 0
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
  #20 (permalink)  
Antiguo 23/05/2006, 03:05
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Excelente aportación ePorroa
  #21 (permalink)  
Antiguo 23/05/2006, 11:41
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
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
__________________
...___...
  #22 (permalink)  
Antiguo 23/05/2006, 13:03
Avatar de ePorroa  
Fecha de Ingreso: enero-2003
Ubicación: Lima
Mensajes: 100
Antigüedad: 14 años, 11 meses
Puntos: 0
Pues muy buena idea la de practicar con sitios conocidos, creo que tambien comenzare a hacerlo (Microsoft quisas?) :D

Salu2!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 14:02.