NuestroPrimerWebsiteParte1 PDF

Tutorial para disear un sitio Web desde cero.
Adaptado de la web http://net.tutsplus.com/
Paso 1 Que vamos a hacer

Vamos a disear y codificar este sitio web.
Paso 2 Preparndonos
Qu necesitamos?
Este tutorial fue escrito asumiendo que usted nunca ha codificado un sitio web antes, o slo lo ha hecho un par de veces. Si usted sigue los pasos y va comprendiendo cada uno de ellos, al finalizar podr considerar que conoce la mayora de conceptos acerca de XHtML y CSS. Para completar este tutorial, necesitar lo siguiente:
Un editor de cdigo: Notepad++, Sublime text 2 Conocimientos bsicos de cmo funciona HTML, la sintaxis bsica y etiquetas. Conocimientos de Hojas de Estilos, cmo funcionan los selectores y estar familiarizado con las caractersticas bsicas. Un navegador: Firefox, Chrome
Layout
Vamos a elaborar un sitio web simple, con 4 elementos bsicos: Encabezado, Contenido, Barra lateral y Pie, el layout tiene la siguiente apariencia:
Paso 3 - Comenzando
Para comenzar necesitamos las imagines a utilizar que con anterioridad se elaboraron en un Editor grfico como Photoshop, Fireworks o algn otro. La carpeta de imagines estn incluidas dentro del material que se ha descargado para realizar este tutorial. A continuacin la lista de imagines a utilizar.
Paso 4 Configurando nuestra carpeta

Primero, tenemos que crear un lugar para almacenar todos los archivos relacionados con nuestro sitio. Vamos a crear una carpeta para el sitio web, podra llamarse "SitioEjemplo ", dentro de esta carpeta, creamos otra carpeta que contendr las imgenes que hemos descargado, el nombre de esta carpeta podra ser "images". El nombre de nuestro archivo HtML/XHTML puede ser "index.html" y el archivo que contendr las reglas de la Hoja de estilos style.css.
Paso 5 Configurando el archivo index.html

En un editor de texto debemos crear un nuevo documento y llamarlo index.html, en el cual lo primero que tenemos que hacer es declarar el tipo de documento, la codificacin de caracteres, y crear las etiquetas <html>:
1. 2. 3. 4.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> </html>
Entre las etiquetas HTML, necesitamos una seccin de "Encabezado", que contiene todo tipo de informacin importante sobre el sitio, que no aparece en el cuerpo de la pgina. Para nosotros, en este momento todo lo que va a contener es el ttulo de la pgina, as:
1. 2. 3. <head> <title>MySite</title> </head>
Bajo el encabezado, lgicamente, colocamos el cuerpo, tambin contenida en las etiquetas <html>. Bueno, hasta ahora tenemos:
1. 2. <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"> 3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 4. <head> 5. <title>MySite</title> 6. </head> 7. <body> 8.  9. </body> 10. </html>
Esta es la configuracin bsica de la pgina, puede tomar esto como estndar para uso futuro. Recordemos que segn nuestro diseo inicial tendramos secciones de encabezado, contenido, barra lateral, y pie de pgina, para lo cual vamos a colocar cada seccin dentro de su propio <div>, y se les dar una identificacin apropiada.
1. <body> 2. <div id="header"> 3. </div> 4. 5. <div id="content"> 6. </div> 7. 8. <div id="sidebar"> 9. </div> 10. 11. <div id="footer"> 12. </div> 13. </body>
NOTA: es una buena idea, especialmente cuando empiece, aadir comentarios a cada </ div> para que pueda realizar un seguimiento de la jerarqua de los divs. Segn nuestro diseo, recordemos cmo queremos que las secciones de pie de pgina y el encabezado se extiendan hacia los lados, pero al mismo tiempo, la seccin de
contenido principal se encuentre dentro de un ancho especfico en el centro de la pantalla. Para hacer esto necesitamos un gran div que envuelva nuestros elementos en expansin y un div que contiene el contenido principal. Tambin hay que notar que el texto del pie se centra tambin, as que hay que repetir el mismo proceso para el pie de pgina. Para lograr esto tenemos que envolver algunos divs dentro de los que ya tenemos. Tendremos 2 divs con clase container, uno en el div main y otro en footer.
Esto podemos verlo en el siguiente diagrama: :
Y el marcado es el siguiente:
1. <body> 2. <div id="main"> 3. <div id="header"> 4. </div> 5. 6. <div id="content"> 7. </div> 8. 9. <div id="sidebar"> 10. </div> 11. 12. </div> 13. 14. <div id="footer"> 15. </div> 16. 17. </body>
Ahora envolvemos cada seccin en un div contenedor, con la clase de container.

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. <div id="main"> <div class="container"> <div id="header"> </div> <div id="content"> </div> <div id="sidebar"> </div> </div> </div> <div id="footer"> <div class="container"> </div> </div>
Pareciera que todos estos divs envolventes son redundantes, pero van a ser relevante cuando empecemos a dar estilo a la pgina.
Paso 6 Aadiendo contenido

