ACTIVIDAD #19: INTERFAZ DREAMWEAVER

ACTIVIDAD #18 TERMINOLOGÍA BÁSICA DEL SOFTWARE PARA DISEÑAR PÁGINAS WEB

1.-Dreamweaver CS5: Es un software fácil de usar que permite crear páginas web profesionales. Las funciones de edición visual de Dreamweaver CS5 permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML.

FUENTE:¿QUÉ ES DREAMWEAVER?

2.-CSS: Es un lenguaje utilizado en la presentación de documentos HTML. Un documento HTML viene siendo coloquialmente “una página web”. Entonces podemos decir que el lenguaje CSS sirve para organizar la presentación y aspecto de una página web. Este lenguaje es principalmente utilizado por parte de los navegadores web de internet y por los programadores web informáticos para elegir multitud de opciones de presentación como colores, tipos y tamaños de letra.

FUENTE:¿QUÉ ES CSS?


3.-Plantilla en  Dreamweaver: Es un tipo especial de documento que sirve para crear un diseño de página “fijo”; puede crear documentos basados en la plantilla que heredan su diseño de página.

FUENTE:PLANTILLA EN DREAMWEAVER

4.-Contenedor en Dreamweaver: Es el contenido de la pagina web por ejemplo el texto, las imágenes etc. 

FUENTE:CONTENEDOR EN DREAMWEAVER

5.-Comportamientos en Dreamweaver: Permiten añadir lógica de aplicación a un sitio Web sin necesidad de escribir el código manualmente. Los comportamientos del servidor suministrados con Dreamweaver admiten tipos de documento ColdFusion, ASP y PHP. Los comportamientos del servidor se escriben y comprueban para que sean rápidos, seguros y robustos. Los comportamientos del servidor incorporados ofrecen compatibilidad con páginas Web multiplataforma para todos los navegadores.

FUENTE:COMPORTAMIENTOS EN DREAMWEAVER

6.-Sitio Local: Es una ubicación de almacenamiento local o remota de los documentos que pertenecen a un sitio Web. Un sitio de Dreamweaver permite organizar y administrar todos los documentos Web, cargar el sitio en un servidor Web, controlar y mantener vínculos y administrar y compartir archivos. Para aprovechar al máximo las funciones de Dreamweaver.

FUENTE:SITIO LOCAL

7.-Sitio Dinámico: Son aquellos que permiten crear aplicaciones dentro de la propia Web, otorgando  una mayor interactividad con el navegante. 

FUENTE:SITIO DINÁMICO

8.-Sitio Interactivo: Un sitio interactivo es básicamente un sitio dinámico al que se le han añadido prestaciones interactivas.

FUENTE:SITIO INTERACTIVO

9.-Región Editable: Son las partes de la página que se pueden cambiar en los archivos basados en esa plantilla.

FUENTE:REGIÓN EDITABLE

10.-Maquetación: Es la distribución de los elementos en nuestra página. Piensa en una página web cualquiera. Seguro que distingues algunos elementos claramente diferenciados, como un encabezado, columnas, y un pie de página

FUENTE: MAQUETACIÓN

11.-Etiqueta Div: Es una etiqueta que define las divisiones lógicas existentes en el contenido de una página Web. Puede utilizar etiquetas Div para centrar bloques de contenido, crear efectos de columna y crear diferentes áreas de color, entre otras posibilidades.

FUENTE:ETIQUETA DIV

12.-Tabla: Las tablas son una herramienta potente para presentar datos e imágenes en páginas HTML. Las tablas proporcionan a los diseñadores Web formas de añadir estructura vertical y horizontal a una página. Utilice las tablas para presentar datos tabulares, diseñar columnas o disponer texto o gráficos en una página Web.

FUENTE:TABLAS

13.-Formulario: Permiten interactuar con los visitantes del sitio o recopilar información de ellos. 

FUENTE:FORMULARIOS

