Como subir un sitio a la Nube con FileZilla

Una vez que se ha concluido el trabajo de elaboración del Sitio, procederemos a subirlo a la red. Para ello y exclusivamente con fines educativos, vamos a localizar un Hosting gratuito.

Es necesario que sigas estrictamente las indicaciones que se te proporcionan para lograr resultados positivos en esta tarea, para ello realizaremos los siguiente:

1. Tener disponible una cuenta de correo en Gmail. 

2. Tener instalado el Navegador Mozilla firefox o bien Google Chrome.

3. Entrar a youtube y revisar el video tutorial para crear tu cuenta y subdominio en Hostinger https://www.youtube.com/watch?
v=t7gyZAuqUGQ  

4. Crear una cuenta nueva en http://www.hostinger.es/ 

5. Revisar tu cuenta de correo de Gmail.

6. Verificar si ya tienes un mensaje de confirmación de registro.

7. Activar tu cuenta haciendo clic en el link del mensaje de confirmación que recibiste en tu bandeja de correo electrónico.

8. Crear un subdominio en http://www.hostinger.es/ de acuerdo con las instrucciones del video tutorial.

9. Revisar el video porque se puede subir el sitio de forma directa a través de la opcion administrar y hacer clic en administrador de archivos.

La otra opción, una vez creado el subdominio procedan a trabajar con:

A. Bajar e instalar el Filezilla  http://filezilla.softonic.com/descargar

B. Entrar a youtube y revisar el tutorial que te permitirá subir tú pagina web  http://www.youtube.com/watch?v=tfJ5V-auCII

C. Proceder a subir el sitio a la Internet

En forma particular y después haber realizado la investigación al respecto, recomiendo trabajar en Hostinger.es que ofrece un hosting gratuito de hasta 2 Gb de espacio, para ello,  deberás crear una cuenta, accesando tus datos. Requieres tner activa tu cuenta de correo electrónico de Gmail en donde recibirás un mensaje para activar tu cuenta y proceder a generar el dominio correspondiente.

Es importante ver el video tutorial de youtube, pues ahi se explica paso a paso el proceso para subir tu sitio a la red, para ello debes  poner toda la atencion necesaria para lograr el resultado esperado.

Otros videos que recomiendo,  aunque la cuenta no se genera en el mismo Host, si explican como se trabajan los archivos en el Filezilla, lo que puede dar una perspectiva mas amplia sobre el proceso de subir el sitio a la nube:

 

Este es el último paso, donde el resultado será poder visualizar tu sitio en la nube, confirmando con ello el buen trabajo desarrollado en este curso.

"No permitas que las circunstancias te venzan, si crees que puedes" !puedes¡

Elaborando una página de videos con Dreamweaver

Estamos llegando a una de las partes más atractivas del Sitio que se esta creando, esta página será creada de la misma forma en que se generó la página de música, solo que ahora trabajaremos la Página de Videos de 4 diferentes formas.

Si observas la imagen que se creo para darte una idea de como se colocarían los videos, puedes descubrir, cuatro formas de insertar tus videos:

1. Videos que se ligarán de http://www.youtube.com/index?gl=MX
2. Videos que colocarás dentro de la carpeta de VIDEOS de tu Sitio y los ligarás a una imagen del video
3. Videos que enlazarán a partir del título o nombre del video, y
4. Videos que insertarás como plug-in 

Entonces los procedimientos serán los siguientes:

PRIMERO:

1. Visita www.Youtube.com y selecciona el video a enlazar
2. Haz clic en el boton de COMPARTIR y después clic en INSERTAR y  copia el embed del video
3. En el marco principal inserta una capa y observa que el cursor este parpadeando dentro de ella
4. Da clic en la pestaña de Código
5. Localiza la ubicación del Cursor y procede a Pegar el código Embed del video seleccionado
6. Da clic en la pestaña de Diseño para visualizar el video que se ha enlazado
7. Da clic en Archivo y selecciona Guardar todo
8. Abre la página de Videos para ver si se inserto correctamente el video

SEGUNDO:

