Duda trabajo html

B

Buenas,

Estoy realizando un trabajo y necesitaría algún consejo al respecto....

Tengo que realizar una web con el siguiente wirframe: http://oi66.tinypic.com/68znmp.jpg

Tengo ya bastante avanzado el tema, pero creo que no voy por el buen camino ya que creo que se podría hacer también mediante tablas, no?

Adjuno codigo para consejos:

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>PAC3</title>
<link rel="stylesheet" href="estils.css" type="text/css" />
</head>

<body>



<div id="cabecera">


<img id="logo" src="file:///C:/Users/Jose%20Luis/Desktop/UOC/2%20semestre/Webs/PAC%20FINAL/Recursos/images/logo.png" 

alt="logo" /> 	
	<h1>Shoping time</h1>


<div id="iconos">

<ul>
<li><img src="file:///C:/Users/Jose%20Luis/Desktop/UOC/2%20semestre/Webs/PAC%20FINAL/Recursos/images/icon_session.png" 

alt="sesion" /> </li> 	

<li><img src="file:///C:/Users/Jose%20Luis/Desktop/UOC/2%20semestre/Webs/PAC%20FINAL/Recursos/images/icon_heart.png" alt="heart" 

/></li> 	

<li><img src="file:///C:/Users/Jose%20Luis/Desktop/UOC/2%20semestre/Webs/PAC%20FINAL/Recursos/images/icon_bag.png" alt="bag" />
	</ul>	</li> 

</div>




</div>

<nav class="navegador">

 <ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Dona</a></li>
  <li><a href="#">Infantil</a></li>
</br> <img id ="buscar" src="file:///C:/Users/Jose%20Luis/Desktop/UOC/2%20semestre/Webs/PAC

%20FINAL/Recursos/images/icon_search.png" alt="bag" />
  <li><a href="#">Inspiració</a></li>
  <li><a href="#">Roba</a></li>
  <li><a href="#">Sabates</a></li>
<li><a href="#">Esport</a></li>
<li><a href="#">Complents</a></li>
<li><a href="#">Ofertes</a></li>
</ul>

</nav>


<div class="container">


<h2>"Ofertes del 50% temporada / primavera estiu. Aconsegueix les últimes tendències a preus genials"<h2>
<img id="sales" src="file:///C:/Users/Jose%20Luis/Desktop/UOC/2%20semestre/Webs/PAC%20FINAL/Recursos/images/sale.png" alt="logo" 

/> 


	</div>


</body>
</html>
body {
	margin: 0;
	padding: 0;
	font: 16px/1.6 Georgia, "Times New Roman", Times, serif;
	color: #242424;
	text-align: justify;
}

.container {
	width: 100%;
	max-width: 960px;
	margin: 50px auto; /*centrem el contingut horitzontalment*/
}

/* ---------- Cabecera ----------*/


#cabecera {
  background-color: #F8E0EC;
  padding: 30px;
  width: auto;
}

#logo{
	float: left;
	margin-left: 40px;
	width: 100px;
	height: 100px;
	border: 0px;
}


#cabecera h1 {
	position: relative;
	top: 5px;
	left: 10px;
}

#iconos {
	float: right;
	margin-top: -80px;
}

#iconos li {
	display: inline;
	list-style: none;
}

#iconos ul {
	margin: 60px;
	margin-top: 1px;
}

#buscar {

float: right;
margin-top: -10px;

}


/* ---------- Navegador ----------*/


ul.breadcrumb {
    padding: 10px 10px 30px;
margin-left: 30px;
    margin-right: 30px;
    list-style: none;
    background-color: #eee;
    font-size: 17px;
}


ul.breadcrumb li {
    display: inline;
} 


ul.breadcrumb li+li:before {
    padding: 8px;
    color: black;
    content: "/\00a0";
}


ul.breadcrumb li a {
    color: #0275d8;
    text-decoration: none;
}


ul.breadcrumb li a:hover {
    color: #01447e;
    text-decoration: underline;
} 

/* ---------- Cos ----------*/

#sales {
	width: 1285px;
	margin-left: -164px;
	height: 300px;
	

}

h2 {
	text-align: center;
	margin top: -4px;

}

Gracias

MartiONE

Cual es la duda?

1 respuesta
Turco

¿No te permiten utilizar librerías como Bootstrap? Te facilitaría mucho la maquetación.

B

#2 La duda es que si viendo mi código voy por buen camino ( no utilizo tablas) o si por lo contrario se tendrían que utilizar para una mejor maquetación.

Ya que me esta quedando algo asi: http://s2.subirimagenes.com/otros/previo/thump_9737336123.jpg

Gu3v4r4

uso de tablas para maquetar? volvemos a 1995?

no enserio, utiliza bootstrap

1 respuesta
B

#5 No creo que me dejen utilizarlo ya que es un trabajo de la uni y no me ha salido la palabra bootstrap por ningún lado.

B

Si no puedes bootstrap. Prueba skeleton.