14.-Formulario de contacto: Un formulario de contacto en nuestro sitio web es de suma importancia si queremos darle a los usuarios la posibilidad de que nos envíen consultas, comentarios, pedidos online o que simplemente nos dejen su Gmail para suscribirse a un Newsletter y recibir nuestras ofertas y novedades.

FUENTE:FORMULARIO DE CONTACTO

INDEX DISEÑO Y ESTRUCTURA DE MI PÁGINA WEB

ELEMENTOS BÁSICOS DE HTML

ELEMENTOS BÁSICOS DE HTML

1.-Bloc de notas:Es una aplicación básica, sencilla y rápida. Generalmente graba los archivos en formato ".txt", un formato que no tiene etiquetas ni estilos. 

FUENTE: DEFINICIÓN DE BLOC DE NOTAS

2.-Buscador: Es un sistema o aplicación informática que permite la búsqueda de todo tipo 

de términos y palabras clave a partir del desarrollo de índices de archivos almacenados en

servidores web.


FUENTE: DEFINICIÓN DE BUSCADOR

3.-Compatible:Se aplica al ordenador o al sistema informático que puede trabajar con dispositivos, aparatos o programas de otro diferente.

FUENTE:DEFINICIÓN DE COMPATIBLE

4.-Estructura de página web: Son documentos que pueden contener textos, imágenes, vídeos y, en resumen, contenidos digitales y/o aplicaciones que pueden ser visualizados por un usuario web desde un dispositivo remoto a través de un navegador web. 

FUENTE: DEFINICIÓN DE LA ESTRUCTURA DE LA PÁGINA WEB

5.-Etiqueta: Es una cadena de caracteres compuesta por varias palabras seguidas y 

antecedidas por el carácter # que los usuarios emplean para identificar el tema del que más

se está hablando.

FUENTE:DEFINICIÓN DE ETIQUETA

6.-Hipertexto: Es un sistema para escribir y mostrar texto que enlaza a información adicional sobre ese texto.

FUENTE:DEFINICIÓN DE HIPERTEXTO

7.-Lenguaje HTML: Es un lenguaje que se utiliza fundamentalmente en el desarrollo de páginas web.


FUENTE: DEFINICIÓN DE LENGUAJE HTML

8.-Marcas (tag): Es una etiqueta o marca que son básicas en lo que se refiere a la programación HTML de las páginas de Internet. cada uno de estos coman dos es interpretado por el navegador para que la información se despliegue de manera adecuada en la pantalla.


FUENTE:DEFINICIÓN DE MARCAS (TAG)

9.-Navegador: Son programas de ordenador diseñados para facilitar la visualización de páginas Web en Internet. (Ver Browser).

FUENTE:DEFINICIÓN DE NAVEGADOR

10.-Página web: Es un documento adaptado para la web y que casi siempre forma parte

de un sitio web. Su rasgo distintivo son los hiperenlaces que en la misma se hacen de 

otras páginas, ya que es este el fundamento principal de la web.


FUENTE:DEFINICIÓN DE PÁGINA WEB

11.-Sitio web: Es un espacio virtual en Internet. Se trata de un conjunto de páginas web que son accesibles desde un mismo dominio o subdominio de la World Wide Web (WWW).


FUENTE:DEFINICIÓN DE SITIO WEB

12.-Plataforma: Es el hardware sobre el cual puede ejecutarse o desarrollarse un software.


FUENTE:DEFINICIÓN DE PLATAFORMA

13.-Servidor web: Es una persona que sirve como criado o a la forma en la cual, por cortesía, una persona hace referencia a sí misma cuando se dirige a otra.


FUENTE:DEFINICIÓN DE SERVIDOR WEB

14.-Vínculos: Es un elemento de un documento electrónico que está relacionado con otro recurso y que, al formar parte de una red de documentos, posibilita la navegación.

FUENTE:DEFINICIÓN DE VÍNCULOS

INTRODUCCIÓN AL HTML

