1. ¡OFERTA! con cupón "DIRVPS": hosting por $0,01 y también VPS Linux y Windows por $0,01 el primer mes por Interserver ← publi
    Descartar aviso
Descartar aviso
Al usar este sitio web, aceptas que nosotros y nuestros socios podamos establecer cookies para fines tales como personalizar el contenido y la publicidad. Más información.

Criticas y sugerencias para mi css y html.

Tema en 'Expo Galería de Trabajos' iniciado por rammztein, 7 Ago 2007.

  1. rammztein

    rammztein Nuevo usuario

    Señores, la verdad no creia que pudiera maquetar esto, pero aqui lo tienen, espero criticas, ES MI PRIMER DOCUMENTO VALIDADO POR LA W3C!!!!!, y sin una sola tabla.


    <a href="http://img148.imageshack.us/my.php?image=disenocreativobyrammztewc3.png" target="_blank"><img src="http://img148.imageshack.us/img148/126/disenocreativobyrammztewc3.th.png" border="0" onload='image_resizer._create(this)' alt="Imagen IPB" /> </a>


    La idea de esta plantilla es ponerle movimiento a algunas imagenes o por efecto hover.

    Aqui les dejo el <a href="http://filelime.com/uploadedfiles/Template-DisenoCreativo-por_rammztien.rar" target="_blank">archivo</a> para que critiquen bien el css, y si algo se puede mejorar con gusto escuchare.

    Le doy las gracias a los que me ayudaron en este tema, y al creador del curso css.

    <!--coloro:#FF0000--><span style="color:#FF0000"><!--/coloro-->actualizado<!--colorc--></span><!--/colorc-->
    Abajo se encuentra el archivo final (o eso espero).
     
    rammztein, 7 Ago 2007
    #1
  2. Anunciante

    Anunciante

     
  3. 23sato

    23sato www.oscarblanco.net

    Bien, ahora los comentarios.

    Primero que todo felicitaciones por incursionar en el mundo del CSS. Ya solo con eso vas bien.
    Luego tambien por la validacion W3C! :)


    Ahora, tu codigo esta bien pero empezemos por la hoja de estilos.
    Es buena practica trabajar con una hoja de estilo (o varias) como documentos POR APARTE de tu html. La razon de esto es que por ejemplo si tienes que hacer cambios en esta, se va a aplicar a todos las paginas que esten utilizandola, en vez de tener que ir documento por documento editando clases (si, existe el "find and replace" pero apegarse a esto por no ser ordenado no es buena practica).

    Simplemente agrega en el <head> de tu documento una linea como esta:

    <!--coloro:#FFFF00--><span style="color:#FFFF00"><!--/coloro--><link href="main.css" rel="stylesheet" type="text/css" /><!--colorc--></span><!--/colorc-->

    donde lo que se encuentra en el href es la direccion relativa o absoluta donde el html puede encontrar la hoja de estilos.

    Agrega tantas de estas lineas como sea necesario para las hojas que trabajes.

    Porque varias hojas?

    Porque puede haber documentos que utilizen solo algunas de las clases, y puede haber clases que se repitan en todos los documentos html.

    Recuerda que cada pagina que se abre, lee TODO el codigo, incluyendo una hoja de estilos externa, asi que a mas lineas de codigo, mas kb y por consiguiente mas tiempo de carga.

    Continuando con tu documento, veo que las imagenes estan todas directamente insertadas en el html.

    Esto puede hacerse, no hay una ley CSS que diga que es pecado mortal, pero en algunos casos es mejor dejar que las clases sean las que se encarguen de insertar imagenes, pues hace mas eficiente la lectura del html para los buscadores como google. El usar el "ALT" tag para tratar de dar palabras claves para estos mismos buscadores no siempre es la mejor practica de optimizacion de "keywords".

    Siguiendo con tu manejo de las clases en los contenedores como divs evita clases absolutamente locales, o sea, estan en el mismo contenedor. Trata de tenerlas TODAS en la hoja de estilos. Esto si es un pecado mortal, pues hace que actualizar un documento se vuelva una pesadilla.
    Te explico, a nivel de aplicar una hoja de estilos, la clase que gana es la que esta mas directamente asociada a un contenedor, y obviamente la que esta mas cerca, es la que esta en el contenedor mismo. Entonces, puedes pasar horas y hasta dias tratando de hacer un cambio en tu hoja de estilos y habrá contenedores que no cambian su despliegue por mas que lo intentas, luego revisaras el html y veras que es porque tienen clases locales que se oponen a todo lo que estas tratando de hacer.

    No es necesario que todos tus contenedores sean divs.

    Puedes ver mi respuesta en <a href="http://www.forocreativo.net/ipb/index.php?showtopic=24794&hl=#" target="_blank">ESTE TEMA</a> para que entiendas de lo que hablo.

    Vas bien hasta ahora, es una curva de aprendizaje muy intersante, sigue asi :)
     
    23sato, 7 Ago 2007
    #2
  4. opinguino

    opinguino Espécimen en peligro de extinción

    las etiquetas align="center" estan obsoletas

    tu pagina no valida en css, da un error

    <!--quoteo--><div class='quotetop'>CITA</div><div class='quotemain'><!--quotec-->linea 69 links Propiedad no válida : font Trebuchet no es un valor de font-size : Trebuchet,Arial,Helvetica,sans-serif<!--QuoteEnd--></div><!--QuoteEEnd-->

    generalmente, en una web, se crea un archivo css que afecte a todo el conjunto de páginas de la web, no se mete en capa páina, pues, estarías quitando uno de las grandes ventajas de css, la posibilidad de edtar todo el aspecto de la web desde 1 solo archivo

    los tamaños de las fuentes normalmente se generan con valores relativos (em)

    falta una estructura basica de etiquetas H1, H2, H3....modificadas sus propiedades desde la hoja de estilos

    la página no dispone de metatags. tampoco creo que lo mas acertado sea poner de título dseño creativo,

    hay propiedades, por ejemplo en las imagenes, que se deben manejar por estilos, y estan incluidos dentro de la etiqueta img, por ejemplo:

    <img src="imagenes/nota.jpg" alt="" style="float: left; padding-right: 10px; padding-bottom: 10px;" height="64" width="44">

    y no digo nada de la etiqueta ALT porque como es una maqueta supongo que vas a cambiar las imagenes

    luego a nivel diseño...

    creo que encesitas dar un estilo mas diferencia a los links para cuando el raton pase por encima, a mi no me hace nada, esto se debe a que los estilos no tienen estado hover

    luego, usar un pie de pagina con enlaces y todo del mismo color, sin cambio de color en los enlaces, no creo que sea muy apropiado (sin contar que el link a FC no esta activado :mrgreen: )

    espero no haberme pasado, pero, son todo indicaciones constructivas para mejorar, no tienen ningun tipo de animo de ofender, desanimar...

    de echo, creo que si me molesto en escribir todo esto es para que saques algo positivo de ello, sino, podriahaber valio un "muy bonito"

    saludos
     
    opinguino, 7 Ago 2007
    #3
  5. rammztein

    rammztein Nuevo usuario

    Wow, muchas gracias por todos sus comentarios la verdad eso me sirve muchisismo para mi. Voy a contestar todos sus comentarios.

    23sato:

    Perfecto, ya cheke el post que me recomiendas y voy a optimizar el template, lo de manejar el archivo externo no lo maneje simplemente porque como solo hiba a realizar (por el momento) solo la principal, por lo mismo deje el css ahi mismo, para lo de las imagenes las puse independientes porque no queria crear una clase local para cada cuadro (ahora se que estaba mal).

    "evita clases absolutamente locales" , fue un intento desesperado, voy a cambiar eso, y tambien voy a tratar de manejar menos divs. Gracias!

    opinguino:

    Oye, al darle upload a mi archivo me dice: This Page Is Valid HTML 4.01 Transitional!, donde te sale eso?, <strike>tomo el dato de el tamaño de las fuentes</strike> puse mejor pt porque en em todo se hiso GIGANTE!, los links si le faltan, pero como necesitaba una critica no queria agregarle algo mas.

    Voy a realizar la estructura basica que me recomiendas para completar lo que falta del template, y claro Diseño Creativo, simplemente es el titulo de la Plantilla, nada mas, te agredesco mucho tus comentarios me sirven mucho, y con respecto a "indicaciones constructivas", un maestro me enseño, que las criticas constructivas no existen, porque si criticas algo es porque simplemente no te parece y ya, no por algo mas, en este caso es para mejorar, y no me ofendo porque si lo subi es para que me dijeran todo lo malo que tenia, para mi esto es mucho avanze, porque que jamas habia podido realizar una pagina 100% como yo la imaginaba, Gracias!

    Me voy a poner a trabajar.
     
    rammztein, 7 Ago 2007
    #4
  6. opinguino

    opinguino Espécimen en peligro de extinción

    aparte del validador de XHTML existe un validador de CSS, ahí es donde me salta el fallo

    la direccion es esta

    <a href="http://jigsaw.w3.org/css-validator/" target="_blank">http://jigsaw.w3.org/css-validator/</a>

    sobre las fuentes puedes usar tamaños distintos, mas pequeños, por ejemplo 0.80em o 0.70 así el texto será mas pequeño
     
    opinguino, 8 Ago 2007
    #5
  7. rammztein

    rammztein Nuevo usuario

    :-O. no sabia que existia ese validador, gracias por el dato, espero hoy terminar hoy, para mostrarles el final.
     
    rammztein, 8 Ago 2007
    #6
  8. rammztein

    rammztein Nuevo usuario

    Ya casi queda, mucho mejor que antes, tubo muchismos cambios con respecto a la version pasada, ahora si ya es valido en HTML y CSS.

    Ahora me surgio un problema, yo quiero que las imagenes que estan en la <div id="texto1"> tenga parametros deseados, y no puedo, ya cheque y no veo el error, este es el codigo.

    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
    <div id="texto1">
    <h1>Lorem ipsum id quis principes mel</h1>
    <p><img src="imagenes/nota.jpg" alt="miniatura"><img src="imagenes/nota.jpg" alt="miniatura"><img src="imagenes/nota.jpg" alt="miniatura"></p>
    </div>
    <!--c2--></div><!--ec2-->
    Y en el css
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->#texto1 {
    &nbsp;&nbsp;&nbsp;&nbsp;background-color:#E4E8E9;
    &nbsp;&nbsp;&nbsp;&nbsp;height:200px;
    &nbsp;&nbsp;&nbsp;&nbsp;width: 395px;
    &nbsp;&nbsp;&nbsp;&nbsp;float:left;
    &nbsp;&nbsp;&nbsp;&nbsp;border-right:solid #0D0D0D 5px;
    &nbsp;&nbsp;&nbsp;&nbsp;padding: 5px;

    }
    img#texto1 {
    &nbsp;&nbsp;&nbsp;&nbsp;float:left;
    &nbsp;&nbsp;&nbsp;&nbsp;width:94px;
    &nbsp;&nbsp;&nbsp;&nbsp;height:64px;
    &nbsp;&nbsp;&nbsp;&nbsp;padding-left:5px;
    &nbsp;&nbsp;&nbsp;&nbsp;padding-right:60px;
    &nbsp;&nbsp;&nbsp;&nbsp;padding-bottom:5px;
    &nbsp;&nbsp;&nbsp;&nbsp;border:none;
    &nbsp;&nbsp;&nbsp;&nbsp;display:block;
    }<!--c2--></div><!--ec2-->

    Lo puse tambien como class y sigue en las mismas, si hago una clase con los parametros y se lo agrego a cada imagen funciona bien, pero quiero que automaticamente lo haga al poner esas imagenes en ese DIV, es posible?


    Saludos!
     
    rammztein, 8 Ago 2007
    #7
  9. adi

    adi Zen Moderator

    Es que lo correcto sería poner:

    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->#texto1 img {
    &nbsp;&nbsp;&nbsp;&nbsp;float:left;
    &nbsp;&nbsp;&nbsp;&nbsp;width:94px;
    &nbsp;&nbsp;&nbsp;&nbsp;height:64px;
    &nbsp;&nbsp;&nbsp;&nbsp;padding-left:5px;
    &nbsp;&nbsp;&nbsp;&nbsp;padding-right:60px;
    &nbsp;&nbsp;&nbsp;&nbsp;padding-bottom:5px;
    &nbsp;&nbsp;&nbsp;&nbsp;border:none;
    &nbsp;&nbsp;&nbsp;&nbsp;display:block;
    }<!--c2--></div><!--ec2-->

    Para que entonces el estilo aplique a todas las imágenes que estén dentro del contenedor con ese id.

    Así como lo tienes lo que estás diciendo es que ese estilo se aplique solo a la imagen que tengan el id de texto1.

    Corríjanme los expertos si me equivoco :p
     
    adi, 8 Ago 2007
    #8
  10. rammztein

    rammztein Nuevo usuario

    <!--quoteo(post=240412:date=Aug 8 2007, 08:18 AM:name=adi)--><div class='quotetop'>CITA(adi @ Aug 8 2007, 08:18 AM) [snapback]240412[/snapback]</div><div class='quotemain'><!--quotec-->
    Es que lo correcto sería poner:

    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->#texto1 img {
    &nbsp;&nbsp;&nbsp;&nbsp;float:left;
    &nbsp;&nbsp;&nbsp;&nbsp;width:94px;
    &nbsp;&nbsp;&nbsp;&nbsp;height:64px;
    &nbsp;&nbsp;&nbsp;&nbsp;padding-left:5px;
    &nbsp;&nbsp;&nbsp;&nbsp;padding-right:60px;
    &nbsp;&nbsp;&nbsp;&nbsp;padding-bottom:5px;
    &nbsp;&nbsp;&nbsp;&nbsp;border:none;
    &nbsp;&nbsp;&nbsp;&nbsp;display:block;
    }<!--c2--></div><!--ec2-->

    Para que entonces el estilo aplique a todas las imágenes que estén dentro del contenedor con ese id.

    Así como lo tienes lo que estás diciendo es que ese estilo se aplique solo a la imagen que tengan el id de texto1.

    Corríjanme los expertos si me equivoco :p
    <!--QuoteEnd--></div><!--QuoteEEnd-->

    Ya funciona a la perfeccion!, muchisimas gracias, en un momento subo el archivo terminado.

    Aqui esta el archivo terminado, espero criticas.

    <a href="http://filelime.com/uploadedfiles/Cooltemplate_byrammztein.rar" target="_blank">[attachmentid=2762]</a>
     

    Adjuntos:

    rammztein, 8 Ago 2007
    #9


Alojamiento web, Hosting Reseller, Servidores Dedicados - All in Hosting


    
    
    
    
Blog · Sitios amigos: GuiaHosting · Unidominios · Interalta ·