Mejoras realizadas Cuando un visitante se desplaza por la ventana del navegador, los contenidos de la ventana normalmente se desplazan arriba o abajo.

Slides:



Advertisements
Presentaciones similares
Ricardo Ferrís Castell
Advertisements

CONSTRUYENDO UNA PÁGINA WEB CON HTML. Introducción Construir una página web de sólo contenido es relativamente fácil La forma de abordarlo es sistémica.
Laboratorio 5 Hojas de Estilo CSS
Visualización de documentos XML con CSS
Ilustre Municipalidad de Nogales Unidad Técnico Pedagógica Departamento de Lengua Castellana y Comunicación Liceo Juan Rusque Portal Tarea de Lenguaje.
DIRECCIÓN DE COMUNICACIÓN PÚBLICA CORTE SUPREMA DE JUSTICIA DE LA NACIÓN DIRECCIÓN DE COMUNICACIÓN PÚBLICA.
LA DEMANDA Y LA OFERTA. 1.Los mercados y la competencia OFERTA y DEMANDA son las dos palabras más utilizadas por los economistas. Oferta y demanda son.
Conectores gramaticales
Nuevo sistema de alertas Gloria Guirado Departamento de formación de VCG.
Microsoft Office Power Point, es una herramienta que nos proporciona Microsoft, para editar presentaciones graficas, de tal forma que se nos feliciten.
QUE ES LA WEB 2.0 WEB 2.0 Y EDUCACION TIPOS DE HERRAMIENTAS WEB 2.0 HERRAMIENTAS Y EJEMPLOS DE APLICACION DONDE BUSCAR APLICACIONES WEB 2.0 VENTAJAS DE.
¿ BUENAS PRÁCTICAS ? ÉTICAS, ESTÉTICAS O FUNCIONALES.
Instrucciones de Estudios de física a través de Edcanvas.
Servicios De Internet.. Integrantes: Gemma Cedillo Saucedo Delia Alejandra Castillo Almazán Jorge Alberto Arregoytia Garcia Adriana Lara Mata Aleida Villegas.
Una Descripción General de Scitation Scitation es una plataforma de alojamiento en Internet a cargo del American Institute of Physics (AIP) (El Instituto.
Hipertextos e interactividad en la entrega de Contenidos Educativos R e d d e P r o f e s o r e s I n n o v a d o r e s Módulo: Hipertextos e interactividad.
Libro de Clases Electrónico Administrativo OTEC
FIREWORKS David Escudero Mancebo Alfonso Pedriza Rebollo.
UNIVERSIDAD JUÁREZ DEL ESTADO DE DURANGO FACULTAD DE CIENCIAS QUÍMICAS MANUAL DE INSTRUCCIONES PARA ASIGNACIÓN DE HORARIOS DE ALUMNOS EN LAS CARRERAS DE.
CARACTERÍSTICAS DE WINDOWS 7 AERO EN WINDOWS 7. Incluye un diseño de cristal transparente con atractivas animaciones generando un aspecto agradable a.
Instrumentación Industrial
Base de datos y Microsoft Access
Arquitectura y Medio Ambiente Trabajo numero 3 Loteo Foresta L Remodelación Foresta L Hugo Donoso.
EL SISTEMA OPERATIVO Presentación realizada por Virgilio Marco Aparicio Profesor de Apoyo al Área Práctica. IES Tiempos Modernos. ZARAGOZA.
Información General de AGORA. ¿Qué es AGORA? AGORA = Access to Global Online Research in Agriculture (Acceso a la investigación mundial en línea en el.
Visual basic Curso de Habilitación Laboral IV. ¿Qué es Visual Basic Visual Basic es uno de los tantos lenguajes de programación que podemos encontrar.
Avances de Microsoft PowerPoint y Office
Descripción general de Sharpdesk 3.1
MANUAL BÁSICO DE MICROSOFT WORD.
Ud.8 Aplicaciones ofimáticas Índice del libro Índice del libro.
MAPA DE NAVEGACIÓN. Los mapas de navegación proporcionan una representación esquemática, indicando los principales conceptos incluidos en el espacio de.
OBJETIVO: El alumno se familiariza con los términos empleados en el entorno del programa Corel Draw.
RECURSOS ESTÁTICOS. Recursos estáticos Activamos edición para poder añadir recursos Nombre corto Entramos en el curso.
CENTRO DE BACHILLERATO TECNOLOGICO INDUSTRIAL Y DE SERVIVCIOS No 3
Guía SIPEC Secretaría de Educación en el Estado Subsecretaría de Educación Básica Programa Escuelas de Calidad Michoacán 2013 :.
Una visión de las Bibliotecas Digitales en Argentina" Elsa Elena Elizalde Coord. SISBI - UBA y Aurora Scavini Coord. BVSARG-ADOLEC Coord. BVSARG-ADOLEC.
¿Qué es la web 2.0 Web 2.0 y educación Tipos de herramientas web 2.0 Herramientas y ejemplos de aplicación ¿Dónde buscar aplicaciones Web 2.0?
Animaciones en la Web Animación GIF Animación Shockwave Flash
La mayor parte de la edición de imágenes de vídeo consiste en seleccionar, ordenar y recortar videoclips, o en conectar los distintos clips con efectos.
Tema 5 – Relaciones Laborales
PROCEDIMIENTO PARA CARGAR EL TRABAJO FINAL Cursos: Ética, persona y sociedad Ética, profesión y ciudadanía.
UTE PROYECTO DE VINCULACION CON LA COMUNIDAD «LAS PEÑAS»
Copyright © 2008 SERVIR Project. All rights reserved. SERVIR Data Portal Workshop SERVIR Map Maker Studio - MMS -
HOJAS DE ESTILO EN CASCADA CSS
Back to School Night Welcome Parents to our classroom! Im Ms. Juarez. Bienvenidos a nuestro salon! Yo soy Ms. Juarez.
CSS WALC 2004 – Track 2 Pep Turró Cuzco, octubre de 2004.
 2008 Pearson Education, Inc. All rights reserved Cascading Style Sheets™ (CSS)
DOM. DOM = Document Object Model Permite acceder y manipular las páginas XHTML DOM transforma los documentos XHTML en un conjunto de elementos llamados.
DESARROLLO DE APLICACIONES CON TECNOLOGÍAS WEB
Curso: XML, de los datos a la presentación Julio de 2005 CAPTIVA · Hojas de estilo CSS.
Hojas de Estilo en Cascada MC Beatriz Beltrán Martínez.
Sandra Constanza Rubiano
Curso de Diseño Web Profesor: Mario Figge. El Modelo de Cajas (Box Model)
Anatomía de la declaración La declaración consta de dos partes:  Propiedad  Valor Selector Propiedad Valor A { color: #000013;}  La propiedad es una.
Disposición de la división de las páginas: La zona de contenido principal tendrá 25 píxeles de espacio en blanco en la parte izquierda superior. /*División.
CSS div.
Ingeniero de Sistemas – Universidad de Los Andes
Image Sprites. Uso de Image Sprites Es una colección de imágenes colocadas en una simple imagen: Una página web con muchas imágenes puede tardar mucho.
DESARROLLO DE APLICACIONES CON TECNOLOGÍAS WEB Elaboración de documentos web mediante lenguajes de marcas Posicionamiento con CSS.
Instituto Tecnológico Superior “Daniel Álvarez Burneo” Propiedades de Tipo, Fondo, Bloque, Borde de CSS Integrantes: Anita Carrión Mercedes Rodríguez María.
CSS CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS.
El color El tamaño del texto Tipo de letra Listas.
PLATAFORMA DE VÍDEO BAJO DEMANDA
BY: Alan Amox Mauricio Ozuna
CSS fondos saregune CC 2009.
COLORES, FONDOS Y FUENTES CON CSS
CSS.
CSS: “CASCADING STYLE SHEETS”
HTML.
CSS CSS Cascading Style Sheets... Hojas de Estilos en Cascada.
Transcripción de la presentación:

Mejoras realizadas Cuando un visitante se desplaza por la ventana del navegador, los contenidos de la ventana normalmente se desplazan arriba o abajo. CSS permite fijar elementos en la ventana del navegador de modo que no se muevan cuando el usuario se desplaza arriba o abajo por la ventana. Yo he utilizado esto para fijar el fondo, que es una imagen, y lo que yo he llamado el contenido de la página, es decir todo lo que es Introducción, Palabras clave, Desarrollo y correo En esta versión: BODY{ background:url(g1.jpg); backgroun-color:#FFF; background-attachment: fixed; background-repeat:no-repeat; } #contenido{ background-image: url(g1.jpg); background-position: 0 0; background-repeat: no-repeat; background-attachment: fixed; text-align:justify; Justificar el texto } Fijar un elemento en la ventana del navegador

Para resaltar un poco más el título de lo que lo hacía en las anteriores decidí utilizar borde; #contenido h1{background: url(g1.jpg) 0 0 no-repeat fixed; border-top: 10px Outset grey; border-left:10px Outset #005AA7; border-right:10px Outset grey; border-bottom:10px Outset #005AA7; padding:0.5em 1em 0.25em; text-align:center; } También utilicé bordes en los enlaces a las distintas partes del documento y en los enlaces a las distintas versiones: #Versiones { position: absolute; top:700px; display:block; border:5px Groove #005AA7; width:190px; height:150px; text-align:center; } Utilización de bordes #Lin A{ text-decoration:none; display:block; background: #005AA7; text-align:center; padding:5px 10px; margin:0 1 1px; border:7px double #000f9C; border-style:Outset; color:grey; }

La propiedad padding describe cuanto espacio se deja entre un elemento y su borde Hay cinco propiedades padding-top, padding-right, padding-bottom y padding- left, pudiéndose poner una a una o una única longitud como aparece en la hoja de estilo que se refiere al espacio a izquierda y derecha. Por otro lado la propiedad margin establece los márgenes de cualquier elemento con respecto a la ventana La longitud se puede establecer mediante las unidades antes enumeradas o en porcentaje #contenido {margin: 1em 0em 3.5em 13em; padding: 10px; border: solid #000;} Las propiedades de márgenes y padding Parpadeo de los enlaces Utilizando la propiedad blink: #contenido #Capitulos A{ margin: 0 1em 1em;padding: o; background:#005AA7; text-align:center; text-decoration:blink; color:#CCC; }

Cuando el cursor se encuentr sibre un vínculo, incluso sin hacer clic, se activa el estado hover. Una buena forma de indicar que se trata de un vínculo, de que es algo dinámico, es modificar el estado de ese enlace cambiando por ejemplo el color de la letra o del borde como en el ejemplo: #Lin A{ text-decoration:none; display:block; background: #005AA7; text-align:center; padding:5px 10px; margin:0 1 1px; border:7px double #000f9C; border-style:Outset; color:grey; } El estado hover #Lin a:hover{ color:#005AA7; background:grey; border-style:Inset; }

He utilizado pop-up cogiendo la idea de la página para explicar los enlaces de la bibliografía, realizando una breve descripciónwww.meyerweb.com Hasta que el usuario no se pone sobre el enlace no aparece la descripción A span{ display:none; } Cuando se pone sobre el enlace se despliega una ventanita con la explicación #contenido A:hover span{ margin: 0 1em 1em;padding: o; display:block; width:190px; color:#005AA7; background:grey; font:16px Arial; text-align:center; border:2px solid #005AA7; } Pop-up

Con la intención de que el usuario pueda acceder a las páginas que han servido como bibliografía para el trabajo directamente por medio de un enlace hice una modificación en la DTD para permitir introducio un item o un enlace dependiendo de si se tratara de un libro o de una página respectivamente Otra modificación propuesta es que en la página pueda aparecer un logotipo aprovechando los realizados en las prácticas ya sea con el Gimp o con SVG: <!ATTLIST Logotipo fichero CDATA #REQUIRED ancho CDATA #REQUIRED alto CDATA #REQUIRED > Propuestas de modificación de la DTD