Ahora que la estructura de nuestra pgina se encuentra, podemos empezar a aadir contenido, de arriba a abajo. He aqu un resumen de los elementos HTML que conformarn nuestra pgina:
Encabezado
En la parte superior tenemos nuestro encabezado, y dentro tenemos 3 elementos: un logotipo, un eslogan y un men de navegacin. Vamos a crear un div para nuestro encabezado, y para mantener la limpieza vamos a poner el logotipo y el lema en sus propios divs.
1. 2. 3. 4. 5. 6. <div id="header"> <div id="logo"> </div> <div id="tagline"> </div> </div>
Debido a que es el ms importante ttulo de la pgina, el logotipo va dentro de una etiqueta <h1>. Tenemos ms opciones para el lema (tagline), dependiendo de qu tan relevante es su sitio. En este caso, estoy usando una etiqueta <h3>. Para la navegacin, la prctica habitual es colocar los elementos de men en una lista no ordenada, con cada elemento de la lista que contiene una etiqueta de enlace. As tenemos:
1. <div id="header"> 2. <div id="logo"> 3. <h1>Logo</h1> 4. </div> 5. <div id="tagline"> 6. <h3>And a little tagline, too.</h3> 7. </div> 8. <ul id="menu"> 9. <li><a href="#">Home</a></li> 10. <li><a href="#">About</a></li> 11. <li><a href="#">Portfolio</a></li> 12. <li><a href="#">Contact</a></li> 13. </ul> 14. </div>
NOTA: el valor "href" en las etiquetas de enlace, especificara normalmente el url del link a visitar, pero en este caso, el smbolo # slo significa "vnculo al inicio de la pgina."
Contenido principal
En nuestra rea de contenido principal, contamos con 4 diferentes estilos de tipo: un gran ttulo en la parte superior, una ms pequea, y un encabezado para los ttulos de las noticia, adems de algunos prrafos y para las fechas en las noticias uno an ms pequeo. Vamos a llamar a estos <h2>, <h3>, <h4>, <p> y <small>, respectivamente. Ahora es slo una cuestin de pegar el siguiente texto en su contenido
1. 2. 3. 4. 5. 6. <div id="content"> <h2>Lorem ipsum, Dolor sit</h2> <h3>Nullam vulputate felis id odio interdum nec malesuada mi pretium. </h3> <p>Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel. Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl. Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus.
7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25.
Curabitur et ultricies quam. Aenean pretium aliquet velit, gravida vulputate urna tempus vel. </p> <p>Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. Praesent luctus egestas nisl, vitae vehicu la eros rhoncus vel. Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl. Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus. Curabitur et ultricies quam. Aenean pretium aliquet velit, gravida vulputate urna tempus vel. Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. </p> <div id="news"> <h3>Latest Updates</h3> <h4>Vestibulum id nulla eu sapien pellentesque</h4> <small>June 1, 2009</small> <p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu, facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales. Etiam laoreet ante in purus laoreet id malesuada dui pretium.<a href="#"> Read More</a></p> <h4>Vestibulum id nulla eu sapien pellentesque</h4> <small>June 1, 2009</small> <p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu, facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales. Etiam laoreet ante in purus laoreet id malesuada dui pretium.<a href="#"> Read More</a></p> </div> </div>
Hemos agregado etiquetas de enlace con el texto Read More al final de cada noticia.
Barra lateral
La barra lateral tiene tres elementos, cada uno de los cuales ser envuelto en su propia div. Cada div contendr un encabezado <h3> y una lista desordenada, y cada elemento de la lista volver a contener una etiqueta de enlace.
1. <div id="sidebar"> 2. <div id="subscribe"> 3. <h3>Subscribe!</h3> 4. <ul> 5. <li><a href="#">Subscribe via RSS</a></li> 6. <li><a href="#">Get Email Updates</a></li> 7. <li><a href="#">Follow us on Twitter</a></li> 8. </ul> 9. </div> 10. <div id="popular"> 11. <h3>Popular Items</h3> 12. <ul> 13. <li><a href="#">Lorem ipsum dolor site amet</a></li> 14. <li><a href="#">Ulvinar tincidunt, Mauris id</a></li> 15. <li><a href="#">Lorem ipsum dolor site amet</a></li> 16. <li><a href="#">Proin tempor erat sit tene</a></li> 17. </ul> 18. </div> 19. <div id="contributors"> 20. <h3>Contributors</h3> 21. <ul> 22. <li><a href="#">John Smith, freelance writer</a></li> 23. <li><a href="#">Jack McCoy, designer</a></li> 24. <li><a href="#">Lenny Briscoe, editor</a></li> 25. <li><a href="#">John Smith, martketing</a></li> 26. </ul> 27. <a href="#">Join Our Team</a> 28. </div> 29. </div>
Pie
Tambin ponemos el texto del pie. Cabe sealar que cualquier smbolo que desea utilizar en el texto tiene cdigos especiales en html, por ejemplo, el smbolo de copyright se codifica como
1. 2. 3. 4. 5. 6. <div id="footer"> <div class="container"> <p>Copyright 2009 MySite <br /> All Rights Reserved</p> </div> </div>
Y eso es todo para el marcado, observemos como se ve el sitio:
Paso 7 Agregando estilo