INTRODUCCIÓN AL HTML

1.-¿Qué entiendes por una página HTML? Es el lenguaje que se emplea para el desarrollo de páginas de internet. 

FUENTE: HTML

2.-Define cada una de las letras que conforman HTML: 

HTML es la abreviatura de "HyperText Mark-up Language", es decir, HyperText Markup Language (Lenguaje de marcas de hipertexto).

1.- Hiper es lo contrario de lineal. En los buenos viejos tiempos -cuando un ratón era un animalillo que perseguía un gato- los programas de ordenador se ejecutaban de forma lineal: cuando el programa había ejecutado una acción seguía hasta la siguiente línea, y después de ésta a la siguiente, y a la siguiente, ... HTML, sin embargo, es diferente: se puede ir donde uno quiera cuando uno quiera. Por ejemplo, no es necesario visitar MSN.com antes de visitar HTML.net.

2.- Texto se explica por sí solo.

3.- Marcado es lo que haces con el texto. Se marca el texto del mismo modo que en un programa de edición de textos con encabezados, viñetas, negrita, etc.

4.-Lenguaje es lo que es HTML. Este lenguaje hace uso de muchos términos en inglés.

FUENTE: H-T-M-L

3.-¿Quién invento HTML? Tim Berners-Lee 

FUENTE: ¿Quién invento HTML?

4.-¿Cuál era el objetivo de crear HTML? El HTML se creó en un principio con objetivos divulgativos de información con texto y algunas imágenes. No se pensó que llegara a ser utilizado para crear área de ocio y consulta con carácter multimedia (lo que es actualmente la web), de modo que, el HTML se creó sin dar respuesta a todos los posibles usos que se le iba a dar y a todos los colectivos de gente que lo utilizarían en un futuro. 

FUENTE: ¿Cuál era el objetivo de crear HTML?

5.-Menciona cuatro características del lenguaje HTML: 

1.-El Web tenía que ser distribuido: La información repartida en páginas no muy grandes enlazadas entre sí.

2.-El Web tenía que ser hipertexto y debía ser fácil navegar por él.

3.-Tenía que ser compatible con todo tipo de ordenadores (PCs, Macintosh, estaciones de trabajo) y con todo tipo de sistemas operativos (Windows, MS-DOS, UNIX, MAC-OS).

4.-Debía ser dinámico: el proceso de cambiar y actualizar la información debía ser ágil y rápido.

FUENTE: CARACTERÍSTICAS DEL LENGUAJE HTML

6.-Menciona 7 reglas básicas que debes seguir para el diseño de una página WEB:

1. Usar imágenes de alta calidad. Elige cuidadosamente las mejores imágenes que va con el mensaje.
2. Sé valiente a la hora de diseñar.  Los sitios web que se destacan entre la multitud son memorables para los clientes y lectores.
3. Diseño con un propósito. Cada elemento de una página web debe ser diseñado con un propósito. Siempre tiene que haber una razón para la creación de cualquier elemento de la página web.
4. Lo simple es mejor. Los diseños simples tienen un mayor impacto en lugar de los complicados. Una disposición de uno o dos-columnas es mucho mejor que un diseño de múltiples columnas.
5. Elija las fuentes sabiamente. La tipografía es una parte muy importante de un diseño.
6. Elija gráficos sobre el texto. Las imágenes entregan el mensaje de manera más directa y son más fáciles de entender que un bloque de texto. Recuerde siempre que los lectores tienen prisa y quieren encontrar la información lo más rápidamente posible.
7. Mejorar las partes importantes de una página. El lector debe saber de lo que trata su sitio web en los primeros 10 segundos de la primera visita, por lo que es muy importante destacar las características importantes.
8. Organización. Un sitio web organizado y optimizado es muy importante, no sólo porque el lector puede encontrar la información que necesita rápidamente, sino también porque de esta manera su sitio web atraerá más tráfico. Organizar el contenido, añadir etiquetas y categorías con el fin de hacerlo más fácil de usar es un punto importante a considerar.
9. Compatibilidad. La conectividad a través de todos los dispositivos actuales debe ser asegurada, por lo que es necesario que la página web esté codificada para que pueda ser visto en todos los dispositivos móviles.
10. Resumir. Los lectores son más propensos a leer frases cortas, párrafos y artículos escritos de una manera corta y directa.

