El Blog de los 3ros del Jesús María

Creación del sitio y conexión al servidor en Dreamweaver

2011-11-15T12:41:00.000-02:00

Loa hacemos por medio de FTP, (File Transfer Protocol) esto quiere decir que estamos usando una sistema con reglas definidas para la transferencia de archivos (denominada protocolo). Este está basado en la arquitectura cliente-servidor. Desde un equipo cliente se puede conectar a un servidor para descargar archivos desde él o para enviarle archivos, independientemente del sistema operativo utilizado en cada equipo.
Esta conexión la haremos desde Dreamweaver, para lo cual seguiremos estos pasos:
Conectar con FTP mediante Dreamweaver

Vamos a Sitio -->Administrar sitios -->Nuevo -->Sitio

A - Nombre del sitio: Proyecto terceros Jesus Maria
B - Dirección http (URL): http://tercerosjm.freetzi.com/
C – No, no deseo utilizar una tecnología de servidor
D – Elegimos la carpeta donde tenemos el proyecto
E - ¿Cómo conecta con un servidor remoto?. Elegimos FTP

Host: tercerosjm.freetzi.com
Carpeta del servidor: /3??(ejemplo: /31a)
Conexión FTP: tercerosjm.freetzi.com
Contraseña: **********

Luego al finalizar nos conectamos al servidor haciendo clic en el icono que aparece como un enchufe.
Luego con las flechas de subir y bajar administramos los archivos, es decir enviamos o descargamos los archivos de nuestro proyecto.

Encuestas Proyecto Web 2011

2011-10-20T09:31:00.003-02:00

Como saben en 3er año aprendemos a diseñar páginas web y en el proyecto final la idea es aplicar los conocimientos, diseñando un sitio web a través de un proyecto coordinado con Matemática sobre el tema Estadística.
Para ello debemos recoger información sobre la opinión de los estudiantes del colegio en relación a diferentes temas y procesar la información con gráficos y conclusiones al respecto.
Es por eso que los invitamos a responder las siguientes encuestas
Verán a continuación los temas de las mismas.Para acceder a ellas hagan clic en el enlace respectivo.
Es muy importante para nosotros conocer que opinas sobre las diferentes temáticas
En ese sentido solicitamos en lo posible responder por lo menos a 2 de ellas.

Luego conocerán los resultados a través de los sitios web de cada equipo.
Aquí publicaremos el link con todos los proyectos

Muchas gracias

Material de apoyo Nro13-Generación de formularios con Google Docs e inserción en Dreamweaver

2011-09-29T14:10:00.001-03:00

Para crear un formulario en Google Docs ingresamos primero a la cuenta de correo de Google creada para tal fin. En este caso usaremos una cuenta común llamada formulario.proyecto@gmail.com y su correspondiente contraseña.

Luego vamos en la parte superior a la opción docs

Luego estando en Google Docs vamos a Crear nuevo, luego Formularios

Luego vamos creando las opciones del formulario definiendo el título y el tipo de pregunta:

Texto: para que la persona llene libremente con la información solicitada.
Texto de párrafo: Dispone el usuario de mas espacio que el anterior.
Tipo test: El usuario debe elegir entre varias opciones.
Casillas de verificación: El usuario puede elegir mas de una opción entre varias.
Elegir de una lista: El usuario elige una opción de una lista desplegable.
Escala: Aquí puede elegir entre un serie de valores que se definen previamente
Cuadrícula: Es similar al anterior.

Pueden ver con mas claridad como hacer un formulario en el siguiente video

Luego veras de construido como te queda. A continuación un ejemplo.

Posteriormente para insertarlo en nuestra página web vamos a Mas acciones luego Insertar

Luego copiamos el código proporcionado en vista código de nuestra página web.

Aplicaciones y programas

2011-09-08T09:42:00.005-03:00

Aquí les dejaré links de programas recomendables

Éxitos

Material de apoyo Nro 12-Formularios

2011-09-06T16:08:00.012-03:00

Los formularios se utilizan para recoger datos de los usuarios, nos pueden servir para realizar un pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los usuarios, recibir preguntas, etc.

Una vez el usuario rellena los datos y pulsa el botón para enviar el formulario se arrancará un programa que recibirá los datos y hará el tratamiento correspondiente.

Elementos de formularios

Los elementos de formulario pueden insertarse en una página a través del menú Insertar, opción Formulario.

A través de esta opción se puede acceder a la lista de todos los objetos de formulario que pueden ser insertados en la página.

Vamos a ver un

o por uno algunos de los distintos elementos que pueden formar parte de un formulario, así como algunas de sus propiedades.

a) Campo de texto y Área de texto

Permiten introducir texto. El Camp

o de texto solo permite al usuario escribir una línea, mientras que el Área de texto permite escribir varias.

Se puede pasar de Camp

o de texto

a Área de texto a través del inspector de propiedades, marcando la opción Una línea o Multi línea respectivamente.

b) Botón

Es el botón tradicional de Windows. El botón puede tener asignadas tres opciones: Enviar formulario, Restablecer formulario (borrar todos los campos

del formulario), o Ninguna (para poder asignarle un comportamiento diferente de los dos anteriores).

c) Casilla de verificación

Es un cuadrito que se puede activar o desactivar.

Puede asignársele el Estado inicial como Activado o como Desactivado.

d) Botón de opción

Es un pequeño botón redondo que puede activarse o desactivarse. Si hay varios del mismo formulario, sólo puede haber uno activado. Cuando se activa uno, automáticamente se desactivan los demás.

e) Lista/Menú

Una lista o menú es un elemento de formulario que lleva asociada una lista de opciones.

Los elementos se añaden a través del botón Valores de lista... del inspector de propiedades.

Cuando se trata de un menú, solo es posible elegir uno de los elementos, pero si se trata de una lista, a través de Selecciones del inspector de propiedades puede permitirse que se seleccionen varios simultáneamente.

Ahora veamos un video que explica con claridad como insertar un formulario.

Adobe Fireworks 8

2011-06-23T08:44:00.002-03:00

Muchachos les dejo el link para que descarguen el programa de diseño gráfico Adobe Fireworks 8

Hagan clic aqui

Espero les sirvan

Saludos

¿Qué es el código binario?

2011-05-03T16:19:00.003-03:00

Veamos el siguiente video que nos muestra poruqe las computadoras manejan la información de forma binaria.

Un saludo a todos

Ejercicios del año

2011-04-07T12:19:00.004-03:00

En el siguiente link podrán descargar todos los ejercicios del año para terminar en sus casas o en práctica

https://sites.google.com/site/tercerosjm/

¿Nos ponemos a trabajar?

Un saludo cordial

Los profes de 3ro de Informática

Proyecto final de Informática

2010-10-21T11:20:00.002-02:00

Muchachos aqui les dejo las regla y el documento del proyecto final

Veanlo para que les vaya bien y hagan un buen sitio web

Conceptos básicos de HTML

2010-04-22T10:43:00.005-03:00

Les dejo a continuación la presentación trabajada en clase sobre conceptos iniciales del lenguaje de programación HTML, con el cual se diseñan básicamente las páginas y sitios Web.

Video "Net of the Warriors"

2010-04-06T10:41:00.004-03:00

Les dejo el enlace para que puedan descargar este videoo verlo "online"

Video "Net Of the Warriors"

Warriors of the Net (castellà) por xribes

Un cordial saludo

Presentacion de Power Point "Como viaja la información en Internet"

2010-04-06T10:09:00.006-03:00

Les dejo a continuación la presentación vista en clase

Un saludo a todos

Planilla control ejercicios alumnos

2010-03-23T08:39:00.004-03:00

Aqui les dejo la planilla de control de ejercicios para descargar

Un saludo a todos

Utilizando un lenguaje informático

2009-03-16T12:12:00.012-03:00

Cada día mas en nuestro vocabulario estamos usando términos referidos al mundo de la informática, chat, usb, pendrive, cd, etc.

Por eso al incio del curso de 3ro nuestra idea es que nos familiarizemos con ellos, sobre todo con aquellos que usándolos no tenemos claro que significan.

Es asi que luego de una actividad que desarrollaremos en clase con ese objetivo, iremos construyendo un glosario con esos términos.

Para ayudarte te dejamos aqui un enlace para descargar un glosario que hemos hecho para que te ayude en el tema.

Esperamos te sirva.

Descargar glosario

¿Cómo viaja la informacion por Internet?

2009-03-13T11:15:00.024-03:00

¿Qué herramienta usamos para ver un sitio Web?

Podríamos decir que Internet está formado por una gran cantidad de computadoras que pueden intercambiar información entre ellos. Es una gran red mundial de computadoras

