2013 Núria Espinoza Nazar
[LENGUAJES Y ESTÁNDARES WEB PAC 1] Creación de página web “Màniga curta que fa calor” | Descripción de etiquetas HTML y CSS utilizadas en “aprender_a_programar.html”
LENGUAJES Y EST – PAC 1 – NÚRIA ESPINOZA NAZAR
[Type text]
1 – Web tienda de camisetas 'Màniga curta que fa calor' Primeros bocetos de la página web:
1
LENGUAJES Y EST – PAC 1 – NÚRIA ESPINOZA NAZAR
Estructura de la página revisada:
2
[Type text]
LENGUAJES Y EST – PAC 1 – NÚRIA ESPINOZA NAZAR
[Type text]
Página de inicio de Màniga curta que fa calor: En esta página queremos que el visitante potencial se interese por los diseños de las camisetas. Es importante que se refleje la larga trayectoria de la tienda (la experiencia que le proporciona tener ya 5 tiendas abiertas). Se debe incluir lo siguiente: -
Gran imagen principal con algunos de los diseños más exitosos Quiénes somos y nuestra experiencia previa: mención a las cinco tiendas y dónde nos puede localizar. Acceso directo a la tienda online y a sus categorías desde Inicio.
Página “Noticias”: Queremos que se cree comunidad. Podemos utilizar un formato blog para las últimas novedades (nuevos diseños, etc) permitiendo comentarios. Incluirá: -
Acceso directo a la tienda online y a sus categorías Acceso a foro con sugerencias, diseños más votados, offtopic, etc Galería de fotografías de usuarios con nuestras camisetas / eventos realizados por la tienda, etc
Página “Tienda”: El catálogo en sí estará dividido por categorías, y al cabo de un tiempo podremos saber vía Analytics cuáles son las que tienen más peso para priorizarlas en los menús. Incluirá: -
Grandes fotografías de los modelos de camisetas y cómo quedan puestas Visibilidad a “FAQ compra” y a “Contacto” (email o teléfono) Se destacarán las ofertas y las novedades en el menú de contenidos de la tienda
Página “Información”: Queremos que el potencial visitante se quede con la idea que somos una tienda con experiencia, con clientela satisfecha, fácil de acceder y con buena atención al cliente. Incluirá: -
-
Enlace a “FAQ compra” donde incluiremos información sobre la impresión de las camisetas, gastos de envío, tiempos, etc. Visibilidad a “Contacto”, donde tendremos opciones para enviar mensajes, ya sea formulario online, email, teléfono o si existe la posibilidad, chat con algún trabajador de la tienda. Fotografías de las tiendas físicas y de los trabajadores (proporciona cercanía)
3
LENGUAJES Y EST – PAC 1 – NÚRIA ESPINOZA NAZAR
[Type text]
1.1 – Preguntas teóricas 1.1.1 – Elementos en bloque y elementos en línea Los elementos en bloque y en línea son dos tipos de elementos que encontraremos en el HTML. a) En línea: elementos que se encuentran incluidos en la estructura del bloque, incluyen solo pequeñas partes del contenido del documento y no párrafos de texto. Por ejemplo, vínculos de hipertexto, palabras destacadas o citas breves. No rompen la estructura del texto. b) En bloque: elementos de nivel superior que normalmente definen la estructura del documento. Rompen la estructura del texto, empiezan en una nueva línea, como listados, tablas o párrafos.
1.1.2 - ¿Qué elementos encontramos dentro del elemento <head> de una web? Describe para qué sirve cada uno de ellos. En el elemento <head> podemos encontrar las instrucciones para que los navegadores interpreten correctamente el código, y donde se guarda información adicional como la meta. a) En primer lugar, encontramos el elemento doctype, donde especificaremos para los navegadores y validadores si estamos utilizando HTML o XHTML a. Ejemplo: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> indica que éste es un documento DTD publicado por el W3C, que la DTD describe la versión 4.01 del HTML y que el idioma utilizado en la DTD es el inglés. b) En segundo lugar, especificaremos el idioma del documento, que facilitará la lectura en pantalla y las búsquedas. (Ejemplo: en el ejemplo anterior, refiere a EN) c) En tercer lugar, el título. Imprescindible para motores de búsqueda y para la experiencia de nuestros usuarios. a. Ejemplo: <title> my digital portfolio</title> d) Posteriormente, están las palabras clave y la descripción de la página. Esto es muy útil para indexación en motores de búsqueda como Google. a. Ejemplo: <meta name="description" content="Latest sports news and live scores from Yahoo! Eurosport UK. Complete sport coverage with Football results, Cricket scores, F1, Golf, Rugby, Tennis and more."> <meta name="keywords" content="eurosport,sports,sport,sports news, live scores,football,cricket,f1,golf,rugby,tennis,uk,yahoo"> e) En el elemento <head> hemos de incluir también el enlace a documentos de estilo CSS, a. Ejemplo: <link rel="stylesheet" href="styles/style.css" media="screen" /> f) Y por último y no menos importante, los enlaces a funciones dinámicas como Javascript. a. Ejemplo: <script type="text/javascript" src="./scripts/jquery1.7.1.min.js"></script>
4
LENGUAJES Y EST – PAC 1 – NÚRIA ESPINOZA NAZAR
[Type text]
1.1.3 - ¿Cuáles son los selectores avanzados de CSS? Explica qué criterios siguen cada uno de ellos y da un ejemplo de utilización. Con los selectores avanzados se pueden seleccionar elementos para aplicarlos en función de criterios más específicos: a) Selectores universales: para seleccionar todos los elementos de una página. Por ejemplo, si quiero que todo el contenido sea de color rojo: a. Ejemplo: * { color: red;} b) De Atributo: seleccionan elementos en función de sus atributos. a. Ejemplo: si quiero que todos los H1 sean de un color concreto: H1[title] { color: blue; } c) De Hijos: selecciona elementos concretos que son hijos de otros elementos concretos. a. Ejemplo: cambiar todo el espacio entre líneas de P que son hijos de <body>: BODY > P { line-height: 1.3 } d) De Descendientes: lo mismo que lo anterior, pero no sólo se queda con los hijos directos, sino más abajo del árbol. a. Ejemplo: Si quiero que sólo unos <p> concreto dentro de un div se vean afectados: div p { color: red;} e) De Hermanos Adyacentes: sólo elementos concretos que siguen a otros elementos concretos. a. Ejemplo: reducir el espacio vertical que hay justo después de un H1 y un H2: H1 + H2 { margin-top: -5mm } f) Pseudoclases: permite aplicar estilos en función de factores muy específicos como por ejemplo si un enlace se ha visitado ya. a. Ejemplo: Un enlace visitado se vea de un color concreto: A.link:visited { color: blue } g) Pseudoelementos: aplica estilos a partes concretas de los elementos y no a todo el elemento. Por ejemplo: a la primera letra de un elemento. También permiten insertar contenido antes o después de un elemento. a. Ejemplo: Aplica estilo mayúscula a la primera línea de un texto. P:first-line { text-transform: uppercase }
5
LENGUAJES Y EST – PAC 1 – NÚRIA ESPINOZA NAZAR
[Type text]
2 – HTML Y CSS “Aprender_a_programar.html” 2.1 – HTML <title> <div> <em> <br /> <pre>
<abbr> <span> <i> <q>
para especificar el título para dividir el contenido en secciones y posteriormente darle formato en css. He creado uno que contenga todo (“contenido”) texto enfatizado, le he dado un formato propio vía css. Línea vacía, lo he usado para crear espacios en blanco. Texto pre-formateado. Vía css le he añadido unas características propias. Lo he usado para poder mantener el mismo número de palabras por línea en cada párrafo (ya que no son iguales no he podido usar otras etiquetas) Señala que hay un acrónimo, y es más utilizado por los navegadores que el equivalente <acronym>. Usado para las abreviaturas, para que se vea el título de la misma al pasar el cursor por encima. Elemento de línea al que le he dado formato vía css para destacar una palabra. Texto en cursiva Cita breve, en la que especificamos el idioma utilizado.
2.2 – CSS
body{ font-size:18px; font-family: Arial, sansserif; background: #545454; text-align:left; color:#000; padding: 0; margin: 0; line-height:0.5; }
.contenido { width: 640px; background: #FFF; margin: 0 auto; margin-top:10px; padding:120px; }
Con el selector body doy formato general a todo lo que se encuentre dentro de la etiqueta <body> del HTML Con Font-size especifico el tamaño por defecto de todo el texto que se encuentre dentro de <body> Font-family indica que quiero que la fuente usada en el elemento sea Arial y, si no está instalada, otra sans-serif. Background: indico el color de fondo del elemento Text-align indica que en todo <body> el texto estará alineado como indique (en este caso izquierda) Color especifica qué color quiero para el texto, en este caso negro. Padding: indico que no quiero separación entre el borde y el contenido. Margin: no quiero separación entre el borde y la parte exterior del elemento. Line-height: quiero que el espacio por defecto entre las líneas sea 0.5px .contenido es el selector de clase del <div> con el mismo nombre. Width indica el ancho que quiero que tenga el contenido de este <div> Background indica que quiero que este elemento tenga un color diferente al color del resto del documento Margin indica que quiero que esté totalmente centrado en el documento. Margin top quiero que sólo esté a 10px de distancia de la parte superior del documento Padding quiero que haya 120px de separación entre el borde y el contenido.
6
LENGUAJES Y EST – PAC 1 – NÚRIA ESPINOZA NAZAR
h1, h2, h3, h4, em { margin-top:0; margin-bottom:0; }
[Type text]
He unido varios selectores porque las propiedades especificadas son iguales en todas ellas y así no las repito. Margin-top y Margin-bottom a 0 me permitirán controlar mejor el espacio existente entre estos elementos
h1 { font-weight: bold; color:#3e6ebc; font-size:40px; line-height:1.4; }
Todo lo especificado aquí afectará sólo a <h1> Font-weight indica que quiero que h1 se destaque en negrita. Color quiero que sea de este color concreto. Font-size, quiero que destaque del resto de texto, por lo que uso un tamaño superior (40px) Line-height: quiero que haya un interlineado de 1,4px. Así controlo el espacio que quiero que se vea entre una línea y otra.
h2 { color:#3e6ebc; font-size:22px; font-weight: normal; }
Todo lo especificado afectará sólo a <h2> Color: quiero que h2 sea de este color concreto. Font-size: he utilizado este tamaño para que sea lo más parecido posible al texto del ejemplo. Font-weight: siguiendo el ejemplo, esta frase ha de verse con un grosor no muy elevado, por lo que he usado normal.
h3 { font-size:23px; color:#395867; border-bottom:2px solid #CCC; line-height:1.2; }
Todo lo especificado afectará sólo a <h3> Font-size: he utilizado este tamaño para que sea lo más parecido posible al texto del ejemplo. Color: quiero que h3 sea de este color concreto. Border-bottom: estos subtítulos tienen una línea inferior que hace la vez de separador. Con esta propiedad controlamos su apariencia. Line-height: quiero que haya un interlineado de 1,2px. Así controlo el espacio que quiero que se vea respecto a otro elemento.
h4 { color:#555555; font-size:16px; font-weight:normal; textdecoration:underline; margin-top:20px; }
em { color:#888888; font-size:18px; font-style:italic; line-height:.5; font-weight:normal; }
Todo lo especificado afectará sólo a <h4> Color: quiero que h4 sea de este color concreto. Font-size: he utilizado este tamaño para que sea lo más parecido posible al texto del ejemplo. Font-weight: siguiendo el ejemplo, esta frase ha de verse con un grosor no muy elevado, por lo que he usado normal. Text-decoration:underline nos subraya este elemento, y lo diferencia del elemento comentado anteriormente border-bottom. En este caso sólo cubre el texto y no toda la línea. Margin-top: quiero que sólo esté a 20px de distancia de la parte superior del documento. He utilizado esto debido al espacio existente en el ejemplo, de esta manera he conseguido replicarlo. Todo lo especificado afectará sólo a <em> Color: quiero que em sea de este color concreto. Font-size: he utilizado este tamaño para que sea lo más parecido posible al texto del ejemplo. Font-style: italic indica que el texto entre <em></em> estará en cursiva. Line-height: quiero que haya un interlineado de 0.5px. Así controlo el espacio que quiero que se vea respecto a otro elemento. Font-weight: siguiendo el ejemplo, esta frase ha de verse con un grosor no muy elevado, por lo que he usado normal.
7
LENGUAJES Y EST – PAC 1 – NÚRIA ESPINOZA NAZAR span { color:#7692a0; }
[Type text]
Todo lo especificado afectará sólo a span Color: quiero que span sea de este color concreto.
blockquote { font-size:22px; color:#395867; font-style:italic; line-height:1.2; margin-left:0; margin-right:0; }
Todo lo especificado afectará sólo a <blockquote> Font-size: he utilizado este tamaño para que sea lo más parecido posible al texto del ejemplo. Color: quiero que el texto entre <blockquote></blockquote> sea de este color concreto. Font-style: italic indica que el texto entre <blockquote> </blockquote> estará en cursiva. Line-height: quiero que haya un interlineado de 1.2px. Así controlo el espacio que quiero que se vea respecto a otro elemento. Margin-left y margin-right: he especificado que no quiero que haya sangrado para seguir el texto de ejemplo.
pre { font-family:Arial, Helvetica, sans-serif; font-size:18px; line-height:1.2; }
Todo lo especificado afectará sólo a <pre> Font-family: como <pre> es texto ya pre-formateado y en este caso era un serif que no me interesaba, he especificado cómo quiero que se vea. Font-size: he utilizado este tamaño para que sea lo más parecido posible al texto del ejemplo. Line-height: quiero que haya un interlineado de 1.2px. Así controlo el espacio que quiero que se vea respecto a otro elemento.
8