FUENTE: HTML

ACTIVIDAD INTEGRADORA PARTE 1

ACTIVIDAD INTEGRADORA PARTE 1

1.- ¿Cuáles son tus posibles temas a tratar en tu página web?

 -Negocio

 -Productos orgánicos

 -Cocina

2.-Clasifica tus temas:

 -Negocio

 -Cocina

     -Productos orgánicos

     

3.-Escoge el tema pata tu página WEB:

Cocina

4.-Define la información que va a contener tu página:

Esta página web va a contener imágenes de aquellos platillos deliciosos que nunca habían visto e  increíbles recetas de cocina que encontraran una variedad de postres y esas riquísimas  pastas. Y mi  correo electrónico para que así puedan enviar me recetas.   

5.- ¿Cuáles fuente de información tienes para tu página? Internet 

6.-Escalabilidad: Cada semana

3.3: CONCEPTOS BÁSICOS DEL SOFTWARE DE ANIMACIÓN

1.1: VENTANA DE FLASH

2.2: BARRA DE HERRAMIENTAS

3.3: CONCEPTOS BÁSICOS DEL SOFTWARE DE ANIMACIÓN 

 

1.-¿Que es animacion? Se entiende por animación como cualquier cambio visual que se produce a lo largo del tiempo. Se puede modificar varios aspectos de un elemento gráfico para animarlo: posicion, tamaño, rotación, color, transparencia.

FUENTE: ANIMACION

2.-Menciona 5 Softwares comerciales para realizar animaciones:

• 1.- Blender: Es un programamultiplataforma para el modelado, animación y creación de gráficos tridimensionales. Está desarrollado bajo licencia GPL.

• 2.- 3D Canvas: Permite la creación de objetos simples y complejos, los cuales se pueden modelar, pintar, texturizar y animar. 

• 3.- Google SketchUp: Este es un útil programa gratuito de Google que permite la modelación de objetos y escenarios 3D. Cuenta con completas herramientas que permiten modelar, dar efectos, texturizar.

• 4.-Fotfware K 3D: Permite crear objetos y animaciones en 3D. También es multiplataforma y se lo puede mejorar con una serie de plugins.

 

•  5.-Wings 3D: Es un programa multiplataforma (Windows, Linux, Mac) para modelar y texturizar objetos 3D.

 


 FUENTE:SOFTWARES DE ANIMACION

3.-Menciona 5 Softwares libres para realizar animaciones:

• 1.- Anime Studio Pro 5: Es un software 2D que permite crear animaciones de manga y anime, trae consigo algunas cargas previas que son de mucha ayuda.

•  2.- Adobe Fireworks: Es posible crear gráficos con expresiones y óptimos para la web, así como prototipos que pueden ser editados con facilidad tanto de manera vectorial como en mapa de bits. Es posible crear animaciones con anuncios, logotipos y viñetas en movimiento.

• 3.- Autodesk Maya 3D: Se trata de un software de animación que proporciona herramientas de modelado, simulación, efectos visuales, rastreo de movimientos, así como la representación de movimientos y una plataforma que puede extenderse.

• 4.- Autodesk 3ds Max: Este es considerado uno de los programas de animación 3D más utilizados, pues mantiene una sólida plataforma de edición y plugin. 3ds Max es utilizado mayormente por los desarrolladores de videojuegos, pero también para la creación de proyectos de animación como películas, en cuestiones de ingeniería, arquitectura, anuncios de televisión, efectos especiales, entre otros.

