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.

Críticas acerca de mi web personal

Tema en 'Revisión Sitios Web' iniciado por gael, 20 Mar 2007.

  1. gael

    gael Guest

    Buenas a todos:

    soy novata aun en esto del diseño web y he diseñado y desarrollado mi primera web, con hojas de estilo, quería ver que os parece a todos los niveles.

    Muchas gracias y un saludo

    <a href="http://www.regiongrafica.com" target="_blank">www.regiongrafica.com</a>
     
    gael, 20 Mar 2007
    #1
  2. Anunciante

    Anunciante

     
  3. adi

    adi Zen Moderator

    Hola gael, bienvenida el foro :)


    Está muy buena tu página, me gustó por lo sencilla que es y la combinación de colores, buen trabajo ;)
     
    adi, 20 Mar 2007
    #2
  4. Terricola

    Terricola Nuevo usuario

    bienvenida gael

    esta vacana a pagina tiene bueno elemntos
     
    Terricola, 20 Mar 2007
    #3
  5. gael

    gael Guest

    gracias a los dos por pasar y por la bienvenida :)

    a pesar de ser chica he elegido este nick por el gran actor Gael García :)
     
    gael, 20 Mar 2007
    #4
  6. 23sato

    23sato www.oscarblanco.net

    Bienvenida Gael.

    Observaciones sobre la pagina:

    Siendo tu primer intento, y queriendo hacerlo con hojas de estilo vas bien.

    Te sugeriria que si vas a trabajar CSS, que de una vez aproveches los hover, y que no recurras a usar el MM_swapimage de dreamweaver, que trabaja con javascript y que inserta las imagenes propiamente en el html. Tambien te sugiero que deje version en texto para cada elemento imagen que tiene algo escrito en la imagen y que es parte escencial de la informacion, como por ejemplo el nombre de la "empresa".

    Como dije, es un buen inicio, ya usaste divs como contenedores, etc.

    Podrias ordenar un poco mas el codigo tambien:

    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
    <body>
    &nbsp;&nbsp;&nbsp;&nbsp; <div id="loguesea">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<h1>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;TITULO
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h1>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="estilo">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTENIDO
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    &nbsp;&nbsp;&nbsp;&nbsp; </div>
    </body>
    <!--c2--></div><!--ec2-->
     
    23sato, 20 Mar 2007
    #5
  7. gael

    gael Guest

    Gracias 23sato, pero ¿se puede hacer un efecto de rollover solo con CSS? si es así no tenía ni idea....

    voy a ver si encuentro algún ejemplo o tutorial en internet pero me extraña que un efecto con imagen, se pueda controlar desde una hoja de estilos...
     
    gael, 20 Mar 2007
    #6
  8. elQuique

    elQuique Usuario activo

    gael, bienvenida al foro.
     
    elQuique, 20 Mar 2007
    #7
  9. Wooper

    Wooper Un Angel Serigrafo

    me gustan losd colores que le haz puesto
    sobre todo el rosa :) esta muy bueno.
    bueno sobre la pagina ya te dio los puntos de vista sato
    un saludo y bienvenida al foro gael ;)
     
    Wooper, 20 Mar 2007
    #8
  10. gael

    gael Guest

    muchas gracias de nuevo ;)
     
    gael, 20 Mar 2007
    #9
  11. adi

    adi Zen Moderator

    Para lo de poner una imagen con rollover en css, yo lo hago así:

    #nosotros { display: block; width: 80px; height: 40px; }
    a#nosotros:link, a#nosotros:visited { background-image: url(../images/btn_nosotros.jpg); }
    a#nosotros:hover, a#nosotros:active { background-image: url(../images/btn_nosotros_.jpg); }

    Primero le pongo el alto y el ancho que tenga la imagen, y luego a lo de link y hover les pongo como imagen de fondo la que tenga para eso.

    Y el html sería algo así:

    <a href="#" id="nosotros"></a>

    Espero te sirva :)
     
    adi, 20 Mar 2007
    #10
  12. 23sato

    23sato www.oscarblanco.net

    Adi ya te dio una respuesta rapida, pero si quieres mas explicacion habia hecho unos tutos aqui:

    <a href="http://www.forocreativo.net/ipb/index.php?showtopic=10414" target="_blank">TUTORIAL PARTE 1</a>

    <a href="http://www.forocreativo.net/ipb/index.php?showtopic=10459" target="_blank">TUTORIAL PARTE 2</a>

    Con hojas de estilo se puede hacer de todo, hasta una galeria completa. O menus desplegables:

    <a href="http://www.cecilgaspar.com/landscape_painting.php" target="_blank">http://www.cecilgaspar.com/landscape_painting.php</a>

    <a href="http://www.cubancigarlounge.com" target="_blank">http://www.cubancigarlounge.com</a>
     
    23sato, 20 Mar 2007
    #11
  13. elQuique

    elQuique Usuario activo

    Sobre si se puede hacer en CSS el RollOver, una forma rapida y facil de enteder (leyendo el codigo) es esta:

    <a href="http://www.forocreativo.net/otr/rollover.html" target="_blank">Efecto RollOver en Tu Web</a>

    me suena conocido ese menu, creo que lo vi antes en algun lado :p


    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
    <style type="text/css">
    <!--
    .contactar {
    &nbsp;&nbsp;&nbsp;&nbsp;height: 215px;
    &nbsp;&nbsp;&nbsp;&nbsp;width: 200px;
    &nbsp;&nbsp;&nbsp;&nbsp;float: left;
    }
    .contactar a {
    &nbsp;&nbsp;&nbsp;&nbsp;background: url(images/contactar1.jpg);
    &nbsp;&nbsp;&nbsp;&nbsp;text-decoration: none;
    &nbsp;&nbsp;&nbsp;&nbsp;display: block;
    }
    .contactar a:hover {
    &nbsp;&nbsp;&nbsp;&nbsp;background: url(images/contactar2.jpg);
    }
    .proyecto {
    &nbsp;&nbsp;&nbsp;&nbsp;height: 215px;
    &nbsp;&nbsp;&nbsp;&nbsp;width: 200px;
    &nbsp;&nbsp;&nbsp;&nbsp;float: left;
    }
    .proyecto a {
    &nbsp;&nbsp;&nbsp;&nbsp;background: url(images/pfc1.gif);
    &nbsp;&nbsp;&nbsp;&nbsp;text-decoration: none;
    &nbsp;&nbsp;&nbsp;&nbsp;display: block;
    }
    .proyecto a:hover {
    &nbsp;&nbsp;&nbsp;&nbsp;background: url(images/pfc2.jpg);
    }
    .portfolio {
    &nbsp;&nbsp;&nbsp;&nbsp;height: 215px;
    &nbsp;&nbsp;&nbsp;&nbsp;width: 200px;
    &nbsp;&nbsp;&nbsp;&nbsp;float: left;
    }
    .portfolio a {
    &nbsp;&nbsp;&nbsp;&nbsp;background: url(images/portfolio1.jpg);
    &nbsp;&nbsp;&nbsp;&nbsp;text-decoration: none;
    &nbsp;&nbsp;&nbsp;&nbsp;display: block;
    }
    .portfolio a:hover {
    &nbsp;&nbsp;&nbsp;&nbsp;background: url(images/portfolio2.jpg);
    }
    .curriculumn {
    &nbsp;&nbsp;&nbsp;&nbsp;height: 215px;
    &nbsp;&nbsp;&nbsp;&nbsp;width: 200px;
    &nbsp;&nbsp;&nbsp;&nbsp;float: left;
    }
    .curriculumn a {
    &nbsp;&nbsp;&nbsp;&nbsp;background: url(images/cv1.gif);
    &nbsp;&nbsp;&nbsp;&nbsp;text-decoration: none;
    &nbsp;&nbsp;&nbsp;&nbsp;display: block;
    }
    .curriculumn a:hover {
    &nbsp;&nbsp;&nbsp;&nbsp;background: url(images/cv2.jpg);
    }
    -->
    </style>
    <!--c2--></div><!--ec2-->

    Como ves por cada elemento del menu hay 3 elementos CSS, por ejemplo:

    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
    .contactar {
    &nbsp;&nbsp;&nbsp;&nbsp;height: 215px;
    &nbsp;&nbsp;&nbsp;&nbsp;width: 200px;
    &nbsp;&nbsp;&nbsp;&nbsp;float: left;
    }
    <!--c2--></div><!--ec2-->

    le da la forma alto y ancho (height y width) al cuadrado donde estara la imagen y como los quieres horizontal estan todos uno tras otros alineados a la izquierda (left)

    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
    .contactar a {
    &nbsp;&nbsp;&nbsp;&nbsp;background: url(images/contactar1.jpg);
    &nbsp;&nbsp;&nbsp;&nbsp;text-decoration: none;
    &nbsp;&nbsp;&nbsp;&nbsp;display: block;
    }
    <!--c2--></div><!--ec2-->

    el Menu en estado normal mostrara la imagen que nombraste como 1 o sea el jpg normal, sin decoracion de link, ya que no hay link. Y que se dibuje todo a pesar de estar vacio, por eso el diplay: block;

    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
    .contactar a:hover {
    &nbsp;&nbsp;&nbsp;&nbsp;background: url(images/contactar2.jpg);
    }
    <!--c2--></div><!--ec2-->

    el hover, es cuando pasas el menu por encima y ahi es sencillo, cambia la imagen pone la 2 que es la de la banda diagonal.

    Todo esto se repite por cada elemento del menu y el gigantesto codigo html que tienes es:

    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
    <p class="contactar"><a href="#" class="contactar"> </a></p>
    <p class="proyecto"><a href="#" class="proyecto"> </a></p>
    <p class="portfolio"><a href="#" class="portfolio"> </a></p>
    <p class="curriculumn"><a href="#" class="curriculumn"> </a></p>
    <!--c2--></div><!--ec2-->

    Recuerda que si el CSS lo pones en un archivo aparte, tipo style.css eso queda en e cache por tanto este ultimo html de pocos bytes sera lo unico que el re-visitante debe cargar, logrando una pagina super rapida :)

    Otra sugerencia extra al CSS es que cuides el futuro posicionamiento de tu web, utilizando buenos titulos en las paginas, buenos metas keywords y description y enfatizar con H1, 2, 3 los titulos. Incluso si te fijas en los links de los menus, no hay texto, por otra parte como son imagenes esta medio pobre en cuando a texto eso lo puedes mejorar con agregar algunos titles al link:

    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
    <p class="contactar"><a href="#" class="contactar" title="Contacta con Nosotros"> </a></p>
    <p class="proyecto"><a href="#" class="proyecto" title="Proyecto Final"> </a></p>
    <p class="portfolio"><a href="#" class="portfolio" title="Portfolio"> </a></p>
    <p class="curriculumn"><a href="#" class="curriculumn" title="Curriculumn Vitae"> </a></p>
    <!--c2--></div><!--ec2-->

    Y cuidando un poco mas esto, podrias repetir a puro link de texto en el ie las opciones para reforzar un poco eso.

    Algunos Tips de posicionamiento web en nuestro sitio de tutoriales para webmasters:

    <a href="http://www.tallerwebmaster.com/Tutoriales-Posicionamiento-Web-c-6.html" target="_blank">http://www.tallerwebmaster.com/Tutoriales-...to-Web-c-6.html</a>
     
    elQuique, 20 Mar 2007
    #12
  14. gael

    gael Guest

    Vaya O_O muchas gracias por la extensa explicación :) ahora voy a "digerir" toda esta información y si consigo cambiarlo os lo comunicaré, muchísimas gracias a todos!


    Ya he probado y tiene su lógica, no tiene ningún misterio si ya conoces los selectores link, visited, hover... pero lo que veo es una cosilla, y es que al menos en IE, me da la sensación de que este sistema da como problemillas de visualización, al ponerte encima, y quitarte, y repetirlo varias veces, al final parece que desaparece la imagen, o se queda fija y no cambia...no os pasa a ninguno de vosotros?

    bueno, solo es por curiosidad, no quiero abusar de vuestra sabiduria :)

    muchas gracias
     
    gael, 20 Mar 2007
    #13
  15. SAPINTO

    SAPINTO Nuevo usuario

    um.. te sugiero que abuses, yo aqui estoy tomando nota de todo :)


    pd: me gusto tu web, aunque no soy diseñador... bueno, tampoco programador... y ahora que lo pienso soy un hibrido bastante extraño, pero si soy usuario, y como tal creo que a ciertas cosas le vendria bien un poco de flash, como el reflejo del logo quizas...
     
    SAPINTO, 20 Mar 2007
    #14
  16. Blackarcangel

    Blackarcangel Nuevo usuario

    bonitos colores
     
    Blackarcangel, 20 Mar 2007
    #15
  17. 23sato

    23sato www.oscarblanco.net

    No existe ningun problema con el hover a traves del css. No se va atascando, ni nada por el estilo. Si te sucede en tu maquina tiene que ver con alguna otra cosa.
     
    23sato, 20 Mar 2007
    #16
  18. gael

    gael Guest

    Alguna opinión más antes de dar carpetazo a este hilo???
     
    gael, 28 Mar 2007
    #17


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


    
    
    
    
Blog · Sitios amigos: GuiaHosting · Unidominios · Interalta ·