El servicio más utilizado de Internet es la Web, seguido de cerca por el correo electrónico. Cuando hablamos de entrar en Internet o navegar por Internet nos estamos refiriendo en realidad a la Web. Para poder acceder a la Web necesitas un programa llamado navegador.

La información en la Web está disponible mediante páginas Web, estas páginas están escritas internamente en lenguaje HTML, para transformar ese lenguaje en páginas Web visibles hace falta un programa, a estos programas se les llama navegadores o browsers (en inglés). Son programas complejos que realizan muchas funciones pero desde sus inicios han sido gratuitos y se pueden descargar de la Web. El navegador más utilizado es Internet Explorer (IE).

Un navegador sirve para acceder a Internet, pero también puedes utilizar IE sin conexión a Internet para ver páginas Web que tengas grabadas en el disco duro, en un CD, DVD u otro dispositivo.

¿Qué sucede en el momento que queremos ver un sitio Web?

Cuando damos enter a una dirección en Internet estamos enviando señales eléctricas llamadas bits que admiten solo dos valores 0 (apagada es decir señal eléctrica baja) y 1 encendida (señal eléctrica alta). Así el bit es la unidad más pequeña de información que utiliza una computadora.
Podemos imaginarnos un bit como una bombilla que puede estar en uno de los siguientes dos estados:

Con un bit podemos representar solamente dos valores. Para representar o codificar más información en un dispositivo digital, necesitamos una mayor cantidad de bits. Si usamos dos bits, tendremos cuatro combinaciones posibles:

0 0 - Los dos están "apagados"
0 1 - El primero (de derecha a izquierda) está "encendido" y el segundo "apagado"
1 0 - El primero (de derecha a izquierda) está "apagado" y el segundo "encendido"
1 1 - Los dos están "encendidos".

Con estas cuatro combinaciones podemos representar hasta cuatro valores diferentes, como por ejemplo, los colores rojo, verde, azul y negro.
A través de secuencias de bits, se puede codificar cualquier valor discreto como números, palabras, e imágenes. Cuatro bits pueden representar hasta 24 = 16 valores diferentes; ocho bits forman un octeto, y se pueden representar hasta 28 = 256 valores diferentes. En general, con n número de bits pueden representarse hasta 2n valores diferentes.
Como en cualquier sistema de numeración posicional, el valor de los dígitos depende del lugar en el que se encuentren. En el sistema binario cada vez que un dígito binario (bit) se desplaza una posición hacia la izquierda vale el doble (2 veces más), y cada vez que se mueve hacia la derecha, vale la mitad (2 veces menos).

Ahora bien los bytes (datos) que pueden viajar por distintos soportes (línea de cobre telefónico, cable, fibra óptica o inalámbrico deben seguir un conjunto de reglas para que los datos enviados o recibidos puedan ser comprendidos, es decir deben hablar un mismo idioma. Para ello se han creado una serie de reglas de comunicación, un lenguaje común para el intercambio de datos entre diferente computadoras sin importar el sistema operativo u otras diferencias de hardware o software. A esto se le denomina protocolo TCP/IP.El nombre TCP / IP Proviene de dos protocolos importantes de la familia, el Transmission Control Protocol (TCP) y el Internet Protocol (IP). Una red TCP/IP transfiere datos mediante el ensamblaje de bloques de datos en paquetes, cada paquete comienza con una cabecera que contiene información de control; tal como la dirección del destino, seguido de los datos. Cuando se envía un archivo por la red TCP/IP, su contenido se envía utilizando una serie de paquetes diferentes.
Ya que dentro de un sistema TCP/IP los datos transmitidos se dividen en pequeños paquetes, éstos adquieren una serie de características:

La tarea de IP es llevar los paquetes) de un sitio a otro. Las computadoras que encuentran las vías para llevar los datos de una red a otra (denominadas enrutadores) utilizan IP para trasladar los datos. En resumen IP mueve los paquetes de datos a granel, mientras TCP se encarga del flujo y asegura que los datos estén correctos.
Las líneas de comunicación se pueden compartir entre varios usuarios. Cualquier tipo de paquete puede transmitirse al mismo tiempo, y se ordenará y combinará cuando llegue a su destino. Compare esto con la manera en que se transmite una conversación telefónica. Una vez que establece una conexión, se reservan algunos circuitos para usted, que no puede emplear en otra llamada, aun si deja esperando a su interlocutor por veinte minutos.
Los datos no tienen que enviarse directamente entre dos computadoras. Cada paquete pasa de computadora en computadora hasta llegar a su destino. Éste, claro está, es el secreto de cómo se pueden enviar datos y mensajes entre dos computadoras aunque no estén conectadas directamente entre sí. Lo que realmente sorprende es que sólo se necesitan algunos segundos para enviar un archivo de buen tamaño de una máquina a otra, aunque estén separadas por miles de kilómetros y pese a que los datos tienen que pasar por múltiples computadoras. Una de las razones de la rapidez es que, cuando algo anda mal, sólo es necesario volver a transmitir un paquete, no todo el mensaje.
Los paquetes no necesitan seguir la misma trayectoria. La red puede llevar cada paquete de un lugar a otro y usar la conexión más idónea que esté disponible en ese instante. No todos los paquetes de los mensajes tienen que viajar, necesariamente, por la misma ruta, ni necesariamente tienen que llegar todos al mismo tiempo.
La flexibilidad del sistema lo hace muy confiable. Si un enlace se pierde, el sistema usa otro. Cuando usted envía un mensaje, el TCP divide los datos en paquetes, ordena éstos en secuencia, agrega cierta información para control de errores y después los lanza hacia fuera, y los distribuye. En el otro extremo, el TCP recibe los paquetes, verifica si hay errores y los vuelve a combinar para convertirlos en los datos originales. De haber error en algún punto, el programa TCP destino envía un mensaje solicitando que se vuelvan a enviar determinados paquetes.

Existen diferentes tipos de protocolos TCP/IP:

FTP (File Transfer Protocol). Se utiliza para transferencia de archivos.
SMTP (Simple Mail Transfer Protocol). Es una aplicación para el correo electrónico.
TELNET: Permite la conexión a una aplicación remota desde un proceso o terminal.
RPC (Remote Procedure Call). Permite llamadas a procedimientos situados remotamente.Se utilizan las llamadas a RPC como si fuesen procedimientos locales.
SNMP (Simple Network Management Protocol). Se trata de una aplicación para el control de la red.
NFS (Network File System). Permite la utilización de archivos distribuidos por los programas de la red.
X-WINDOWS: Es un protocolo para el manejo de ventanas e interfaces de usuario.
HTTP (HyperText Transfer Protocol): Es el que se utiliza para acceder a las páginas web.
ARP (Address Resolution Protocol): Sirve para la resolución de direcciones.

Si bien manejan un mismo idioma a los datos divididos en paquetes se les debe indicar que camino o ruta tienen que seguir para llegar a destino, este cometido es el que tiene el router.

Desde este momento los datos pueden salir a Internet deben pasar en general por un modem. Debido a que el cable telefónico trasmite además señales de audio (en la frecuencia correspondiente), el modem lo que hace es transformar la señal eléctrica para que por ella puedan pasar también datos (modular), así quien la recibe obtiene de la misma los datos (demodular).
Existen, además, módems ADSL (Digital Subscriber Line), que utilizan un espectro de frecuencias situado por encima de la banda vocal (300 - 3.400 Hz) en líneas telefónicas y permiten alcanzar velocidades mucho mayores que un módem telefónico convencional. También poseen otras cualidades, como es la posibilidad de establecer una comunicación telefónica por voz al mismo tiempo que se envían y reciben datos.

Ahora bien el acceso a Internet puede ser directamente desde nuestra computadora o puede ser desde una computadora que esta conectada a otras. Así debemos hablar de red de área local y red de área extensa. Las redes locales o redes LAN implica por lo tanto la interconexión de varias computadoras y periféricos. (LAN es la abreviatura inglesa de Local Area Network, 'red de área local'). Su extensión esta limitada físicamente a un edificio o a un entorno de pocos kilómetros. Su aplicación más extendida es la interconexión de ordenadores personales y estaciones de trabajo en oficinas, fábricas, etc., para compartir recursos e intercambiar datos y aplicaciones. En definitiva, permite que dos o más máquinas se comuniquen.
Mientras tanto las redes de área amplia o WAN (Wide Area Network), del inglés es un tipo de red de computadoras capaz de cubrir distancias desde unos 100 hasta unos 1000 Km., dando el servicio a un país o un continente. Muchas WAN son construidas por y para una organización o empresa particular y son de uso privado, otras son construidas por los proveedores de Internet (ISP) para proveer de conexión a sus clientes.

