8.3 SUBIENDO PÁGINA PRINCIPAL A TU SERVIDOR WEB (AUTOEVALUACION)

8.3 SUBIENDO PÁGINA PRINCIPAL A TU SERVIDOR WEB  (AUTOEVALUACION- ACtividad final) 

Todo espacio web, debe contener una página principal con el nombre index.html para poder mostrar todo el contenido.

ACTIVIDAD 10:

Como úlmita actividad del curso, queda subir la página web creada, junto con su respectiva página principal (index.html)

Recuerda subir todo en el mismo orden de carpetas como lo tienes en tu carpeta local, y debe quedar igual en el servidor web.

8.2 HIPERVÍNCULOS

8.2 HIPERVÍNCULOS

En temas anteriores como powerpoint, recordarás la palabra "hipervínculo", que es una referencia de un texto o imagen, que al dar clic, te muestra alguna información contenida el mismo documento (interno) o en otro lugar fuera del documento o en internet (externo).

Para poder realizar un hipervínculos en un marco y que se muestre en otro marco, es necesario realizar la actividad siguiente:

ACTIVIDAD 9: De el mismo ejercicio anterior, seguir con los pasos que se muestran a continuación

1. Abrir cada uno de los temas que se mostrarán en la parte del marco derecho (contenido)

Por ejemplo, mi página contiene el archivo "Introducción a la computación básica".

Al abrirlo, ir al primer tema, sombrearlo o ponerse al inicio de la letra del tema. Después ir al menú "Insertar" --> "Anclaje con nombre"

2. Ponerle un nombre a ese tema (no debe comenzar por numero, y no debe tener espacios)

agregar anclaje con nombre a todos los temas contenidos de cada página.

Los temas de cada página deben indicar que tienen anclaje con nombre, con un icono de carpeta:

Guardar las páginas.

3. Abrir el archivo "index.html". Y sombrear el texto del primer tema, y clic en el botón "insertar hipervínculo".

4. Buscar el archivo al que hará referencia.

 

