LEW_PAC 2

LENGUAJES Y ESTÁNDARES WEB

PAC 2

*

ADRIÁN TERMENÓN RIERAGRADO MULTIMEDIA UOC

1er SEMESTRE

Adrián Termenón Riera


PAC 2

EXPLICACIÓN DE LAS ENTIDADES HTML Y CSS USADAS:

1. Sobre las entidades HTML: debe explicarse el uso de las etiquetas diferentes a <p>, <h1>...<h6>.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/T R/html4/strict.dtd">

En este primer elemento de tipo “doctype” se describe el lenguaje HTML utilizado para las tres páginas. En este caso es la version 4.01 de HTML.

<html>

Esta etiqueta indica la apertura del elemento <html> que incluye todo el documento. Su etiqueta de cierre </html> es lo último que se escribe en un documento.

<head>

Esta etiqueta indica la apertura del elemento <head> incluido en <html>. He introducido en él información relevante como por ejemplo, título del documento, instrucciones para el agente de usuario, metadatos y el uso de una hoja estilos. Esta información, salvo el título del documento no es visible para el usuario

<title>

He utilizado este elemento dentro de <head> para indicar el texto que el agente de usuario mostrará a modo de título en la barra de menú.

<meta>

Este elemento también esta dentro de <head>. Se usa para introducir metadatos en el documento como por ejemplo, una breve descripción del mismo (name=”description”), algunas palabras clave que los buscadores usarán para encontrar el documento (name=”keywords”) y el conjunto de caracteres apropiado (content=”text/html;charset=utf-8”) que debe usar el agente de usuario.

<link>

He recurrido a este elemento dentro de <head> para importar una hoja de estilos externa de tipo CSS (href="estilos.css" type="text/css"). Además también he indicado en él que dicha hoja está en el mismo directorio que el documento (rel="stylesheet") y él tipo de soporte al que va dirigido el documento (media="screen").

<body>

Esta etiqueta indica la apertura del elemento <body> dentro de <html>. En el elemento <body> he incluido todo el contenido real y visible de las páginas.

<div>

Esta etiqueta indica la apertura del elemento de bloque <div> que a su vez puede contener otros elementos de bloque como <p>, <ol>, <ul>, <dl>, etc. Lo he utilizado en las tres páginas para incluir distintos grupos de elementos.

<span>

Esta etiqueta indica la apertura del elemento de línea <span> que afecta a las partes del texto incluidas en él. Lo he usado en las páginas “respuestas.html” y “ConeixementUOC.html”.

<abbr>

Esta etiqueta indica la apertura del elemento de linea <abbr>. Al igual que <span>, solo afecta a las partes del texto incluidas en él. Este elemento etiqueta su contenido como abreviatura. Lo he utilizado para marcar las abreviaturas del sitio.

<ol>

Esta etiqueta indica la apertura de una lista ordenada. La he utilizado en la página “coneixementUOC.html” para iniciar la lista de apartados que contiene los diferentes links.

<ul>

Esta etiqueta indica la apertura de una lista no ordenada. La he usado en la página de “coneixementUOC.html” para abrir las listas de revistas, blogs y espacios así como en la página de “HybridPlayground.html” para la lista de componentes de las unidades sensoriales. También he utilizado una lista desordenada para el menú de navegación superior presente en todas las tres páginas.

<li>

Esta etiqueta indica la apertura de un elemento dentro de las listas ordenadas y desordenadas. Lo utilizo para definir los elementos dentro de las listas anteriormente mencionadas.

<dl>

Esta etiqueta indica la apertura de una lista de definiciones. Lo he usado en la página de “respuestas.html” para crear una lista con las preguntas y respuestas

<dt>

Esta etiqueta indica la apertura de un término en una lista de definiciones. Lo he utilizado en la página “respuestas.html” para marcar las preguntas asi como las letras “a.”, “b.”, etc que las identifican.

<dd>