Hasta ac slo tenemos el contenido sin formato de nuestro sitio, aqu es donde sucede la magia. Debemos crear un nuevo archivo en la carpeta de nuestro sitio, y lo llamamos "style.css". Ahora necesitamos una manera de decirle al navegador que el archivo css pertenece a nuestro archivo index.html, y que realice un vnculo con l por medio de la etiqueta "link href". Ponga esta lnea de cdigo en su seccin head, debajo del ttulo.
1. <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
Ahora nuestro archivo html puede acceder al contenido del archivo css, por lo que cualquier cambio que hagamos en el CSS afectar al archivo html.
Paso 8 Limpieza bsica

Hay un par de cosas feas sobre nuestro sitio que podemos solucionar de inmediato: queremos cambiar la fuente predeterminada, queremos que el contenido sea 800px de ancho y centrado, y queremos deshacernos de todos esos espacios entre los elementos. En primer lugar, vamos a elegir un tipo de letra para todo el texto dentro del cuerpo de la pgina, que se mostrar a menos que se especifique lo contrario:
1. body { font-family: Arial, Helvetica, sans-serif; }
A continuacin, vamos a definir el ancho y los mrgenes de nuestro div clase container.
1. 2. 3. 4. .container { width: 800px; margin: 0 auto; }
La propiedad margin: 0 auto indica que no hay margen en la parte superior, y que se centra automticamente horizontalmente. Veamos como queda:
Se ve mucho mejor. El siguiente paso va a hacer que se vea peor, pero sigamos.
Reinicio CSS
Todos los navegadores utilizan valores de relleno y margen por defecto para cada elemento, lo que hace que las pginas sin estilo se vean bien, pero para nosotros, que estamos creando nuestros propios estilos no sirven. Para deshacerse de todos estos mrgenes desordenados, vamos a utilizar un simple reinicio CSS, que es slo una regla que elimina el relleno y los mrgenes por defecto en los elementos que estamos usando. Escriba esto en la parte superior de su archivo css:
1. 2. ' body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }
Veamos:
Paso 9 - Encabezado
Muy bien, todo est aplastado y listo para que empecemos a manipularlo. Ahora tenemos que empezar a agregar nuestros propios estilos, de nuevo, de arriba a abajo. Primero establecemos las imgenes de fondo para el encabezado. Vamos a empezar con la repeticin de la imagen del encabezado, dicha imagen de repeticin va a estar dentro del div "main", que tiene un ancho indefinido. Tenemos que indicar al navegador la ubicacin de la imagen, y qu hacer con ella (repetir o no repetir). Para establecer una imagen de fondo, se utiliza la propiedad " background " y se especifica la ubicacin de la imagen o 'url', en nuestro caso, la imagen est en nuestra carpeta de imgenes, por lo que especifique la ubicacin de esta manera:
1. url (images/header_slice.gif)
A continuacin, especificamos que queremos que se repita a lo largo del eje X:

1. 2. 3. #main { background: url(images/header_slice.gif) repeat-x; }
Veamos:
Impresionante, verdad? Intente estirar su navegador, simplemente sigue y sigue y sigue ...
Paso 10 - Sustitucin de la imagen de Logo

Nuestro logo es bastante complicado, no? estamos utilizando una imagen de fondo, y una fuente no-html con una sombra interior. No podemos hacer eso en css, as que tenemos que reemplazar el texto con una imagen. "Por qu no poner la imagen en lugar de la lnea de <h1>?" Se puede preguntar. Pues bien, en el Internet, la cabecera <h1> es bsicamente el "nombre" de la pgina, e importantes y poderosos robots (google) analizan esta propiedad en la bsqueda de palabras clave. Si usted no tiene una cabecera <h1>, su sitio no se convertira en una bsqueda para esa palabra exacta. Adems es un punto de accesibilidad con el cual cumplira el sitio para poder ser visitado por personas con problemas de vista utilizando lectores especiales de contenido .
1. 2. 3. #logo { background: url(images/logo.gif) no-repeat; }
Si observamos en el navegador, vers que nuestro logotipo ha sido cortado por la mitad. Esto se debe a que no hemos dado dimensiones, esto lo podemos resolver especificando las dimensiones de la imagen:
1. 2. 3. 4. 5. #logo { background: url(images/logo.gif) no-repeat; height: 84px; width: 235px; }
Mejor, pero todava observamos el texto <h1> original, para corregirlo vamos a ajustar el indentado del texto a un valor ridculo, como-9999px, muy lejos de la pgina, as que nadie va a verlo, excepto los robots de los motores de bsqueda.
1. 2. 3. #logo h1 { text-indent: -9999px; }
Si observamos, ahora la imagen del logotipo est ubicada en el mismo lugar que nuestro texto <h1>. Pero todava se ve bastante mal, todo apretado en la parte superior. Cuando queremos mover un elemento de su posicin original en la pgina, se puede utilizar tanto las propiedades margen y relleno. Vamos a probar los dos para ver la diferencia En primer lugar, vamos a tratar de aadir un margen a la parte superior de la etiqueta h1.
1. 2. 3. 4. 5. #logo h1 { text-indent: -9999px; margin-top: 40px; }
Oops! Nos las arreglamos para mover el logo, pero nos llev toda la pgina con el! Vamos a tratar de ajustar el relleno en su lugar:
1. 2. 3. 4. #logo h1 { text-indent: -9999px; padding-top: 40px; }
Veamos ahora y el elemento volvi al punto inicial, esto es porque la propiedad margen mueve todo el elemento, pero el relleno slo se mueve el contenido del elemento, dejando el fondo donde est. Por lo tanto, si nuestra pantalla era, digamos, 19999px amplia, veramos el margen de nuestro encabezado <h1> movido 40px, pero esto no es lo que estbamos buscando. As, para mover la imagen de fondo del logotipo, hay que mover el div por encima, porque el div completo del logo est contenido dentro del div header. Veamos:
1. 2. 3. 4. 5. 6. 7. #logo h1 { text-indent: -9999px; } #header { padding-top: 40px; }
Ahora nuestro logo se ve igual que en nuestro diseo inicial. Solo debemos acomodar la lnea del slogan

NuestroPrimerWebsiteParte1 PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

NuestroPrimerWebsiteParte1 PDF

Cargado por

Copyright:

Formatos disponibles

Tutorial para disear un sitio Web desde cero.

Adaptado de la web http://net.tutsplus.com/

Paso 1 Que vamos a hacer

Paso 4 Configurando nuestra carpeta

Paso 5 Configurando el archivo index.html

Esto podemos verlo en el siguiente diagrama: :

Ahora envolvemos cada seccin en un div contenedor, con la clase de container.

Paso 6 Aadiendo contenido

Y eso es todo para el marcado, observemos como se ve el sitio:

Paso 7 Agregando estilo

Paso 8 Limpieza bsica

A continuacin, especificamos que queremos que se repita a lo largo del eje X:

Paso 10 - Sustitucin de la imagen de Logo

También podría gustarte