1. Visualiza en pantalla completa el video a enlazar
2. Obtén una imagen del video que con el que estas trabajando
3. Coloca el archivo de video dentro de la carpeta de Videos de tu Sitio Web
4. Inserta una capa dando clic en Insertar / Objeto de Diseño / Capa
5. Inserta la imagen dando clic en Insertar / Imagen
6. Selecciona la imagen que haz insertado
7. Dirigete a la parte inferior de tu pantalla en Propiedades
8. En el apartado de Vínculo, da clic en la Carpeta
9. Se abrirá la ventana de Insertar Archivo
10. Selecciona el archivo de video y da clic en Aceptar
11. Al regresar a DreamW encontrarás que el nombre del archivo ya esta en la casilla correspondiente

TERCERO:

1. Copia el archivo de video dentro de la carpeta de Videos de tu Sitio Web
2. Inserta una capa y dentro de ella escribe el título o nombre del video
3. Selecciona el título o nombre del video 
4. Cumple los pasos del 7 al 11 de la SEGUNDA opción

CUARTO:

1. Copia el archivo de video dentro de la carpeta de Videos de tu Sitio Web
2. Inserta una capa
3. Da clic en INSERTAR / MEDIA / PLUGIN
4. Se abrirá la ventana de Seleccionar Archivo
5. Selecciona el archivo de video que vas a insertar y da clic en Aceptar
6. Aparecerá en tu pantalla un cuadro gris con una pieza de rompecabezas
7. Solo debes de ampliarla al tamaño deseado
8. Al visualizarla en el navegador encontrarás los botones de un reproductor de video

Mi sugerencia es que solo apliques tres de las formas de insertar video en la página respectiva, de esta manera se estará demostrando la competencia adquirida en el manejo de los videos en el DreamW.

"El talento, en buena medida, es una cuestión de insistencia"

Creando una Página de Música con DreamWeaver

Para ello, procede a elaborar, dentro del Sitio que estamos creando,  una página nueva, de la misma forma en que se han generado las anteriores, esto es:

ARCHIVO / NUEVO / CONJUNTO DE MARCOS / SUPERIOR ANIDADO / CREAR

Es importante que copies los archivos MP3 en la carpeta de MUSICA que se encuentra dentro del Sitio, misma que contendrá todas  las canciones que se van a incluir en esta página.

Recuerda que el marco superior es donde se colocará el banner flash que indicará que se trata de la página de música, misma que debes mejorar colocando dos imágenes .GIF o FLASH flanqueándolo a la izquierda y a la derecha, respectivamente.

Hecho lo anterior, procede a trabajar en el marco principal realizando lo siguiente:

 Coloca dentro de una capa una imágen de la portada del Disco que vas a referir:

1. A la derecha, coloca otra capa y dentro de ella elabora una lista de las canciones que le corresponden al disco.
2. Ahora, selecciona el título de una canción.

Dirígete a la parte inferior de la ventana de Dreamweaver y en Propiedades localiza la opción Vínculo.

1. Da clic en la carpeta de la derecha para que se abra la ventana de Seleccionar Archivo.
2. Localiza dentro de la carpeta de MUSICA el archivo MP3 que corresponde al título seleccionado.
3. Al dar clic en el botón de Aceptar, regresarás a las Propiedades de Dreamweaver.
4. Encontrarás que la liga o link del archivo MP3 ya esta presente.

“Pregúntate si lo que estas haciendo hoy te acerca al lugar en el que quieres estar mañana”

Crear un Álbum de fotos con DreamWeaver

Ahora vamos  a Crear un Álbum de Fotos Web, con la intervención del programa Macromedia Fireworks MX 2004,  para ello necesitarás tener una carpeta que contenga todas las imágenes que se van a incluir en el Álbum.

Identificada la carpeta mencionada anteriormente, procederemos de la siguiente manera:

Nos vamos al menú Comandos y selecciona la opción Crear álbum de fotos web del menú emergente.

Se abrirá la ventana de dialogo Crear álbum de fotos web, donde se van a llenar varios campos. Los más destacados son:


Título del álbum de fotos: Este es el que se desplegará en la parte superior de la ventana del álbum de fotos, según se aprecia en la imagen ejemplo.

Carpeta de imágenes de origen: Este campo se refiere a la ubicación de las imágenes que se desean colocar en el Álbum, esta carpeta probablemente se encuentra en tu dispositivo de almacenamiento USB, es decir, fuera del Sitio.