Hoy en día Internet proporciona WAN de alta velocidad, y la necesidad de redes privadas WAN se ha reducido drásticamente.
Ahora bien muchas veces en Internet hablamos de velocidades de conexión o ancho de banda, ¿que significa esto? No es otra cosa que la cantidad de datos que se pueden transmitir en una unidad de tiempo. Por ejemplo, una línea ADSL de 256 kbps puede, teóricamente, enviar 256000 bits (no bytes) por segundo. Muchas veces el ancho de banda es diferente para la descarga de datos (“download”) que para la subida de datos (“upload”) de información.
Cuando los datos salen a Internet van a la búsqueda del lugar donde esta alojada esa página o sitio Web que buscamos o el correo. En este caso hablamos de las computadoras que alojan dichos servicios, llamados servidores, en el ejemplo anterior sería servidor Web. Estos son computadoras que ejecutando un programa realizan alguna tarea en beneficio de otras aplicaciones llamadas clientes, es decir su tarea seria mostrar a todos los clientes que lo soliciten la/s paginas y sitios Web que alojan. Otros servidores llamados DNS (Domain Name System). Estos servidores poseen una base de datos que almacena información asociada a nombres de dominio (es decir las direcciones en la Web que digitamos en el navegador) en redes como Internet., siendo su uso más común la asignación de nombres de dominio a direcciones IP y la localización de los servidores de correo electrónico de cada dominio.
Esta es la dirección Web o dominio.

Un ejemplo:

¿Pero que es la IP? La IP es un número que identifica de manera lógica (es decir no es un número físico que tenga la computadora sino que es un número asignado por quien provee del servicio de Internet como ANTELDATA) a un dispositivo (habitualmente una computadora) dentro de una red que utilice el protocolo IP (Internet Protocol) para que pueda ser identificada a fin enviar y recibir los datos que se desea.
Es habitual que un usuario que se conecta desde su hogar a Internet utilice una dirección IP. Esta dirección puede cambiar al reconectar; y a esta forma de asignación de dirección IP se denomina una dirección IP dinámica (normalmente se abrevia como IP dinámica).Los sitios de Internet que por su naturaleza necesitan estar permanentemente conectados, generalmente tienen una dirección IP fija (se aplica la misma reducción por IP fija o IP estática), es decir, no cambia con el tiempo. Los servidores de correo, DNS, FTP públicos, y servidores de páginas web necesariamente deben contar con una dirección IP fija o estática, ya que de esta forma se permite su localización en la red.Una dirección IP se representa mediante un número binario de 32 bits. Así las direcciones IP se pueden mostrar como números de notación decimal: para ellos se dividen los 32 bits de la dirección en cuatro octetos. El valor decimal de cada octeto puede ser entre 0 y 255 (el número binario de 8 bits más alto es 11111111 y esos bits, de derecha a izquierda, tienen valores decimales de 1, 2, 4, 8, 16, 32, 64 y 128, lo que suma 255 en total).

Un ejemplo sería:

Un dominio de Internet es un nombre base que agrupa a un conjunto de equipos o dispositivos y que permite proporcionar nombres de equipo más fácilmente recordables en lugar de una dirección IP numérica.
Algunos ejemplos serían:

(.cl) dominio de nivel superior geográfico CHILE(.org) dominios de primer nivel para organizaciones(.edu) dominios de primer nivel educativos(.info) dominio nivel superior previsto para las páginas web informativa
(.net) dominio de nivel superior previsto para las páginas de servicios web(.com) dominio de nivel superior comerciales(.mil) dominio de Internet genérico para el Departamento de Defensa de los Estados Unido.
(.es) dominio de nivel superior geográfico (ccTLD) para España. También lo utiliza en la web para páginas en español(.cat) dominio de nivel genérico para la lengua catalana, y su cultura
Para entender las partes de un nombre de dominio diríamos:
Un nombre de dominio usualmente consiste en dos o más partes (técnicamente etiquetas), separadas por puntos cuando se las escribe en forma de texto. Por ejemplo, www.mahomedalid.org o es.Wikipedia.org
A la etiqueta ubicada más a la derecha se le llama dominio de nivel superior (inglés <>
Cada etiqueta a la izquierda especifica una subdivisión o subdominio. Nótese que "subdominio" expresa dependencia relativa, no dependencia absoluta. En teoría, esta subdivisión puede tener hasta 127 niveles, y cada etiqueta contener hasta 63 caracteres, pero restringido a que la longitud total del nombre del dominio no exceda los 255 caracteres, aunque en la práctica los dominios son casi siempre mucho más cortos.
Finalmente, la parte más a la izquierda del dominio suele expresar el nombre de la máquina (en inglés hostname). El resto del nombre de dominio simplemente especifica la manera de crear una ruta lógica a la información requerida. Por ejemplo, el dominio es.Wikipedia.org tendría el nombre de la máquina "es", aunque en este caso no se refiere a una máquina física en particular.

FUENTES:

http://www.aulaclic.es/internet/index.htm
http://www.masadelante.com/faq-bit.htm
http://es.wikipedia.org/wiki/Bit
http://www.sebado.com.ar/ort/5ic-iyc/tpfinal/index.html
http://es.wikipedia.org/w/index.php?title=Direcci%C3%B3n_IP&oldid=14820227

Usabilidad y Accesibilidad Web

2009-03-09T19:41:00.005-03:00

1. Concepto de sitios Web y Páginas Web. Elementos que posee. Similitudes con un comercio
2. Concepto de usabilidad y accesibilidad de un sitio Web
3. Aspectos de usabilidad a tener en cuenta

a. Objetivos y público objetivo
b. Tipos de estructura de un sitio Web
c. Niveles de un sitio Web
d. Navegación en un sitio Web. Consejos
e. Tipos de enlaces Web
f. Diseño lógico de un sitio
g. Prototipación

Sitios web y páginas Web

2009-03-08T18:15:00.000-03:00

Sitio Web

Es un conjunto de archivo llamados páginas Web generalmentevinculadas entre si por enlaces, con un mismo contenido temático, y organizadas jerárquicamente. Generalmente tiene una página principal que se llama index.html.

Página Web

Es parte de un sitio Web y es un único archivo con nombre propio.

Introducción:¿Cómo leer este blog?

2009-03-01T11:55:00.001-02:00

Muchachos, para entender y guiarse en este blog deben tener en cuenta lo siguiente:

En la columna de la derecha simpre van a tener todas las entradas es decir los diferentes temas y puntos que contiene cada uno subidos por los docentes.
Todas las entradas estan ordenadas por tema.
Cada entrada en si misma es un hipervínculo que me lleva a su contenido el cual se desplegará en la columna de la izquierda.
Todos los temas y puntos que contienen, tienen números o letras que muestran cual va primero y cuales son los siguientes.
Cuando hay imágenes se pueden ampliar haciendo clic sobre ellas.
En el desarrollo de los puntos pueden existir vínculos que muchas veces colocamos para que amplien el conocimiento sobre el tema a través de otras lecturas,videos, imágenes, etc. Sean observadores y no solo copien.

Webquest Juegos Olímpicos: Calificaciones de los equipos

2008-11-20T08:49:00.003-02:00

En la siguiente tabla se muestra la evaluacion y calificacion de los equipos de trabajo de la Webquest sobre los Juegos Olimpicos.
Para ello se tuvo en cuenta una serie de aspectos a evaluar durante todo el proceso de cada equipo y cada integrante en particular como se observa en la misma.

Muchas felicidades a todos¡¡¡¡

Material de Apoyo de Diseño Grafico con Fireworks

2008-10-29T08:06:00.013-02:00

A continuación les dejo un material de apoyo básico que nos permitirá comprender como utilizar básicamente el programa Adobe Fireworks
En el veremos como realizar dibujos, corregir imágenes, realizar fondos, etc.
Lo que viene es un tutorial basico y mas abajo una serie de videos que nos explica paso a paso su uso.

Espero les sea útil

Manual de estilo para el diseño Web. Tema: "Juegos Olímpicos"

2008-09-17T16:11:00.008-03:00

Tamaño de cada imagen: menor a 40 kilobytes (Kb)
Tamaño del sitio de cada comisión 20 megabytes (Mb) como máximo.
Nombre de los archivos y carpetas:
- Sin símbolos
- Una sola palabra o sin espacios entre palabras.
- Letra minúscula
Cada equipo debe configurar su sitio local.
Todas las páginas deberán tener título.
Todos los textos debe estar corregidos ortográficamente.
El Sitio deberá estar guardado en el Disco:Proyectos/Principal/(En cada Subcarpeta correspondiente a cada equipo).
En la página principal de cada sitio debe decir al final los nombres de cada integrante de la Comisión (Este sitio fue creado por…..)
Las paginas deberán como máximo tener una extensión de 2 pantallas, de lo contrario crear paginas para la información sobrante.
Todas las páginas del sitio deberán tener una estructura en Red que permita vincularlas a todas de forma directa o indirectamente a través de la página principal.
Cada página deberá tener un icono (imagen) o texto que enlace con la página principal (index), así como enlaces de siguiente, anterior.
Se recomienda que los botones utilizados combinen imágenes y textos con su correspondiente texto de ayuda (ALT).
Cada página Web deberá tener títulos y subtítulos correspondientes según sea necesario.
Utilizar contrastes entre las fuentes y los fondos de las páginas o el espacio alrededor de ella. Se deben utilizar fuentes de fácil lectura (del grupo de las serif como arial, verdana o similares). Igualmente diferenciar entre párrafos, títulos y subtítulos.

1 Los Storyboards son ilustraciones mostradas en secuencia con el objetivo de servir de guía para entender una historia, previsualizar una animación o seguir la estructura de una película o diseño Web antes de realizarse o filmarse.Fuente: http://es.wikipedia.org/wiki/Storyboard

Material de Apoyo Nro 11-Creacion de paginas Web con marcos en DW

2008-09-10T15:36:00.009-03:00

Los marcos -o frames- sirven para distribuir mejor los datos de las páginas, ya que permiten mantener fijas algunas partes, como pueden ser el encabezado de la página y la barra de navegación o botonera de la derecha por ejemplo, mientras que otras sí pueden cambiar. Además de mejorar la funcionalidad, pueden mejorar también la apariencia. Dicho de un modo sencillo, los marcos podemos decir que son páginas Web dentro de otra página que las contiene y organiza de una determinada manera.
Cada uno de los marcos de una página, contiene un documento HTML individual. Miremos el siguiente ejemplo. La página contiene tres marcos:

El de arriba o encabezado que dice “Las nuevas siete maravillas del mundo”.
El de la izquierda que contiene el menú con botones.
El de la izquierda donde esta el contenido.

Cuando se crea una página Web con marco como en el caso anterior además de las tres páginas individuales se crea un general que contiene el grupo de marcos, o llamada página de conjunto de marcos. Es desde esta donde podemos hacer los cambios y modificaciones que deseemos.

Creando marcos con Dreamweaver

En un documento nuevo vamos a menú Insertar-->HTML--> Marcos y ahí elegimos el tipo de marco que queremos crear.Si pulsamos sobre Izquierda se creará un nuevo marco a la izquierda del documento actual.

Así que tendremos tres documentos: el de la izquierda, el de la derecha, y el que contiene el grupo de marcos. El de la derecha es el documento que teníamos inicialmente, que está en el marco conocido como marco padre (MainFrame). El marco padre siempre es el marco en el que se encuentra el documento inicial, sobre el que se han insertado el resto de marcos.
Para seleccionar el documento que contiene el grupo de marcos hay que pulsar sobre la línea que separa los marcos. Esto solo es posible mientras dicho documento no se haya guardado. Luego debemos guardarlo como Archivo--> Guardar conjunto de marcos

Seleccionando marcos creados

Para seleccionar los marcos vamos a Ventana-->Marcos
En el panel Marcos aparecen los marcos que contiene el documento de marcos, y se puede pasar de uno a otro pulsando sobre ellos en el panel. También puede seleccionarse la página de marcos pulsando sobre el borde que rodea a los marcos (el que aparece más grueso y en relieve en la imagen). Igualmente seleccionando cada uno de ellos podremos cambiar sus propiedades desde el panel respectivo que siempre aparece abajo.

Guardando marcos creados

Todos los documentos que contienen marcos tienen que tener una página en cada uno de ellos. Es por esto que al crear algún marco, se cargan páginas nuevas por defecto en cada uno de ellos, a excepción del marco que contiene la página original o sea la página que contiene el conjunto de marcos.
Es necesario guardar la página que contiene el grupo de marcos, así como cada una de las páginas que están incluidas en sus marcos.
Para guardar cada una de las páginas de los marcos seleccionamos con el mouse cada una de ellas y vamos a:
Archivo-->Guardar marco como si es la primera vez o Archivo-->guardar marco si se hacen cambios posteriormente.
Para guardar el conjunto de marcos lo seleccionamos previamente como se indico arriba y después:
Archivo-->Guardar conjunto de marcos como si es la primera vez o Archivo-->Guardar conjunto de marcos si se hacen cambios posteriormente
Luego para sucesivo cambios podremos usar la opcion guardar todo que significa que guarda los cambios realizados en cualquiera de los marcos.

Atención¡¡¡ No usarlo la primera vez hasta que no se den los nombres de los marcos como veremos mas adelante.

Configurando marcos creados

Una vez creados los marcos podemos cambiarles sus propiedades que lo haremos seleccionando cada uno de ellos desde el panel que habremos desplegado a través del menú VentanasàMarcos como se indicará anteriormente.

Cada marco tiene asignado un nombre, que puede cambiarse a través de:

Nombre del marco. El nombre no puede contener espacios en blanco.
En Origen aparece el nombre del documento HTML que está contenido en el marco.
En Bordes puede elegirse si aparecerá o no una línea separando el marco del resto de marcos. En el caso de que se muestre el borde, se puede especificar un color para éste a través de Color borde. También es posible establecer un grosor para el borde a través de Ancho.
Desplaz. indica si aparecerán o no las barras de desplazamiento cuando el documento del marco no pueda visualizarse completamente.
Si la opción Mismo tamaño está activa, indica que los usuarios no podrán variar las medidas del marco desde el navegador.
El Ancho del margen y el Alto del margen indican la separación que habrá entre el contenido del marco y sus bordes izquierdo-derecho y superior-inferior.

Si lo seleccionado es todo el conjunto de marcos (la página de marcos), el inspector de propiedades es algo diferente.

En Bordes puede elegirse si aparecerá o no una línea separando los marcos entre sí y puede especificarse un color para este a través de Color borde. También es posible establecer un grosor para el borde a través de Ancho.
El campo Columna (o Fila dependiendo del marco elegido en Selección Fila Col.) sirve para especificar el tamaño del marco, que puede ser en Píxeles, Porcentaje (de la ventana) o Relativo (proporcional al resto de marcos).
Normalmente utilizarás dos marcos, uno de ellos con tamaño en Píxeles, que será el que contenga la barra de navegación, y el otro marco con tamaño Relativo, para que se ajuste a la ventana del navegante.

Contenido del marco

Cuando trabajamos con marcos, queremos poder cargar diferentes documentos en cada uno de ellos. El contenido de alguno de los marcos ha de ser fijo, mientras que el de otros ha de poder variar.
Recordemos que cuando colocamos un hipervínculo a un texto, imagen, boton podemos darle un destino que podia ser en uan pagina nueva (blank) o self (que es en al misma ventana del vínculo).
Pero además de estos destinos para los hipervínculos, también aparecerán los nombres de los distintos marcos de la página.

Podemos añadir todos estos destinos a cualquier elemento de la página que contenga algún hipervínculo, ya sea texto, una imagen, un mapa de imagen, un elemento Flash, etc.

Material de apoyo Nº 10-Listas y comportamientos

2008-09-09T11:19:00.008-03:00

Listas ordenadas, desordenadas y con imágenes

Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o con viñetas.

Para que un texto que ya ha sido introducido en el documento se convierta en una lista, simplemente hay que seleccionarlo y pulsar sobre la opción de lista correspondiente, ya sea a través del inspector de propiedades, o a través del menú Texto.

La lista con viñetas (desordenada) se selecciona a través del botón , mientras que la lista numerada (ordenada) se selecciona a través del botón
En el panel de propiedades podemos también cambiarle el tipo de texto, color, tamaño, etc.

Ejemplo de lista numerada (ordenada):

1.Preparar la mochila
2.Sacar los libros de ese día
1.Introducir los libros del día siguiente
2.Ponerme el pijama
3.Lavarme los dientes
4.Poner el despertador

Ejemplo de lista con viñetas (desordenada):

•Perro
•Gato
oAves
•Canario
•Loro
•Hamster

Para establecer listas anidadas dentro de otras como en los ejemplos anteriores, es necesario añadir una sangría en los elementos de la lista que se desee que pasen a formar parte de la lista anidada. Las sangrías están en el panel de propiedades al lado de los botones de listas

A través del menú Texto-->Lista, es posible acceder a las propiedades de la lista seleccionada. Se debe seleccionar el texto de la lista previamente o tener el cursor en algún lugar de la lista para que se active este submenú.

Utilizar imágenes en la lista

Es posible sustituir las viñetas tradicionales por otros símbolos o imágenes.
En primer lugar creamos la listar con las viñetas tradicionales y luego debemos crear un estilo para cambiar la viñeta a la imagen deseada.

Recordemos: Para crear el estilo vamos al panel de propiedades a la opción Estilos->Administrar estilos-->Nuevo. Allí le damos un nombre, le aplicamos la opción clase como tipo de selector y lo definimos en solo este documento.
Luego en la ventana siguiente vamos a la categoría Listas-->imagen de viñeta y seleccionamos una imagen como viñeta de nuestra carpeta la cual deberá ser pequeña.

Luego teniendo seleccionado el texto de la lista cambiamos el estilo en el panel de propiedades.

Comportamientos: Ventanas emergentes

Esta herramienta es parte de una categoría que tiene Dreamweaver denominada Comportamientos, la cual se habilita desde el menú VentanaàComportamientos.
Permite crear ventanas personalizadas en tamaño, vinculadas a un texto, imagen, botón, es decir a un hipervínculo, que al hacer clic se abren. Es así que si el usuario tiene un bloqueador de ventanas emergentes es posible que deba permitir que se vean de lo contrario no serán abiertas.

Los pasos que debemos seguir son los siguientes:

Seleccionaremos elemento asociado al comportamiento, es decir un texto, imagen, etc.
Luego vamos al menú Ventana-->Comportamientos y pulsamos el botón de + para desplegar la lista.

3. Posterioremente seleccionamos la opción Abrir ventana del navegador y veremos el siguiente cuadro de diálogo:

4. Allí insertamos el hipervínculo deseado (mostrar URL), definimos el ancho y alto de la ventana que se abrirá, los atributos y el nombre que tendrá la ventana que se abrirá.

Comportamientos: Creación de menúes desplegables o emergentes

Para crear un menú desplegable debemos seguir los siguientes pasos:

1. Seleccionamos un botón (texto o imagen) que contendrá el menú desplegable. En la opción de vínculos del panel de propiedades escribimos el símbolo #, lo que hace que Dreamweaver lo detecte como hipervínculo
2. Luego vamos a Ventana-->Comportamientos--> y en el panel lateral derecho seleccionamos desde el botón de + la opción Mostrar menú emergente.

3. En la siguiente ventana iremos creando el menú, donde tendremos las siguientes solapas o pestañas:

a. Contenido: Allí se irán creando todas las opciones o botones del menú desplegable. Por cada botón que se desee crear se debe apretar el botón de + o eliminar También los hipervínculos de cada opción o botón y el destino (si se abre en otra ventana o en la misma al hacer clic en la opción del menú deseada).
b. Aspecto: Aquí se definen el tipo de menú (vertical u horizontal), y el formato del mismo (fuente, tamaño, alineación del texto) y también el color de la celda del botón y del texto cuando se está arriba del menú (sin seleccionar una opción), y el color sobre el menú (cuando se pasa por una opción determinada).
c. Avanzado: Aquí tenemos elementos opcionales de formato que podemos darle al menú (ancho y alto de celda, relleno y espacio de celdas, bordes, color de borde sangría de texto en relación a la celda, entre otras).
d. Posición. En esta solapa definimos en que posición aparecerá el menú, abajo o arriba a la derecha, o por arriba o debajo del botón que contiene el menú.

Al terminar aparecerá en el panel de la derecha el comportamiento creado y con que acciones del Mouse (evento) funciona. Si el Mouse no esta arriba (on Mouse out) el menú desaparece y si esta arriba (on Mouse over) aparece.

Webquest: "Los Juegos Olímpicos"

2008-09-05T16:28:00.005-03:00

INTRODUCCION

Los Juegos Olímpicos mas alla de los deportes son una expresion viva de la sociedad, un encuentro de culturas que se funden a través de las diferentes disciplinas deportivas.Su origen data de muchisimo tiempo en la ciudad de Olimpia, Grecia la cual es cuna de los Juegos Olimpicos. Es un tema apasionante, el cual tiene diversidad de enfoques para todos los gustos.UNuestro pais ha tenido a lo largo de la historia una importantisima presencia en las mismas logrando triunfos memorables como las olimpiadas de Amsterdam y colombes donde fuimos campeones olimpicos en futbol, y donde en esta disciplina tuvo origen la tan clasica y tradicional vuelta olimpica. Te invitamos a a incursionar en este gran tema para conocer mas de el, en momentos en que se desarrolla los Juego Olímpicos de Beijing o Pekín en China.

LA TAREA

La tarea a realizar consiste en la creación de diferentes sitios Web cada uno con distintos temas en relación a los juegos olímpicos.
Para ello se crearan diferentes equipos de trabajo cada uno encargado de una temática en particular referente a los mismos.
Los sitios Web creados debe incluir TODAS las herramientas utilizadas hasta el momento de forma coherente teniendo siempre en cuenta, además del rigor académico, la estética y el fácil acceso, en otras palabras se debe seguir un manual de estilo[1]
Cada equipo será responsable de la búsqueda, recopilación, selección y organización de la información que tendrá su sitio Web. Esta información será obtenida de Internet desde sitios competentes con información válida, seleccionados y revisados por los docentes. Esto no excluye otros sitios web aportados por los estudiantes que previamente serán evaluados por los docentes.
Los temas saldrán a partir de una dinámica grupal denominada "tormenta de ideas o lluvia de ideas" la cual se hará como forma de conocer las motivaciones de ustedes con respecto al tema y para organizar y estructurar adecuadamente los mismos a partir de los aportes. Algunos a priori pueden ser:
[1] Conjunto de reglas y recomendaciones que permite diseñar un sitio Web de forma responsable, agradable, accesible y atractiva para el usuario final. Fuente: http://www.alzado.org/articulo.php?id_art=327

a- Historia de los juegos olímpicos
b- Medallero olimpico, características, estadisticas, elaborcion de las medallas, cambios a lo largo del tiempo en su diseño y elaboracion.
c- Las mascotas de los juegos. Cambios en el tiempo.
d- Las disciplinas olimpicas, las mas antiguas , las mas nuevas, y las raras. Las que desean ser olimpicas.
e- Uruguay en los juegos olimpicos, trayectoria en los participantes y las disciplinas.
f- Los records en las disciplinas, quienes son, cuando, de donde son.
g- Beijing 2008,las ciudades olimpicas, cuales son, como son, caracteristicas, las disciplinas en cada una de ellas.

PROCESO

1-Tormentas de ideas para conocer motivaciones e intereses y determinar los temas.
2- División en equipos de trabajo y elección de los temas por cada uno de ellos, si hay coincidencia de elecciones se va a sorteo.
3- Luego de establecidos los temas de trabajo de cada equipo debemos comenzar a investigar, recopilar y seleccionar información para nuestro sitio desde aquellos sitios Web analizados y seleccionados previamente por los docentes. Para ello es necesario tener en cuenta la siguiente guía:

Considerar bibliografía con respaldo de editoriales u organismos competentes en el tema.
Leer y luego seleccionar información relevante.
Reelaborar la información antes de colocarla en el sitio. No abusar del copiar y pegar.
Anotar con cuidado las fuentes de origen;
a- Si es libro: Nombre del libro, autor, año y editorial. Por ejemplo: Sánchez, J. Las olimpiadas en el tiempo. Alfaguara 2005.
b- Si es Web: Dirección del sitio, titulo del mismo, autor, y fecha de extracción de la información de dicho sitio. Por ejemplo: Sánchez, J. Los Juegos Olímpicos en el tiempo. Extraído el 5/8/2008 de: http://www.losjuegoseneltiempo.com/. Para el caso de las imágenes también se debe indicar la dirección de donde fueron obtenidas. Por ejemplo: http://www.xtec.net/~jarrimad/grecia/discobolo.jpg
Extraer la información si es de la Web en primera instancia al bloc de notas y luego a Dreamweaver para evitar llevarse formatos de texto o imágenes no deseadas.
Cuidar de guardar las imágenes en una subcarpeta aparte para tales fines dentro de la carpeta que va a contener las páginas Web el sitio actual.
No sobrecargar de imágenes ni texto las páginas más bien concretas y relativamente cortas en extensión, si es necesario crear más páginas para el tema.
Utilizar si es necesario y aporta al desarrollo del tema videos y audio, pero sin ser exagerado, pues aumenta mucho el tamaño de las páginas y se hace difícil su descarga y visualización.

4- Luego comenzarán a elaborar el sitio Web el cual deberá respetar el manual de estilo.

RECURSOS

Los Juegos Olímpicoshttp://iesgarciamorato.org/Dep_Griego/juegos/trabajos/trabajos.htm
Educar.org
http://www.educar.org/educacionfisicaydeportiva/historia/juegosolimpicos.asp
Medallero olímpico
http://news.bbc.co.uk/hi/spanish/misc/newsid_3916000/3916373.stm
Mapa evolución medallero olímpico
http://www.nytimes.com/interactive/2008/08/04/sports/olympics/20080804_MEDALCOUNT_MAP.html
Las medallas olimpicashttp://www.spanish.xinhuanet.com/spanish/2008-01/03/content_554115.htm
Juegos Olímpicos de Beijing
http://www.juegos-olimpicos.com/
Historia moderna de los Juegos Olimpicos
http://www.2008.com/cmarter.asp?doc=691

EVALUACIÓN

La evaluación se realizará a través de una escala de apreciación con diferentes items y puntajes para cada uno. Dichos items contemplarán los siguientes aspectos:

a- Fase previa a la realización del sitio Web (búsqueda, recopilación y selección de la información para el diseño del mismo)
b- Fase de elaboración del sitio Web (diseño, contenido, y valor educativo del mismo).
c- Funcionamiento del equipo de trabajo y actitudes frente al trabajo y ente los integrantes.
d- Presentación y Comunicación al resto del grupo del trabajo realizado.
e- Publicación en tiempo y forma del trabajo en un hosting en Internet.

CONCLUSIÓN

Consistirá en la presentación ante los compañeros y docentes del trabajo realizado haciendo énfasis en:

a- El camino recorrido, sus etapas, dificultades y fortalezas.
b- El sitio Web realizado y publicado, sus partes y como lo lograron.
c- Las enseñanzas que le dejo todo el proyecto de la Webquest
Conviene que estas conclusiones sean una pagina mas del sitio Web.

CRÉDITOS

Webquest de “Antonio Machado. Caminos de soledad por los campos de Castilla”. Tomada de: http://personal.telefonica.terra.es/web/miguelmartinez/cursowq/miWebQuest4.htm el 25/07/08
Escultura clásica griega. Tomada de. www.xtec.net/~jarrimad/grecia/discobolo.html el 11/08/08.

Material de Apoyo Nº 9b- Mapa de imágenes (zonas interactivas)

2008-08-26T16:09:00.006-03:00

Cada vez que usted inserta una imagen a su documento podrá observar en la parte inferior izquierda del panel Propiedades algo similar a lo siguiente:

Esto indica que usted puede crear mapas de imágenes, un mapa de imagen simplemente es una imagen que se ha divido en varias zonas interactivas. Estas zonas interactivas generaran una cierta acción al hacer clic en ellas, es decir crea hipervínculos de diferentes tipos (correo, páginas Web, documentos, etc).

Para insertar una mapa de imagen realizaremos los siguientes pasos:

Insertar o seleccionar una imagen que tengamos dentro de la paginas Web en Dreamweaver.
Desde el panel propiedades asignemos un nombre que tendrá el mapa de imagen que deberá ser único y exclusivo para diferenciarlo de otros que posiblemente tengamos dentro de la página Web.

Para crear las zonas interactivas tiene tres opciones: La herramienta zona interactiva oval, la herramienta zona interactiva rectángular y la herramienta zona interactiva poligonal . Las dos primeras herramientas trabajan de manera similar, debe ubicarse dentro de la imagen y luego arrastrar el cursor del mouse hasta que usted lo considere adecuado. La tercera herramienta le permitirá crear zonas interactivas irregulares, para trabajar con esta herramienta en primer lugar debe ubicarse dentro de la imagen, para comenzar la zona interactiva haga click al botón izquierdo del mouse, para continuar la construcción de la zona interactiva irregular deberá dar click en las esquinas de lo que será dicha zona, Dreamweaver se encargara de unir los puntos trazando una recta entre ellos. Para finalizar la zona interactiva irregular deberá seleccionar la herramienta Puntero .
Posteriormente definimos el hipervínculo (vínculo), el destino (si el vinculo se abre en la misma o en otra ventana, en este caso seleccionamos: _blank), y si deseamos un texto de ayuda para el usuario o texto alternativo (alt).
Por último visualizamos en el navegador los resultados obtenidos.

Material de apoyo Nº 9- Estilos en cascada o CSS.

2008-08-21T16:05:00.007-03:00

En Dreamweaver es posible definir una serie de estilos, aplicables a párrafos o a palabras seleccionados. Estos nuevos estilos, llamados Estilos CSS (también denominadas Hojas de Estilo en Cascada), se utilizan para combinar una serie de atributos del texto, como pueden ser el color o el tamaño, de modo que no sea necesario asignar estos atributos uno a uno cada vez que se desee repetir la asignación de esos mismos valores a otras partes del texto. Para Dreamweaver las características que aplicamos a un texto crean automáticamente estilos CSS, apareciendo en el panel de propiedades y que por defecto se van llamando Estilo 1, Estilo 2 ……etc.

Alli se pueden cambiar diferentes propiedades del texto: tipo, fondo, bordes, entre otras categorías que integra un estilo. Cuando hemos terminado cliqueamos aplicar y aceptar

Crear un estilo propio

Para crear un nuevo estilo seguimos los pasos 1 y 2 y en el 3 hacemos clic en Nuevo, luego definimos el nombre para ese estilo, el tipo de estilo si general (clase) o muy personalizado (avanzadas)-en este caso dejamos el tipo Clase-, y lo definimos en solo este documento. Posteriormente aplicamos todas las propiedades que tendrá como se observa en el paso 4. Cuando terminemos damos Aplicar y Aceptar, y luego Listo.

Material de apoyo Nro 8 - Audio y Video en DW

2008-08-14T13:07:00.010-03:00

Audio de fondo sin control: Etiqueta bgsound

Tener en cuenta:

Los formatos de sonido más habituales en Internet son el WAV, el MP3 y en algunas ocasiones el MIDI.
Lo ideal es incluir algún archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad.Internet Explorer reconoce la etiqueta bgsound que se utiliza para poner sonido de fondo.
La etiqueta puede situarse en cualquier parte del documento, pero es preferible al principio del cuerpo del documento es decir el body, y no tiene una etiqueta de cierre.Al abrir el archivo en Internet Explorer se reproducirá automáticamente y el usuario no tendrá posibilidad de controlarlo.

Un ejemplo sería:

Video y audio controlado: Etiqueta EMBED

Tener en cuenta:

Los vídeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse. Se aconseja utilizar videos cortos.
Los formatos de video que suelen utilizarse en Internet son el AVI, el MPEG y el MOV, y tambien el FLV (formato de video de Flash).
La etiqueta embed se sitúa en el body, donde se quiere reproducir el audio o video y se cierra al final.
Esta etiqueta se le puede añadir otras propiedades como tamaño, comienzo automático, entre otros.
Como algunos navegadores no leen la etiqueta bgsound para insertar audio se utiliza embed de la misma forma.
Esta etiqueta inserta en Internet Explorer los controles para manejar tanto el video como audio.

Utilizar videos de sitios Web como Youtube y similares

Los atributos width (anchura) y height (altura) sirven para especificar el tamaño de la consola de control de vídeo. Estos atributos pueden tomar como valor un número, que indica el tamaño en píxeles. Si no se especifican estos atributos, la consola de control de vídeo se mostrará con el tamaño más adecuado al tamaño del video.
Actualmente esta muy extendido en Internet los videos en formato flash o flv (Flash video) por su reducido tamaño y buena calidad de imagen y audio. Así es que se han extendido en sitios como Youtube, Yahoo, DailyMotion, etc. La forma de insertar un video –caso Youtube- en nuestras paginas Web es la siguiente:

Seleccionamos la etiqueta del video seleccionado como muestra la imagen de abajo. Si uno quiere con la opción personalizar podemos darle borde y cambiar el color del mismo. Luego damos botón derecho copiar.

Posteriormente debemos pegar dicho código en Dremaweaver dentro del body en el lugar que querramos, quedando de la siguiente manera.

Luego en el navegador veremos el video el cual es descargado desde el servidor de Youtube.

Videos y Audio de Flash

Uno puede insertar videos y sonidos en formato Flash (swf). Estos son archivos creados en Flash que se integran fácilmente a Dreamweaver.
Para insertar un archivo de Flash realizamos los siguientes pasos:

1- Vamos al la opción Menú Insertar-->Media-->Flash

2- Habiendo guardado nuestra página HTML seleccionamos el archivo en la carpeta correspondiente -debe ser con formato swf.

3- Audio o video de Flash insertadoAl insertar el video o audio Flash nos aparece un rectángulo que nos muestra que se ha insertado el video o audio de flash Para visualizarlo vamos al panel de propiedades y presionamos Reproducir o en Internet Explorer

Material de apoyo Nro 7-Botones con imagen de sustitución y Flash

2008-08-14T10:58:00.004-03:00

Botones animados con Hipervínculos.

Pasos para insertar un Botón animado:

1) Ubico el cursor de mouse en el lugar deseado para insertar el Botón.
2) Menú Insertar -->Media--> Botón Flash
3) Indico las Propiedades del Botón como se muestra

