La página del programa SWISH cuenta con una serie de plantillas en flash que podremos descargarnos para trabajar con ellas en la versión del programa que tengamos instalado.
Para ello, debemos acudir aquí y pinchar en la pestaña community---movies. Nos aparecerán una serie de películas generadas con swish y organizadas por secciones, de las que deberemos elegir si queremos una página completa, un menú, una animación... Una vez que entremos en la categoría que queramos aparecerán varias películas(en las diferentes versiones del programa, que nos especificará en el mismo nombre del archivo). Sólo tenemos que pinchar en las que pertenecen a nuestra misma versión del programa y podremos ver el aspecto de la película, después se nos da la opción de descargarlo para poder modificarlo posteriormente abriendo el documento con el programa de swish que tengamos.
25 de mayo de 2009
14 de mayo de 2009
TUTORIAL SWISH 2.0
Swish es una herramienta fácil de usar que permite producir en pocos minutos
complejas animaciones con texto e imágenes en formato SWF para el reproductor
de Flash.
En este tutorial vamos crear paso a paso un sencillo documento multimedia que
contenga título animado, texto, imagen y un enlace.
1. TÍTULO ANIMADO.
1. Abre Swish haciendo doble clic en su icono del escritorio
2. Elige Archivo > Nuevo.
complejas animaciones con texto e imágenes en formato SWF para el reproductor
de Flash.
En este tutorial vamos crear paso a paso un sencillo documento multimedia que
contenga título animado, texto, imagen y un enlace.
1. TÍTULO ANIMADO.
1. Abre Swish haciendo doble clic en su icono del escritorio
2. Elige Archivo > Nuevo.
3. En el panel Película define las propiedades de tu película. Cambia el Ancho a
700, la Altura a 450 y la Velocidad de Fotogramas a 15. Asegúrate de que el
Color de Fondo está fijado en Blanco.
700, la Altura a 450 y la Velocidad de Fotogramas a 15. Asegúrate de que el
Color de Fondo está fijado en Blanco.
4. Pulsa sobre el botón Ajustar Escena en Ventana para ajustar el lienzo al
tamaño de la ventana de diseño.
tamaño de la ventana de diseño.
5. Pulsa el botón Insertar Texto situado en la barra de herramientas. Verás que
la palabra “Texto” aparece en el centro del escenario.
la palabra “Texto” aparece en el centro del escenario.
6. En el panel Texto borra la palabra Texto y sustitúyela por la frase “Albert
Einstein”. Cambia el tamaño de la letra a 48 puntos.
Einstein”. Cambia el tamaño de la letra a 48 puntos.
7. En la Línea de Tiempo, haz clic en el fotograma cero de la fila “Albert Einstein”.
Sobre la línea de tiempo, a la izquierda, pulsa el botón Añadir efecto y
selecciona el efecto Aparición.
Sobre la línea de tiempo, a la izquierda, pulsa el botón Añadir efecto y
selecciona el efecto Aparición.
8. Se muestra el cuadro de diálogo Aparecer Opciones. Configura las distintas
opciones: 9.1) Quita la marca Continuar desde efecto anterior 9.2) En la
pestaña Comenzar en, selecciona Escala X > Factor de Escala e introduce
un valor 20 en la casilla %. 9.3) En la pestaña Movimiento selecciona Escala
X > Redimensionar al 100 % .
opciones: 9.1) Quita la marca Continuar desde efecto anterior 9.2) En la
pestaña Comenzar en, selecciona Escala X > Factor de Escala e introduce
un valor 20 en la casilla %. 9.3) En la pestaña Movimiento selecciona Escala
X > Redimensionar al 100 % .
9. Pulsa el botón Cerrar para aceptar los valores de configuración del panel
Aparecer Opciones.
10. Haz clic en el fotograma 15 de la fila “Albert Einstein”. Pulsa el botón Añadir
efecto y selecciona la opción Desaparición. En el cuadro de opciones
Duración introduce 5 fotogramas. Clic en Cerrar.
11. Para ver la animación resultante pulsa el botón Reproducir Película en la
barra de herramientas. El título se muestra en bucle. Pulsa el botón Parar para
detener el movimiento.
Aparecer Opciones.
10. Haz clic en el fotograma 15 de la fila “Albert Einstein”. Pulsa el botón Añadir
efecto y selecciona la opción Desaparición. En el cuadro de opciones
Duración introduce 5 fotogramas. Clic en Cerrar.
11. Para ver la animación resultante pulsa el botón Reproducir Película en la
barra de herramientas. El título se muestra en bucle. Pulsa el botón Parar para
detener el movimiento.
12. Para guardar el archivo que contiene la película, pulsa el botón Guardar
película de la barra de herramientas (tiene el icono de un disco). En el cuadro
de diálogo Guardar como escribe mipeli en Nombre de archivo y pulsa en
Guardar. Tu animación será guardada como un archivo de extensión .SWI que
podrá ser abierta en el futuro para continuar con su edición.
2. IMPORTAR UN ARCHIVO DE TEXTO.
En este apartado vamos a añadir un cuadro de texto a tu película. La información
será extraída de un archivo de texto externo.
1. Abre la película creada en el apartado anterior mediante Archivo > Abrir.
2. Haz clic en el botón Insertar contenido. En el cuadro de diálogo Abrir,
busca la carpeta einstein situada dentro de la carpeta Curso Flash que has
instalado en tu equipo al inicio de este curso. Elige el archivo de texto
einstein.txt.
película de la barra de herramientas (tiene el icono de un disco). En el cuadro
de diálogo Guardar como escribe mipeli en Nombre de archivo y pulsa en
Guardar. Tu animación será guardada como un archivo de extensión .SWI que
podrá ser abierta en el futuro para continuar con su edición.
2. IMPORTAR UN ARCHIVO DE TEXTO.
En este apartado vamos a añadir un cuadro de texto a tu película. La información
será extraída de un archivo de texto externo.
1. Abre la película creada en el apartado anterior mediante Archivo > Abrir.
2. Haz clic en el botón Insertar contenido. En el cuadro de diálogo Abrir,
busca la carpeta einstein situada dentro de la carpeta Curso Flash que has
instalado en tu equipo al inicio de este curso. Elige el archivo de texto
einstein.txt.
3. Se crea automáticamente una capa en la línea de tiempo con un cuadro de
texto que muestra el contenido del archivo elegido. En el cuadro de diálogo
Texto selecciona como tamaño de la fuente 12 y alineación izquierda.
4. Pincha y arrastra el cuadro de texto sobre el escenario para situarlo
adecuadamente en el margen izquierdo.
5. Para que su información sea visible a partir del fotograma nº30, por
ejemplo, haz clic en este fotograma en la fila que contiene este nuevo
cuadro.
6. Pulsa el botón Añadir efecto y elige Colocar. De esta forma su contenido
sólo se mostrará cuando la cabeza lectora alcance este fotograma y no
antes. Pulsa el botón Cerrar
7. Clic derecho sobre el fotograma nº30 en la línea Escena 1, y elige la opción
Parar. De esta forma la película se detendrá en este fotograma para que el
usuario pueda leer su contenido.
texto que muestra el contenido del archivo elegido. En el cuadro de diálogo
Texto selecciona como tamaño de la fuente 12 y alineación izquierda.
4. Pincha y arrastra el cuadro de texto sobre el escenario para situarlo
adecuadamente en el margen izquierdo.
5. Para que su información sea visible a partir del fotograma nº30, por
ejemplo, haz clic en este fotograma en la fila que contiene este nuevo
cuadro.
6. Pulsa el botón Añadir efecto y elige Colocar. De esta forma su contenido
sólo se mostrará cuando la cabeza lectora alcance este fotograma y no
antes. Pulsa el botón Cerrar
7. Clic derecho sobre el fotograma nº30 en la línea Escena 1, y elige la opción
Parar. De esta forma la película se detendrá en este fotograma para que el
usuario pueda leer su contenido.
8. Pulsa en el botón Reproducir película en la barra de herramientas para
comprobar el correcto funcionamiento de la película.
9. Elige Archivo > Guardar para grabar los cambios introducidos en el
documento.
3. IMPORTAR UNA IMAGEN.
1. Sitúate en la película creada en el apartado anterior.
2. Pulsa el botón Insertar Contenido situado en la barra de herramientas.
comprobar el correcto funcionamiento de la película.
9. Elige Archivo > Guardar para grabar los cambios introducidos en el
documento.
3. IMPORTAR UNA IMAGEN.
1. Sitúate en la película creada en el apartado anterior.
2. Pulsa el botón Insertar Contenido situado en la barra de herramientas.
3. Desde el cuadro de diálogo Abrir selecciona JPEG en la lista Tipo de
archivo y navega hasta la carpeta einstein situada dentro de la carpeta
Curso Flash instalada en tu equipo. Elige el archivo einstein.jpg y pulsa
Abrir.
4. La imagen se muestra en el centro del escenario. Pincha y arrastra la
imagen para situarla en el margen derecho.
5. Para que esta imagen sea visible sólo en el fotograma nº30, por ejemplo,
haz clic en este fotograma en la fila que contiene esta imagen: einstein.jpg.
6. Pulsa el botón Añadir efecto y elige Colocar. De esta forma su contenido
sólo se mostrará cuando la cabeza lectora alcance este fotograma y no
antes. Pulsa el botón Cerrar.
archivo y navega hasta la carpeta einstein situada dentro de la carpeta
Curso Flash instalada en tu equipo. Elige el archivo einstein.jpg y pulsa
Abrir.
4. La imagen se muestra en el centro del escenario. Pincha y arrastra la
imagen para situarla en el margen derecho.
5. Para que esta imagen sea visible sólo en el fotograma nº30, por ejemplo,
haz clic en este fotograma en la fila que contiene esta imagen: einstein.jpg.
6. Pulsa el botón Añadir efecto y elige Colocar. De esta forma su contenido
sólo se mostrará cuando la cabeza lectora alcance este fotograma y no
antes. Pulsa el botón Cerrar.
4. AÑADIR UNA MÚSICA DE FONDO.
Con Swish puedes importar sonidos en formatos .WAV y .MP3. Un sonido asociado
a un fotograma comenzará a reproducirse cuando la cabeza lectora lo alcance.
También se pueden asociar sonidos a los botones.
1. Sitúate en la película que nos ocupa. Vamos a añadirle una música de fondo.
2. Haz clic derecho en el fotograma 0 de la fila Escena 1, y elige la opción
Reproducir Sonido en el menú contextual que se despliega.
3. Se despliega el panel Acciones. Asegúrate de que el item Reproducir
Sonido “” está seleccionado. Pulsa el botón Importar un sonido ...
Con Swish puedes importar sonidos en formatos .WAV y .MP3. Un sonido asociado
a un fotograma comenzará a reproducirse cuando la cabeza lectora lo alcance.
También se pueden asociar sonidos a los botones.
1. Sitúate en la película que nos ocupa. Vamos a añadirle una música de fondo.
2. Haz clic derecho en el fotograma 0 de la fila Escena 1, y elige la opción
Reproducir Sonido en el menú contextual que se despliega.
3. Se despliega el panel Acciones. Asegúrate de que el item Reproducir
Sonido “” está seleccionado. Pulsa el botón Importar un sonido ...
4. En el cuadro de diálogo Importar sonido, navega hasta la carpeta
einstein situada dentro de C:\Curso Flash. Pincha sobre el archivo sonoro
Eter_Edgen_7254_hifi.mp3 y pulsa el botón Abrir.
5. Pulsa el botón Opciones para configurar las opciones de reproducción de
este sonido importado. Activa la casilla No reproducir si ya
reproduciendo. Sitúa 1 en la casilla Bucle Sonido. Pulsa Acepta para
guardar los cambios.
einstein situada dentro de C:\Curso Flash. Pincha sobre el archivo sonoro
Eter_Edgen_7254_hifi.mp3 y pulsa el botón Abrir.
5. Pulsa el botón Opciones para configurar las opciones de reproducción de
este sonido importado. Activa la casilla No reproducir si ya
reproduciendo. Sitúa 1 en la casilla Bucle Sonido. Pulsa Acepta para
guardar los cambios.
6. Observa que en el fotograma 0 de la línea Escena 1 ahora muestra el icono
de un altavoz para indicar que contiene un sonido de fondo.
7. Para ver la animación resultante pulsa el botón Reproducir Película en la
barra de herramientas. El título se muestra en bucle. Pulsa el botón Parar
para detener la película.
de un altavoz para indicar que contiene un sonido de fondo.
7. Para ver la animación resultante pulsa el botón Reproducir Película en la
barra de herramientas. El título se muestra en bucle. Pulsa el botón Parar
para detener la película.
5. AÑADIR UN BOTÓN
Un botón es un objeto interactivo que dispara una acción al realizar el usuario algún
evento sobre él con el puntero del ratón: pulsar, pasar por encima, etc.
1. Sitúate en el ejemplo que nos ocupa.
2. Pulsa el botón Insertar Texto.
Un botón es un objeto interactivo que dispara una acción al realizar el usuario algún
evento sobre él con el puntero del ratón: pulsar, pasar por encima, etc.
1. Sitúate en el ejemplo que nos ocupa.
2. Pulsa el botón Insertar Texto.
3. Cambia la palabra Texto por “Más información”. Tamaño de la fuente: 12
puntos y color negro. Pincha y arrastra este cuadro de texto sobre el
escenario para situarlo en el lugar adecuado.
4. Haz clic derecho sobre el fotograma nº30 de la fila Más información que
contiene este cuadro de texto. Elige la opción Colocar en el menú
contextual que se despliega. Cierra el cuadro de diálogo Opciones Colocar.
De esta forma el texto sólo aparece en este fotograma.
5. Asegúrate de que este cuadro de texto está seleccionado. Elige Modificar >
Convertir > Convertir en Botón. Observa que el cuadro de texto se ha
convertido en un botón con sus respectivos 4 estados: Arriba, Sobre, Abajo
y Pulsado. Esto se puede apreciar en el panel Esquema y en el
correspondiente encabezado de la línea de tiempo.
puntos y color negro. Pincha y arrastra este cuadro de texto sobre el
escenario para situarlo en el lugar adecuado.
4. Haz clic derecho sobre el fotograma nº30 de la fila Más información que
contiene este cuadro de texto. Elige la opción Colocar en el menú
contextual que se despliega. Cierra el cuadro de diálogo Opciones Colocar.
De esta forma el texto sólo aparece en este fotograma.
5. Asegúrate de que este cuadro de texto está seleccionado. Elige Modificar >
Convertir > Convertir en Botón. Observa que el cuadro de texto se ha
convertido en un botón con sus respectivos 4 estados: Arriba, Sobre, Abajo
y Pulsado. Esto se puede apreciar en el panel Esquema y en el
correspondiente encabezado de la línea de tiempo.
6. En el cuadro Esquema haz doble clic en el item “T Más información” del
Estado Arriba. En el cuadro de diálogo Texto puedes cambiar el color del
mismo para este estado. Por ejemplo: verde.
7. Define otro color para el texto en los estados Sobre y Abajo.
8. Haz clic derecho sobre este botón en el escenario y selecciona Acción > Ir
a URL en el menú contextual.
9. En la casilla URL teclea http://www.google.com/search?q=albert+einstein
Estado Arriba. En el cuadro de diálogo Texto puedes cambiar el color del
mismo para este estado. Por ejemplo: verde.
7. Define otro color para el texto en los estados Sobre y Abajo.
8. Haz clic derecho sobre este botón en el escenario y selecciona Acción > Ir
a URL en el menú contextual.
9. En la casilla URL teclea http://www.google.com/search?q=albert+einstein
10. Para comprobar el correcto funcionamiento de la aplicación creada,
selecciona: Archivo > Probar > En navegador.
11. Elige Archivo > Guardar para grabar los cambios introducidos en el
documento.
6. PUBLICAR LA PELÍCULA PARA LA WEB
La película que has creado en este tutorial está guardada en el archivo mipeli.swi.
Éste puedes abrirlo para realizar las modificaciones que desees. Sin embargo para
publicarlo en la web es necesario exportarlo a los formatos clásicos HTML y SWF.
1. Selecciona Archivo > Exportar > HTML
2. Desde el cuadro Publicar película SWISH, elige la carpeta donde deseas
guardar los archivos. Pulsa el botón Guardar.
3. En esta carpeta destino se creará la película en formato *.swf (que soporta
el reproductor del Flash) y la página HTML en la que esta película estaría
incrustada.
4. Sube a tu servidor los archivos *.swf y *.htm. Para ver tu película tal y
como será vista en la web, localiza el archivo mipeli.htm y ábrelo. La verás
en tu navegador por defecto.
Este es el aspecto final que tendrá tu película:
selecciona: Archivo > Probar > En navegador.
11. Elige Archivo > Guardar para grabar los cambios introducidos en el
documento.
6. PUBLICAR LA PELÍCULA PARA LA WEB
La película que has creado en este tutorial está guardada en el archivo mipeli.swi.
Éste puedes abrirlo para realizar las modificaciones que desees. Sin embargo para
publicarlo en la web es necesario exportarlo a los formatos clásicos HTML y SWF.
1. Selecciona Archivo > Exportar > HTML
2. Desde el cuadro Publicar película SWISH, elige la carpeta donde deseas
guardar los archivos. Pulsa el botón Guardar.
3. En esta carpeta destino se creará la película en formato *.swf (que soporta
el reproductor del Flash) y la página HTML en la que esta película estaría
incrustada.
4. Sube a tu servidor los archivos *.swf y *.htm. Para ver tu película tal y
como será vista en la web, localiza el archivo mipeli.htm y ábrelo. La verás
en tu navegador por defecto.
Este es el aspecto final que tendrá tu película:
6 de mayo de 2009
TUTORIAL DE DREAMWEAVER 4
No se puede enseñar en un tutorial de pocas páginas todo lo que aprenderás de un libro de 300 o más páginas pero después de seguir este tutorial de Dreamweaver serás capaz de orientarte en su entorno, de diseñar páginas sencillas y administrar tu sitio Web. Tampoco es la intención de enseñar aquí temas avanzados como hojas de estilo, DHTML, JavaScript, etc. Sobre este tema consulta tutoriales o libros correspondientes. Tampoco se ha tocado el tema de las capas, si necesitas información al respecto prueba en este tutorial específico: Trabajo con capas en Dreamweaver
No se requiere ninguna experiencia previa de Dreamweaver para seguir este tutorial pero suponemos que sepas utilizar Windows y aplicaciones para Windows (Word o Word Pefect por ejemplo), entiendas los términos como por ejemplo "barra de tareas", "menú contextual", "teclas de acceso directo", "barra de menús", "barra de herramientas", y sepas como copiar, pegar, insertar objetos y guardar tu trabajo.
Entorno de trabajo en Dreamweaver y creación de una página Web:
Dreamweaver es un editor del tipo WYSIWYG, es decir, un editor visual que permite diseñar las páginas sin saber nada de HTML. Pero nunca está de más tener el conocimiento de este lenguaje, los editores WYSIWYG no son perfectos y pueden cometer errores o generar también bastante código basura. Para esto Dreamweaver dispone también del editor HTML o permite configurar un editor HTML externo si así lo deseamos. Para ver el código HTML pulsamos F 10 y se abrirá la ventana del editor, en la misma ventana tenemos el botón del editor externo para utilizar otro programa de edición HTML.
En el Dreamweaver 4 además podemos tener ambas vistas: código y diseño a la vez, tienes esta opción en el menú "Ver" o puedes usar los botones correspondientes de la barra de herramientas que están resaltados en rojo en esta imagen:
No se requiere ninguna experiencia previa de Dreamweaver para seguir este tutorial pero suponemos que sepas utilizar Windows y aplicaciones para Windows (Word o Word Pefect por ejemplo), entiendas los términos como por ejemplo "barra de tareas", "menú contextual", "teclas de acceso directo", "barra de menús", "barra de herramientas", y sepas como copiar, pegar, insertar objetos y guardar tu trabajo.
Entorno de trabajo en Dreamweaver y creación de una página Web:
Dreamweaver es un editor del tipo WYSIWYG, es decir, un editor visual que permite diseñar las páginas sin saber nada de HTML. Pero nunca está de más tener el conocimiento de este lenguaje, los editores WYSIWYG no son perfectos y pueden cometer errores o generar también bastante código basura. Para esto Dreamweaver dispone también del editor HTML o permite configurar un editor HTML externo si así lo deseamos. Para ver el código HTML pulsamos F 10 y se abrirá la ventana del editor, en la misma ventana tenemos el botón del editor externo para utilizar otro programa de edición HTML.
En el Dreamweaver 4 además podemos tener ambas vistas: código y diseño a la vez, tienes esta opción en el menú "Ver" o puedes usar los botones correspondientes de la barra de herramientas que están resaltados en rojo en esta imagen:
Para crear una nueva página utiliza el menú "Archivo" / "Nuevo". Tienes las opciones para crear una nueva página o crear una página desde una plantilla previa.
Para insertar objetos ( por ejemplo, imágenes, tablas o animaciones Flash en tu página puedes usar el menú Insertar o la ventana de objetos:
Para insertar objetos ( por ejemplo, imágenes, tablas o animaciones Flash en tu página puedes usar el menú Insertar o la ventana de objetos:
Si no la ves utiliza el menú "Ventana" / "Objetos" o Ctr+F3.
Para utilizar la ventana de los objetos de Dreamweaver, arrastra el icono del objeto que necesites, por ejemplo el icono de la imagen hacia la página, y te aparecerá la ventana del dialogo para indicar la ubicación de la imagen que quieres insertar.
Siempre puedes recurrir a la ventana propiedades de Dreamweaver para editar las propiedades de un objeto:
Siempre puedes recurrir a la ventana propiedades de Dreamweaver para editar las propiedades de un objeto:
La ventana que ves en esta imagen corresponde a las propiedades del texto, las opciones de la ventana cambiarán según el objeto que insertemos. Para verla, pulsa el objeto con el botón secundario en el objeto que quieras editar o utilizar el menú "Ventana" - "Propiedades", o las teclas Ctrl+F3.
Los objetos de Dreamweaver accesibles desde la ventana de Objetos:
Si pulsamos el pequeño triangulo que aparece en la parte superior derecha de la ventana de objetos podemos acceder a diferentes ventanas de objetos. A continuación viene la descripción de diferentes ventanas y objetos de Dreamweaver:
Común:
Es la ventana que aparece por defecto y contiene los objetos más comunes de Dreamweaver
Insertar imagen - para insertar objetos gráficos: ficheros .gif, .jpg o .png.
Insertar imagen de sustitución - permite crear los efectos "rollover" - botones o imágenes que cambian su apariencia al pasar el cursor sobre ellas.
Insertar tabla - como su nombre lo indica sirve para insertar tablas. Las tablas son un elemento todavía muy popular para colocar los contenidos de las páginas.
Insertar datos tabulares - Permite insertar datos de una hoja de cálculo.
Insertar barra horizontal - el elemento HTML definido por la etiqueta muy popular para separar los contenidos en una página Web.
Insertar barra de exploración - son unas barras de navegación creadas con tablas y JavaScript.
Dibujar capa - este tema se puede observar en profundidad en este tutorial de capas.
Insertar salto de línea - agrega espacio adicional entre los objetos o líneas de texto (la etiqueta
en HTML).
Insertar vínculo de correo electrónico - para insertar vínculos de tipo "mailto" para abrir un nuevo mensaje de correo con la dirección incluida en el campo "Para". Si quieres saber más sobre este tema lee este artículo: Outlook Express: algunos accesos directos de utilidad
Insertar fecha - permite introducir la fecha y la hora de modificación de la página.
Insertar Flash - para insertar objetos creados con Macromedia Flash en tu página.
Insertar Shockwave - para insertar aplicaciones creadas con Macromedia Director.
Insertar Generator - contenidos dinámicos de este programa de Macromedia basados en las plantillas colocadas en el servidor.
Insertar HTML de Fireworks - inserta y convierte el código nativo de Macromedia Fireworks. Insertar subprograma - para agregar applets Java a la página.
Insertar ActiveX - inserta objetos desarrollados con la tecnología ActiveX de Microsoft.
Insertar Plug-in - para insertar los plugins para Netscape (por ejemplo vídeo o sonido).
Insertar Server-Side Include - las instrucciones agregadas por el servidor (SSI), solo podremos utilizar esta opción si nuestro servidor lo permite, los servidores gratuitos no lo permiten.
Caracteres
Permite insertar caracteres especiales en el documento, por ejemplo © ¶ ©, etc.
Formularios
Para insertar formularios en una página Web, no hablaremos del tema en este tutorial porque será tratado en nuestro próximo tutorial de Dreamweaver.
Marcos
Permite crear páginas con marcos ("frames"). No trataremos este tema en este tutorial porque estamos absolutamente en contra de su uso (no son amigables para los navegantes ni para los buscadores). Preferimos utilizar barras de navegación. Es solo nuestra opinión personal, si te gustaría utilizar marcos en tu Web encontrarás la información que necesites en cualquier manual o libro de HTML.
Head
Esta ventana es muy importante: nos permite insertar código en la cabecera del documento.
Insertar Meta - son las etiquetas opcionales para los servidores Web, por ejemplo las etiquetas de palabras clave o de descripción.
Insertar palabras clave - la meta etiqueta de las palabras clave("keywords" en HTML) de nuestra página. Puede ser útil en algunos buscadores aunque la mayoría no le hace demasiado caso.
Insertar descripción - Es una meta etiqueta muy importante ("description" en HTML), trata de colocarla siempre, muchos buscadores la toman en cuenta a la hora de indexar la página. Debe ser una frase completa que describa lo mejor posible el contenido y el propósito de nuestro sitio.
Insertar la actualización - Meta "Refresh" en HTML, obliga al navegador a refrescar la página pasado un intervalo de tiempo o cargar una página diferente. Muy útil en los casos cuando nuestra página había cambiado de dirección y queremos que los navegantes que vengan a la URL antigua sean redirigidos automáticamente a la nueva dirección.
Insertar base - esta opción nos sirve si tenemos todos los documentos en un servidor distinto del de la página raíz, en este caso si utilizamos esta meta etiqueta todos los vínculos relativos serán interpretados automáticamente como absolutos, por ejemplo "Introduccion.htm" se interpretaría como "http://www.svetlian.com/Introduccion.htm" si hemos especificado http://www.svetlian.com/ como base.
Insertar vínculo - permite establecer relaciones entre los documentos, esta opción es muy útil para , por ejemplo, vincular rápidamente las hojas de estilo.
Objetos invisibles
Los objetos invisibles pueden ser puntos de fijación con nombre, comentarios, secuencias de comandos o espacio indivisible (éste último ya no existe en Dreamweaver 4).
Punto de fijación con nombre - nos sirve para poder navegar dentro de un documento. Con este objeto podemos fijar un destino para el vínculo.
Comentario - permite insertar texto de comentarios que permiten ayudar a interpretar el código pro serían invisibles desde el navegador, en HTML correspondería a la etiquetas .
Secuencias de comandos - con esta opción podemos insertar JavaScript y VBScript en nuestro documentos.
Espacio indivisible - inserta un espacio en blanco ( en HTML), ya no existe en Dreamweaver 4.
Y ahora, después de leer todo esto prueba crear algo en tu página, escribir algo de texto, insertar una imagen por ejemplo.
Puedes visualizar tu página en el navegador desde el menú "Archivo" / "Vista previa en el navegador" ("Preview en browser"). Por defecto Dreamweaver mostrará nuestro navegador predeterminado que tengamos instalado pero siempre podemos agregar un navegador secundario desde el mismo menú.
Espero que ya pudieras crear una página sencilla con Dreamweaver pero ahora todavía nos hace falta aprender a manejar nuestro sitio Web como un conjunto.
Para hacerlo utilizaremos el menú "Sitio/Nuevo sitio", no aparecerá una ventana como ésta:
Para hacerlo utilizaremos el menú "Sitio/Nuevo sitio", no aparecerá una ventana como ésta:
Desde esta ventana podemos determinar la ubicación local y remota de los ficheros de nuestro sitio.
Si especificamos el tipo del servidor remoto como "FTP" podremos sincronizar nuestra carpeta local con el servidor remoto.
Una vez creado el sitio siempre podremos abrir y administrarlo desde el menú "Sitio".
Otra opción muy útil de Dreamweaver es el mapa del sitio:
Si especificamos el tipo del servidor remoto como "FTP" podremos sincronizar nuestra carpeta local con el servidor remoto.
Una vez creado el sitio siempre podremos abrir y administrarlo desde el menú "Sitio".
Otra opción muy útil de Dreamweaver es el mapa del sitio:
Bueno, aquí terminamos con esta pequeña introducción a Dreamweaver. Estamos muy conscientes que no es suficiente para dominar este complejo programa pero si lo seguiste con atención y fuiste capaz de investigar por tu cuenta ya tienes una buena base por donde comenzar.
28 de abril de 2009
AGREGAR PESTAÑAS AL BLOG
En este artículo vamos a aprender como insertar pestañas en el blog para poder separar la información contenida en nuestro blog por categorías.
* En primer lugar hay que descargar un archivo de JavaScript al que señalaremos desde el blog y que creará la apariencia de las pestañas. Este archivo lo podemos descargar de aquí; pinchando en Download y descargando el archivo "tabber.js".
* Una vez descargado debemos subirlo a la red y para ello utilizaremos cualquier página que ofrezca alojamiento gratuito; como por ejemplo Lycos. Una vez creada la cuenta tan sólo hay que subir el archivo a su directorio y para ello pincharemos en "webftp" (el primer enlace de la columna de la izquierda) y después en "abrir FTP web"; cuando se abrá tan sólo hay que examinar y subir.
* Ahora volvemos a Blogger y vamos a Diseño -> Edición de HTML. En esta sección vamos a agregar el código necesario para llamar al JavaScript y que nos cree las pestañas.
De entre todo el cógigo buscaremos donde pone
y justo tras esa etiqueta pegaremos el siguiente código:
Obviamente el www.tusitio.com se debe modificar por la URL de donde subiste el Java Script, en el caso de lycos seria algo así como: http://usuarios.lycos.es/"el nombre que hayas puesto"/tabber.js
* En esa misma sección pero justo antes de
pegaremos el siguiente código:
Y tras ésto guardaremos los cambios realizados.
* Ahora acudimos a elementos de página y añadiremos un nuevo gadget: "añadir HTML/ JavaScript" y dentro agregamos el siguiente código:
Ahora tenemos dos pestañas listas. Para cambiar el nombre de la primera cambiaremos donde pone Sección 1 el de la segunda donde pone Titulo. Donde pone contenido de la sección 1 o 2 colocaremos el contenido que queramos introducir en la pestaña, para introducir texto simplemente escribiremos lo que deseemos sin embargo hay que usar lenguaje html para introducir cualquier otro elemento. Por ejemplo para introducir dentro de una pestaña otra página web debemos utilizar el siguiente script:
Y si queremos introducir más pestañas, debemos introducir el siguiente código justo antes del ultimo "/div":
* Nuestras pestañas están listas ya, sólo que estarán situadas en la columna lateral tal y como cualquier otro gadget. Si deseamos cambiarlo a la parte de arriba tan sólo hemos de arrastrar el elemento hasta donde queramos que se situe.
* En primer lugar hay que descargar un archivo de JavaScript al que señalaremos desde el blog y que creará la apariencia de las pestañas. Este archivo lo podemos descargar de aquí; pinchando en Download y descargando el archivo "tabber.js".
* Una vez descargado debemos subirlo a la red y para ello utilizaremos cualquier página que ofrezca alojamiento gratuito; como por ejemplo Lycos. Una vez creada la cuenta tan sólo hay que subir el archivo a su directorio y para ello pincharemos en "webftp" (el primer enlace de la columna de la izquierda) y después en "abrir FTP web"; cuando se abrá tan sólo hay que examinar y subir.
* Ahora volvemos a Blogger y vamos a Diseño -> Edición de HTML. En esta sección vamos a agregar el código necesario para llamar al JavaScript y que nos cree las pestañas.
De entre todo el cógigo buscaremos donde pone
y justo tras esa etiqueta pegaremos el siguiente código:
Obviamente el www.tusitio.com se debe modificar por la URL de donde subiste el Java Script, en el caso de lycos seria algo así como: http://usuarios.lycos.es/"el nombre que hayas puesto"/tabber.js
* En esa misma sección pero justo antes de
pegaremos el siguiente código:
Y tras ésto guardaremos los cambios realizados.
* Ahora acudimos a elementos de página y añadiremos un nuevo gadget: "añadir HTML/ JavaScript" y dentro agregamos el siguiente código:
Ahora tenemos dos pestañas listas. Para cambiar el nombre de la primera cambiaremos donde pone Sección 1 el de la segunda donde pone Titulo. Donde pone contenido de la sección 1 o 2 colocaremos el contenido que queramos introducir en la pestaña, para introducir texto simplemente escribiremos lo que deseemos sin embargo hay que usar lenguaje html para introducir cualquier otro elemento. Por ejemplo para introducir dentro de una pestaña otra página web debemos utilizar el siguiente script:
Y si queremos introducir más pestañas, debemos introducir el siguiente código justo antes del ultimo "/div":
* Nuestras pestañas están listas ya, sólo que estarán situadas en la columna lateral tal y como cualquier otro gadget. Si deseamos cambiarlo a la parte de arriba tan sólo hemos de arrastrar el elemento hasta donde queramos que se situe.
6 de abril de 2009
INTRODUCCIÓN DE ELEMENTOS EXTERNOS EN EL BLOG
Ya hemos visto como introducir música en una entrada y también sabemos como introducir fotografías y videos ya que el propio blog trae la opción de hacerlo desde la misma página de creación de entradas. Sin embargo, existe otra opción de introducir todos estos elementos externos al blog y algún otro más de una forma aún más sencilla, aunque no resulte tan vistosa como las anteriores.
En muchas páginas que ofrecen servicios de almacenaje de archivos, ya sean de video audio, imágenes... aparecen unos enlaces que nos permiten pegar directamente en nuestros blogs los archivos que deseemos. Bastará con copiarlos y pegarlos directamente en la entrada del blog, eso si, asegurándonos que lo hacemos en la pestaña de "Edición de HTML" y no en la de "Redactar" que aparecen en el mismo cuadro en que escibimos el texto, en la parte superior derecha.
Todos estos enlaces (también llamados objetos o etiquetas) suelen comenzar con los comandos "object" y "embed", aunque también pueden presentarse como etiquetas HTML.
En Youtube por ejemplo sólo hay que copiar la etiqueta donde pone "insertar" y pegarlo en la entrada:
En Goear hay que copiar donde dice "This song in your site" y pegar en la entrada:
Para poner una imagen de subirimagenes.com, hay que copiar la etiqueta que llama imagen HTML y pegar en la entrada:
En Slideshare (página de presentaciones) hay que copiar la etiqueta que llama "embed" y pegar en la entrada:
Para colocar cualquier elemento de otras páginas el procedimiento será similar al explicado en los ejemplos anteriores.
En muchas páginas que ofrecen servicios de almacenaje de archivos, ya sean de video audio, imágenes... aparecen unos enlaces que nos permiten pegar directamente en nuestros blogs los archivos que deseemos. Bastará con copiarlos y pegarlos directamente en la entrada del blog, eso si, asegurándonos que lo hacemos en la pestaña de "Edición de HTML" y no en la de "Redactar" que aparecen en el mismo cuadro en que escibimos el texto, en la parte superior derecha.
Todos estos enlaces (también llamados objetos o etiquetas) suelen comenzar con los comandos "object" y "embed", aunque también pueden presentarse como etiquetas HTML.
En Youtube por ejemplo sólo hay que copiar la etiqueta donde pone "insertar" y pegarlo en la entrada:
En Goear hay que copiar donde dice "This song in your site" y pegar en la entrada:
Para poner una imagen de subirimagenes.com, hay que copiar la etiqueta que llama imagen HTML y pegar en la entrada:
En Slideshare (página de presentaciones) hay que copiar la etiqueta que llama "embed" y pegar en la entrada:
Para colocar cualquier elemento de otras páginas el procedimiento será similar al explicado en los ejemplos anteriores.
25 de marzo de 2009
PODCAST SOBRE CÓMO CREAR UNO
"Predicar con el ejemplo"; eso es lo que intentaré con la creación del siguiente podcast:
Espero que os resulte lo suficientemente claro como para que no tengais problema a la hora de crear el vuestro. Sin embargo y para evitar confusiones que se pueden producir a la hora de transcribir mensajes de audio, si que escribiré a continuación las páginas webs que cito en el podcast:
- http://media-convert.com/conversion/
- http://www.goear.com
- http://dowint.net/
- http://www.oscargp.net/2009/02/subir-archivos-de-musica-mp3.html
Espero que os resulte lo suficientemente claro como para que no tengais problema a la hora de crear el vuestro. Sin embargo y para evitar confusiones que se pueden producir a la hora de transcribir mensajes de audio, si que escribiré a continuación las páginas webs que cito en el podcast:
- http://media-convert.com/conversion/
- http://www.goear.com
- http://dowint.net/
- http://www.oscargp.net/2009/02/subir-archivos-de-musica-mp3.html
16 de marzo de 2009
CREACIÓN DE BLOGS: PODCAST Y MÚSICA
Si buscamos información en Google relativa a la creación de Podcast o a la introducción de música en un blog, encontraremos numerosas páginas referentes al tema y que nos serán de gran ayuda, además de ofrecernos diferentes alternativas que den soluciones al problema que nos podamos encontrar en cada momento. Aquí paso a describir la solución que he encontrado más sencilla para bien sea incluir nuestra propia música en un blog u otro tipo de web, o bien sea para crear nuestro propio podcast.
- En primer lugar hay que buscar un código (o plugin) que contenga un reproductor de música para colocarlo en nuestro blog y que permitirá al usuario reproducir, parar, avanzar... el archivo sonoro que le presentemos. En esta página podemos encontrar una gran variedad de reproductores:
http://ayudaparatublog.com/muchos-reproductores-de-musica-para-el-blog/
- Una vez elegido el que más se adapte a nuestros deseos, sólo tendremos que copiar el código que se encuentra bajo el mismo. Después debemos pegar ese código en el lugar de la página que deseemos:
* si lo que queremos es colocarlo en la columna adyacente para que el reproductor permanezca siempre visible en el mismo lugar, debemos añadirlo como un gadget; pinchando en ellos y eligiendo el que pone HTML/Javascript y copiendo el contenido dentro de éste.
* si se trata de colocarlo en una entrada, bien sea para reproducir en la misma una canción, o para crear un podcast, no valdrán todos los que contiene la web, es cuestión de probar cual es valido o no. Alguna otra página para coger el código la tenemos aquí:
http://www.oscargp.net/2009/02/subir-archivos-de-musica-mp3.html
- Para elegir nuestra música debemos ir a una página de descarga/subida de archivos para poder bien descargar la música contenida en la misma o bien para subir nuestro propio audio y darle posteriormente la indicación a nuestro reproductor del lugar (dirección URL) en que deberá buscar y reproducir. Ésta puede ser una web valida para ello:
http://www.goear.com/
Si queremos meter nuestro propio audio deberemos darnos de alta como usuarios y posteriormente subir el mismo. Más tarde tendremos que reproducirlo (con la música que contiene esta web haremos igual) y una vez se esté reproduciendo, copiaremos la dirección (http:........hasta el final) de la barra de direcciones (en la parte superior de la página). Con esta dirección copiada acudimos a un página de descarga de archivos, por ejemplo:
http://dowint.net/
Pegamos el contenido copiado anteriormente y le damos a descargar. Nos aparecerá debajo la dirección y título que hemos elegido y un botón que pone descargar ahora; sobre el pincharemos con el botón derecho del ratón y elegiremos la opción "copiar acceso directo".
- Ahora que ya tenemos la dirección exacta que debemos darle al reproductor (que no es más que el recorrido y nombre que el archivo tiene en internet) acudimos de nuevo al código del reproductor que anteriormente hemos colgado en el blog y tendremos que sustituir la dirección de ejemplo que contiene por la que nosotros hemos elegido. Seleccionamos esta dirección que va desde http: hasta mp3 (cuidado que sólo contenga un http:, no sea que borremos más de una dirección) y pegamos sobre ella el acceso directo que acabamos de copiar (en algunos reproductores hay que pegarlo por dos veces ya que así aparece en el código). Si se trata de un reproductor de varias canciones debemos pegar todas una tras otra tan sólo separadas por una barra vertical que se escribe con (Alt Gr + 1). Si el reproductor trae opción para visionar el título e intérprete de las canciones, debemos substituir el título de la cancion de muestra por el nombre de la canción con la que hemos substituido ésta y de igual modo que con las canciones tendremos que separar un título del siguiente con la misma barra vertical (Alt Gr + 1).
Y así tendremos ya listo el reproductor para que sea utilizado en nuestro blog o página web.
- En primer lugar hay que buscar un código (o plugin) que contenga un reproductor de música para colocarlo en nuestro blog y que permitirá al usuario reproducir, parar, avanzar... el archivo sonoro que le presentemos. En esta página podemos encontrar una gran variedad de reproductores:
http://ayudaparatublog.com/muchos-reproductores-de-musica-para-el-blog/
- Una vez elegido el que más se adapte a nuestros deseos, sólo tendremos que copiar el código que se encuentra bajo el mismo. Después debemos pegar ese código en el lugar de la página que deseemos:
* si lo que queremos es colocarlo en la columna adyacente para que el reproductor permanezca siempre visible en el mismo lugar, debemos añadirlo como un gadget; pinchando en ellos y eligiendo el que pone HTML/Javascript y copiendo el contenido dentro de éste.
* si se trata de colocarlo en una entrada, bien sea para reproducir en la misma una canción, o para crear un podcast, no valdrán todos los que contiene la web, es cuestión de probar cual es valido o no. Alguna otra página para coger el código la tenemos aquí:
http://www.oscargp.net/2009/02/subir-archivos-de-musica-mp3.html
- Para elegir nuestra música debemos ir a una página de descarga/subida de archivos para poder bien descargar la música contenida en la misma o bien para subir nuestro propio audio y darle posteriormente la indicación a nuestro reproductor del lugar (dirección URL) en que deberá buscar y reproducir. Ésta puede ser una web valida para ello:
http://www.goear.com/
Si queremos meter nuestro propio audio deberemos darnos de alta como usuarios y posteriormente subir el mismo. Más tarde tendremos que reproducirlo (con la música que contiene esta web haremos igual) y una vez se esté reproduciendo, copiaremos la dirección (http:........hasta el final) de la barra de direcciones (en la parte superior de la página). Con esta dirección copiada acudimos a un página de descarga de archivos, por ejemplo:
http://dowint.net/
Pegamos el contenido copiado anteriormente y le damos a descargar. Nos aparecerá debajo la dirección y título que hemos elegido y un botón que pone descargar ahora; sobre el pincharemos con el botón derecho del ratón y elegiremos la opción "copiar acceso directo".
- Ahora que ya tenemos la dirección exacta que debemos darle al reproductor (que no es más que el recorrido y nombre que el archivo tiene en internet) acudimos de nuevo al código del reproductor que anteriormente hemos colgado en el blog y tendremos que sustituir la dirección de ejemplo que contiene por la que nosotros hemos elegido. Seleccionamos esta dirección que va desde http: hasta mp3 (cuidado que sólo contenga un http:, no sea que borremos más de una dirección) y pegamos sobre ella el acceso directo que acabamos de copiar (en algunos reproductores hay que pegarlo por dos veces ya que así aparece en el código). Si se trata de un reproductor de varias canciones debemos pegar todas una tras otra tan sólo separadas por una barra vertical que se escribe con (Alt Gr + 1). Si el reproductor trae opción para visionar el título e intérprete de las canciones, debemos substituir el título de la cancion de muestra por el nombre de la canción con la que hemos substituido ésta y de igual modo que con las canciones tendremos que separar un título del siguiente con la misma barra vertical (Alt Gr + 1).
Y así tendremos ya listo el reproductor para que sea utilizado en nuestro blog o página web.
Suscribirse a:
Entradas (Atom)