1. Herramientas de Ensamblado y
Visualización previa de contenidos
Claudia Consuelo Acosta
Raúl Quiñones
Luz Marina Rodríguez
Diana Mabel Rojas
2. Visualización
Vista previa en vivo
Vista previa informática
Avance publicidad en
vista previa (tráiler)
Mostrar un
contenido
previamente
3. Vista previa
informática
Función de cálculo para
mostrar un documento,
página, antes de que sea
producida en su forma final.
En el caso de material
impreso que se conoce como
"vista previa de impresión".
4. Vista previa informática
La vista o Diseño da una idea de cuál será el aspecto
de la página en la Web.
La Vista en vivo ofrece una visión más precisa, ya que
permite trabajar en la vista Código de manera que
puedan comprobarse los cambios realizados en el
diseño. La función Vista previa en el navegador le
permite ver el aspecto de las páginas en navegadores
concretos.
5. Elementos para controlar la visualización
Display, visibility, overflow y z-index.
Objetivo: ocultar y/o hacer invisibles las cajas de los
elementos, por lo que son imprescindibles para realizar efectos
avanzados y animaciones.
6. Elementos para controlar la visualización
Overflow y z-index.
Objetivo: CSS define la propiedad overflow para controlar la
forma en la que se visualizan los contenidos que sobresalen de
sus elementos..
7. Elementos para controlar la visualización
z-index.
Posicionar una caja de forma horizontal y vertical, CSS
permite controlar la posición tridimensional de las cajas
posicionadas. De esta forma, es posible indicar las cajas que
se muestran delante o detrás de otras cajas cuando se
producen solapamientos.
La posición tridimensional de un elemento se controla
mediante la propiedad z-index. Utilizando esta propiedad es
posible crear páginas complejas con varios niveles o capas.
8. Elementos para controlar la visualización
Objetivo: CSS define la propiedad overflow para controlar la
forma en la que se visualizan los contenidos que sobresalen de
sus elementos..
9. XML(Extensible MarkupLanguage)
Es un formato de texto simple, simplificado y adaptado a
internet, derivado de SMGL (Estandar Generalised Mark-up
Language), que se utiliza para el intercambio de datos en la Web.
Muchos sistemas informáticos contienen datos en formatos que
son incompatibles; el intercambio de estos datos implica bastante
tiempo para los desarrolladores web. Al convertirse, varias
cantidades de datos, se pierden. XML almacena los datos en un
formato de texto plano, lol que permite almacenar, transportar y
compartir datos. Tambien permite actualizar o ampliar a nuevos
sistemas operativos, nuevos navegadores y nuevas aplicaciones,
sin que se pierdan los datos.
10. Componentes de un documento XML
Elementos: datos encerrados entre etiquetas.
Instrucciones: ordenes para ser utilizadas en el procesamiento
por la aplicación.
Instrucciones en XML: comienzan por <? Y terminan por ?>
Comentarios: información que no pertenece al documento.
Comienza por <! Y terminan por >
Declaraciones de tipo: especifican la información del
documento.
Secciones CDATA: caracteres que él ordenador no debe
interpretar.
12. Algunoslenguajes basados en XML:
XHTML (Hyper Text Markup Language, 2000)
TEI P4 (Text Encoding Initiative, 2002)
MARC XML (2001)
MARC XML SCHEMA (2002)
EAD versión 2002 (Encoded Archival Description)
13. HTLM HyperTextMarkup Language
Es el estándar
que se ha
impuesto en la
visualización de
páginas web y es
el que todos los
navegadores
actuales han
adoptado.
14. TIPOS DE HOJADE ESTILO
1.Las hojas de estilo en cascada:
(Cascading Style Sheets, CSS) son un lenguaje usado para
definir la presentación de un documento escrito en HTML.
El uso de CSS es la manera más adecuada de diseñar un sitio
Web, ya que nos permite mucho más flexibilidad a la hora de
realizar cambios en el sitio ;CSS permiten que la información
de estilo de varias fuentes puedan ser mezclados juntos..
Para definir una cascada, los autores especifican una
secuencia de ENLAZAR y / o ESTILO elementos. La
información de estilo en cascada está en el orden de los
elementos aparecen en el CABEZADO.
<Link rel = "stylesheet" href = "corporate.css" type =
"text / css"> <Link rel = "stylesheet" href =
"techreport.css" type = "text / css"> <Style type =
"text / css"> p.special {color: rgb (230, 100, 180)}
15. 2.Hojas de estilo interna
Deben usarse cuando una sola página tiene un estilo único.
Las definimos con la etiqueta <style> en la cabecera del
documento entre las etiquetas <head> y </head>
Ejemplo
Código
<head>
<style type="text/css">
body {background-color:blue}
p {color:white}
</style>
</head>
<body>
<p>Fuentes blancas sobre fondo azul</p>
</body>
Resultado
Fuentes blancas sobre fondo azul
16. 3.Hojas de estilo externas
Esta es la forma ideal para cuando queremos
definir un sitio entero con una misma
estructura y estilo. Para ello definimos todos
los estilos en un documento en común que se
utilizará para todas las páginas del sitio Web.
Con realizar los cambios en ese documento,
podemos cambiar el aspecto de todo el sitio
Web.
Cada página del sitio debe vincularse con la
hoja de estilos usando la etiqueta <link>
ubicada en la cabecera del documento.
Ejemplo de un enlace a una hoja de estilo
<head>
<link rel="stylesheet" type="text/css"
href="/estilos.css">
17. CELESTIA
Software gratuito de libre distribución, permite explorar el
universo en tres dimensiones, simular viajes a través del
sistema solar. Viajar a mas de 100000 estrellas de la vía
láctea o incluso fuera de nuestra galaxia.
Además se pueden descargar o diseñar gran cantidad de
nuevos objetos reales o imaginarios y agregarlos
fácilmente.
18.
19. ADOBE SUITE
Es una suite de distintas aplicaciones y
herramientas altamente profesionales creada y
producida por adobe systems.
Software propietario y su ultima versión C26 fue
creada en el año 2003.
Es de código cerrado.
20.
21. ADOBE DREAM WEAVER
Es una aplicación en programa de estudio, basada
en adobe flash, destinada a la construcción, diseño
y edición de sitios, videos y aplicaciones web.
Es uno de los programas mas utilizados en el sector
del diseño y la programación web.
Es de código cerrado y se vende como parte de la
suite de adobe.
La gran ventaja de este editor sobre otros es su
gran poder de ampliación y personalización.