Muestra: Vista previa del Botón
Estilo: Lista de Botones disponibles para insertar
Texto del Botón: Texto que se escribirá en el Botón
Fuente: Tipo y Tamaño de letra.
Vínculo: Hipervínculo a una dirección remota o local (Ver Hipervínculos).
Destino: Permite definir cómo se abrirá la ventana (Ver Hipervínculos).
Color de Fondo: Fondo del Botón (No es imprescindible definir)
Guardar Cómo: Nombre con el que se guardará el Botón (Deberá guardarse en la misma carpeta en que está guardada la página Web o en una subcarpeta que esté dentro de ella. Se define la ubicación con el botón EXAMINAR).
Aceptar o Aplicar: Crea el Botón con las propiedades definidas.

Botones con rollover

Se le llama botones con rollover o imagen de sustitución cuando al pasar el Mouse por un botón este cambia sus propiedades como color, tamaño, tipo, indicándonos que esta activo y que al hacer clic nos lleva al vínculo respectivo.
Para hacer esto con Dreamweaver realizamos los siguientes pasos:
1- Nos paramos en el lugar que deseamos insertar el botón.
2- Seleccionamos la opción imagen de sustitución dentro de los botones desplegables de insertar imagen. Otra forma es Menú Insertar-->objetos de imagen-->imagen de sustitución.