Tablas es muy del siglo XX.

1 respuesta
B

#7 Nos obligan a teclear todo el codgo html y css a mano sin programas ni ayudas externas.

Por eso vengo a qui para ver si alguien me puede dar un consejo de cual es la mejor forma de estructurar una pagina como la que comento en #1

1 respuesta
B

Ya te digo Jose Luis que la página tal como la tienes la puedes estructurar como te salga del ogt.

Lo que tienes que hacer es un diseño y basarte en él de cara a crear los contenedores.

Como consejo. Las imágenes y cualquier enlace ponlas en url relativas y no en absolutas. Te resultará más fácil si usas un servidor local para asemejarse a un dominio

2 respuestas
B

#9 Me esta quedando asi: http://www.lawebdelprogramador.com/usr/214000/214529/59175678255d8-123.jpg

Martita-

#8 #9
Por no hablar, de que si pasa el proyecto con esa url absoluta, la imagen al profesor no se le va a ver xD.

1 respuesta
B

#11 Voy a cambiarlo todo antes de pasárselo al profesor, esto lo tengo claro.

1 respuesta
Martita-

#12
Es una buena practica hacerlo bien desde el principio, sino luego, algo se te escapa fijo, y puede que no le vaya nada. No lo digo por este proyecto, sino para futuros proyectos, mejor usar digamos lo "definitivo" y cosas que vayan lo envies a quien lo envies.

1 respuesta
B

#13 Gracias por el consejo.

B

Consejo: No uses la etiqueta br. Da mas quebraderos de cabeza porque cada navegador aplica el espaciado como quiere. Si necesitas un salto lo insertas por css.

Ya te digo que cosas mal así graves no hay. Pero sin el diseño previo que quieras hacer pues poco se te puede guiar. Incluso con ese mismo html pero otro css se puede cambiar la apariencia totalmente

1 respuesta
Gu3v4r4

a mi me parece que no vas mal, si no puedes utilizar ninguna librería así esta perfecto. Lo único lo que te han comentado por ahí, las rutas jamás se ponen así. Aunque después vayas a revisarlas, alguna se te puede pasar cuando se acerca la entrega y vas tarde :psyduck:

B

#15 A que te refieres con el diseño previo? El diseño que nos pide la profesora es libre (diseño libre, tipografías libres, etc etc) pero guardando la estructura que enseñe en el wireframe de #1.

En #8 pongo un ejemplo de como esta quedando.

#8 Gracias!

1 respuesta
B

#17

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Dona</a></li>
  <li><a href="#">Infantil</a></li>
</br> <img id ="buscar" src="file:///C:/Users/Jose%20Luis/Desktop/UOC/2%20semestre/Webs/PAC

%20FINAL/Recursos/images/icon_search.png" alt="bag" />
  <li><a href="#">Inspiració</a></li>
  <li><a href="#">Roba</a></li>
  <li><a href="#">Sabates</a></li>
<li><a href="#">Esport</a></li>
<li><a href="#">Complents</a></li>
<li><a href="#">Ofertes</a></li>
</ul>

Ahora desde el pc estoy con mejor visión de esto.
Aquí está mal el código o de como debería hacerse.

<nav>
<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Dona</a></li>
  <li><a href="#">Infantil</a></li>
  <li><a href="#">Inspiració</a></li>
  <li><a href="#">Roba</a></li>
  <li><a href="#">Sabates</a></li>
<li><a href="#">Esport</a></li>
<li><a href="#">Complents</a></li>
<li><a href="#">Ofertes</a></li>
</ul>
<div> <img id ="buscar" src="file:///C:/Users/Jose%20Luis/Desktop/UOC/2%20semestre/Webs/PAC
%20FINAL/Recursos/images/icon_search.png" alt="bag" /></div>
</nav>

De esta manera, tienes lo que es el menú y por otro lado, un contenedor div que contiene el "buscar". Así le puedes dar un tamaño a cada contenedor sin que se mezclen entre ellos y jugar con los float de cara a un posible responsive.

s4suk3

Yo te recomiendo aprender flex box que es propio de CSS y podrás maquetar como si tuvieses bootstrap

Gu3v4r4

Yo creo que su idea con la lista es tener arriba el menu de opciones principales y debajo los submenus de cada una de las opciones, no?

Si es como yo pienso, lo mejor es que haga dos listas separadas, algo asi:

<ul id="main-breadcrumb" class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Dona</a></li>
<li><a href="#">Infantil</a></li>
</ul>
<ul id="sub-breadcrumb" class="breadcrumb">
<li><a href="#">Inspiració</a></li>
<li><a href="#">Roba</a></li>
<li><a href="#">Sabates</a></li>
<li><a href="#">Esport</a></li>
<li><a href="#">Complents</a></li>
<li><a href="#">Ofertes</a></li>
</ul>

Asi separas el codigo de dos elementos que son diferentes, y no es necesario que fuerces el salto de linea con <br>

Usuarios habituales