PRA 3 de Llenguatges de Joan Soler

PRA3.- Llenguatges i estàndards web 1 / 24

Grau de Multimèdia

LLENGUATGES i ESTÀNDARDS WEB

PRA3 (Desembre 2010)

Alumne: JOAN SOLER ABELLÓ

PAGINA DRUMBEAT ((http://www.drumbeat.org/festival/program)

Entidades HTML y CSS usadas en PRA3

INDICE

Pág

Ficheros entregados ………………………………………….. 2

Divisiones div utilizadas …………………………………….. 3

Etiquetas HTML 4.01 utilizadas …….………………………… 8

Entidades CSS 2.1 utilizadas …….………………………… 10

Validaciones y pruebas (versión CSS2.1) ………………… 19

Uso CSS3 …………………………………………………. 20

Pruebas (versión CSS3) ……………………………………. 24


Ficheros entregados

Se entrega un fichero zip que aparte de este documento en pdf, contiene dos ficheros html con las dos propuestas (CSS2.1 y CSS3), un directorio “estilos” con las correspondientes hojas de estilo

de cada propuesta y otro directorio conteniendo las imágenes utilizadas.

Las páginas también pueden encontrase en:

http://cv.uoc.edu/~jsolerab/PRA3_llenguatges/PRA3_llenguatges_jsolerab.html

http://cv.uoc.edu/~jsolerab/PRA3_llenguatges/PRA3_llenguatges_jsolerab_con_red_somb_incl.html (la versión con algo de código CSS3)


Divisiones div utilizadas

Se han creado varios divs para maquetar la página de Drumbeat/Festival/Program siguiendo el layout solicitado.

En la figura siguiente se muestran las divisiones antes mencionadas:

El estilo de las divisiones se ha establecido con el código CSS:

#container {

width: 1200px;

margin: auto;

background-color: rgb(255,255,255);

overflow:hidden; /* Este overflow sin indicar altura es para corregir la altura cero del contenedor . Al no indicar altura este contenedor contendrá los elementos flotantes hijos. */

}


#arriba {


float: left;

margin: 5px 5px 0 5px; /*he puesto el margen de abajo a 0 para que la flechas encaje */

width: 1190px;

padding:0;

border-bottom: 1px solid rgb(180,180,180);

}

#izquierda {

float: left;

margin: 5px;

width: 890px;

padding:0;


}

#derecha {

float: right;

margin: 5px;

width: 290px;

padding:0;


}

#pie {

float: left;

margin: 5px 5px 0 5px;

width: 1190px;

padding:0;


}

En el propio código se incluyen comentarios.

En cada uno de ellos de han definido los márgenes con los correspondientes valores en px con excepción a la división container que se define como auto para que se centre en pantalla (dentro del body)

También se ha definido su ancho con width, el relleno con padding y el color de fondo con background-color.

Señalar el valor overflow:hidden de la división container para que tome el valor correspondiente de altura que necesiten los contenidos.


También hay que tener en cuenta el uso de los correspondientes floats para posicionar a cada uno de ellos. Con excepción del container y la div derecha el resto toma el valor float:left y el div derecha float:right.

Durante la composición del layout se usaron dos divs dentro del div derecha correspondientes a:

Definidos en la hoja de estilos como:

/* Se crean las clases para dos divs (allabout y schedule) ya que no ha sido posible hacerlo con ul ya que la anchura de los dos cuadros es distinta */

.allabout {

width:490px;

float:left;

margin-right:10px;

margin-bottom:20px;

background-color:rgb(255,255,255);

}

.schedule {

width:390px;

float:right;

margin-right:0px;

margin-bottom:20px;


}

También en el div izquierda se han utilizado varios divs tales como:


Que defino en css como:

#cuadro_registro {


text-align: center;

margin-top: 20px;

margin-bottom:20px;

padding: 6px 20px 6px 20px;

}

.learn {


overflow:hidden;


margin-bottom:20px;

}

.should {


overflow:hidden;

display:block-inline;

margin: 0 5px 30px 0; /*he modificado el margen derecho para que al girar en css3 posteriormente no salga de la página */

}


