Estudios de Informática, Multimédia y Telecomunicación " Grado en Multimédia"
Anuncio
![](http://s2.studylib.es/store/data/000419233_1-7cc6980a13bfe80bc5175504d3aa5359-768x994.png "Estudios de Informática, Multimédia y Telecomunicación " Grado en Multimédia"")
Estudios de Informática, Multimédia y Telecomunicación " Grado en Multimédia" LENGUAJES Y ESTÁNDARES WEB Práctica final (documento.doc) Alumna: Maria Dolors Galicia Barrafon PRÁCTICA Como siempre, he seguido la dinámica de los apuntes de clase tanto en el HTML como en el CSS. Lo más complicado ha sido estructurar los datos que yo disponía para llevar a cabo la tarea y acoplarlos a las exigencias de la práctica, tal como es la disposición de elementos de cada página (según el archivo "practica_esquema.png") , colocar todos los elementos que se nos indica y se pide para el rediseño, y ajustarlos a él. Es como montar un puzle... Dirección Internet: Para empezar he puesto en internet (dirección siguiente) la página index.html http://cv.uoc.edu/~mgalicia/practica_final/index.html que dispone de un menú de entrada que nos conducirá a este documento con "documento.doc", Y a "portada.html" que es la portada/inicio del prototipo del rediseño solicitado en el enunciado de la Práctica final. (En internet dirección siguiente): http://cv.uoc.edu/~mgalicia/practica_final/portada.html Validator W3: Todos los archivos html y css validan correctamente. Número de páginas: Páginas html (sin contar la index.html) 24. Y una de estilos.css. Distribución de las páginas: El inicio real de la práctica comienza con la página de inicio que tiene el nombre de "portada.html" ( es la portada de nuestro libro) , que nos conducirá a los objetivos deseados. En ella disponemos (a través de enlaces) de las principales arterias que nos permitirán acceder a las secundarias, terciarias, etc. ("accesibilidad"). Siempre respetando la estructura de los contenidos originales y el máximo respeto a los estándares web. También mencionar que a los autores del material de la asignatura les hemos otorgado el nivel privilegiado que les corresponde en esta"portada.html". Diseño: Mantiene la apariencia y los códigos de color y corporativos de la UOC. Estructura: El ancho de página es de 1200px. La cabecera tiene el logo de la UOC. Opciones generales a todas las páginas como es el título, objetivos, bibliografía, nube de conceptos, buscador. Excepto el buscador, cuentan con un enlace que les conduce a su lugar de destino anunciado. Es común en todas las páginas. En el menú horizontal y principal de navegación, se encuentran los apartados siguientes; Portada, Introducción, Módulo 1, Módulo 2, Módulo 3, Módulo 4, Módulo 5 y Módulo 6. Con sus correspondientes enlaces hasta un primer nivel, excepto el Módulo 5 que nos conducirá por todo el trabajo solicitado en la práctica final. En el menú secundario lateral situamos los submenús . Los datos breadcrumbs están vigentes en todas las páginas. El pie de página, es un pie de página común a todas las páginas. HTML Tipo de documento : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Cabecera: En <head>Título del documento: <title>Tecnología y desarrollo en dispositivos móviles. </title> Y el link para la hoja de estilos.css; <link rel="stylesheet" href="estilo.css"/> La página web está estructurada por los div siguientes situados dentro de<body>: El div principal es el del contenedor <div id="contenedor"><!-inicio contenedor--> Seguidamente estructuramos el documento como sigue; <div id="cabecera"> que contiene el logo de la UOC, títulos del documento y también una "lista"<ul></ul> <li></li> que se trata del menú, Objetivos,Bibliobrafía, Nube de conceptos y Buscador que se halla dentro de <div id="columna "> y que es común a todas las páginas que componen la web. Y sus respectivas etiquetas div de cierre. Y sin cerrar el div "principal", abrimos el <div id="cuerpo"> y dentro del éste, colocamos el menú (principal) horizontal como sigue; <div id="menuhoriz"> ( este menú será común en todas las páginas de la web). Como en el anterior menú usamos una lista <ul></ul> <li></li> Y las respectivas etiquetas div de cierre. Los bradcrumbs los situamos dentro del <div id="breadcrumbs"> </div> que nos dice en que página que nos encontramos. El manú lateral con su título incluido va dentro del <div id="menu"></div>. Este menú lateral, lo hago servir de comodín, y va según contenido de la web , es variable , y adaptable a según circunstancias, número de módulo de que se trate , características o tema de la página web, etc.. Por ejemplo: he puesto a los autores creadores del material que tratamos en sus respectivas páginas web , y los submenús de módulos en el lugar que les corresponde a cada módulo, etc.. Tengo puesto para el texto un <div id="editable"></div>, donde va colocado el texto necesario en cada caso, imagenes, etc.. Pie: El pie de página es común a todas las páginas y está dentro de <div id="pie"></div>. Y para finalizar colocamos las etiquetas de cierre correspondientes, como son </div> </body></html>. CSS Para el diseño y estilo de la web, he seguido en el CSS la estructura del documento HTML. Estilo , diseño y etiquetado estructural. Añadiendo márgenes para alinear las etiquetas, tipo de letra, color, etc. Para ello nada mejor que seguir las mismas pautas de la estructura seguida en el HTML, y adjuntando los datos y pautas según lo que se quería conseguir con cada elemento , y, siguiendo y teniendo como norma principal las explicaciones de nuestro material , tanto el de la la web Mediawiki como el material en papel.