3- Luego seleccionamos con los botones Examinar la imagen que se verá en primer término (imagen original) y la que aparecerá cuando pasemos el cursor (imagen de sustitución). Luego debemos decirle cual será el hipervínculo que llevará al hacerse clic (Al hacerse clic ir a URL). Ahí puede ser un archivo, pagina web o dirección de correo.

4- Hacemos clic en aceptar

Material de Apoyo Nro 6-Tablas

2008-07-22T15:03:00.015-03:00

Las tablas nos permiten estructurar el diseño de una página Web para colocar en las celdas los elementos que nosotros querramos en el lugar deseado.

Lo interesante de las tablas es que podemos hacer que los bordes no se vean luego en el navegador cuando la visualizamos.

Veamos a continuación como crear y modificar tablas en Dreamweaver paso a paso.

Además de modificar las propiedades especificadas en el paso anterior, se pueden definir otras propiedades como: Color y grosor de Borde, Color de Fondo de toda la tabla, Alinear la Tabla en distintas posiciones y establecer una Imagen de fondo de Tabla.
Se puede seleccionar una celda (ubicándome dentro de ella) o varias celdas (arrastrando con el mouse). Para seleccionar toda una columna o fila simplemente ubicar el puntero del mouse sobre la columna o fila y hacer clic (como se muestra abajo).