5. Al final del texto que se puso el vínculo, agregar el signo gato ( # ) y seguido el nombre de anclaje que le diste en su respectivo archivo.

Por ejemplo, en mi archivo "computacion_basica.html", al primer tema, le di de nombre de anclaje "cb_tema". Es por eso le agrego al final "#cb_tema".

Continuar así agregando hipervínculos al marco de temas, y agregando al final # seguido del nombre que le diste al respectivo tema.

6. Esto es con el objetivo de que al tener la página completa index.html en el marco "temas", dar clic un tema, y en el marco "contenido", me muestre sólo la parte del respectivo tema al que le he dado clic.

VIII. ORGANIZANDO CONTENIDO WEB

VIII. ORGANIZANDO CONTENIDO WEB

Una forma muy organizada para presentar una información que contiene grandes puntos a tratar, o un material educativo, etc., es mediante marcos e hipervínculos.

¿Que es un marco? Es una página que contiene otras páginas, y se unen para dar esa buena presentación.

8.1 MARCOS

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 logotipo y la barra de navegación, mientras que otras sí pueden cambiar. Además de mejorar la funcionalidad, pueden mejorar también la apariencia.

Un ejemplo de página html con marcos es ésta:

Que contiene todo el material visto en el curso "Computación Básica". (dirección web: http://vianey-neysmall.webcindario.com)

Cada uno de los marcos de una página, contiene un documento HTML individual. Por ejemplo, en la imagen de la derecha puedes ver una página con dos marcos. 

Por ejemplo:

El marco superior, es una página llamada "encabezado.html".

El marco izquierdo, es una página llamada "temas.html"

El marco derecho, es una página llamada "contenio.html"

El marco superior contiene datos de la dependencia ó lugar en donde se creó la página.

El marco izquierdo contiene los temas contenidos en el material publicado.

El marco derecho es una página en blanco en donde se mostrará la información que se le de clic del marco izquierdo.

8.1.1¿CÓMO CREAR UN MARCO?

ACTIVIDAD 8: Elige un tema a tratar en una página web y sigue los pasos que se muestran para crear un marco

1. Abrir un archivo nuevo HTML

2. Inserta un marco superior: "Insertar" --> "HTML" --> "Marcos" --> "Superior"

3. Escribe un nombre al marco superior

4. Inserta un marco a la izquierda: "Insertar" --> "HTML" --> "Marcos" --> "Izquierda"

5. Escribe un nombre al marco izquierdo

6. Guarda todas las páginas unidas: "Archivo" --> "Guardar todo".

7. Guárdalo con el nombre "index" (index.html es el nombre que debe llevar la página que unirá todas las páginas)

8. Ahora guarda el resto de las páginas unidas, el nombre de archivos HTML contenidos te los pedirá en seguida de guardar "index.html", y te indicará con con líneas punteadas, cual página se está guardando:

9. Da clic a uno de los bordes que separan las páginas, y especifica el ancho preferido

10. Al dar clic en cada página, se muestra su nombre HTML correspondiente:

 

 

11. Ahora hay que escribir el título de cada página:

 

12. Ahora comenzar a editar las páginas (Marco superior, descripcion breve a tratar la página. Marco izquierdo temas que comprenderá la página)

13. Para tener más visibilidad en el marco izquierdo (temas), es necesario insertar una barra de desplazamiento.

Para ello, da clic sobre uno de los bordes que dividen las páginas, y da clic en "Dividir", para tener vista de diseño y cógido a la vez.

Ubica la línea que corresponde al marco izquierdo (temas), y cambia de Scrolling="No" , a Scrolling ="Si"

De modo que la línea quede así:

Guarda cambios, actualiza o vuelve a cargar la página, y ahora se muestra la barra de desplazamiento, que ahora te permite ver todo el contenido.

VII. INSERTAR UN AUDIO DE FONDO

VII. INSERTAR UN AUDIO DE FONDO

Es posible poner un audio de fondo en una página web, ya sea un audio adecuado o relacionado al tema contenido en la página web, o bien para poner un audio con letra, un audio instrumental, etc...

Un ejemplo muy sencillo es el siguiente:

ACTIVIDAD 7:

1. Copiar de internet la letra de alguna cancion y ponerla en una página web (con imagen y fondo de página)

2. Cuando ya esté creada la página, insertar plug-in: "Insertar" --> "Media" --> "Plug-in"

3. Buscar y dar clic en el audio que se va a colocar de fondo

4. Probar la página.

5. Si se escucha el audio, y todo funciona bien, entonces, sube el archivo, el audio y las imagenes a tu hosting, y recuerda subirlos a sus mismas carpetas (igual que en donde las tienes localmente) para que se vea a público:

comprueba aquí

VI. INSERTAR UN VÍDEO EN UNA PÁGINA WEB

VI. INSERTAR UN VÍDEO EN UNA PÁGINA WEB

En páginas anteriores a éste material, has encontrado algunas páginas, ejemplos con un video insertado.

¿Cómo realizarlo? Primeramente, para no saturar con bastante espacio tu almacenamiento gratuito, lo más recomendable es crear una cuenta en páginas de alojamiento de video, como uno de los más conocidos que es youtube

Youtube también es gratuito.

Youtube puede restringir o cancelar tu cuenta si alguna vez llegas a subir videos no autirizados o con actos de violencia, protegidos con derechos de autor, etc..., por lo tanto, sólo debes subir videos tuyos.

¿Cómo crear una cuenta en youtube?

ACTIVIDAD 6: Realiza el procedimiento siguiente para crear tu cuenta gratuita en youtube y subir tu vídeo (vídeo creado en ejercicios anteriores):

1. Entra a la página http://www.youtube.com/

2. Para crear una nueva cuenta, da clic aquí y comienza a capturar tus datos para registrarte.

3. Una vez creada tu cuenta, ahora es posible subir tus videos, dando clic en "Acceder", para entrar a tu cuenta

capturar tus datos (correo electrónico y contraseña) para entrar a youtube:

4. Estando dentro de tu cuenta, ahora clic en "subir".

5. Arrastra el video de la PC a la ventana, ó da clic para buscar el video en la PC

y mas abajo, selecciona si tu video lo quieres compartir (público) ó si sólo tu lo puedes ver (privado)

6. Mientras el archivo se está subiendo, puedes rellenar los datos que te pida.

7. Espera a que la carga de subida llegue al 100% para que te muestre la dirección web en la que estará disponible el video.

8. Una vez que tengas tu video disponible en Youtube, ahora puedes compartirlo en tu página web creada. Para ello, crea una página web (con texto e imagenes y color o imagen de fondo).

9. Situarte y dar clic en la parte dónde deseas agregar el video:

10. Ir a la página en donde está el video, y dar clic en "Compartir"

11. Ahora dar clic en "insertar vínculo":

13: Copiar el código que se muestra:

14. Regresar a dreamweaver, sin mover el cursor de donde diste clic, y ahora mostrar la vista de "dividir", para pegar el código en donde esté situado el cursor, pero en la parte del "código"

15. una vez copeado el código, agregar al vínculo "http:"

De modo que quede la direccion web completa

http://www.youtube.com/embred/y23_GAeFxMs

Y al subir la página e imagenes a la web, ésta página se muestra así: