"Colocar" código HTML, CSS...

#1 (**permalink**) 03/09/2014, 05:50

Hola a todos!!

Soy nuevo en el foro. Este es mi primer post. Os llevo leyendo desde hace mucho tiempo pero nunca me he aventurado a escribir nada. Llegó el momento.

Para empezar decir que mis conocimientos de HTML son autodidactas, y así son jeje.

Os cuento. Tengo una página web la cual he ido construyendo según e ido "aprendiendo". La página está acabada y se ve bien, está como yo quería y funciona todo correctamente.

El "problema", que igual no es un problema y es cosa mía, es cómo está todo el código colocado. No tiene ni orden ni sentido. No hay jerarquía ninguna. Y mucho menos tiene etiquetas de HTML5. Todo son <div id> <div class> y <span class> y no hay ni un <h1>, <h2>, <p>... El CSS también está manga por hombro al igual que el servidor en el que no tienen mucho orden los archivos y carpetas.

La cosa es que todo funciona y se ve bien pero... el fondo está hecho un barullo.

Mi pregunta es... me podrías ayudar o indicar como poder colocar el HTML, el CSS y los archivos y carpetas del servidor para que la página esté mejor colocada, estructurada y semanticamente funcione mucho mejor y google pueda entender todo bien

Muchas gracias a todos de ante mano!!

#2 (**permalink**) 04/09/2014, 01:28

Este es el HTML que tengo, como veis no hay ni una etiqueta bien puesta.

Si me pudieseis ayudar os lo agradecería. Mil GRACIAS!

Código HTML:

Ver original<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript"> 
function showhide(capa,sign) 
{ 
obj=document.getElementById(capa); 
obj.style.display=obj.style.display=='none'?'block':'none'; 
sig=document.getElementById(sign); 
sig.innerHTML=sig.innerHTML=='+'?'-':'+'; 
} 
</script> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="robots" content="noimageindex"/>
<title>XXXXXX</title>
<meta name="lang" content="es">
<meta name="author" content="XXXXXX">
<meta name="description" content="XXXXXX"/>
<meta property="og:title" content="XXXXXX"/>
<meta property="og:description" content="XXXXXX"/>
<meta property="og:url" content="XXXXXX" />
<meta name="og:site_name" content="XXXXXX">
<meta property="og:image" content="XXXXXX" />
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
<link rel="shortcut icon" href="../images_design/favicon.ico"/>
</head>
<body>
<div id="contenedor">
 
<//* CABECERA *//> 
<div class="nombre">XXXXXX</div>
<div class="puesto">XXXXXX</div>
<div class="tlf">(t): XXXXXX</div>
<div class="email"><a href="XXXXXX" class="linka">(e): XXXXXX</a></div>
<div class="link"><a href="XXXXXX" target="_blank"class="linka">lXXXXXX</a></div>
<div class="about"><a href="XXXXXX" class="linka">about_</a></div>
 
<//* MENÚ *//>
<div class="navegacion"><a href="XXXXXX"  class="linka">inicio</a> <span class="verde">|</span> <a href="trees.html" title="Anterior" class="linka">ant</a> - <a href="grillo.html" title="Siguiente" class="linka">sig</a></div>
 
<//* PROYECTO *//>
<div class="titulo">XXXXXX</div>
<div class="marca">XXXXXX</div>
<div class="categoria">XXXXXX</div>
<div class="explicacion">
<b>Brief:</b> XXXXXX<br/>
<br/>
<b>Idea:</b> XXXXXX
</div>
<div class="piezas">        
<b>Vídeo web</b>
    XXXXXX
<br/>
<br/>
<b>Mecánica</b>
    <img src="XXXXXX" width="600" height="150" class="imagen"/>
<b>Pantallazos web</b>
    <img src="XXXXXX" width="600" height="887" class="imagen"/>
        <div class="comillas">¨<br/></div>
        <div class="copy">XXXXXX<br/></div>
<img src="XXXXXX" width="600" height="887" class="imagen"/>
        <div class="comillas">¨<br/></div>
        <div class="copy"> XXXXXX<br/></div>
<img src="XXXXXX" width="600" height="490" class="imagen"/>
<b>Vídeo al usuario</b>
    XXXXXX
    <img src="XXXXXX" width="600" height="642" class="imagen"/>