Esta etiqueta indica la apertura de una definición en una lista de definiciones. La he utilizado para introducir las respuestas en la página “respuestas.html”.

1 Adrián Termenón Riera


PAC 2

2. Sobre el CSS: debe explicarse todo el CSS usado, incluyendo cuando se ha usado y por qué y para que se aplican los atributos definidos.

el CSS se utiliza para indicar al agente de usuario cómo debe mostrarse un elemento concreto en función de su estilo, espaciado y posición. En mi hoja de estilos he utilizado pseudoclases y varios tipos de selectores. Selectores de elemento, selectores de “id”, selectores de clase y un selector de atributo. Con el fin de no caer en la reiteración de conceptos explicaré previamente algunas propiedades utilizadas en la mayoría de selectores. He usado “margin” y “padding” para ajustar los espacios entre elementos de las páginas con el fin de conseguir un diseño y maquetación lo más parecido posible a los documentos originales suministrados en pdf. La propiedad “border” y sus variaciones como “-width“, “-style”, “-left”, “-top”, “-color”, etc sirven para definir la anchura, el estilo y color de los bordes en aquellos elementos que lo precisan.

SELECTORES DE ELEMENTO:

body{width:900px;margin:auto;font-size:1em;font-family:arial;letter-spacing:0em;}

Este selector de elemento afecta a todo el documento, es decir, todo lo que esta incluido en el elemento <body>

La propiedad “width:900px;” indica que el ancho del texto no superará nunca los 900 píxeles. Con “margin:auto;” el texto se muestra centrado en el navegador.

Las propiedades “font-size:1em;”, “font-family:arial;”, “letter-spacing:0em;” indican el tamaño y tipo de la fuente y la separación entre caracteres. Estos valores son los habituales en todos los navegadores pero he decidido especificarlos para evitar resultados no deseados.

h1{font-family:sans_serif;}

Este selector afecta a todos los elementos <h1>. Lo he usado unicamente para cambiar la tipografía. Como hay varias páginas que contienen el elemento <h1> y este debe mostrarse diferente en cada una de ellas el resto de propiedades las aplicaré mediante otros selectores de “id” o de clase.

h2{font-family:sans_serif;font-size:1.8em;line-height:1.2em;font-weight:bold;margin-bottom:0.8em;}

Afecta a todos los elementos <h2>. Al igual que el anterior lo he utilizado para cambiar la tipografía del elemento. Además he incluido otras propiedades como “font-size” para el tamaño de la fuente, “line-height” para la separación de linea, “font-weight” para mostrar el texto en negrita.

dt{font-size:1.2em;}

Afecta todos los elementos <dt>. Lo utilizo para aumentar el tamaño de la letra en las preguntas de la página “respuestas.html” mediante el atributo “font-size”.

dd{padding:3em;padding-top:1em;text-indent:2em;}

Afecta todos los elementos <dd>. Lo he usado para modificar la maquetación de las respuestas de la página “respuestas.html”. La propiedad “text-indent” añade tabulación a las mismas.

a{text-decoration:none;color:inherit;}

Afecta todos los elementos <a>. Lo he usado para evitar que los navegadores personalicen los links del sitio mediante la propiedad “text-decoration;none;”. Además, gracias a la propiedad “color” y su valor “inherit” los links heredan el color del elemento en el cual están incrustados. Esto sirve para que el último link de la página “HybridPlayground.html” se presente del mismo color que el resto del texto que le precede.

abbr{border-bottom:0px dotted;text-decoration:none;}

Afecta a todos los elementos de linea etiquetados como abreviaturas en el documento. La mayoría de navegadores automaticamente subrayan con una linea de puntos el texto incrustado en dichos elementos. Para asegurarme de que esto sucede en todos los navegador he incluido la propiedad “border-bottom:0px dotted;” y la propiedad “text-decoration:none;”



PAC 2

SELECTORES DE “ID”:

#menu{background-color:#F6F6F6;border:0px;text-align:center;font-weight:bold;padding:0.3em;}

Utilizado en el menú de navegación del sitio. Defino su estilo utilizando varias propiedades ya explicadas, destacar la propiedad y el valor “text-align:center;” que provocan que todo el contenido alojado en el elemento con este identificador quede centrado.

#respuestas{padding-left:5.5em;padding-right:5.5em;font-size:0.9em;line-height:1.75em;text-align:justify;margin-bottom:3em;margin-top:1em;}

Usado en “respuestas.html” para ajustar el estilo de toda la página. Destacar la propiedad y su valor “text-align:justify;” que sirven para justificar el texto de dicha página.

#conocimientos{padding-left:13.5em;padding-right:13.5em;margin-bottom:3em;line-height:2em;}

Utilizado en la página “ConoixementUOC.html”. Destacar aquí el uso del atributo “line-height” para establecer el interlineado del texto, en este caso, la lista.

#hybrid{padding-left:5.5em;padding-right:5.5em;font-size:0.9em;line-height:1.75em;text-align:justify;margin-bottom:3em;}

Usado en “HybridPlayground.html” para ajustar el estilo de toda la página mediante las propiedades ya explicadas

#titulo1{position:relative;width:900px;height:115px;background-color:#006600;color:#FFFFFF;}

Usado en el título de la página “respuestas.html” Destacar aquí el uso de “widht” y “height” para establecer la anchura y altura máximas de la caja que, así como la propiedad “position:relative;” que sirve para situar correctamente los elementos anidados en ella.

#titulo2{color:#2d3554;font-size:2.4em;line-height:1em;font-weight:normal;padding-top:0.2em;}

Usado en el título de la página “ConeixementUOC.html”.

#titulo3{font-size:2.6em;line-height:1.2em;font-weight:bold;text-align:left;color:#FF6600;padding-top:1em;padding-bottom:0.2em;}

Usado para el título de la página “HybridPlayground.html”.

#container{display:block;position:relative;width:900pxheight:115px;background:url("img/header.jpg");color:#FFFFFF;}

Usado para la cabecera de Artnodes al igual que en “#titulo1” la propiedad “position:relative;” sirve para situar correctamente los elementos anidados. Además utilizo la propiedad “background” para decorar el elemento con la imagen de Artnodes.

#resumen{border-width:0.4em;border-color:#939393;background-color:#EFEFEF;border-style:solid;padding-top:1.8em;padding-bottom:1.8em;padding-left:2.3em;padding-right:2.3em;margin-left:4.1em;margin-right:4.1em;margin-top:2.5em;margin-bottom:2.5em;}

Selector utilizado para definir el estilo de la caja de resumen en la página “HybridPlayground.html”.

#unidad{background-color:#FFFFFF;}

Usado para establcer el color de fondo de la caja que contiene la imagen “unidad.jpg”.



PAC 2

#esquema{background-color:#EEEEEE;}

Usado para establcer el color de fondo de la caja que contiene la imagen “esquema.jpg”.

#extracto{text-decoration:none;color:#FFFFFF;border-width:0.4em;border-color:#FF4400;background-color:#FF6600;border-style:solid;padding-top:1.4em;padding-bottom:1.4em;padding-left:1.5em;padding-right:1.5em;margin-bottom:1.8em;}

Selector utilizado para definir el estilo de la caja de extracto en la página “HybridPlayground.html”.

#pie{font-size:0.8em;font-weight:bold;line-height:1em;text-align:right;color:#999999;border-bottom:2px solid;margin-bottom:2em;}

Usado para establecer el estilo del elemento definido al final de la página “HybridPlayground.html”

#lista{width:380px;margin:auto;}

Usado para centrar la lista de componentes de la página “HybridPlayground.html”

SELECTORES DE CLASE:

.menuposition:relative;left:-1em;list-style-type:none;display:inline-block;width:13em; margin: 0 3em 0 0;}