Etiquetas HTML 4.01 utilizadas

Aparte de las etiquetas HTML <p>, <img>, <h1>… <h4>, <ol>,< ul>,< li>, <a>. En la maquetación del documento de "Drumbeat ", se han usado:

<DOCTYPE>:

Declaración de tipo de documento. Asocia un documento particular con una definición de tipo de documento (DTD). Su función básica es la descripción del formato de datos, para usar un formato común y mantener la consistencia entre todos los documentos que utilicen la misma DTD. De esta forma, dichos documentos, pueden ser validados, conocen la estructura de los elementos y la descripción de los datos que trae consigo cada documento, y pueden además compartir la misma descripción y forma de validación dentro de un grupo de trabajo que usa el mismo tipo de información. Se ha usado la versión HTML 4.01 estricto.

<html>:

Es la etiqueta de apertura del documento. Es el elemento raíz del documento.

<head>:

Contiene información sobre el documento actual, como el título, palabras clave y otros datos que no se consideran parte del contenido del documento.

<title>:

Forma parte del Head. Sirve para identificar los contenidos de un documento.

<meta>:

Forma parte del Head. Aquí incluiremos las palabras clave útiles para que los motores de búsqueda puedan encontrar la página.

<link>:

También forma parte del Head y en ella se indicará donde se encuentra la hoja de estilos (css) que la página debe cargar.

<body>:

Define el elemento que contiene todo el contenido: texto, imágenes, listas, tablas, formularios, enlaces, etc.

<div>:

También denominados capas (o incluso mejor divisiones para no confundirlo con el concepto de capas del index z o de algunos programas de tratamiento de imágenes o diseño), sirven para delimitar un fragmento de documento que puede contener en el interior cualquier otro elemento incluso otras capas.

<image>:

Etiqueta utilizada para la inclusión de imágenes como el logo, las imágenes de las listas, la flecha e iconos de rss, facebook, etc usados en el pie de pagina.

Tan sólo comentar que dos de las etiquetas más usadas han sido las correspondientes a los listados tanto no ordenados (ul) como ordenados (ol) pero inhibiendo las viñetas (ó pics) o la numeración para que en unos casos no usar ninguna (caso de los menús o los cuadros con texto de la parte central de la página) o usar imágenes propias en su lugar. En ambos casos mediante la definición correspondientes en la hoja de estilos.


Importante resaltar que en todas las imágenes se han etiquetado con <alt> y <title> y los enlaces con <title> con el fin de mejorar la arquitectura y accesibilidad de la página.

Comentario: En el código de la propia hoja html he ido incluyendo comentarios particulares que han ido surgiendo en la elaboración de la página.


Entidades CSS 2.1 utilizadas

Establezco los estilos por defecto que considero más adecuados. Se definen los márgenes y los rellenos a 0, el grosor de los bordes a 0. Se establece un color gris de fondo. En cuanto a los textos se define por defecto el gris y su tamaño de 14pixels. También se establece el tipo de letra "Georgia" y en caso de que no la encuentre usará Palatino, Palatino Linotype,.. hasta el serif si no encuentra ninguna de las que se indica.. Se define el interlineado del texto de 20px por defecto.

html, body, div {

margin: 0;

padding: 0;

border: 0;

color:rgb(76,76,76);

background: rgb(209,209,209);

font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif;

font-size: 14px;

line-height: 20px;

}

Se definen los parámetros de las capas o divisiones que se han presentado en el primer apartado de este documento.

Definición de los distintos estilos de texto base (h1, h2, h3, h4 y p):

h1, h2, h3, h4 {

font-family: "MetaBook-Roman", "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Helvetica Neue", Helvetica, Arial, sans-serif;

font-weight: bold;

color: rgb(102,64,26);

font-size: 18px;

line-height: 20px;

margin-top: 20px;

margin-bottom: 10px;

clear: both;

}

h1, h2 {

font-size: 36px;

letter-spacing: -2px;

}


