TALLER |
|
Con el objeto de afianzar todos los conocimientos adquiridos hasta ahora vamos a realizar una práctica completa y rápida de cómo hacer una página sencilla. En el próximo capítulo comenzaremos con JavaScript, así que es importante realizar previamente unos ejercicios que asienten los conocimientos adquiridos antes de entrar en este apartado un poco más complejo de la programación. No olvides que este curso no es un repaso sistemático de comandos si no un curso propiamente dicho, donde tras una primera toma de contacto con el trío al completo, volveremos de nueva a profundizar en html5 y CCS3, pero es importante llevar las tres materias al unísono. Recordad que las explicaciones de este ejercicio no son más que una descripción sistemática de todo lo dado hasta el momento, para repasar y afianzar nuestros conocimientos. Ahora ya sin más dilación comencemos este ejercicio completo donde vamos a describir todo el proceso línea a línea, así que en primer lugar ejecutaremos nuestro editor de texto y pondremos el siguiente código: <!DOCTYPE html> Esta línea indica el tipo de documento. Como ya sabemos la estructura en html es tipo árbol y su raíz es la siguiente: hemos usado el atributo lang y el valor indicando español como el lenguaje a emplear. <html lang="es"> </html> En el siguiente paso delimitaremos las dos secciones, cabecera y cuerpo. <!DOCTYPE html> <html lang="es"> <head> </head> <body> </body> </html> Ahora vamos a comenzar por la cabecera que indicará a todo el documento las normas que tendrá que aplicar. <head> <meta charset="utf-8"> <meta name="author" content="Micky"> <meta name="description" content="Vive experiencias junto a nosotros por todo el mundo"> <meta name="keywords" content="viajes, ocio, fiesta, vacaciones"> <title>Trotamundos y sueños varios</title> <link rel="stylesheet" href="TROTAMUNDOS.css" > </head> Recordemos: la primera línea utf-8 indicaría el conjunto de caracteres de la página, por ejemplo al estar en español la “ñ” es necearía, sin esta selección no la tendríamos, author, el nombre del que crea la página, la siguiente una pequeña información relativa a la página, después está keywords, que sería para colocar palabras clave. Luego el título de la página y el final sería un link que enlaza con la página de estilos. <body> <header> <h1>Trotamundos y sueños varios</h1> </header> </body> Le llego el turno al cuerpo (<body>). En el cuerpo pondremos el título dentro de la cabecera (<header></header>), no confundir con <head>, y aquí empezamos a referenciar con nav id=”menu”, para en el futuro poder aplicar estilos CSS <li>, también lo hemos marcado con transition para aplicarle estilos y además como podemos ver con <a> se crea el enlace de manera que puedan llegar a las distintas páginas que crearemos. <nav id="menu"> <ul> <li class="transition"><a href="VIAJES.html">VIAJES</a><li> <li class="transition"><a href="OCIO.html">OCIO</a></li> <li class="transition"><a href="NOSOTROS.html">NOSOTROS</a></li> </ul> </nav> Ahora llego el turno al contenido, como podréis observar vamos a ir marcando todos los elementos estructurales de html, que son: header, body, section, aside y footer y algún elemento más que pensemos aplicarle algún estilo especial. <section id="seccion"> </section> La barra lateral… <aside id="lateral"> </aside> Y el pie de página… <footer id="piepagina"> </footer> Centrémonos en el pie de página, es la parte de la página que tiene la información digamos “institucional”, vemos en la primera línea que lo hemos referenciado con un id o class, usando las etiquetas <p> para los textos, <br> salto de línea y también hemos añadido una foto, la de creative commons, usando <img> y hemos usado la etiqueta <address> para ubicar las direcciones. Los archivos durante esta práctica los pondremos dentro de una misma carpeta junto con las fotos sin añadir subcarpetas. <footer id="piepagina"> <p class="pie1">Aviso legal</p> <p class="pie2">Política de privacidad</p> <p class="pie3">Creative Commons</p> <img src="by-nc-nd-eu-petit_orig.png"> <p class="pie4">Esta obra está bajo una licencia de Creative Commons<br> Reconocimiento-NoComercial-SinObraDerivada 3.0<br> España</p> <p class="pie5">Siguenos en:</p> <address> Twitter @trota_y_sueños_varios<br> Facebook @trotamundos y sueños varios<br> <br> Contacto:<br> <br> redaccion@trotamundosysueñosvarios.com </address> </footer> Vamos a crear un par de artículos para nuestra página, aplicando una estructura con su cabecera, cuerpo y pie, referenciando los elementos que queramos aplicarle algunos estilos más adelante. <article> <header class="viajes"> <h1>Rajasthan</h1> <p class="subheading">OFERTA</p> <time datetime="2017-06-23" pubdate>publicado 23-06-2017</time> </header> <figure> <img class="imagenes" src="rajasthan.jpg"> <figcaption> WIKIPEDIA/PIXABAY </figcaption> </figure> <p class="pepito">Rajasthan es uno de los 29 estados que forman la República de la India, Su capital es Jaipur conocida como la ciudad rosa.</p> <footer> <address> <p>Autor: Micky</p> </address> <p class="comentarios">Comentarios XXX</p> </footer> </article> <article> <header class="viajes"> <h1>Bled-Eslovenia</h1> <p class="subheading">OFERTA</p> <time datetime="2017-06-21" pubdate>publicado 21-06-2017</time> </header> <figure> <img class="imagenes" src="bled-eslovenia.jpg"> <figcaption> Bled-Eslovenia </figcaption> </figure> <p class="pepito">La población de Bled está situada a la orilla del lago Bled en los mismísimos Alpes Julianos en Eslovenia…</p> <footer> <p>Autor: Ivana</p> <p class="comentarios">Comentarios XXX</p> </footer> </article> En la imagen podéis ver la barra lateral con la presentación de los personajes. Ahora le llegó el turno a la barra lateral, es una barra que se suele poner contenido secundario, aquí hemos referenciado las etiquetas, a la vez que hemos metido más imágenes, también las hemos referenciado dado que luego haremos cambios. <aside id="lateral"> <img class="imagenes" src="MICKY.jpg"> <p class="presentaciones">Micky<br> Redactor jefe de la revista, le gusta mandar demasiado THE BOSS</p> <img class="imagenes" src="IVANA.jpg"> <p class="presentaciones">Ivana<br> Apasionada de las ciudades, los restaurantes de lujo, la moda, alias LA PIJA </aside> Ahora vamos a guardar la página, hay que guardarla como viajes y vamos a crear 2 más, os dejo el código aquí debajo: Esta hay que guardarla como OCIO. <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta name="author" content="Micky"> <meta name="description" content="Vive experiencias junto a nosotros por todo el mundo"> <meta name="keywords" content="viajes, ocio, fiesta, vacaciones"> <title>Trotamundos y sueños varios</title> <link rel="stylesheet" href="TROTAMUNDOS.css" > </head> <body> <div id="estructura"> <header id="cabecera"> <h1 id="titulo"><a href="VIAJES.html">Trotamundos y sueños varios</a></h1> </header> <nav id="menu"> <ul> <li class="transition"><a href="VIAJES.html">VIAJES</a><li> <li class="transition"><a href="OCIO.html">OCIO</a></li> <li class="transition"><a href="NOSOTROS.html">NOSOTROS</a></li> </ul> </nav> <section id="seccion"> <article> <header> <h1>Comenzamos por el ocio</h1> <p class="subheading">Esta será la biblioteca</p> <time datetime="2017-06-23" pubdate>publicado 23-06-2017</time> </header> <figure> <img class="imagenes" src="mercado.jpg"> <figcaption> Mercado </figcaption> </figure> <p class="pepito">Hoy hablaremos de uno de los mercados más especiales de Oriente, el mercado de la piel donde podréis encontrar auténticas maravillas a precios de risa, sino pegas el cante a extranjero apardalado</p> <footer> <address> <p>Autora: Paola</p> </address> </footer> </article> </section> <aside id="lateral"> <img class="imagenes" src="IVANA.jpg"> <p class="presentaciones">Ivana<br> Apasionada de las ciudades, los restaurantes de lujo, la moda, alias LA PIJA</p> <img class="imagenes" src="PAOLA.jpg"> <p class="presentaciones">Paola<br> Fiesta, playa, campo, fiesta es la rastreadora de sitios ocultos, LA RARA</p> <p class="lateral">Director de orquesta</p> <p><li class="transition"><a href="NOSOTROS.html">Micky</a><br> En esta sección mis compañeras IVANA y PAOLA os mostrarán los placeres ocultos de los viajes mas excitantes</p> </aside> <footer id="piepagina"> <p class="pie1">Aviso legal</p> <p class="pie2">Política de privacidad</p> <p class="pie3">Creative Commons</p> <img src="by-nc-nd-eu-petit_orig.png"> <p class="pie4">Esta obra está bajo una licencia de Creative Commons<br> Reconocimiento-NoComercial-SinObraDerivada 3.0<br> España</p> <p class="pie5">Siguenos en:</p> <address> Twitter @trota_y_sueños_varios<br> Facebook @trotamundos y sueños varios<br> <br> Contacto:<br> <br> redaccion@trotamundosysueñosvarios.com </address> </footer> </div> </body> </html> Esta hay que guardarla como NOSOTROS. <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta name="author" content="Micky"> <meta name="description" content="Vive experiencias junto a nosotros por todo el mundo"> <meta name="keywords" content="viajes, ocio, fiesta, vacaciones"> <title>Trotamundos y sueños varios</title> <link rel="stylesheet" href="TROTAMUNDOS.css" > </head> <body> div id="estructura"> <header id="cabecera"> <h1 id="titulo"><a href="VIAJES.html">Trotamundos y sueños varios</a></h1> </header> <nav id="menu"> <ul> <li class="transition"><a href="VIAJES.html">VIAJES</a><li> <li class="transition"><a href="OCIO.html">OCIO</a></li> <li class="transition"><a href="NOSOTROS.html">NOSOTROS</a></li> </ul> </nav> <section id="seccion"> <header> <h1>Bienvenidos a Trotamundos y sueños varios</h1> </header> <img class="imagenes" src="MICKY.jpg"> <p class="presentaciones">Micky<br> Redactor jefe de la revista, le gusta mandar demasiado THE BOSS</p> <img class="imagenes" src="IVANA.jpg"> <p class="presentaciones">Ivana<br> Apasionada de las ciudades, los restaurantes de lujo, la moda, alias LA PIJA</p> <img class="imagenes" src="PAOLA.jpg"> <p class="presentaciones">Paola<br> Fiesta, playa, campo, fiesta es la rastreadora de sitios ocultos, LA RARA</p> </section> <aside id="lateral"> <img class="imagenes" src="MICKY.jpg"> <p class="lateral">Director de orquesta</p> <p><li class="transition"><a href="NOSOTROS.html">Micky</a><br> Aquí está el equipo al completo, junto con un servidor dónde podréis encontrar información sobre los reporteros que os transmitirán la información a golpe de tecla.</p> </aside> <footer id="piepagina"> <p class="pie1">Aviso legal</p> <p class="pie2">Política de privacidad</p> <p class="pie3">Creative Commons</p> <img src="by-nc-nd-eu-petit_orig.png"> <p class="pie4">Esta obra está bajo una licencia de Creative Commons<br> Reconocimiento-NoComercial-SinObraDerivada 3.0<br> España</p> <p class="pie5">Siguenos en:</p> <address> Twitter @trota_y_sueños_varios<br> Facebook @trotamundos y sueños varios<br> <br> Contacto:<br> <br> redaccion@trotamundosysueñosvarios.com </footer> </div> </body> </html> Una vez creadas las 3 páginas vamos a crear los estilos, el archivo se llamará TROTAMUNDOS.css. * { margin: 0px; padding: 0px; } h1 { font: bold 20px verdana, sans-serif; } h2 { font: bold 14px verdana, sans-serif; } header, section, footer, aside, nav, article, figure, figcaption { display: block; } Con el selector universal * le decimos al documento que todos los elementos les afectará la regla, que en este caso en particular busca eliminar márgenes y demás. En cuanto a <h1> y <h2>, han conseguido se les ha puesto una fuente sin serif, verdana y negrita asignándoles 20px y 14px respectivamente. Aquí comenzamos a montar los estilos, y el primero es: body { background-image: url("luner-lake-475819.jpg"); text-align: center; } Con background-image montaremos una imagen de fondo para toda nuestra página. Con text-align diremos que por defecto todo lo que este dentro de <body> se ubicará en el centro si no decimos lo contrario. #estructura { width: 960px; margin: 10px auto; text-align: left; } En la página referenciamos con un <div id="estructura">,asignando un ancho de 960px fijos, que sería un valor bastante utilizado, con un margen de superior e inferior de 10px y el texto alineado a la izquierda, así aunque el contenido del cuerpo es centrado el del <div> no. html <header id="cabecera"> <h1 id="titulo"><a class="link" href="VIAJES.html">Trotamundos y sueños varios</a></h1> </header> Parte css #cabecera { background-image: url("CABECERA.jpg"); padding: 120px; text-align: center; border: double 16px; -moz-border-image: url("forma.png") 30 stretch; -webkit-border-image: url("forma.png") 30 stretch; border-image: url("forma.png") 30 stretch; } #titulo { text-align: center; padding: 10px, 10px; font: 50px BAUHS93, verdana, sans-serif; color: #ffff00; } #titulo:hover{ text-shadow: #b22222 3px 3px 5px; } La cabecera, <header>, la hemos referenciado como “cabecera”, en ella con background-image colocamos una fotografía de fondo y alineando el texto al centro, cogimos la imagen forma y como hicimos en otra ocasión la usamos para crear un borde, con border-image. Además referenciamos <h1> como titulo y centramos el texto, a este le dimos unos márgenes de 10px y le pusimos una fuente de 50px con otro estilo de fuente BAUHS93 las cuales ahora repasaremos como cargaremos en nuestro documento aplicándole un color. Después de todo con :hover, le indicamos que al pasar el cursor por encima, cargará una sombra dando la sensación de que se activa una iluminación gracias a text-shadow. Además de los estilos en el código html, hicimos que el título fuera un enlace, que envíe siempre a la página de inicio que se nombro como viajes. En la imagen podemos ver como al pasar el cursor por encima del título carga la sombra granate dando un efecto como si se iluminara. Como vimos en el anterior ejemplo del título cambiamos la fuente esto lo hicimos de una manera muy fácil, podéis descargarla de algún sitio o hacer como nosotros irnos a Windows y en la carpeta “font” copiar el archivo .ttf este lo pegáis dentro de la carpeta donde estamos creando la página y acto seguido colocáis el siguiente código en la hoja de estilos: @font-face { font-family: 'BAUHS93'; src: url('BAUHS93.ttf'); } @font-face { font-family: 'CHILLER'; src: url('CHILLER.ttf'); } @font-face { font-family: 'CURLZ___'; src: url('CURLZ___.ttf'); } @font-face { font-family: 'ITCBLKAD'; src: url('ITCBLKAD.ttf'); } @font-face { font-family: 'FRSCRIPT'; src: url('FRSCRIPT.ttf'); } @font-face { font-family: 'FORTE'; src: url('forte.ttf'); } Donde src: url('forte.ttf'); hace referencia a la ubicación del archivo que deberá cargar y font-family: 'FORTE'; indica entre la comilla simple como hemos referenciado nosotros ese archivo en nuestro caso no hemos querido poner otro nombre. Llego el turno a la barra de navegación la cual referenciamos como “menú”, en ella aplicamos un background un fondo azulado y le aplicamos a su vez un degradado de arriba hacia abajo aplicándole un color al teto y unos márgenes. #menu { background: #00008B; background: -webkit-linear-gradient(top, #00008B, #87CEFA); background: -moz-linear-gradient(top, #00008B, #87CEFA); color: #ffffff; padding: 10px 20px; } #menu li { display: inline-block; list-style: none; padding: 5px 8px; font: bold 12px verdana, sans-serif; } En la imagen podemos observar la barra del menú en un color azul y el efecto de degradado de la parte superior a la inferior. Luego indicamos al contenido <li> que queríamos que se tratase como inline para que se ponga el contenido en horizontal y con list-style: eliminamos ciertos gráficos que suelen crear los navegadores, ajustamos la caja y le indicamos el tamaño de la letra y estilo. .transition:hover{ -moz-transform: rotate(5deg); -webkit-transform: rotate(5deg); } En la imagen podemos observar como al pasar el cursor por encima de la sección OCIO esta gira, aplicándose transform: rotate(5deg). Como podemos observar en el texto html que hace referencia a la barra de navegación hicimos referencia a los textos de las secciones creando una clase transition. Arriba podemos ver como la usamos junto con :hover para indicar que al pasar el cursor por los textos estos activen una transformación que en este caso es rotar el texto. #seccion { float: right; width: 600px; margin: 20px 10px; } Siguiente estilo, lo aplicaremos a <section>, la parte de la página donde ubicaremos el contenido principal, con el comando float haremos que “flote“ hacía un lado, dado que después ubicaremos la barra lateral de la misma manera. El ancho será de 600px con unos márgenes de 20px superior e inferior y laterales de 10px estos último junto con los anchos que vayamos aplicando, en ese caso 600px deberán cuadrarnos con los 960px que anteriormente pusimos. #lateral { float: left; width: 200px; margin: 15px 5px; padding: 15px; background: #FFFFFF; } #lateral { font: ITCBLKAD, verdana, sans-serif; font-weight: bold; text-align: justify; color: #b22222; text-shadow: #ffff00 3px 3px 5px; } Vamos a ubicar la barra lateral en el lado izquierdo, eso lo haremos como con <section> con el comando float, después con widht indicaremos el ancho en pixeles que le asignaremos teniendo en cuenta los márgenes que en este caso son de 15px superior e inferior y 10px en los laterales, añadiéndole en la caja que lo contiene con padding 15px y aplicándole un color en hexadecimal #FFFFFF. Además de esto, cambiamos el estilo de la fuente con font: ITCBLKAD indicándole con font-weight que debía ser en negrita, le indicamos que el texto lo queremos justificado y elegimos un color para la fuente y como final, con text-shadow le pondremos una sombra al texto indicándole el desplazamiento y la opacidad de la sombra como anteriormente vimos en el curso. .presentaciones { font: 20px FORTE, verdana, sans-serif; } Dentro de este lateral hay distintos tipos de texto y queremos que las presentaciones de los personajes, estén en otra fuente, para lo que creamos una clase de la siguiente manera: <p class="presentaciones">Micky<br> Redactor jefe de la revista, le gusta mandar demasiado THE BOSS</p> Al crear esta nueva clase le hemos podido dar un tamaño específico de 20px y elegir un fuente distinta FORTE. #piepagina { font:20px CHILLER, verdana,sans-serif; clear: both; text-align: center; padding: 20px; border-top: 2px solid #000000; } El pie de página o <footer>, con clear: both restauramos el flujo del documento después de section y aside, seleccionamos un nuevo tipo de fuente CHILLER a 20px alineación al centro con un padding de 20px y una raya negra para separar de los textos de los artículos border-top, de 2px y negra. article { font:20px FRSCRIPT; text-align: justify color: #FFFFFF; background: #FFC0CB; text-shadow: #8A2BE2 3px 3px 5px; -moz-border-radius: 20px / 20px; -webkit-border-radius: 20px / 20px; border-radius: 20px / 20px; -moz-box-shadow: rgb(150,150,150) 5px 5px 10px; -webkit-box-shadow: rgb(150,150,150) 5px 5px 10px; box-shadow: rgb(150,150,150) 5px 5px 10px; background: -webkit-linear-gradient(top, #FFC0CB, #CD5C5C); background: -moz-linear-gradient(top, #FFC0CB, #CD5C5C); border: 1px solid #e0ffff; padding: 20px; margin-bottom: 15px; } Llegamos a la chicha de la página, los artículos, en este caso los estilos son una fuente de 20px FRSCRIPT, que es otra fuente de las que cargamos anteriormente. Justificamos(con text-align) el texto y le elegimos un color y otro para el fondo de la caja que lo contiene, con color y background, añadiendo al texto con text-shadow una sombra. Con las siguientes reglas border-radius redondearemos las esquinas de la caja de nuestros artículos y a su vez con box-shadow crearemos una sombra a esta caja, ya después con linear-gradient crearemos un efecto de degradado de color como el que hicimos en la barra de navegación antes, de arriba hacia abajo, ahora le aplicaremos un borde a la caja de 1px, un margen interior en la caja de 20px y un margen inferior de 15px. article header { color: #2f4f4f; } Ahora en la cabecera el color del texto le daremos otro y como vemos arriba y debajo veremos que en el pie de artículo alinearemos el texto a la derecha y cambiaremos también su color. article footer { text-align: right; color: #FFFFFF; } El siguiente estilo que añadiremos hará referencia al “time” que para resaltarlo cambiaremos el color. time { color: #0000ff; } Con figcaption es como ubicaremos los pie de fotos, asignándolos a una foto, en este caso hemos puesto una fuente de 8px italic, que es cursiva y modificando el color dándole un tono granate. figcaption { font: italic 8px verdana, sans-serif; padding-bottom: 10px; color: #b22222; } Aquí aplicamos a las fotos un ancho del 100% que puedan tener con un margen 0 y unos bordes redondeados con border-radius. .imagenes { width: 100%; margin: 0px; -moz-border-radius: 40px / 20px; -webkit-border-radius: 40px / 20px; border-radius: 40px / 20px; } Además con :hover le indicaremos a todas las fotos referenciadas con “imágenes” que roten al pasar el cursor por encima y le creen una sombra, además le daremos con la última regla un tiempo desde que empieza la transformación y una duración. .imagenes:hover{ -moz-transform: rotate(25deg); -webkit-transform: rotate(25deg); -moz-box-shadow: rgb(150,150,150) 5px 5px 10px; -webkit-box-shadow: rgb(150,150,150) 5px 5px 10px; box-shadow: rgb(150,150,150) 5px 5px 10px; -moz-transition: -moz-transform 2s ease-in-out 0.5s; -webkit-transition: -webkit-transform 2s ease-in-out 0.5s; } Con esta última en los dos primeros artículos hemos inclinado el título. .viajes { -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); } En la imagen podéis observar la rotación de los textos referenciado por “.viajes” en la hoja de estilos y la rotación de la imagen y la sombra que se crea al pasar el cursor por encima. Con esto ya queda terminada una página simple y resultona, programada enteramente por nosotros y que podemos modificar completamente según nuestras necesidades e imaginación reemplazando textos e imágenes a voluntad. Por supuesto todavía tendremos que aprender a interactuar con nuestros usuarios y permitirles comentar, por ejemplo, pero de salida con esto ya podríamos hacernos visibles en la red con nuestro propio código. Y aquí termina nuestra segunda parte del curso básico de HTML5 y sus estilos CSS3, no olvidéis practicar para afianzar vuestros conocimientos así como consultar todos los libros y manuales a vuestro alcance para comparar y ampliar lo aprendido. Hasta la próxima: bienvenidos al otoño y Javascript ! Manuel Castelló (kasmangou)
Temas relacionados: Programación, Redacción independiente, kasmangou Reconocimientos y más información sobre la obra gráfica ADVERTENCIA: En este foro, no se admitirán por ninguna razón el lenguaje soez y las descalificaciones de ningún tipo. Se valorará ante todo la buena educación y el rigor sobre el tema a tratar, así que nos enorgullece reconocer que rechazaremos cualquier comentario fuera de lugar.
0 Comentarios
Deja una respuesta. |