Utilizado en el menu de navegación. Destacar aquí la propiedad “display;inline-block;” que permite que los elementos adquieran las ventajas tanto de un elemento de linea como uno de bloque. Además he usado las propiedades “position;relative;” y “left;-1em; para conseguir que la lista se muestre centrada en la página al eliminar el espacio que introduce a la izquierda de la linea cualquier elemento de tipo lista.

a.pulsado{list-style-type:none;padding:1em;border:3px inset #EEEEEE;background-color:#DDDDDD;display:inline-block;width: 13em; margin: 0 3em 0 0;color:#888888;}

utilizado en el menú de navegación. Aplico este definidor de clase al enlace que hace referencia a la página abierta para indicar que estamos en dicha página.

ol.conocimientos{list-style-type:decimal;padding-left:8.9em;padding-top:0em;}

Aplicada a la lista ordenada de la página “ConeixementUOC.html”. Mediante la propiedad “list-style-type:decimal;” defino que los picos sean numeros decimales.

.contenido{border-width:0px;font-size:1.4em;color:#FFFFFF;position:absolute;bottom:0.8em;left:1.5em;}

Clase aplicada al texto incluido en el elemento de bloque con definidor de “id” “container” mencionado anteriormente. Mediante los atributos “position:absoulte;” asi como “bottom” y “left” posiciono el texto en el lugar deseado.

.respuestas{border-width:0px;font-size:1.4em;color:#FFFFFF;position:absolute;bottom:0.8em;left:1.5em;}

Clase aplicada al texto incluido en el elemento de bloque con definidor de “id” “titulo1r” mencionado anteriormente. Mediante los atributos “position:absoulte;” asi como “bottom” y “left” posiciono el texto en el lugar deseado.

.letra{float:left;position:relative;bottom:0.07em;font-size:1.5em;font-weight:bold;color:#006600}

Usado para las letras “a.”, “b.”, etc presentes al principio de cada pregunta en la página respuestas. Mediante las propiedades “float” y “position” posiciono dichas letras a la izquierda del texto evitando que este se superponga debajo de ellas al saltar de linea.



PAC 2

.pregunta{padding-left:1.4em;}

Complementación de la técnica anteriormente definida. Se aplica a las preguntas para que no se pisen con las letras.

.indice{padding-top:1em;}

Utilizado para posicionar los elementos de la lista ordenada anterior.

.subindice{list-style-type:none;padding-left:0.7em;padding-top:0.4em;}

Utilizado para posicionar los elementos anidados dentro de los elementos de la lista anterior. Además elimino la presencia de picos mediante la propiedad “list-style-type:none;”.

.apartado{list-style-type:square;padding-left:2.5em;padding-bottom:0.6em;}

Usado para poscionar los links de la lista anterior y para marcar sus picos como cuadrados.

.revista{list-style-type:none;background:#fff url("img/icon-revistes.png")no-repeat 0 0.2em;padding-left:1.7em;}

Usado para substituir el pico de los elementos de la lista anterior por una imagen externa introducida con la propiedad “background” donde ademas se definen los valores de color de fondo, posición de la imagen y “no-repeat”, este último evita que la imagen se repita indefinidamente hasta rellenar la totalidad del elemento.

.blog{list-style-type:none;background:#fff url("img/icon-blog.png")no-repeat 0 0.2em;padding-left:1.7em;}

Igual que el anterior para pero con una imagen diferente.

.espacio{list-style-type:none;background:#fff url("img/icon-espacio.png")no-repeat 0 0.2em;padding-left:1.7em;}

Igual que el anterior para pero con una imagen diferente.

.cajatext{text-align:justify;}

Utilizado en la página “HybridPlayground.html” para que las cajas de texto muestren esto de forma justificada.

.cajaimg{width:450px;margin:2em auto;font-size:0.7em;color:#000000;text-align:center;border-bottom:2px dashed;}

Usado para las cajas que contienen las imágenes de “esquema” y “unidad”. Destacar el valor “dashed” que define la linea discontinua que se presenta al pie de dichas cajas

imagen{padding-top:2em;padding-bottom:1em;}

Usado para colocar en la posición deseada las imágenes anteriores dentro de los elementos que las anidan.

.linea{list-style:square;border-bottom:1px solid;}

Utilizado para definir el estilo de la lista en la página “HybridPlayground.html”

.niños{float:left;margin-right:1em;}

Permite que el texto se posicione en el espacio que queda libre a la derecha de la imagen gracias a la propiedad “float”.

.naranja{color:#FF6600;}

Cambia el color del elemento a naranja

.negrita{font-weight:bold;}

Hace que ciertas partes del texto se presenten en negrita.

.codigo{border-bottom:0px dotted;text-decoration:none;color:#006600;font-family:courier new;font-size:0.8em;font-style:normal;font-weight:bold;}

Usado para definir el estilo de los términos de código explicados en la página “respuestas.html”



PAC 2

PSEUDOCLASES:

La pseudoclases se utilizan para definir el estilos de los enlaces en función de su estado. En el sitio las he utilizado en dos casos diferentes:

a.boton:link{list-style-type:none;padding:1em;background-color:#BBBBBB;border:3px outset #CCCCCC;displaY:inline-block;width: 13em; margin: 0 3em 0 0;color:#666666;}a.boton:visited{background-color:#BBBBBB;border:3px outset #CCCCCC;}a.boton:focus{background-color:#DDDDDD;border:3px outset #EEEEEE;color:#888888;}a.boton:hover{background-color:#DDDDDD;border:3px outset #EEEEEE;color:#888888;}a.boton:active{background-color:#DDDDDD;border:3px inset #EEEEEE;}

Utilizadas para el menú de navegación superior presente en las tres páginas. Destacar que solo es necesario señalar las propiedades que deben modificarse en cada estado. En este caso el estilo cambia cuando pasamos el curson por encima del enlace y cuando hacemos click sobre él. Aún así también he definido el color y el borde del estado “visited” para evitar que los navegadores modifiquen dicho estilo.

a.lista:link{border-bottom:1px dotted;color:#000000;}a.lista:visited{border-bottom:1px dotted;color:#000000;}a.lista:focus{border-bottom:1px solid;color:#000000;}a.lista:hover{border-bottom:1px solid;color:#000000;}a.lista:active{border-bottom:1px solid;color:#000000;}

En este caso, usado en los links de la página “ConeixementUOC.html”, la linea de puntos que subraya los enlaces es substituida por una linea solida al pasar el curson sobre ellos. Lo mismo sucede al hacer click.

SELECTOR DE ATRIBUTO:

Por ultimo he usado el siguiente selector de atributo para evitar que Internet Explorer enmarque algunas imágenes del sitio web con un borde negro.

img[src]{border:0px;}



PAC 2

BIBLIOGRAFÍA:

UOC Wiki de la asignatura Lenguajes y estándares web.http://cv.uoc.edu/app/mediawiki8/wiki/Portada

librosweb.es Referencia de CSS 2.1http://www.librosweb.es/referencia/css/

W3Chttp://www.w3.org/

miarrobahttp://soporte.miarroba.es/

Virtualnauta Ejemplos de CSShttp://www.virtualnauta.com/css-ejemplos

Cafetero Guia de referencia rapida – etiquetas HTMLhttp://www.cafetero100.com/manual-html.php


http://cv.uoc.edu/app/mediawiki8/wiki/Portada

http://www.cafetero100.com/manual-html.php

http://www.virtualnauta.com/css-ejemplos

http://soporte.miarroba.es/

http://www.w3.org/

http://www.librosweb.es/referencia/css/

LEW_PAC 2

Documents

Transcript of LEW_PAC 2