h1 {

color: rgb(0,116,127);

clear:both;

}

h2 {

color: rgb(64,186,197);

}

h3 {

color:rgb(0,116,127);

}

h4 {

margin-left:10px;

color:rgb(35,58,89);

}

p {

line-height: 1.4;

}

Definición de los parámetros por defecto de los estilos negrita, cursiva y subrayado seguido de los estilos por defecto que tendrán los enlaces:

/*Definiciones generales de negritas, cursivas y subrayados */

.negrita {

font-weight: bold;

}

.cursiva {

font-style: italic;

}

.subrayada {

text-decoration: underline;

}


/*Defino los colores de los valores de los links */

a:link {

color: blue;

text-decoration: none;

}

a:visited {

color: gray;

}

a:hover {

text-decoration: underline;

color: rgb(255,0,255);

}

a:active {

font-weight: bold;


}

En el código de la propia hoja de estilos he ido incluyendo comentarios particulares que han ido surgiendo en la elaboración de la página.

Pero vamos a analizar algunas partes concretas

En primer lugar un resumen sobre float, clear y display ya que es muy importante en el desarrollo de esta práctica.

(las siguientes definiciones se han extraído de http://www.librosweb.es/css/index.html )

Float

Propiedad de css que permite posicionar una caja en posicionamiento flotante. Significa que la caja se desplazará hasta la zona más a la izquierda o derecha a partir de la posición que originalmente se encontraba dejando de pertenecer al flujo normal de la página pero teniendo en cuenta las otras cajas flotantes existentes.

Los elementos en línea hacen sitio a las cajas flotantes. Los elementos de bloque no les hacen sitio, pero adaptan sus contenido para que no se solapen con ellas.

La propiedad puede tomar los valores : left, right, none e inherit

Clear

Esta propiedad permite modificar el comportamiento por defecto del posicionamiento flotante

Puede tomar los valores : left, right, both, none e inherit

Ese valor indica el lado del elemento que no debe ser adyacente a una caja flotante.


Display

Permite controlar la forma de visualizar un elemento. Dicho de otra forma establece el tipo de caja generada por un elemento.

De los muchos valores que puede tomar, si nos centramos en esta práctica nos interesan inline, block e inline-block.

Inline : El elemento se convierte en elemento de línea y ocupa sólo el espacio necesario para mostrar su contenido.

Block : El elemento se transforma en bloque, empezando por una nueva línea y ocupa todo el espacio disponible de esa línea aunque su contenido no lo requiera.

Inline-block : El elemento es un bloque comportándose como de línea simultáneamente. O sea, su comportamiento es de línea con respecto a los demás que le rodean. Si se da una anchura especifica, su contendio ocupará todo ese espacio pero el bloque en sí respecto a los elementos que le rodean se comportará como de línea adaptándose al elemento anterior según si se ha definido un float y al siguiente si el siguiente tiene también un float definido.

Y posteriormente unos comentarios sobre varios puntos, a título de ejemplo.

Listados horizontales usados en menú principal

Se comenta el apartado de la imagen correspondiente al menú principal que puede verse en la imagen:

El elemento menú principal (toda la lista) se sitúa a la derecha con un float:right.

.menu_principal{

margin-top: 50px;

float:right;

}

Y cada elemento de la lista se alineará por su izquierda al anterior (quedando el listado horizontal) ya que se define un float:left, pero antes se ha debido aplicar un clear:right para evitar el que tenía por herencia proveniente del ul.


También se indica que no muestre las viñetas del listado con list-style-type: none

Se le indica que el texto de cada elemento de listado lo muestre con todas las letras en minúscula mediante : text-transform:lowercase

.menu_principal li {

clear:right;

float: left; /* hacemos flotar a la izquierda los elementos para que se de adaptan por su izquierda al anterior */

list-style-type: none; /*se elimina el marcador de la lista */

margin-left: 10px; /* separación entre casillas */

padding: 0.25em 0.4em 0.25em 0.4em; /* espacio alrededor del texto */


font-family: "Lucida Grande", "Lucida Sans Unicode", "Helvetica Neue", Helvetica, Arial, sans-serif;

font-size: 25px;

text-transform:lowercase;


}

Además se le hacen modificaciones del color del texto, que no se subraye (ya que de las definiciones generales por defecto el texto sería azul y subrayado, y que cuando pasemos por encima con el ratón el color de la casilla cambie.

.menu_principal a {

color: rgb(136,136,136);

text-decoration: none;

}

.menu_principal li:hover {


}

Listados usando imágenes en vez de la numeración o viñetas

Se comenta el apartado de la imagen correspondiente al listado correspondiente a “should” que puede verse en la imagen:


En este caso cabe destacar la sustitución de las viñetas ó pics por una imagen personalizada.

Se ha usado una imagen de fondo no repetida

.lista_should {

margin:10px;

padding:10px;

}

ul.lista_should li{

list-style-type: none;

/*list-style-image: url("imagenes/check.png"); */

/* NO SE PORQUE NO HA FUNCIONADO, creo que sólo funciona en algún navegador*/


background: url(../imagenes/check.png) no-repeat ; /* Dado que list-style-type no ha funcionado he usado este sistema. Ver pag 24 de El Texto Central HTML de los apuntes */

padding-left:30px; /* Con el fin de alejar la imagen y el texto*/

}

Listado de los cuadros

Se comenta el apartado de la imagen correspondiente al listado correspondiente de los distintos cuadros que puede verse en la imagen:

Vistos ejemplos anteriores (y el que sigue) y los comentarios junto a la definición de las propiedades en la hoja de estilos creo que queda explicado.

.cuadros {

margin: 0;

padding:0;

}

/* Estilos de los cuadrod BAdge TAb etc*/

/* Usaremos STYLE EN LINEA para cada color para evitar multiplicar las clases AUNQUE en la versión css3 se aprovecha que se define una


inclinación para cada cuadro para incluir el estilo de color en la hoja de estilo*/

.cuadros li {

float: left; /* Usamos el float para que cada elemento referencia su izquierda con el anterior */

display:inline; /* No es necesario ya que las cuadros tienen todos la misma altura y no es posible que tomen referencia izquierda de la que no es el cuadro anterior pero lo mantengo por si en un futuro cambiamos las medidas */

list-style-type: none; /*se elimina el "punto" de lista.*/

margin-right: 10px; /* en el último cuadro de la derecha ha sido necesario usar un STYLE en línea para pasar este margen a 0 de esta forma evitamos demasiadas clases en la hoja de estilo. En la versión css3 dado que se ha definido un estilo para cada cuadro dado que tienen inclinaciones y colores distinto se ha incluido el margin en ese estilo*/

margin-bottom:10px;

padding:0px;

text-align:left;

width:290px;

height: 180px ;

overflow:hidden; /* Para evitar que si el texto fuese mayor se salga del cuadro. Aunque no se verá*/

}

.cuadros p{

margin: 10px;

}

Listado en parte de rss, facebook , .. (en el pie)

Se comenta el apartado de la imagen correspondiente al listado correspondiente a “learn” que puede verse en la imagen:

El ul se mantendrá a la izquierda respecto al div pie que lo contiene (al ser el primer elemento que se define dentro del contenedor) ya que tiene definido una float:left.


Queremos que se comporte como bloque y el contenido definirá su anchura, pero a la vez que permita que los siguientes bloques ul puedan colocarse a continuación. Para ello definimos el display:inline-block.

.rss {

padding-left:0; /*separación entre imagen+texto y contenedor */

display:inline-block; /*para que no ocupe toda la anchura. Se comporta como una caja de bloque (útil para posicionar todo el conjunto que forman todos los elementos que contiene) y a la vez se comporta como de linea para los elementos que le rodean. */

float:left;

margin-top:0;

}

Dentro del bloque ul la imagen quedará a la izquierda, definimos float:left.

ul.rss img {

margin-right:10px; /*Distancia entre imagen y texto*/

height:1.5em;

float:left;

border: 0;

padding: 0.25em ; /* espacio alrededor de la imagen */

}

Cada elemento vendrá a continuación de la imagen para que no salte de línea ya que había heredado un float:left del bloque ul le aplicamos clear: left

.rss li{

clear:left;

list-style-type: none;

margin:0 ;

padding: 0.25em ; /* espacio alrededor del texto */

line-height:1.2em;

}

Definimos el color del texto como blanco

.rss a {

color: rgb(255,255,255); /* color texto */

font-size:12px;

}


Validaciones y pruebas (versión CSS 2.1)

Se ha validado la versión de la propuesta CSS 2.1 (o sea sin código CSS3) según HTML4.01 Strict y CSS2.1

Dicha versión se ha probado con resultado satisfactorio con los siguientes exploradores :

MS Explorer versiones 7 y 8

Mozilla Firefox versiones 3.610 y 3.6.13 (Windows)

Google Chrome versión 8.0.552.224

Opera versión 10.63 (Windows)

Tan sólo comentar que la única incidencia es que en la versión 7 de Explorer la línea y flecha bajo el menú secundario quedan desplazadas.


Uso de CSS3

Se han usado algunas etiquetas correspondientes al CSS3 para que el aspecto resultante fuese :

Veamos algunos detalles del código de esquinas de cajas redondeadas, sombras e inclinación.

Redondeo de esquinas

Por ejemplo el redondeo de esquina del botón de Register, el código CSS3 a aplicar al elemento es:

/*Curvatura de 10px en todas las esquinas */

border-radius: 10px; /* borrador de trabajo de CSS3 con radio 10px en cada esquina*/

-moz-border-radius: 10px; /*para Firefox con radio 10px en cada esquina*/

-webkit-border-radius: 10px; /*para Safari con radio 10px en cada esquina*/


Se ha incluido el código para el borrador de trabajo del grupo de trabajo de CSS3, el adoptado por Mozilla y el de Safari (tal como se indica en los comentarios insertados en la propia hoja de estilo)

En este caso el radio de todas las esquinas es el mismo, y el resultado:

(tanto en el cuadrado externo como sobre el botón se ha aplicado un radio de 10px)

Pero, también puede aplicarse distintos radios a cada una de las esquinas como puede verse en el ejemplo siguiente:

El código CSS· del ejemplo anterior es :

/* Esta es la parte de aplicar la curvatura con radio 16px en cada esquina superior y sin radio en las inferiores*/

/* EL ORDEN el vertice sup-izq -> vert-sup-der -->vert-inf-der--> vert-inf-izq*/

border-radius: 16px 16px 0 0; /* borrador de trabajo de CSS3 con radio 16px en cada esquina superior*/

-moz-border-radius: 16px 16px 0 0; /*para Firefox con radio 16px en cada esquina superior*/

-webkit-border-radius: 16px 16px 0 0; /*para Safari con radio 16px en cada esquina superior*/

En los propios comentarios del código se indica el orden en que se define el radio de cada esquina.

Un caso curioso es el utilizado para el menú del idioma:

Donde

La casilla del Catalán no tiene radios

La correspondiente al inglés tiene radios en los vértices de la parte izquierda

.lang_izq {

/* Aplicamos curvatura sólo a los vértices izquierdos*/

/* EL ORDEN el vértice sup-izq -> vert-sup-der -->vert-inf-der--> vert-inf-izq*/


border-radius: 16px 0 0 16px; /* borrador de trabajo de CSS3 con radio 16px en cada esquina izquierda*/

-moz-border-radius: 16px 0 0 16px; /*para Firefox con radio 16px en cada esquina izquierda*/

-webkit-border-radius: 16px 0 0 16px; /*para Safari con radio 16px en cada esquina izquierda*/

}

La casilla del Castellano los radios se sitúan en la parte derecha

.lang_der {

/* Aplicamos curvatura sólo a los vértices derechos*/

/* EL ORDEN el vertice sup-izq -> vert-sup-der -->vert-inf-der--> vert-inf-izq*/

border-radius: 0 16px 16px 0; /* borrador de trabajo de CSS3 con radio 16px en cada esquina derecha*/

-moz-border-radius: 0 16px 16px 0; /*para Firefox con radio 16px en cada esquina derecha*/

-webkit-border-radius: 0 16px 16px 0; /*para Safari con radio 16px en cada esquina derecha*/

}

(Además la casilla seleccionada, inglés, tiene una sombra interna sin desplazamiento y bastante difuminada. Ver párrafo siguiente sobre sombras).

Sombras

En el mismo botón de Register, el código a aplicar al elemento para conseguir del efecto sombra es:

/* sombra gris (externa) desplazada 3px a derecha y abajo y 4px de difuminado */

/* sombra blanca (interna ya que definimos un INSET) desplazada 2px a derecha y abajo y 5px de difuminado */

box-shadow: 3px 3px 4px rgb(133,133,133),inset 2px 2px 5px rgb(255,255,255); /* borrador de trabajo de CSS3 */

-moz-box-shadow: 3px 3px 4px rgb(133,133,133),inset 2px 2px 5px rgb(255,255,255); /*para Firefox */

-webkit-box-shadow: 3px 3px 4px rgb(133,133,133), inset 2px 2px 5px rgb(255,255,255); /*para Safari */

Siendo el resultado:

Se ha aplicado una sombra exterior de forma que:


Primera cifra (obligatoria) : indica el desplazamiento horizontal (positivo a la derecha y negativo a la izquierda)

Segunda cifra (obligatoria) : indica el desplazamiento vertical (positivo hacia abajo y negativo hacia arriba)

Tercera cifra (opcional): radio utilizado para difuminar la sombra. Valores mayores mayor difuminación, valores menores la sombra es más sólida.

Cuarta cifra (opcional y aquí no la hemos utilizado): radio utilizado para expandir la sombra. Valor positivo, se expande en todas direcciones, valor negativo se comprime.

Valor rgb: se indica el color de la sombra. Puede utilizarse un valor rgba donde se incluye el canal alpha que indica la transparencia (no lo hemos utilizado en este ejercicio)

También se ha incluido el código para las tres opciones que incluyen el grupo de trabajo, Mozilla y Safari.

Inclinación

Para conseguir una inclinación como por ejemplo:

el código a aplicar al elemento es tal como :

transform: rotate(-2deg); /* borrador de trabajo de CSS3 */

-moz-transform: rotate(-2deg); /*para Firefox */

-webkit-transform: rotate(-2deg); /*para Safari */

Donde se indica el ángulo que debe rotar en grados (degrees) siendo el valor positivo el que corresponde a las agujas del reloj y el negativo el sentido anti horario.


Pruebas (versión CSS3)

Tras añadir los comandos correspondientes al código de CSS3 la validación de la hoja de estilos no ha sido posible.

Se han llevado a cabo pruebas de visualización de la página con diversos navegadores siendo los resultados:

Navegador ( versión) Resultado análisis visual de la página con código CSS3 (para esquinas redondeadas, sombras e inclinación de cajas)

Mozilla Firefox (versiones 3.6.10 y 3.6.13 Windows)

Correcto (de hecho se ha optimizado para este navegador)

Mozilla Firefox (versión 3.5.16 Mac) Correcto

Google Chrome (ver. 8.0.552.224) Correcto. Con respecto a la visualización del giro o inclinación de la caja se ve trazas de la caja original sin

moverse.

Opera (ver 10.63 Windows y Mac) Correcto

Safari (ver 5.03) Correcto

MS Explorer 8 No se visualizan los redondeos, sombras e inclinaciones definidas con css3 pero el layout se

mantiene correcto.

MS Explorer 7 No se visualizan los redondeos, sombras e inclinaciones definidas con css3 pero el layout queda

alterado en la posición de la flecha y la línea y la posición de algunas figuras incluidas en los listados

(me refiero estilo usando imágenes en vez de puntos o cuadros).

PRA 3 de Llenguatges de Joan Soler

Documents

Transcript of PRA 3 de Llenguatges de Joan Soler