• 5.- Autodesk Softimage X51: Se trata de un software para modelado, animación, efectos visuales y composición en 3D. Proporciona manejo de datos y equipamiento facial Softimage Face Robot además de la creación de entornos creativos interactivos.

FUENTE:FOTFWARES COMERCIALES

4.-¿Que es un efecto especial? Los efectos especiales son aquellos elementos que se utilizan en el cine o en la televisión para generar personajes, ambientes, situaciones o realidades que no pueden suceder en la vida real y que deben ser agregados a la filmación tradicional. 

FUENTE:EFECTOS ESPECIALES

5.-¿Que es un grafico de computacion? Originariamente se llamaba así a los histogramas, pero, por extensión, empezó a llamarse así a todas las representaciones visuales que la computadora podía generar que no fueran texto. Con el tiempo, el término se ha generalizado, aplicándose a cualquier tipo de imagen de computador.

FUENTE:¿QUE ES GRAFICO?

6.-¿Que es video games? Son juegos electrónicos que se desenvuelven en un ordenador o en una videoconsola. El juego es creado en forma de programa informático que es grabado en algún medio de almacenamiento como lo pueden ser discos duros, CDs, o cartuchos especiales.

FUENTE:VIDEOJUEGO

7.-¿Que es SynttheSpians?  Un Synthespian por tanto, sería algo así como un “Actor Virtual”.

 FUENTE:SYNTTHESPIANS

 8.-¿Que es un fotograma? Representa el contenido de la película en un instante de tiempo. Por tanto, una animación no es más que una sucesión de fotogramas. Todo esto se puede controlar desde la Línea de Tiempo, pero no todos los fotogramas tienen el mismo comportamiento ni se tratan igual.

FUENTE:FOTOGRAMAS

  9.-¿Que es un grafico 3D? Son todos aquellos  los objetos que se pueden dibujar en un espacio R3: puntos, segmentos, curvas, supericies y varios cuerpos formados por caras poligonales, así como textos y macros.  Los gráficos 3D de una escena pueden editarse usando el panel de configuración de gráficos 3D, al que se accede seleccionando "GráficosR3" en la ventana de edición.

 FUENTE:GRAFICO 3D

 10.-¿Que es Flash?  Es una tecnología para crear animaciones gráficas vectoriales independientes del navegador y que necesitan poco ancho de banda para mostrarse en los sitios web. 

  FUENTE:FLASH

11.-Explica los tipos de movimiento en Flash:

• Interpolacion: Se trata de utilizar interpolaciones para crear una animación. Esto siginifica que definiremos dos o más fotogramas clave y el resto de fotogramas serán fotogramas interpolados.

  FUENTE:INTERPOLACION

• Animacion 3D: El diseño 3D por computadora se refiere a dibujar objetos con tres dimensiones; ancho, largo y alto. Estos objetos se llaman modelos 3D y pueden ser diseñados en cualquier forma similar a modelar con plastilina.

  FUENTE:¿QUE ES ANIMACION 3D?

• Animacion de mascaras: Un elemento de máscara puede ser una forma rellena, un bloque de texto, una instancia de un símbolo de gráfico o un clip de película. Para una forma rellena utilizada como máscara, utilice interpolación de formas; para un objeto de tipo, una instancia de gráfico o un clip de película, utilice la interpolación de movimiento. Si utiliza una instancia de clip de película como máscara, anime la máscara a lo largo de un trazado de movimiento. Para crear una capa de máscara, coloque un elemento de máscara en la capa que va a utilizar como máscara.

  FUENTE:ANIMACION DE MASCARAS

• Animacion Morphing: Clásicamente se conoce con el nombre “Morphing” a una técnica de manipulación de imágenes digitales que permite obtener una animación -transición controlada- entre dos imágenes diferentes. La transformación necesaria para su cálculo se realiza en el denominado “espacio de imagen”.

 FUENTE:¿ANIMACION DE MORPHING?