¿Voy bien con este código?

Teclitas · #1 (**permalink**) 13/10/2014, 11:51

Antes que nada, me gustaría comentaros algo sobre mi experiencia con el diseño web. He hecho algunas webs pequeñitas hasta hace unos años, pero claro, en aquella época usaba tablas. Cuando empezó el tema de las capas, no se me dieron muy bien. Durante muchos años he estado sin diseñar nada. Ahora me surge la necesidad de hacer una pequeña web sencilla, y aunque podría haber tirado de plantillas gratuitas, no soy partidario de usarlas. Siempre he preferido hacer el diseño por mi mismo. Se algo de hojas de estilo, como utilizarlas usando #nombredelacapa, .nombredelaclase, #nombre > p... Es más, hace poco estuve siguiendo un pequeño videotutorial para refrescarme un poco los escasos conocimientos. Se controlar un poco las capas con el padding, margin, entiendo un poco el uso de float, no tengo ni idea de cuando usar clear: both :D pero más o menos me defiendo. Cuando encuentro dudas recurro a Google y me ayuda bastante.

Como decía, estaba acostumbrado a usar tablas. Ahora se usa CSS, el cual más o menos puedo manejar, pero en cambio, veo que también se usan unas etiquetas que no he visto en mi vida, como Aside, Article, Hgroup, Footer, Nav, Section. Supongo que cada vez que escribo una de estas etiquetas, estoy creando realmente una capa, solo que el navegador y los buscadores obtendrán información valiosa al usarlas. Pienso que al escribir la etiqueta Aside, es como si estuviera creando una etiqueta div con id aside o cualquier id descriptivo. Corregirme si me equivoco.

Después de toda esta intro, voy a poneros un código que he escrito muy cortito que sería básicamente la estructura que le quiero dar a mi web. Ajunto también una imágen. Lo único que deseo es que me digáis si he escrito bien las etiquetas dado el diseño que adjunto, si habría que cambiar alguna por otra más recomendable o si estoy totalmente desencaminado jajaja.

El header con el logotipo sería al 100% del ancho del navegador, mientras que el resto del cuerpo, se ajustaría al centro usando margin: auto. El pie me gustaría que quedase ajustado al tamaño del artículo y que no se meta debajo del widget con la publicidad a la derecha. Los bordes en realidad no se verían en la página web final, solo son orientativos. Los enlaces del menú, con un fondo de colores diferentes cada elemento, se ampliarían al pasar el ratón por encima usando a:hover en la hoja de estilo. No se, creo que no os aburro con más detalles. Ahí va el código:

Código:

<!DOCTYPE>
<html lang="es">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="description" content="Aqui toda nuestra descripcion">
<meta name="keywords" content="Aqui, Palabras, Clave">
<link rel="stylesheet" type="text/css" href="estilos.css"/>
</head>
<body>
<header id="Logotipo">
Logotipo
</header>
<section id="Cuerpo">

	<nav>
		<div id="Enlace1"></div>
		<div id="Enlace2"></div>
		<div id="Enlace3"></div>
		<div id="Enlace4"></div>	
	</nav>
	
	<aside id="PublicidadTop">Publicidad 1</aside>
	
	<section id="Articulo">
		<article>		
			<hgroup><h2 class="Titulo">Titulo del articulo</h2></hgroup>
			<aside id="PublicidadIn">Publicidad 3</aside>
			<p>Texto Bla Bla Bla...</p>		
		</article>	
	</section>

	<div id="PublicidadDown">Publicidad 4</div>

	<footer>Pie de página</footer>

</section>

<aside id="PublicidadRight">Publicidad 2</aside>

</body>
</html>

Esta es una imagen del diseño que estoy intentando hacer. Está hecha con el fantástico paint de Windows. Adoro este programita

Es todo por el momento. Espero vuestras respuestas y cosquis jajajaja

jmbaena83 · #2 (**permalink**) 14/10/2014, 05:01

Vas bien, pero deberias utilizar clases en vez de llamar por id a los enlaces:

Código:

<nav>
		<div class="Enlaces">a</div>
		<div class="Enlaces">a</div>
		<div class="Enlaces">a</div>
		<div class="Enlaces">a</div>	
	</nav>

Y despues desde css.

Código:

.enlaces{
border:1px solid black;
width:100px;..........

Teclitas · #3 (**permalink**) 14/10/2014, 08:31

Gracias jmbaena83, hoy voy a ponerme con los estilos, haber que tal me va. Saludos.

pzin · #4 (**permalink**) 14/10/2014, 09:02

Ese nav dentro de una sección queda un poco entraño. Debería de ir en la raíz o bien en la cabecera de la raíz. Y luego dentro sería una lista desordenada de enlaces, con un ul.

hgroup ya lo volvieron a quitar. Estuvo en un borrador de la especificación pero lo han vuelto a quitar, así que no es demasiado recomendable usarlo.

Teclitas · #5 (**permalink**) 14/10/2014, 09:42

Gracias pzin, quitaré el hgroup entonces. Lo que no entiendo bien es lo del nav en la raiz o cabecera de la raiz, no se que es eso :D

Edito:

Entiendo lo del ul y li, olvidé hacerlo así, pero no lo de la raiz.

Lo he cambiado por:

Código:

<nav>
	<ul>
		<li id="enlace1">Enlace 1</li>
		<li id="enlace2">Enlace 2</li>
		<li id="enlace3">Enlace 3</li>
		<li id="enlace4">Enlace 4</li>
		<li id="enlace5">Enlace 5</li>
		<li id="enlace6">Enlace 6</li>		
	</ul>
</nav>

Mantengo el id por el momento hasta que haga unas pruebas con el código y vea si puedo usar una clase y ahorrar código.

Teclitas · #6 (**permalink**) 15/10/2014, 05:15

Bueno, entre ayer y hoy he logrado hacer un código medio decente, eso si, no he usado las etiquetas nuevas, solo capas con id y su correspondiente css. Os lo pongo para que veáis como me ha quedado. He variado un poco el diseño.

Por otra parte, lo único que me falla por el momento es la capa que contiende "Texto de bienvenida", que al reducir el ancho del navegador, se mete el texto debajo. Tampoco he probado como se ve en teléfonos, que sería bastante importante debido a que hay muchos usuarios que entran con estos aparatos. Pero no soy capaz de usar las etiquetas de html5, como para intentarlo con diseño orientado a moviles :D

Pongo los códigos que he hecho al final:

Html

Código:

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="estilos.css"/>
</head>
<body>
<div id="logotipo">
	<div id="textoLog">Logotipo</div>
	<div id="descripcion">Texto de bienvenida</div>
</div>
<div id="contenido">
	<nav>
		<ul id="menu">
			<li><a href="#" id="enlace1">Enlace 1</a></li>
			<li><a href="#" id="enlace2">Enlace 2</a></li>
			<li><a href="#" id="enlace3">Enlace 3</a></li>
			<li><a href="#" id="enlace4">Enlace 4</a></li>
			<li><a href="#" id="enlace5">Enlace 5</a></li>	
			<li><a href="#" id="enlace6">Enlace 6</a></li>			
		</ul>	
	</nav>
	
	<div id="articulo">
		<div id="titulo"><h2>Titulo</h2></div>
		<div id="publicidad1"><img src="adsense300x250.png" /></div>
		<div id="texto">
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id commodo 
				lectus. Curabitur a placerat neque, et efficitur velit. Suspendisse ultricies massa 
				eu eleifend pretium. Nulla facilisi. Aliquam finibus vitae nisl ut sollicitudin. 
				Integer et volutpat turpis. Nunc lorem elit, blandit et auctor at, facilisis in diam. 
				<br /><br />Duis vitae purus quis nulla porttitor tempus vel ut massa. Donec in ante convallis elit 
				venenatis pharetra. Pellentesque maximus venenatis condimentum. Aenean eget mattis est, 
				sit amet consequat magna. Nunc vel lectus auctor, vehicula diam quis, lobortis ligula. 
				Donec ante urna, placerat nec mattis ac, lacinia vitae libero.
				<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id commodo 
				lectus. Curabitur a placerat neque, et efficitur velit. Suspendisse ultricies massa 
				eu eleifend pretium. Nulla facilisi. Aliquam finibus vitae nisl ut sollicitudin. 
				Integer et volutpat turpis. Nunc lorem elit, blandit et auctor at, facilisis in diam. 
				<br /><br />Duis vitae purus quis nulla porttitor tempus vel ut massa. Donec in ante convallis elit 
				venenatis pharetra. Pellentesque maximus venenatis condimentum. Aenean eget mattis est, 
				sit amet consequat magna. Nunc vel lectus auctor, vehicula diam quis, lobortis ligula. 
				Donec ante urna, placerat nec mattis ac, lacinia vitae libero.
			</p>
		</div>	
		<div id="publicidad2"><img src="adsense320x100.png" /></div>	
	</div>

	<div id="publicidad3"><img src="adsense300x600.png" /></div>
	<div id="pie"><p>© 2014 - Todos los derechos reservados</p></div>
</div>
</body>
</html>

CSS

Código:

@import url('reset.css');
@import url('fuentes.css');

body
{
background: url("4.jpg");	
}

#logotipo
{
width: 100%;
height: 100px;
background: url("3.jpg");
box-shadow: 0px 3px 5px #000000;
-moz-box-shadow: 0px 3px 5px #000000;
-webkit-box-shadow: 0px 3px 5px #000000;
}

#textoLog
{
width: 300px;
font-size: 40px;	
padding-top: 20px;
padding-left: 30px;
float: left;
}

#descripcion
{
width: 600px;
float: left;
padding-top: 40px;	
}

#contenido
{
width: 960px;
margin: auto;	
background: url("2.jpg");
margin-top: 10px;
box-shadow: 0px 3px 5px #000000;
-moz-box-shadow: 0px 3px 5px #000000;
-webkit-box-shadow: 0px 3px 5px #000000;
}

nav
{
margin: auto;
width: 960px;	
clear: both;
float: left; 
overflow: hidden;
width: 100%;
padding-top: 30px;
padding-bottom: 30px;
}

nav ul li
{
display: inline;
}

#menu
{
float: left;
left: 50%;
list-style-type: none;
margin:0 auto;
position: relative;	
}

#menu li 
{
float: left;
position: relative;
right: 50%;
padding-left: 5px;
}

nav ul li a
{
color: #000000;
font-size: 14px;
padding: 15px;	
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
box-shadow: 0px 3px 5px #000000;
-moz-box-shadow: 0px 3px 5px #000000;
-webkit-box-shadow: 0px 3px 5px #000000;
}

nav ul li a:hover
{
font-size: 20px;	
}

#enlace1
{
background-color:  #FA1F1F;
}

#enlace2
{
background-color:  #73C4CB;
}

#enlace3
{
background-color:  #FF6B20;
}

#enlace4
{
background-color:  #2085FF;
}

#enlace5
{
background-color:  #8C9DFF;
}

#enlace6
{
background-color:  #F6FF8C;
}

#articulo
{
float: left;
width: 650px;	
}

#titulo
{
padding-left: 50px;	
}

#publicidad1
{
width: 300px;
height: 250px;
background-color: red;
float: left;
margin-right: 10px;	
margin-left: 5px;
}

#texto > p
{
font-size: 18px;
text-align: justify;	
padding: 10px;
}

#publicidad2
{
margin: auto;
width: 320px;
height: 100px;
}

#publicidad3
{
float: right;
width: 300px;
background-color: aqua;	
margin-top: 70px;
margin-right: 5px;
}

#pie
{
width: 960px;
padding-top: 20px;
clear: both;	
}

#pie > p
{
text-align: center;	
}

hackjose · #7 (**permalink**) 15/10/2014, 09:09

La raiz es el elemento <html>

Creo que el section#Cuerpo sale sobrando, si lo ves por el lado de los estilos mejor usa div

Código HTML:

Ver original<!DOCTYPE>
<html lang="es">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="description" content="Aqui toda nuestra descripcion">
<meta name="keywords" content="Aqui, Palabras, Clave">
<link rel="stylesheet" type="text/css" href="estilos.css"/>
</head>
<body>
<header id="Logotipo">
Logotipo
<nav>
    <ul>
        <li id="enlace1">Enlace 1</li>
        <li id="enlace2">Enlace 2</li>
        <li id="enlace3">Enlace 3</li>
        <li id="enlace4">Enlace 4</li>
        <li id="enlace5">Enlace 5</li>
        <li id="enlace6">Enlace 6</li>      
    </ul>   
</nav>
</header>
<section id="Cuerpo">
    
    <aside id="PublicidadTop">Publicidad 1</aside>
    
    <section id="Articulo">
        <article>       
            <header><h1 class="Titulo">Titulo del articulo</h1></header>
            <aside id="PublicidadIn">Publicidad 3</aside>
            <p>Texto Bla Bla Bla...</p>     
        </article>  
    </section>
 
    <div id="PublicidadDown">Publicidad 4</div>
 
    <footer>Pie de página</footer>
 
</section>
 
<aside id="PublicidadRight">Publicidad 2</aside>
 
</body>
</html>

saludos