Primeros pasos con el diseño de una pagina web
Este nuevo articulo es una sucesión al anterior hola mundo en html5, en este articulo voy a complementar el template básico de html5 y hablare de algunas cosas nuevas para aquellos que estén aprendiendo html5 desde 0.
CSS
Antes cuando existía el html 1.0 para crear una maquetación de sitios web nosotros teníamos que poner en las etiquetas de html un atributo que se llama “style” el cual nos permite agregar propiedades a la etiqueta deseada. El problema de esto se daba cuando nosotros manejábamos un arreglo de diseño, como cambiar el color de fondo, créanme que corregir un color para todo el sitio representaba abrir el documento buscar la etiqueta html cambiar el color de fondo y repetir para todas las paginas que posea el sitio. Esto es muy complicado en un sitio ya que hoy en día un sitio web puede poseer cientos e incluso miles de páginas, piensa en páginas como youtube o mercado libre.
Esto se corrigió manejando un archivo en el cual se colocaran todas las propiedades que puede tener todo el sitio y solo adjuntándole a cada a cada página una liga que la direccione a dicho archivo. Al hacer esto nos ahorramos muchas horas de desarrollo y complejidad al crear nuestro diseño.
Ahora regresare a lo que te debe importar la práctica.
Nosotros en el artículo anterior creamos este template:
<!DOCTYPE html>
<head>
<title>RWD </title>
</head>
<body>
<header>
</header>
<nav>
</nav>
<section id=”contenedor”>
<section id=”principal”>
<article>
<h1>
Hola mundo
</h1 >
</article>
</section>
<aside></aside>
</section>
<footer></footer>
</body>
</html>
lo modificaremos un poco para prepararlo para css:
<!DOCTYPE html>
<head>
<title>RWD</title>
<link rel=”stylesheet” href=”./css/main.css” type=”text/css”>
</head>
<body>
<header>
<h1>encabezado<h1>
</header>
<nav>
<ul>
<li><a href=”#”>inicio</a></li>
<li><a href=”#”>nosotros</a></li>
<li><a href=”#”>contacto</a></li>
</ul>
</nav>
<section id=”contenedor”>
<h2>
Secciones
</h2>
<article id=”imagen_contenedor”>
<img src=”./img/programador.jpg” id=”img_contenedor”></img>
</article>
<article id=”texto_contenedor”>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vulputate tellus id leo sollicitudin sit amet suscipit sapien suscipit. Curabitur pretium rhoncus velit vel faucibus. Quisque purus enim, varius sit amet congue at, commodo eget sem. Sed consectetur vehicula mattis. Nullam a dui erat. Mauris venenatis venenatis lobortis. Aliquam eleifend auctor enim, vel lacinia eros aliquam eu. Donec bibendum eleifend risus quis vulputate. Vestibulum tempus, quam at ornare dapibus, libero tellus commodo sem, ac tempus lorem orci feugiat sapien. Integer sagittis pulvinar posuere. Praesent consectetur massa ac enim luctus bibendum.
Nulla ligula purus, vestibulum et pellentesque in, molestie eu tortor. Vestibulum eget aliquet quam. Donec non molestie nisl. Suspendisse sit amet elit nisl. Vestibulum in magna arcu. Duis vitae consequat ante. Vivamus gravida feugiat augue ut tristique.
Sed non velit eu sapien mattis volutpat. Morbi posuere tellus hendrerit massa accumsan id mattis orci luctus. Pellentesque sodales faucibus aliquam. Donec interdum vehicula auctor. Nam neque lorem, congue ac volutpat id, pulvinar id mi. Vivamus odio metus, bibendum sed porta et, luctus eu nunc. Morbi feugiat ipsum ipsum, non congue elit. Ut feugiat, tellus iaculis interdum venenatis, lacus erat pellentesque felis, vitae placerat augue leo nec turpis. In et massa ac ante egestas cursus. Vivamus feugiat, neque eget vulputate dignissim, justo magna facilisis turpis, eu ornare neque augue ut ante.
Curabitur tristique sodales erat, cursus aliquam leo auctor id. Vivamus auctor scelerisque quam nec pretium. Mauris rhoncus sollicitudin mauris sit amet placerat. Quisque volutpat leo semper massa mollis consequat. Sed nisl orci, rutrum id faucibus eleifend, tincidunt eget magna. In eros lectus, tempus sit amet vehicula at, porttitor id arcu. Nunc tincidunt vestibulum ultricies.
Morbi arcu tellus, rhoncus eu volutpat sed, laoreet et risus. Ut accumsan scelerisque magna nec rhoncus. Quisque at velit sem, id aliquam lacus. Suspendisse egestas tincidunt felis in aliquet. Aenean et diam augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed pulvinar semper eleifend. In neque nisl, ultricies at porttitor et, ullamcorper vel nisi. Etiam vel massa a neque hendrerit adipiscing. In et leo eget odio posuere rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent malesuada sem a mi lobortis vitae euismod erat pellentesque. Suspendisse varius bibendum lacus, non viverra mi porttitor sit amet. Duis adipiscing lobortis dolor, vitae sodales nisi condimentum non.
</article>
</section>
<footer>
<h2>pie de pagina</h2>
</footer>
</body>
</html>
Ahora crearemos unas carpetas para separar los contenidos de esta página web básica. Crearemos una carpeta con el nombre css que contendrá nuestras hojas de estilos, otra con el nombre img y una última con el nombre de fonts en esta se guardaran las tipografías .
Despues crearemos dentro la carpeta css un archivo al que nombraremos “main.css” y le agregaremos algo de codigo preliminar de css.
/*este es mi archivo de css*/
*{}
html{}
body{}
h1,h2,h3,h4,h5{}
header{}
nav{}
section{}
article{}
aside{}
footer{}
Lo que sigue es agregar una etiqueta que nos hace referencia hacia la hoja de estilos que ocuparemos, esta es la etiqueta link la cual tiene la siguiente sintaxis
<link rel=”stylesheet” href=” URL ” type=”text/css”>
A la cual la adaptaremos asi
<link rel=”stylesheet” href=”./css/main.css” type=”text/css”>
Ahora existen muchas formas para empezar la maquetación de nuestra página la que me gusta más es usar las herramientas de desarrollo de google.
Lo que mas me gusta de esta herramienta es que observar lo que estas modificando al mismo tiempo que observas tu sitio web
Ahora después de un rato de andar checando la maquetación deje este diseño sencillo codigo CSS:
*{
padding: 0px;
margin: 0 auto;
}
html{
height: 100%;
background: rgb(131, 131, 131);
}
body{
width: 90%;
height: 800pt;
margin: 0pt auto;
padding: 0.5em 0;
background: rgba(248, 248, 248, 0.8);
}
h1,h2,h3,h4,h5{
font-family: serif;
font-variant: small-caps;
text-align: center;
}
h1
{
font-zise:16pt;
}
h2
{
font-zise:14pt;
}
header{
max-width: 95%;
height: 90pt;
background: rgb(184, 184, 184);
padding: 5pt;
text-align: center;
}
nav{
max-width: 95%;
padding: 5pt;
height: 30pt;
margin:10pt auto;
background:rgb(124,124,124);
text-align: center;
}
nav ul {
margin: 1pt auto;
}
nav ul li {
height: 100%;
display: inline;
margin: 40pt;
}
#contenedor {
width: 90%;
height: 600pt;
background: white;
display: block;
}
#imagen_contenedor {
width: 40%;
height: 100%;
display: inline-block;
}
#texto_contenedor {
width: 55%;
height: 100%;
display: inline-block;
}
footer{
width: auto;
height: 200pt;
min-width: 100%;
color:white;
background: rgb(85, 83, 83);
text-align: center;
}
quiero explicar algunas cosas importantes de css.
la sintaxis basica de css es la siguiente
[etiqueta]{
[propiedad]:[valor];
}
las etiquetas como body,nav,footer, etc. de html las referenciamos directamente ejemplo:
codigo en html
<nav></nav>
codigo css
nav{}
las etiquetas que en html las instanciemos con un class las referenciamos con . y el nombre que le dimos ejemplo;
codigo html
<section class=”perro”></section>
codigo css
.perro{}
las etiquetas que en html las instanciemos con un id las referenciamos con # y el nombre que le dimos ejemplo;
codigo html
<section id=”gato”></section>
codigo css
#gato{}
en cuanto a los atributos quiero explicar los que mas ocupo para maquetar.
width: define ancho del elemento.
heigth: define el alto del elemento.
max-width y max-heigth : estos definen cuanto es lo máximo que puede incrementar un elemento,piensa que no es la misma resolución de tu pantalla a la de tu tablet.
margin: define el espacio alrededor del elemento.
padding: define el espacio interior del elemento.
display: establece como se van a mostrar el elemento o elementos.
background: define el color o textura, en caso de requerir una imagen, del fondo del elemento.
color:define el color del texto dentro del elemento.
Ya para terminar me gustaría comentarles que css3 es muy sencillo cuando se usan herramientas de desarrollo ya sea firebug o las contenidas en chrome, no olviden que la practica hace al maestro en los siguientes articulos agregare mas detalles técnicas y atributos para que puedan hacer cosas mas estéticas.
Gran articulo, volvere por aqui. Saludos!
Thanks for such a great post and the review, I am totally impressed!
hey muchachon, buen aporte, cuando se trata de HTML soy algo holgazán y prefiero que Dreamweaver me ayude, pero admito que las CSS son de gran utilidad y una vez que les agarras el modo son de lo mejor para hacer que tu sitio luzca bien… espero subas mas cosas pronto 😉
Si dreamweaver es una herramienta muy poderosa para desarrollar sitios web la he usado pero la idea, por ahora, es usar software con licencia libre o herramientas integradas de windows e incluso algún software que tenga un bajo costo.
Seguiremos escribiendo mas artículos.
Thanks. Very nice post. Your web site is very beautiful.
Enjoy your blog )
my blog