12.176 cursos gratis
8.739.495 alumnos
Facebook Twitter YouTube
Busca cursos gratis:

Capítulo 12:

 Galerías de fotos

1. Porta Álbum Creator.

Porta Álbum Creator es una aplicación gratuita y portable que permite de una forma rápida y sencilla crear una galería de imágenes para publicar en internet.

Paso 1. Instalación de Porta Álbum Creator Windows

 

1. Visita la página oficial de este producto para descargar e instalar la versión más reciente:

http://www.stegmann.dk/mikkel/porta/

Navega por la página y casi al final dice “Download and History”, ahí encontraras otra leyenda que dice “Download the latest official version of Porta [v1.04, 606 KB] (Windows version packaged by NSIS)”. Justamente de ahí te lo descargas. Instálalo.

2. El programa se inicia al hacer doble clic sobre el archivo ejecutable: Porta.exe

 

Paso 2. Creación de la galería de imágenes.

1. Abre el programa Porta.

2. Se muestra el cuadro de diálogo buscar carpeta. En este cuadro abre busca donde guardaste la carpeta paisajes y selecciona la carpeta paisajes, las originales (las que bajamos de Internet, sin haber sido tratadas con GIM). Clic en el botón Aceptar.

                          fotos

3. En el cuadro de texto Title (Título) introduce el título de la galería. Por ejemplo: Paisajes de Agua. En Footer (Pie) teclea el texto que aparecerá en el pie de la página. Ejemplo: 20010 - curso páginas web 2.

          fotos

4. El programa Porta creará por defecto la galería en la carpeta álbum como una subcarpeta de la que contiene las imágenes originales. Si deseas modificar el destino de esta carpeta pulsa en el enlace change (cambiar). No obstante conviene conservar esta opción por defecto.

5. Puedes definir el texto descriptivo de cada imagen pulsando en el botón Edit Álbum. Esto mostrará un cuadro de diálogo donde se podrá elegir cada fotografía y escribir para cada una un texto en Major Caption que se mostrará al lado de la imagen y otro texto en Minor Caption que se mostrará como tooltip al situar el puntero del ratón sobre la imagen. Este paso es opcional. Clic en el botón Close (Cerrar).

       fotos

6. De regreso al panel principal de Porta pulsa en el botón Options (Opciones).

         fotos

7. En el panel Options puedes configurar distintos parámetros de la galería final. Los

más importantes son:

Language (Idioma). Selecciona el idioma Spanish (Español).

Use SimpleViewer as primary album viever. Usar SimpleViewer como álbum principal. Es importante marcar esta opción para que funcione adecuadamente. Si pulsas en el botón Options podrás configurar distintas opciones de color. Pon todo como en la figura siguiente.

        otos

8. Para terminar pulsa en el botón OK.

 

9. Para iniciar la creación de la galería pulsa en el botón Start (Inicio) en el panel principal de Porta.

10. Transcurridos unos segundos se habrá creado la galería. Desde este panel pulsa en el

botón Show Album (Mostrar Album). Podrás verlo en la figura siguiente a esta.

          fotos

 

 

 

 

 

        fotos

 

11. Para publicar la galería de imágenes es necesario subir vía FTP a una carpeta del servidor todos los archivos contenidos en la carpeta Album. El acceso a la galería se realizará por el archivo index.html y será necesario disponer del plugin de Flash para su correcta visualización.

2. Autoviewer.

1. Descarga la carpeta autoviewer desde esta dirección:

D:\MARILO\web 2

2. Utiliza el explorador de archivos para analizar la estructura de la carpeta autoviewer.

tos

3. Dentro de la subcarpeta imágenes encontrarás las imágenes originales del ejercicio anterior.

4. Para configurar la galería de forma manual abre el archivo gallerydata.xml con el

Bloc de Notas de Windows.

fotos

5. En este archivo XML puedes modificar el título de la galería si cambias el atributo title de que consta la etiqueta gallery. En este caso no has de hacerlo pues ya te lo doy hecho. Pero fíjate bien, como esta escrito, para cuando tengas que hacerlo tú. Ya tienes el modelo y sólo tendrías que modificar los nombres.

6. Observa que por cada archivo de imagen que tenemos en la subcarpeta images debe existir una etiqueta xml: <image>… </image>. Dentro de esta etiqueta se definen los siguientes parámetros:

filename. Es el nombre del archivo que contiene la imagen.

caption. Es el texto descriptivo que acompañará a la imagen en la galería.

width y height, son las dimensiones de la imagen.

7. Si deseas añadir más imágenes deberás incorporar esta etiqueta <image> …</image> al final del documento definiendo sus parámetros.

8. Para guardar los cambios selecciona Archivo > Guardar como…. Conserva el nombre, ubicación y tipo de archivo pero cerciórate de que la codificación del documento es UTF-8. Clic en el botón Guardar.

 

9. Para comprobar el funcionamiento de la galería de fotos haz doble clic sobre el archivo index.html contenido dentro de la carpeta autoviewer.

10. Se mostrará la galería dentro del navegador web por defecto.

    fotos

3. Galería de imágenes con Postcard Viewer.

 

1. Baja la carpeta poscardviewer de la dirección donde estaba el autoviewer.

2. Dentro de la subcarpeta images encontrarás las imágenes originales del ejercicio anterior.

3. Para configurar la galería de forma manual haz clic derecho sobre el archivo imagedata.xml y elige Abrir con… > Bloc de Notas de Windows.

             otos

4. Observa que por cada archivo de imagen que tenemos en la subcarpeta images debe existir una etiqueta xml: <image><name>… </name></image> en cuyo interior se coloca el nombre de archivo.

5. Si deseas añadir más imágenes deberás incorporar esta etiqueta <image>…</image> al final del documento definiendo el nombre del archivo.

6. Para guardar los cambios selecciona Archivo > Guardar como… Conserva el nombre, ubicación y tipo de archivo pero cerciórate de que la codificación del documento es UTF-8. Clic en el botón Guardar.

 

7. Para comprobar el funcionamiento de la galería de fotos haz doble clic sobre el

archivo index.html contenido dentro de la carpeta postcardviewer.

                         fotos

     otos

Nuestras novedades en tu e-mail

Escribe tu e-mail:



MailxMail tratará tus datos para realizar acciones promocionales (vía email y/o teléfono).
En la política de privacidad conocerás tu derechos y gestionarás la baja.

Cursos similares a Diseño páginas web. Insertar imágenes



  • Vídeo
  • Alumnos
  • Valoración
  • Cursos
1. Diseño páginas web con editor HTML
Diseño páginas web con Editor HTML , cuantas veces al visitar una Web , nos hemos... [02/03/10]
3.716  
2. Impedimentos del éxito de las páginas web
Una página web , conocida como página de Internet , es un documento adaptado para... [19/10/10]
353  
3. Adobe Flash. Insertar imágenes a la galería
En este video tutorial aprenderemos a acabar los apartados de nuestra... [24/09/10]
952
Curso con video

¿Qué es mailxmail.com?|ISSN: 1699-4914|Ayuda
Publicidad|Condiciones legales de mailxmail