Carpeta de destino: Este campo se refiere a la ubicación de la carpeta donde se colocarán las imágenes seleccionadas anteriormente (imágenes de origen), esta carpeta debe ser creada dentro del Sitio. Para ello sugiero generar una nueva carpeta llamada ALBUM.

Tamaño miniatura: Este apartado se refiere al tamaño de las imágenes miniatura o thumbnails, éstas servirán de vista previa a los visitantes, las opciones que presenta este apartado son:

36 x 36 píxeles, 72 x 72 píxeles, 100 x 100 píxeles, 144 x 144 píxeles, 200 x 200 píxeles

Formato de miniatura: Este apartado se refiere a la extensión que utilizarán las imágenes miniaturas o thumbnails, ésta extensión implica una calidad en las imágenes y el número de colores en las mismas.

Formato de Foto: Implica las mismas consideraciones que el apartado anterior, pero esta vez está aplicada a las imágenes tamaño real.

Al finalizar el rellenado de los campos, deberás dar clic en la opción Aceptar. Esta acción hará un llamado a Macromedia Fireworks MX 2004 y comenzará el Progreso de la operación por lotes, es decir, Macromedia Fireworks comenzará a procesar todas las imágenes que se encuentran en la Carpeta de imágenes de origen.

Luego que Macromedia Fireworks termine el Progreso de operación por lotes, se le indicará en Macromedia Dreamweaver que el Álbum de Fotos Web se ha creado con éxito!

Si observas a tu derecha el panel  de Archivos, podrás darte cuenta que Macromedia Fireworks creó dentro de la Carpeta de Destino (Álbum en el ejemplo) tres carpetas más y un fichero de extensión .htm:

• Images (Carpeta que contendrá todas las imágenes de origen en su tamaño original).
• Pages (está carpeta se creará si usted activó la casilla de verificación Crear página de navegación para cada foto, esta opción es recomendable marcarla, le dará más presencia a su Album de Fotos Web).
• Thumbnails (Carpeta que contendrá todas las imágenes en miniatura).
• Index.htm (Archivo que contendrá la portada de su Álbum de Fotos Web). 

De esta forma estarás concluyendo tu Álbum de fotos Web en Dreamweaver.

"Todos los días se puede aprender algo nuevo, hay que tener la mente abierta y estar dispuesto"

Open publication - Free publishing - More album

La Página Principal del Sitio DreamW

Los requisitos mínimos que vamos a respetar para elaborar la página principal del sitio que se creará son los siguientes:

1. Fondos 
2. Banner Flash
3. Imagen 1 y 2 
4. Marquesina
5. Barra Separadora
6. Imagen Rollover
7. Bienvenida
8. Botones 
9. Mailto
10. Slideshow flash

Si sigues las instrucciones que se te han venido propocionando tanto en clase como en los prontuarios, seguramente  lograrás alcanzar este objetivo.

En el caso del punto 3 imagen 1 y 2, las puedes tratar con el PhotoScape v3.5, para hacer una .GIF de fotografias que vayan "deslizandose", esto le dará más vista a tu trabajo. 

Para el punto 4 insertar la marquesina, te sugiero lo siguiente:

•  Escribe el mensaje en la parte superior izquierda del marco donde lo vayas a colocar
• Selecciona el texto
• Da clic en la etiqueta de Código
• Localiza el mensaje que seleccionaste
• Coloca los códigos respectivos
• <MARQUEE> <H2> <FONT COLOR="BLUE"> MENSAJE </FONT COLOR> </H2> </MARQUEE>
• Regresa a la etiqueta de diseño
• Procede a Guardar Todo, para visualizar tu trabajo en el Navegador 

Para cumplir con el punto 10, se puede emplear  el QSSsetup-slideshow, que te permite generar un archivo .SWF con varias fotografias a las que puedes aplicar un efecto de entrada y uno de salida, tambien es posible aplicar música de fondo, etc. de tal manera que tu trabajo vaya siendo mas atractivo. Para agregarlo a la página principal, solo debes realizar el mismo proceso que aplicaste para colocar un banner  flash.

Una vez que ya hayas elaborado la página principal, puedes iniciar la siguiente página, procediendo de esta manera:

ARCHIVO / NUEVO / CONJUNTO DE MARCOS / 

 Ahora puedes seleccionar el siguiente estilo:

 SUPERIOR ANIDADO

Esto es considerando que solo se va a colocar un banner en el marco superior y en el marco inferior se realizará el despliegue de la información o elementos gráficos según se trate el tema. En el caso de la página de información o biografía, es recomendable poner en una tabla la información.

INSERTAR / OBJETO DE DISEÑO / CAPA

 INSERTAR / TABLA 

Recuerda incorporar un botón para regresar a la página principal en la parte inferior izquierda de tu nueva página, tal y como se muestra en el ejemplo.
 
Al momento de guardar, sugiero que el conjunto de marcos lleve el nombre que le corresponde al botón con el que se vinculará   y los demas marcos tendrán el mismo nombre mas el número respectivo.

"Aquel que posee la fortaleza de superar los obstaculos tiene la fuerza para superar la adversidad"    Albert Schweitzer

Trabajando en Dreamweaver 8

Una vez que ya creaste un Sitio Web en Dreamweaver 8, puedes empezar a colocar los objetos que previamente hayas seleccionado para cada marco generado, es decir, el banner, los botones, las imagénes, etc.

Para ello no olvides que debes colocar primero una capa y dentro de ella el objeto que pretendas.

INSERTAR / OBJETO DE DISEÑO / CAPA 

 De tal manera que puedas guiarte por la cuadrícula para que los elementos queden bien alineados en cada marco.

Pero si tu sitio ya ha sido creado y lo que deseas es volver a abrirlo para continuar trabajando en él, solo debes de seguir un proceso muy sencillo.

Open publication - Free publishing - More abrir

Aunque mi recomendación es que dediques tu computadora a elaboración del Sitio, sin estarlo moviendo a otras PC's, pues corres el riesgo de que las ligas de los elementos que coloques se rompan y será necesario volver a colocarlos, generándote más trabajo  del necesario.

Para elaborar los banner del título de cada página que conformará tu Sitio, te recomiendo que utilices un software llamado Goldshell FlaX v5.0.1, que crea banners flash que le darán a tu Sitio mayor atractivo para los visitantes.


No olvides revisar el prontuario de Dreamweaver para poder colocar imagenes rollover o de sustitución en tu Sitio, que una vez insertada la capa el procedimiento es:

INSERTAR / OBJETOS DE IMAGEN / IMAGEN DE SUSTITUCION 

 Para manejar los botones flash en tu Sitio, solo debes de colocar la capa y proceder como sigue:

INSERTAR / MEDIA / BOTON FLASH 

Entonces se abrirá la ventana llamada Botón Flash y podrás elegir el botón que más se acople a las necesidades del Sitio, colocarle un texto  o título  y seleccionar tipo de fuente y tamaño. Posteriormente cuando ya elabores las demás páginas de tu Sitio podrás establecer el vínculo de tu botón con la página correspondiente.

Para agregar correctamente todos los elementos multimedia que debe de llevar una página web te sugiero que revises la parte tres del prontuario que estamos siguiendo para realizar cada una de las acciones en tu trabajo con Dreamweaver.

"La energía y el trabajo obstinado superan y vencen los mayores obstáculos"   

Open publication - Free publishing - More notas

Elaborando banner para tu web

Recomendaciones previas al trabajo en Dreamweaver

Antes de iniciar tu trabajo en el desarrollo de la página web en Dreamweaver, te recomiendo que cumplas los siguientes pasos:

1) Selecciona cuidadosamente el TEMA a tratar en tu Sitio Web, es necesario que para ello, tomes en cuenta que debes de incluir, información textual, imágenes, música y videos, centrando tu atención en que el trabajo debe de ser atractivo visualmente para poder obtener  totalmente el interés del usuario.

2)  Elabora un diseño previo o maquetado en papel o en una presentación electrónica, que te de una mejor idea de como deben de quedar acomodados los diferentes elementos (texto, imagen, videos, musica, etc.) que vayas a manejar tanto en la página principal de su Sitio Web como en las demás páginas que generarás. Para ello debes de tomar en cuenta la forma en que se conformarán los marcos de tu página principal, por ejemplo:

3) Genera en tu unidad de almacenamiento USB una carpeta principal que bien puede llamarse PAGINA_WEB y dentro de ella crea las siguientes carpetas:

• Fondos Web
• Barras o Separadores Web 
• Botones 
• Imágenes JPG
• Imágenes GIF
• Música MP3
• Videos
• Información Textual (Archivos DOC, PDF, XLS)
• Presentaciones (PPT, PPS) 
• Elementos FLASH

4) Ahora empieza a guardar en ellas los elementos que utilizarás en tu sitio Web de acuerdo al tema seleccionado.  Te sugiero que para mayor facilidad las renombres  v.gr: fondo1, fondo2, fondo3, etc., barra1, barra2, barra3, etc., imagen1, imagen2, imagen3, etc., esto te ayudará a colocarlas sin  dificultades dentro de tu sitio, y ubicarlas en la carpeta según corresponda, de acuerdo al maquetado o diseño previo que hayas realizado.

"La Actitud que asumas respecto de tu trabajo, es la que te llevará a lograr resultados positivos"

Trabajando con Dreamweaver

Después de la excelente experiencia adquirida en el uso del Lenguaje HTML, para elaborar páginas web, ahora vamos a trabajar en  la tercera de las competencias profesionales que te pide aprendas a desarrollar una página web con software de aplicación, en este caso el Dreamweaver. Esta nueva experiencia te dará una mejor perspectiva de lo que es elaborar una página web y considero que encontrarás muy sencillo todo el proceso una vez que logres descubrir la lógica en la forma de agregar los elementos que deseas se muestren en tu página.

En esta oportunidad será necesario revisar Tutoriales tanto escritos como en video para tener una mayor perspectiva sobre  la forma de crear una página web, para ello te proporcionaré un prontuario que te muestra la forma de crear el sitio en Dreamweaver, así como la manera de incrustar los elementos que desees (imagen, música, video, texto, etc.) en tu página web. 

También se requiere que descubras la forma de utilizar otros plug-ins de software que te permitan manejar  diferentes elementos sobre todo en Flash que le darán  mayor calidad al trabajo que realizarás en la página web.

Esta nueva experiencia te convertirá en Webmaster, es decir, en el responsable de la programación y mantenimiento de tu propio sitio web. Adelante con tu nueva experiencia de aprendizaje.

¡¡En la enseñanza... la parte más importante está en la actitud del alumno!! 

Prontuario Parte 1

Open publication - Free publishing - More notas

Open publication - Free publishing - More camino

Prontuario Parte 2

Open publication - Free publishing - More notas

iniciando mi trabajo en dream8

Mejorando mi Página Web

Una vez que has logrado elaborar las dos páginas web empleando el Lenguaje HTML, es importante que experimentes  la forma de agregarles música así como imágenes animadas .GIF con varias fotografías  mismas que puedes  elaborar con el software de PhotoScape.

También puedes agregarle videos, en este caso te sugiero que establezcas  enlaces  de www.youtube.com, lo que te permitirá tener una mejor perspectiva de lo que significa agregarle elementos interesantes y atractivos a tu sitio web.

Es importante que recuerdes que cuando visites el sitio de Youtube y selecciones un video, al pie del mismo se encuentra la opción de Compartir, al darle clic  se abrirá el vínculo al video que hayas seleccionado y más abajo  de la URL aparecerá el botón Insertar, si le das clic se despliega una codificación o embed, misma que debes  copiar para dirigirte a tu página web y colocar el video en el lugar que desees, dándole la opción de pegar. Por Ejemplo:

<CENTER>

<iframe width="320" height="215" src="http://www.youtube.com/embed/jtLCvXl_k3k" frameborder="0" allowfullscreen></iframe>

</CENTER>

También podrías colocarle una marquesina que se mueva en forma alterna o bien de derecha a izquierda y a la inversa. Para darle ese efecto la instruccion es:

<MARQUEE BEHAVIOR="ALTERNATE"> mensaje </MARQUEE>

Ahora procede a enlazar ambas páginas, para ello te sugiero coloques una especie de botón en la página 1 que puede tener la leyenda de "siguiente" y en la página 2 coloca un botón con la leyenda de "regresar", hecho lo anterior debes de anteponer a la línea de las imágenes la liga correspondiente, como por ejemplo:

  <A HREF="PRACTICA.HTML"> <IMG   SRC="BOTON.GIF"></A>

Open publication - Free publishing - More code

"Profesional es aquel que hace que lo difícil parezca muy fácil"