Si selecciono una celda o varias celdas el Inspector de propiedades mostrará:

VISTA CÓDIGO HTML DE LA TABLA

Si seleccionamos la Vista Código veremos el código HTML correspondiente a
la tabla desde donde se pueden modificar las propiedades anteriormente mencionadas y también muchas otras.
El siguiente esquema muestra la Vista Código de una Tabla y sus propiedades:

Material de apoyo Nro 5-Hipervínculos

2008-07-16T08:28:00.009-03:00

Los hipervínculos son enlaces dentro de una página Web que nos permite conectar a:

a. un archivo (*.doc, *.jpg, entre otras)
b. otra página Web (http://www.google.com.uy/)
c. una dirección de correo (mailto:nosotros@adinet.com.uy)

Los hipervínculos pueden aplicarse a un texto, imagen o botón.

Material de apoyo Nro 4-Texto con marquesinas

2008-07-16T08:21:00.002-03:00

Las marquesinas son textos que se desplazan de un lugar a otro dentro de una página Web con el fin de resaltar o llamar la atención del usuario sobre su contenido. La etiqueta que se usa es marquee dentro de lso simbolos de mayor y menor.

Veamos la siguiente guía de como hacerlo

Material Apoyo Nro 3: Propiedades de línea horizontal e imagen

2008-06-24T13:11:00.007-03:00

Aquí veremos como modificar las propiedades de estos elementos en vista diseño y también código.

Material Apoyo Nro 2:Herramientas de Dreamweaver

2008-06-24T12:58:00.009-03:00

Este material de apoyo trae las herramientas para modificar las propiedades de imagen, texto, página, linea horizontal, fecha y hora, entre otras.

Material Apoyo Nro 1:Primeros pasos con Dreamweaver

2008-06-05T11:00:00.009-03:00

Dreamweaver es un programa destinado para la creación de páginas Web, y es el más utilizado para su diseño y programación.
Este programa es un editor visual profesional para la creación de sitios y páginas web, en otras palabras, la ventaja es que a medida que vamos diseñando la pagina Web automáticamente va generando el codigo HTML correspondiente. Esto quiere decir que vamos visualizando desde el inicio como nos va quedando nuestra página Web, si bien debemos verlo luego en un navegador para observar si todo está correcto.

Entorno de Dremaweaver

1- Menú Principal

Tiene comandos en su mayoría comunes a todos los programas y algunos específicos de este.

2- Barra Insertar

Contiene botones para la creación e inserción de diversos tipos de objetos, como tablas, capas e imágenes.
Al pasar el puntero sobre un botón, aparece una descripción de la herramienta con el nombre del botón.
Los botones están organizados en categorías, a las que puede cambiar en la parte izquierda de la barra Insertar.

Cuando se inicia Dreamweaver, se abre la última categoría con la que ha trabajado.

Algunas categorías tienen botones con menús emergentes. Al seleccionar una opción de un menú emergente, dicha opción se convierte en la acción predeterminada del botón. Por ejemplo, si selecciona Marcador de posición de imagen en el menú emergente del botón Imagen, la siguiente vez que haga clic en el botón Imagen, Dreamweaver insertará un marcador de posición de imagen. Siempre que seleccione una nueva opción del menú emergente cambiará la acción predeterminada del botón.

La barra Insertar está organizada en categorías, siendo algunas:

La categoría Común: Permite crear e insertar los objetos que se utilizan con más frecuencia, como las imágenes y las tablas.

La categoría Diseño: Permite insertar tablas, etiquetas div, capas y marcos. También puede elegir entre las tres vistas de las tablas: Estándar (valor predeterminado), Tablas expandidas y Diseño.

La categoría Formularios: Contiene botones que permiten crear formularios e insertar elementos de formulario.

La categoría Texto: Permite insertar diversas etiquetas de formato de texto y listas, como b, em, p, h1 y ul.

La categoría HTML: Permite insertar etiquetas HTML para las reglas horizontales, el contenido de la sección head, las tablas, los marcos y los scripts.

3- Barra de herramientas de Documento

La barra de herramientas de Documento contiene botones que permiten alternar entre diferentes vistas del documento rápidamente: vista Código, vista Diseño y una vista dividida que muestra las vistas Código y Diseño. La barra de herramientas contiene también algunos comandos y opciones relativos a la visualización del documento y a su transferencia entre los sitios local y remoto.
En la barra de herramientas de Documento, las opciones más comunes son:

Mostrar vista de código: Sólo muestra la vista Código en la ventana de documento.
Mostrar vistas de código y diseño: Muestra la vista Código en una parte de la ventana de documento y la vista Diseño en la otra parte.
Mostrar vista de diseño: Sólo muestra la vista Diseño en la ventana de documento.
Título del documento: Permite introducir un título para el documento, que aparecerá en la barra de título del navegador. Si el documento ya tiene título, éste aparecerá en dicho campo.
No hay errores de comprobación de navegador: Permite comprobar la compatibilidad con distintos navegadores.
Validar formato: Permite validar el documento actual o una etiqueta seleccionada.
Administración de archivos: Muestra el menú emergente Administración de archivos.
Vista previa/Depurar en explorador: Permite ver una vista previa del documento o depurarlo en un navegador. Seleccione un navegador en el menú emergente.
Actualizar vista de diseño: Modifica la vista Diseño tras realizar cambios en la vista Código. Los cambios realizados en la vista Código no aparecerán de forma automática en la vista Diseño hasta que se efectúen determinadas acciones, como guardar el archivo o hacer clic en este botón.
Ver opciones: Permite definir las opciones de las vistas Código y Diseño, y establecer qué vista va a aparecer en la parte superior de la ventana. Las opciones del menú corresponden a la vista actual: la vista Diseño, la vista Código o ambas.
Ayudas visuales: Permite utilizar distintas ayudas visuales para el diseño de las páginas.

4- Barra de estado

La barra de estado, situada en la parte inferior de la ventana de documento, proporciona información adicional sobre el documento que está creando.

El selector de etiquetas muestra la jerarquía de etiquetas que rodea a la selección actual. Escriba algo pulse Enter y luego haga clic en cualquier etiqueta de la jerarquía para seleccionar la etiqueta y todo su contenido. Haga clic en la etiqueta body para seleccionar todo el cuerpo del documento.
El selector de etiquetas es el método más adecuado para seleccionar etiquetas, porque le garantiza que siempre se está seleccionado la etiqueta de manera precisa.
La herramienta Mano permite hacer clic en el documento y arrastrarlo hasta la ventana de documento. Haga clic en la herramienta Seleccionar para desactivar la herramienta Mano.
El menú emergente Tamaño de ventana (que sólo aparece en la vista Diseño) permite cambiar el tamaño de la ventana de documento para que adopte dimensiones predeterminadas o personalizadas.
A la derecha del menú emergente Tamaño de ventana aparecen la estimación del tamaño del documento y del tiempo de descarga de la página, incluidos todos los archivos dependientes, como imágenes y otros archivos multimedia.

Material de apoyo Nro 6: Los colores en HTML (hexadecimales)

2008-05-30T14:44:00.009-03:00

Los colores en HTML están representados por un número hexadecimal.
Un número hexadecimal se diferencia de un número decimal, puesto que si bien este último puede tener valores entre 0 y 9 el hexadecimal puede tomar hasta dieciséis valores distintos, que van del 0 al 9, y de la A a la F.
Cada color estará representado por un grupo de seis dígitos en hexadecimal, precedidos por el símbolo de numeral (#), como por ejemplo #FFFFFF.
Existen 216 colores seguros para web que son los siguientes:

Sin embargo en los colores básicos no es necesario usar valores hexadecimales. Estos colores pueden representarse por su nombre y son los siguientes:

Fuente: AulaClic

Material de apoyo Nro 5: Algunos ejemplos

2008-05-13T16:45:00.005-03:00

Ejemplo 1

El ejemplo anterior comparado en la vista HTML y en un navegador Web se vería asi:

Veamos a continuación una serie de tres videos cortos sobre el uso de etiquetas de:

a) Enlaces

b) Otros atributos de texto (sangrías, líneas horizontales, saltos de líneas entre otras)

c) Imágenes

Material de apoyo Nro 4: Tabla con las principales etiquetas HTML

2008-05-13T12:00:00.008-03:00

Esta es una lista con las etiquetas HTML que en su mayoria vamos a usar en el año.

Material de apoyo Nro 3: Principales etiquetas

2008-05-06T16:19:00.007-03:00

Veamos ahora un par de videos sobre el uso de las principales etiquetas o tags HTML

Otras etiquetas HTML

Material de apoyo Nro 2: Estructura básica de una página WEB desde HTML

2008-05-06T15:58:00.008-03:00

En otras palabras cualquier documento en HTML comienza con la etiqueta html, y termina con /html. Dentro del documento (entre las etiquetas de principio y fin de html), hay dos zonas bien diferenciadas:

a) Encabezado: Delimitado por y , La única utilidad del encabezamiento en la que nos detendremos es la directiva title, que permite especificar el título de un documento HTML. Este título no forma parte del documento en sí, sino que suele servir como título de la ventana del programa que nos la muestra.

b) Cuerpo: Se escribe dentro de las etiquetas body y /body, y es donde reside la información del documento (texto, imágenes, videos, enlaces).

Material de apoyo Nro 1: ¿Cómo crear una página Web con el lenguaje HTML?

2008-05-06T15:26:00.012-03:00

Para crear una página Web si se conoce el lenguaje HTML y sus etiquetas solo se necesita el bloc de notas. Luego el navegador se encargará de interpretarlo. Sin embargo existen varios programas que nos dan la posibilidad de diseñar un sitio Web sin necesidad de escribir dicho lenguaje puesto que al introducir un texto o imagen u otro objeto este ingresa automáticamente las etiquetas HTML necesarias. Sin embargo su conocimiento nos da autonomía de diseño.
Para crear una página Web se debe cumplir con una estructura básica.
La estructura básica de una página Web desde HTML se vería así:

Veamos el siguiente video en Youtube que lo explica muy sencillamente

¿Qué es HTML?

2008-05-02T15:21:00.006-03:00

Es el lenguaje con el que están hechas las páginas y sitios Web. Dicho lenguaje se encarga de describir toda la estructura de un sitio Web como textos, imágenes, video, audio, etc, así como el formato de estos.Si bien nosotros vemos una pagina web de forma normal realmente es el navegador Web (Internet Explorer, Mozilla Firefox entre otros) quien se encarga de traducir el lenguaje HTML para tal fin. En ingles significa HyperText Markup Language (Lenguaje de Marcado de Hipertexto).
Esta es la razón de que las páginas Web tengan como extensión de archivo .html o .htm así como los documentos de texto (ej Word) tienen la extensión .doc.
HTML se escribe en etiquetas o tags rodeadas de los signos de mayor y menor (<>). Todas la etiquetas tienen una apertura y un cierre que marcan el inicio y finalización de las características del objeto que encierran.

El ejemplo anterior nos muestra que el texto encerrado entre las etiquetas de apertura y cierre de strong aparecerá en negrita cuando lo veamos normalmente.

3g- Prototipado

2008-04-22T11:15:00.000-03:00

Significa elaborar modelos o prototipos del sitio Web y por lo tanto no es el producto final, pero sirve para observar si se van cumpliendo los objetivos de usabilidad y accesibilidad. Luego de implementado se desecha.

Según el grado de fidelidad o calidad del prototipo se distingue entre:

Prototipado de alta fidelidad: El prototipo será muy parecido al sitio Web una vez terminado.

Prototipado de baja fidelidad: El aspecto del prototipo distará bastante del que tenga el sitio Web final

3e- Tipos de enlaces Web

2008-04-21T18:35:00.006-03:00

Enlaces semánticos: Son enlaces entre páginas que tienen una relación de contenidos entre sí.

Ejemplo

Enlaces de navegación: Solo sirven para conectar páginas entre sí sin un relación explícita. Ej.: El enlace “Volver” o “Página inicial” o el camino recorrido en el sitio.

Ejemplo

3d- Navegación en un sitio web. Algunos consejos

2008-04-21T18:27:00.003-03:00

Se refiere a las formas de acceder a los distintos contenidos del sitio.

Debe tener las siguientes características:

Consistente: El sistema de navegación debe ser similar en todo el sitio en su ubicación y disposición en las páginas.
Uniforme: Deben de usarse los mismos términos en todas las páginas para que el usuario se sienta seguro que va donde desea.
Visible: El sistema debe distinguirse claramente dentro del sitio

También hay que considerar 2 elementos claves para la navegación:

Textual: La navegación se hace con elementos concretos: menú, guías y botones que digan con claridad la acción que van realizar.
Contextual: Elementos relevantes que permitan mostrar la navegación en pantalla.

3- Aspectos de Usabilidad

2008-04-21T18:18:00.012-03:00

Este tema hace referencia a varios elementos que debemos tener en cuenta para hacer un sitio usable:

a. Objetivo y público objetivo
b. Tipos de estructura de un sitio Web
c. Niveles en un sitio Web
d. Navegación en un sitio Web. Algunos consejos
e. Tipos de enlaces Web
f. Diseño lógico de un sitio Web
g. Prototipación

3c- Niveles de un Sitio Web

2008-04-21T17:54:00.004-03:00

Se refiere a distancia máxima para alcanzar un determinado documento dentro de un sitio Web. Es aconsejable no mas de 3 niveles.

3b- Estructura de un Sitio Web

2008-04-21T17:48:00.003-03:00

Es la forma que tendrá el Sitio Web con sus secciones, funcionalidades y sistemas de navegación.

Fuente: Crea tu Web

3f- Diseño lógico de un Sitio Web

2008-04-21T17:16:00.003-03:00

Luego de saber los objetivos se establece la organización lógica de las páginas del sitio Web y la información que irá en cada una de ellas.

Para el diseño lógico se utilizan metáforas que implica el uso de ejemplos concretos y familiares de la vida que sirvan luego en la estructura del sitio. Por ejemplo un árbol, libro, tienda, entre otros.

De la estructura lógica de un sitio surgen los mapas de navegación es decir la estructura que tiene mi sitio Web y sus interconexiones.

3a- Objetivo y público objetivo

2008-04-21T17:11:00.003-03:00

Enlace: " Los 4 perfiles de usuarios de Internet"

2- Usabilidad y Accesibilidad. Definiendo conceptos

2008-04-18T18:59:00.003-03:00

1.2 Elementos de una Página Web

2008-04-18T18:45:00.009-03:00

Fuente:
www.vectoralia.com/manual/html/elementos_web.html

1.3 Similitudes entre un comercio y un sitio Web

2008-04-18T18:28:00.004-03:00