<span class="verde"><b>----</b></span><br/>
<font-size: 12px font-family: "courier" letter-spacing: 0.2px>  
<a href="javascript:void(0)" id="signo1" onClick="showhide('colors1','signo0')" class="linka">Ver ficha</a>
<span id="colors1" style="display:none"><br/><span class="creditos">
<b>Link web</b><br/>
<a href="XXXXXX" target="_blank" class="linkb">XXXXXX</a><br/>
<br/>
<b>Mi rol:</b> XXXXXX<br/>
<b>Agencia:</b> XXXXXX<br/>
<b>Director Creativo:</b> XXXXXX<br/>
<b>Copywriter:</b> CXXXXXX<br/>
<b>Diseñador:</b> XXXXXX<br/>
<b>Vídeo:</b> XXXXXX</br>
<br/>
<b>Resultados</b><br/>
XXXXXX</span>
</span>
</font>  
</div>
 
<//* MENÚ *//>
<div class="top"><a href="#top"  class="linka">arriba</a></div>
 
<//* lINEA *//>
<div class="s1"> </div>
 
<//* MOSAICO *//>
<div class="t1">
    <div class="tt1">
        <a href="postdata.html"><img src="XXXXXX"/></a>
    </div>
</div>    
<div class="t2">
    <div class="tt2">
           <a href="trees.html"><img src="XXXXXX"/></a>
    </div>
</div>
<div class="t3">
    <div class="tt3"off>
        <img src="XXXXX"/>
    </div>
</div>
<div class="t4">
    <div class="tt4">
        <a href="grillo.html"><img src="XXXXXX"/></a>
    </div>
</div>
<div class="t5">
    <div class="tt5">
        <a href="cerveza.html"><img src="XXXXXX"/></a>
    </div>
</div>    
<div class="t6">
    <div class="tt6">
        <a href="deshielo.html"><img src="XXXXXX"/></a>
    </div>
</div>
<div class="t7">
    <div class="tt7">
         <a href="latas.html"><img src="XXXXXX"/></a>
    </div>
</div>
<div class="t8">
    <div class="tt8">
         <a href="monstruos.html"><img src="XXXXXX"/></a>
    </div>
</div>
 
<//* CIERRE *//>
<div class="footer"> XXXXXX </div> 
</div>
</body>
</html>

webosiris · #3 (**permalink**) 05/09/2014, 03:13

hola, bienvenido al foro.
como bien intuíste, si, tienes un problema (conocido como divitis o "sopa de divs")

Creo que primero te deberías de concentrar en el html, olvida el css por ahora. Debes de analizar la semántica (y no la apariencia) de la información que tienes, y marcarla en consecuencia. Los elementos div y span NO tienen ningún significado semántico, por lo que en esta primera etapa no debería de haber ni uno.

Aquí tienes un listado de todos los elementos que existen en html5 y su significado semántico: HTML5 Element index

Cuando tienes ya el html pronto, ahí empiezas con el css, de la misma forma, estilando los elementos que tienes en el html. Cuando te parezca que para llegar a la apariencia que deseas se hace necesario que haya otro elemento que tu html no tiene, ahí si es el momento de agregar un div (o un span si el elemento debe de ser inline)

Cuando tengas más práctica ya te va a ser más fácil definir cuando necesitas divs y cuando no y lo vas a poder hacer todo en una sola fase.

#4 (**permalink**) 06/09/2014, 13:40

Mil gracias por la ayuda....

He cambiado todo el código y ahora tengo esto... mucho mejor, ¿verdad?

Código HTML:

 <body>
    <header>
      <h1>XXXXXX</br>XXXXX</h1>
      <address>XXXXX</br><a href="XXXXX" class="link1">XXXXX/a></address>
      <nav>
        <ul class="info">
          <li><a href="hXXXXX" target="_blank" class="link1">XXXXX/a></li>
          <li><a href="XXXXX" class="link1">XXXXX</a></li>
        </ul>
      </nav>
    </header>
    <section>
      <nav>
        <ul class="next">
          <li><a href="XXXXX" class="link1">XXXXX</a> <span class="bar">|</span> <a href="XXXXX" title="Siguiente" class="link1">sig</a><li>
        </ul>
      </nav>
      <article>
        <h2 class="proyect">XXXXX</h2>
        <h3>XXXXX</h3>
        <h4>XXXXX/h4>
        <h5>XXXXX</h5>
        <p class="text">XXXXX</p>
        <h5>Idea</h5>
        <p class="text">XXXXX</p>
        <h5>Vídeo web</h5>
          <iframe src="XXXXXn></iframe>
        <h5>Mecánica</h5>
        <figure class="photo">
          <img src="../images/p1.png" width="600" height="150"/>
        </figure>
        <h5>Pantallazos web</h5>
        <figure class="photo">
          <img src="../images/p2.png" width="600" height="940"/>
        </figure>
        <figure class="photo">
          <img src="../images/p3.png" width="600" height="291"/>
        </figure>
        <figure class="photo">
          <img src="../images/p4.png" width="600" height="639 "/>
        </figure>
        <h5>Pantallazos mail</h5>
        <figure class="photo">
          <img src="../images/p5.png" width="600" height="302"/>
        </figure>
        <h5></h5>
        <figure class="photo">
          <img src="../images/p6.png" width="600" height="196"/>
        </figure>
        <h5><a href="javascript:void(0)" id="signo1" onClick="showhide('colors1','signo0')" class="link3">Ver ficha</a> <span class="arrow">&darr;</span></h5>
        <p class="text"><span id="colors1" style="display:none"><br/>
        <b>Link proyecto</b><br/>
        <a href="XXXXX" target="_blank" class="link2">XXXXX</a><br/>
        <br/>
        <b>XXXXX</b> XXXXX<br/>
        <b>XXXXX</b> <a href="XXXXX" target="_blank" class="link2">XXXXX</a><br/>
        <b>XXXXX</b> XXXXX<br/>
        <b>XXXXX</b>XXXXX<br/>
        <b>XXXXX</b> XXXXX<br/>
        <b>XXXXX</b> XXXXX<br/>
        <b>XXXXX</b> XXXXX<br/>
        <br/>
        <b>XXXXX</b><br/>
        XXXXX<br/>
        <br/>
        <b>XXXXX</b><br/>
        XXXXX<br/>
        XXXXX</span></p>
      </article>
      <nav>
        <ul class="top">
          <li><a href="#top" class="link1">arriba</a><li>
        </ul>
      </nav>
      <figure class="line">
          <img src="../images_design/s1.png" width="600" height="6"/>
        </figure>
    </section>
    <nav>
      <div class="t1">
        <div class="tt1off">
        <img src="../thumbnail/tt1.png"/>
        </div>
      </div>    
      <div class="t2">
        <div class="tt2">
        <a href="trees.html"><img src="../thumbnail/tt2.png"/></a>
        </div>
      </div>
      <div class="t3">
        <div class="tt3">
        <a href="gallos.html"><img src="../thumbnail/tt3.png"/></a>
        </div>
      </div>
      <div class="t4">
        <div class="tt4">
        <a href="grillo.html"><img src="../thumbnail/tt4.png"/></a>
        </div>
      </div>
      <div class="t5">
        <div class="tt5">
        <a href="cerveza.html"><img src="../thumbnail/tt5.png"/></a>
        </div>
      </div>    
      <div class="t6">
        <div class="tt6">
        <a href="deshielo.html"><img src="../thumbnail/tt6.png"/></a>
        </div>
      </div>
      <div class="t7">
        <div class="tt7">
        <a href="latas.html"><img src="../thumbnail/tt7.png"/></a>
        </div>
      </div>
      <div class="t8">
        <div class="tt8">
        <a href="monstruos.html"><img src="../thumbnail/tt8.png"/></a>
        </div>
      </div>
    </nav>
    <footer>©XXXXX</footer>
  </body>
</html>

Rafael · #5 (**permalink**) 10/09/2014, 08:08

¡Bravo! ¡Bravo!

Si todas las personas del planeta mejoraran como tú lo has hecho el cielo sería rosa y no todo café lleno de smog!

¡Bravo! ¡Bravo!

#6 (**permalink**) 17/09/2014, 10:32

Rafael!! Muchas gracias!!!

entonces el código de esa forma está bien así?

Llevo poco en este foro pero en el poco tiempo que llevo he aprendido muchísimo gracias a todos los que ayudáis a gente como yo!

Rafael · #7 (**permalink**) 18/09/2014, 09:25

Básicamente sí, excepto por algunos detallitos. Por ejemplo el <figure>Probablemente sobra.

El menú nav tiene normalmente una estructura de listas

Código HTML:

Ver original<nav>
 <ul>
  <li><a><img /></a></li>
  <li><a><img /></a></li>
  <li><a><img /></a></li>
 </ul>
</nav>

y el <br> técnicamente se usa dentro de un párrafo una estrofa

de una canción
por ejemplo
para separar
los renglones.

No para separar otro tipo de elementos.

#8 (**permalink**) 22/09/2014, 08:14

Hola Rafael muchas gracias!!!

Entonces dónde va una imagen no hace poner la etiqueta <figure>? iría solo la <img>?

Por otro lado el menú <nav> lo he hecho con listas pero en los que no tengo las listas es pq no sé hacerlo sin <divs> que es supongo a esos a los que te refieres.

Por otro lago si no pongo <br> para separar párrafos y demás que hago?

Gracias por vuestra ayuda!

Rafael · #9 (**permalink**) 22/09/2014, 12:29

Por partes.

Código HTML:

Ver original<b>XXXXX</b> XXXXX<br/>
        <b>XXXXX</b> <a href="XXXXX" target="_blank" class="link2">XXXXX</a><br/>
        <b>XXXXX</b> XXXXX<br/>
        <b>XXXXX</b>XXXXX<br/>
        <b>XXXXX</b> XXXXX<br/>
        <b>XXXXX</b> XXXXX<br/>
        <b>XXXXX</b> XXXXX<br/>

Esto es para escribir un poema, pero parece que quiere ser una lista de algo. Entonces revisa si te sirven los elementos Definition List
http://www.w3schools.com/tags/tag_dl.asp

Para separar un párrafo de otro lo pones en un <p> (párrafo) distinto y ya.

El problema es que aunque muchos no usaron una máquina de escribir piensan como en los años 70 dónde la única manera de separar un párrafo era mentiéndole Return return return.

-------------------------------------------------

Código HTML:

Ver original<nav>
      <div class="t1">
        <div class="tt1off">
        <img src="http://www.forosdelweb.com/f4/thumbnail/tt1.png"/>
        </div>

Esto en realidad no es un elemento de navegación, ya que no hay nada a qué picarle (<a>)

-------------------------------------------------
El figure o no figure...Este para mí es un terreno pantanoso. La definición de la w3 es algo como esto:

Cita:

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.
W3C Specification

¿Te acuerdas esos libros de la escuela donde decía ver la figura 3?
Aparte esa figura 3 trae una explicación, figcaption.

Si el diseño necesita ese tipo de elementos, que para mí son elementos referenciados (se hace referencia a ellos), a mi parecer, se debería de usar.

Cuando solo es un elemento decorativo debería (a mi parecer) usarse el img solito.

Pero dentro de un fig puede no haber sólo una img (bitmap) sino podría haber un svg, un canvas, incluso sólo un texto.

Curiosamente la definición es lo contrario de lo que yo pienso debería ser, ya que si lo remueves no afecte el flujo del documento.

#10 (**permalink**) 23/09/2014, 04:24

Rafael GRACIAS!!!!!

Lo del <br> lo he entendido... joer que sencillo... poniendo varios <p>, no había caído.

Lo de <figure> también entendido hay en otras páginas que si que tengo puesto <figcaption> por eso en todas pongo <figure>, para mantener la coherencia entre páginas. Cosa que igual no hace ni falta, o sí?

Y en lo de navegación es que es un menú que al pasar el ratón por encima se cambia un jpg ofreciendo información del enlace al que te lleva ya que al hacer clic te lleva a dicho enlace. Por eso lo he puesto entre <nav> cosa que no sé si está bien hecha y como debería de ponerla...

Gracias por todo!

Rafael · #11 (**permalink**) 23/09/2014, 11:36

Pues si es un menú pues sí. Si lleva o no un div eso depende de lo que necesites. Probablemente sea un slideshow o algo así.

#12 (**permalink**) 29/09/2014, 03:33

Hola Rafael.

Sí, es una especie de slideshow pero que a la vez hace de menú pq tiene un link a las diferentes páginas de la web.

Entonces, ¿estaría bien metido entre <nav> </nav>

Rafael · #13 (**permalink**) 29/09/2014, 10:15

Buena pregunta...

Pues sí está bien. Sólo que probablemente sea diferente al menú principal. Si es link a los mismos lugares yo no lo pondría en nav.

#14 (**permalink**) 30/09/2014, 05:14

Ser es el menú principal de la web. Luego hay un menú secundario.

Y otra pregunta Rafael que no sé si tendría que plantearla en otro sitio o aquí mismo me podrías ayudar...

SI quiero que toda la web se navegue desde la misma url... Es decir, www.xxxxxx.com y no www.xxxxxx.com/xxxxxx.html ¿Cómo puedo hacerlo?

Esto es meramente "estético" o afectaría al SEO de la web...

Rafael · #15 (**permalink**) 30/09/2014, 13:30

No lo hagas.

webosiris · #16 (**permalink**) 30/09/2014, 16:44

Cita:

Iniciado por Rafael

No lo hagas.

+1

hay tantas razones en contra de lo que dices que se podría escribir un libro.
La estética de una web empieza en el px 0,0 del BODY del documento. No antes.

#17 (**permalink**) 01/10/2014, 01:40

Vale, vale...

Me quito esa idea de la cabeza ya jeje

pzin · #18 (**permalink**) 01/10/2014, 08:33

No obstante puedes hacer las URL más estéticas usando Apache y el módule Rewrite, que hacen muchos sitios (o con otros métodos) como este propio foro.

#19 (**permalink**) 01/10/2014, 09:55

Vale ahora que ya tengo el HTML "bien" puesto y la idea de tener todo bajo una url fuera de mi cabeza me surge otro problema: la lentitud. Mis imágenes se cargan bastante lentas.

Todas las imágenes son de 600 px de anchas y sobre 200 Kb 500Kb como mucho. Y entre 3 y 5 de estas por página y en algunas con slideshow de 4 imágenes más o menos.

¿Esto esto suficiente como para que las imágenes de la web tarden en cargar?

Son todas png sacadas de photoshop con el "guardar para web"

Rafael · #20 (**permalink**) 02/10/2014, 13:03

Para una foto usa jpg con compresión. Para gráficas (de barras, pie) logos, íconos usa png.
¿Cuanta compresión?... your choice.

#21 (**permalink**) 03/10/2014, 01:33

Okis Rafael... muchas gracias!! puede ser que al ser jpgs ocupe más y por eso tarden más en cargar, no?

Rafael · #22 (**permalink**) 03/10/2014, 03:27

En tu post anterior dices que son PNG.

Ojo la velocidad de carga puede depender de muchas cosas. Errores en el código, en algún javascript, peso de las imágenes, pero también en la calidad del servidor donde está alojado.

En algunos casos he movido páginas de algún cliente de servidor bajando la carga de 12 segundos a 1-2.

Para el tema del peso de las imágenes te pongo un análisis: http://otake.com.mx/Apuntes/PruebasD...JpgProceso.htm

#23 (**permalink**) 03/10/2014, 04:28

Mi servidor es 1&1 el pack DualBasic.

Con todo esto, qué no sé muy bien lo que significan, entre muchas otras cosas:

Espacio web : 1000 MB
Tráfico ilimitado : Sí
PHP : Sí
Python : Sí
Perl : Sí
Bases de datos MySQL : 2Solicitar
Acceso FTP : 1
SSL : NoSolicitar
Accesos SSH : 0

Tengo 1&1 pq cuando lo puse, hace ya un bastantes años me parecio bueno... seguramente no sea el mejor que haya.

Mis páginas tendrán que cargar 4 Mb - 6 Mb en imágenes como mucho. Y no sé si eso es mucho o poco...

#24 (**permalink**) 06/10/2014, 03:19

Cómo puedo comprobar la velocidad de mi web y ver que puntos son en los que puedo mejorarla?

Gracias!

webosiris · #25 (**permalink**) 06/10/2014, 10:30

4589, entiendo que sea tentador empezar a preguntar sobre todo, pero recuerda que estamos en el foro de html y cada pregunta tiene su temática y su propio espacio asignado.

#26 (**permalink**) 07/10/2014, 01:38

Webosiris lo entiendo, uno que aprende tanto por estos lares que se emociona a preguntar.

¿Dónde debería realizar esta pregunta?. Pensé que aquí se podría formular, ya que lo que me carga lento es el HTML de mi web.

Gracias y perdón por preguntar en el lugar no debido.

Rafael · #27 (**permalink**) 07/10/2014, 03:54

Esta pregunta podría ir en Diseño Web, que es una categoría más general.

Es muy poco probable que tu html tarde en cargar ya que debería pesar unos cuandos decenas de kb.
(10km) cuando mucho. Claro que alguna vez ví una ridiculés de html de 6 megas (6,000kb)
Puede ser que tengas un código JavaScript que esté mal hecho y tenga un loop, que no cargue nunca.

Pero se me hace que es una de estas 2:

6 megas para una página normal es mucho, por lo menos para tu primera página, donde la gente no sabe si quiere esperar algo o mejor se va. Para esto lee el link que te puse ya acerca de la compresión jpg.

También puede ser que tu servicio de hosting sea un poco chafa. No lo sé. Que enumeres lo que ofrece no dice nada de la calidad de sus instalaciones, mantenimiento, infraestructura.

Rafael · #28 (**permalink**) 09/10/2014, 13:36

Ya troné tu último post en una pregunta nueva, en la sección Diseño Web.

No pongo el link para que te obligues a navegar en esa sección.

#29 (**permalink**) 10/10/2014, 01:32

Gracias Rafael!!!