Blog de la Academia de Xesus Vazquez: abril 2012

lunes, 30 de abril de 2012

Formularios en DW

Formularios:

Todos los formularios se agregan a través del menú "insertar".

Por ello, vamos a "insertar", "formulario" , "formulario".

El primer elemento que debemos poner (obligatorio), es el "Formulario". Dentro de él, colocaremos los controles.

Ahora, con la "base" del formulario ya puesta, fíjate que parece un recuadro con el borde discontinuo en color rojo. Dentro del formulario, ya podemos insertar los controles.

Para organizar los controles dentro del formulario, podemos ayudarnos de una tabla (o una capa).

Esa tabla puede tener borde "cero" (ser invisible), por eso "grosor del borde", 0 pixeles.

La idea es colocar, en una de las celdas vacías, las etiquetas (nombre, dirección, teléfono) y en otra "columna", justo a su derecha, el campo vacío, donde la gente pondrá el dato (DW llama a esto "controles").

El primer control (dato) , lo ponemos desde "insertar" , "Formulario", "campo de texto".

Todos los controles comparten la misma ventana:

ID: etiqueta (opcional, es para localizarlo dentro de DW). Consiste en un texto descriptivo, que además, activa el formulario al hacer clic sobre ella.

Si la etiqueta está junto al control, dejamos el primer estilo. No necesitamos cambiar nada más, para que funcione correctamente.

Pero si está separada (en otra tabla, capa....), hay que marcar la segunda opción de ese menú para que funcione (o sea, "adjuntar etiqueta de título utilizando el atributo FOR").

Si no usamos un ID descriptivo, DW pondrá uno automáticamente (OJO!!!!).

Una vez lo tengamos, pulsamos en "Aceptar".

Ya tenemos la etiqueta y el control (o sea, título y zona en blanco, donde escribe la persona).

Sólo tenemos que mover ese control a otra celda (para que no estén juntos y haya una mínima separación estética).

Pulsa y arrastra para conseguirlo.

Ahora, con la vista "en vivo", podrás comprobar cómo funciona ese control.

En cuanto hagas clic sobre la etiqueta (el título, que podría ser "dirección de correo"), ya te lleva el cursor a la casilla en blanco.

Si seleccionaras el tipo "Varias líneas", el campo de texto pasaría a ser un "área de texto".

(Ver parte inferior de la pantalla, donde pone "TIPO")

Ancho car = ancho total de esa casilla de "control", indicando cuantos caracteres serían visibles.

Car. máx = máximo número de caracteres que permitiremos en ese "control" (ponle 100, por ejemplo).

Val. inicial = valor inicial, por si quieres que aparezca algo de ejemplo, para que la gente sepa qué puede poner (p.ej: ponga aquí su e-mail).

NOTA: El ID nunca podrá tener espacios, ni caracteres especiales (tildes,comillas,eñes....).

Si quisiéramos poner un campo "contraseña", es necesario repetir los pasos, para crear una nueva etiqueta y otro control.

Eso sí, el tipo será "contraseña". De esa forma, lo que escriba, no será visible (va enmascarada, protegida por "asteriscos").

Podemos insertar campos donde la gente responda "sí" o "no".

Lo que haríamos, sería ir "insertar", formulario , "casilla de verificación".

Recuerda dentro de "estilo", la opción "adjuntar etiqueta de título utilizando el atributo FOR".

En "posición": elige, "antes del elemento de formulario".

Acepta y arrastra a la derecha esa casilla vacía (la que la persona puede activar o desactivar, para decir "sí" o "no").

Recuerda que el estado inicial significa "cómo aparece de entrada" (activado / desactivado).

Más cosas:

Botones de opción = empleados para que el usuario elija entre varias opciones que le proponemos, donde sólo podrá elegir una de ellas.

Ponemos "deseo recibir información de":

Y vamos a "insertar" , "formulario", "botón de opción".

Si va todo junto (y no llevamos el control a otra tabla, celda, etc), podemos dejar activado "ajustar con etiqueta de rótulo", si no, la que está debajo ("adjuntar etiqueta de título....").

Repetimos el último proceso, para conseguir otro bóton "redondito" que podamos marcar, en este caso, con un "No" (el "sí", ya lo tenemos).

TRUCO: para que al marcar una, se desmarque la otra, los botones de opción tienen que tener el mismo nombre.

¿Dónde se cambia esto? En la parte inferior, donde pone "Botón" (y debajo, "Radio" o la palabra que DW elija por nosotros, si no pusimos nada diferente).

Estos botones sólo permiten un valor (sí / no). En cambio, las casillas permiten que marquemos varias (si nos interesan varias opciones, p.ej.).

Para ello, tenemos que insertar una lista o menú.

Adivina! Insertar, Formulario, "Seleccionar Lista/Menú".

Ese ID, podría llamarse "intereses". Con etiqueta "Quiero recibir información sobre:".

Justo debajo, en la parte inferior, fíjate en que el menú es "específico" para esto que estamos haciendo. Ahora, sólo aparece la opción de "menú" o "lista".

Cuando se trata de un menú, el usuario sólo podrá elegir uno de los valores, pero si se trata de una lista puede permitirse que se seleccionen varios simultáneamente.

Dejamos activada la casilla "lista" (por ese motivo).

El campo "Alto", sirve para establecer el número de líneas que se mostrarán de la lista. En el caso de haber elegido "menú", no estaría activada.

Los valores que aparecen en la lista, se introducen pulsando justamente donde dice "valores de lista....".

En la pestaña que aparece, "listar valores", podemos introducir elementos de la lista.

Empezamos por "informática". El siguiente elemento, lo añadimos pulsando en el símbolo "+".

Podemos añadir "música", luego "animales", "cine", "deportes"....

Ordenada el orden, pulsando en los símbolos de "arriba" y "abajo".

En la parte inferior, recuerda que puedes especificar cuál estará seleccionado inicialmente.

Por último, y para que todo esto funcione, tenemos que insertar un botón que envíe el formulario.

Por ello, llévame a "insertar" , "formulario" , "botón".

No necesitamos "etiqueta de rótulo", puedes darle a aceptar y ¡ya está!

El botón puede tener asignada una de las propiedades que aparecen en el campo "acción":

-enviar formulario
-restablecer formulario (lo borra)
-ninguno (ejem!!)

El valor "enviar", permite cambiar el texto que sale en el botón de "enviar formulario" (ver "VALUE", cuando hicimos el botón con el programa CSS Button....).

Para que el formulario sea enviado, deben cambiarse las propiedades del mismo. Podemos seleccionarlo haciendo clic en su etiqueta.

Le indicamos la acción que deseamos que realice, cuando el usuario haga clic en el botón "Enviar". La idea es enviarlo por correo.

Por eso, la "acción" será:

mailto:xesusvazquez@yahoo.es (o el correo que toque)

No olvides alinear la tabla y darle colores al fondo, para que guarde el mismo aspecto que el resto de tu página web.

Con F12, podemos ver como queda este ejercicio. Recuerda que antes, debes guardarlo!!!

Si lo prefieres, junto a inspeccionar, debería aparecer una "bola del mundo", donde al pulsar, nos permita ver como quedaría en diferentes navegadores.

Tras aceptar la advertencia de que estamos enviando un mensaje (típico en Internet Explorer), fíjate que debería aparecer una ventana de Outlook, preguntándote el asunto y el texto a enviar. Si no aparece.... consulta tu bandeja de correo! El mensaje debería haber llegado sin problemas.

(También puede deberse a que Internet Explorer 9 tiene problemas al cargar ciertas páginas, algo que no ocurre en Google Chrome, ojo!!!)

viernes, 27 de abril de 2012

Nivel básico-medo: Programa para descargar (desde el caché, desde lo navegado), los archivos .swf que hayan aparecido en las páginas web que visitemos

Fuente: http://www.nirsoft.net/utils/video_cache_view.html

Description

After watching a video in a Web site, you may want to save the video file into your local disk for playing it offline in the future. If the video file is stored in your browser's cache, this utility can help you to extract the video file from the cache and save it for watching it in the future.
It automatically scans the entire cache of Internet Explorer, Mozilla-based Web browsers (Including Firefox), Opera, and Chrome, and then finds all video files that are currently stored in it. It allows you to easily copy the cached video files into another folder for playing/watching them in the future. If you have a movie player that is configured to play flv files, it also allows you to play the video directly from your browser's cache.

Descárgalo desde aquí:

Download VideoCacheView in zip file

Download VideoCacheView with install/uninstall support

En esta ventana, sólo has de situarte sobre el archivo que necesitas (si has navegado mucho, es difícil saberlo, prueba a marcar varios y con el botón derecho, "copy selected to....", dile en qué carpeta quieres que te lo guarde). Con el botón "F7", dentro de este programa, consigues lo mismo.

Recuerda que estos archivos se visualizan con el navegador (es decir, botón derecho, abrir con.... ) , eligiendo un navegador compatible (p.ej: Internet Explorer).

Puedes ver, en la parte de la derecha del programa, una columna llamada "last access date" , donde puedes ordenar los archivos de más antiguo a más reciente (eso ayuda a la hora de saber qué archivo necesitas).

Nivel medio: Pasos "genéricos" (ver enlace) para copiar archivos .swf de páginas web que nos interesen

Fuente: http://www.taringa.net/posts/info/5616900/_Como-bajar-archivos-flash-desde-paginas-web_.html

Comentario personal: bien explicado, pero NO da la referencia de lo que debemos buscar en cada página web (archivos .swf , .flv .......).

En la actualidad, el contenido Flash abunda en las páginas web, se encuentra presente en animaciones, música, juegos, videos entre otros.

El uso de plugins Flash en los navegadores es casi obligatorio. Ya que nos permiten ver y disfrutar de contenidos interactivos embebidos en las páginas.

Lo bueno es que los archivos Flash o SWF (Small Web Format) se pueden descargar fácilmente usando como única herramienta el navegador, de esta manera puedes disfrutar de este contenido sin la necesidad de estar conectado a internet.
Usando Fire Fox

1. Inicia Firefox y dirígete a la página donde se encuentra el contenido flash que deseas descargar.
2. Has clic derecho en cualquier lugar de la página libre del contenido Flash y selecciona: Ver información de la página. O si prefieres en el menú superior selecciona Herramientas / Información de la página.

3. Selecciona la pestaña Medios. En ella se listan todas las imágenes, los iconos, las hojas de estilo y archivos flash que fueron usados por la página web. Aquí deberás buscar el archivo flash que desees, la extensión de dicho archivo debe ser “.sfw“. Una vez localizado presiona en el botón “Guardar como…” y ponlo en el lugar que quieras.

Usando Internet Explorer

En internet explorer los archivos se almacenan en una carpeta llamada “Archivos temporales de Internet“, antes de ingresar a la página donde se encuentra el archivo flash que desees, te sugiero que borres todos aquellos archivos temporales de IE que tengas almacenados ya que eso te permitirá encontrar el archivo flash más rápidamente, para acceder a ver estos archivos debes hacer lo siguiente:

1. Una vez borrado los archivos temporales de IE, acceda a la página donde se encuentra el contenido que desea descargar, posterior a eso en el menú superior, haga clic en Herramientas / Opciones de Internet.

2. En la ficha General, haga clic en Configuración, y luego en Ver Archivos, se abrirá la ventana de los archivos temporales de Internet, y en esa carpeta procede a buscar tu archivo SWF, una vez localizado has clic derecho sobre él y selecciona copiar y luego pégalo donde prefieras.

Usando Google Chrome

En Google Chrome sólo encontré un modo de hacerlo y es ver el código fuente de la página y buscar la dirección del archivo SWF.

1. Debes ahcer clic derecho en un área libre de la página y seleccionar Ver código fuente de la página.

Luego de eso debes buscar la url que corresponde al archivo flash y hacer clic sobre él. Se abrirá en una nueva ventana, para guardarlo presiona las telcas: Control + S, y guárdalo en donde te parezca.

Usando Opera

Descargar archivos SWF en Opera es tan sencillo como en los demás navegadores, para hacerlo debes seguir los siguientes pasos:
1. Clic en Herramientas / Avanzado / Caché.

2. Te aparecerá una lista enlazando todos los contenidos que usa la página web, y entre ellos el archivo flash. Para guardarlo, has clic derecho sobre él y selecciona cualquiera de las dos últimas opciones: “Guardar contenido enlazado como” o “Guardar en la carpeta de descargas“.

Usando SAFARI

1. Una vez estemos en la web donde hay el archivo incrustado, ir a la opción "Ventana" (para windows Vista y Seven primero se pulsa Alt, porque la barra de arriba está oculta por defecto) y clicar en "Actividad". Tambiés se puede utilizar el atajo de teclado Ctrl+Alt+A (para usuarios de mac Cmd+Alt+A).

2. Desplegar los menus que encontremos en la ventada de actividad.

3. Veremos una lista más o menos larga de webs y al lado el tamaño que ocupan. Únicamente nos devemos fijar en dos cosas: la terminación de la web (que es el formato del archivo que contiene) (.swf, .flv, .gif, .mp4, .mp3...) y el tamaño que indica (lo que estamos buscando ocupa kb o mb, nunca b).
Los videos acostumbran a estar en mp4, flv, mov o wmv, aunque los podemos encontrar con el mismo formato que los juegos flash, swf. Las imágenes están en jpg o gif, generalmente. Las canciones casi siempre son mp3.

4. Una vez hayamos localizado la web del archivo (basandonos en el formato en que está, y en el tamaño de archivo), hacemos doble clic. Entonces nos abrirá el archivo aislado en una ventana o pestaña nueva.

5. Vamos a "Archivo" (usuarios de Windows Vista o Seven deben pulsar Alt para que les aparexca la barra superior) "Guardar como..." (o pulsar Ctrl+s en windows o Cmd+s en mac) y nos guardará el archivo en su formato natural, sin acarrear la página web. Hay algunos casos, como videos en mp4 que el ordenador lo puede guardar automáticamente.

Una vez descargados los archivos flash, cualquiera sea la forma que hayas usado, para poder visualizarlos necesitarás Adobe Flash Player, un reproductor que soporte dicho formato o simplemente puedes usar tu navegador preferido.

menú de salto

Menús de salto: desplegable que me permita elegir rápidamente opciones

Menús de salto:

Son menús desplegables, que nos permite ir a las distintas secciones o páginas de nuestro sitio.

Lo encontramos en "insertar" , luego "formulario" y "menú de salto".

Si tuviéramos una página con marcos, podríamos decidir dónde se abrirían las páginas seleccionadas en el menú desplegable.

Si no insertamos un botón al lado del desplegable, el cambio de página se realizará nada más realizar la selección.

Probamos a marcar la opción de: insertar botón "ir" tras el menú.

Ahora, la navegación se haría en dos pasos: seleccionar el elemento y pulsar en el botón "Ir".

También podemos configurar el menú de modo que al cambiar de página, vuelva a mostrar el primer elemento de la lista.

Una vez configurado el menú en general, pasaremos a crear los elementos de menú.

A cada elemento, en la casilla "texto", le pondremos el nombre descriptivo que deseemos.

Y luego, la dirección URL a la que debe saltar (otra página web o una de las que tengamos).

Podemos elegirlo, en el menú "examinar" o elegir una página externa, poniendo siempre el http://

El símbolo de "+" , te permite añadir más elementos.

Puedes cambiar el orden con los botones de "subir y bajar".

Si lo deseas, prueba la "vista en vivo", en la misma zona donde está "código, dividir, diseño, código en vivo.....".

Despliega la opción de la lista que te interese y prueba a pulsar en el botón "ir".

código con la música midi de Corazón Partío para que suene en tu página web

jueves, 26 de abril de 2012

Ejemplo de e-mail marketing: promoción de curso para ser un Community Manager

Curso de COMMUNITY
MANAGER

La profesión más
demandada en 2011
también lo es en 2012

Por segundo año consecutivo la
profesión de Community Manager sigue
siendo la que más demanda tiene de
profesionales cualificados.

Dale un giro a tu formación, ponte al
día en Social Media. Especialízate con
una metodología hecha para ti, con la
garantía de calidad de Deusto Formación.

INFÓRMATE AQUÍ

Este correo electrónico (y cualquier archivo adjunto) puede contener información confidencial y/o privilegiada y es para uso exclusivo de la persona o personas a las que va dirigido. Si usted no es el destinatario final del mismo (o si lo ha recibido por error), por favor elimínelo y notifíqueselo inmediatamente al remitente. Se prohíbe expresamente la utilización de las direcciones del remitente y receptor/es con fines comerciales o su incorporación a ficheros automatizados. Cualquier copia, modificación o distribución total o parcial no autorizada, así como cualquier uso de la información contenida están estrictamente prohibidos y podrían constituir un delito en virtud de la ley vigente.
This e-mail (and any documents attached) may contain confidential and/or privileged information and is for the exclusive use of the individual(s) to whom it was addressed. If you are not the intended recipient of this email (or have received it in error), please notify the sender immediately and delete this message. It is strictly prohibited the unauthorized use of the sender's and/

miércoles, 25 de abril de 2012

Insertar archivos multimedia: vídeo, flash o sonidos

Insertar elementos multimedia:

La idea es insertar un archivo flash o similar, en nuestra Web.

En primer lugar, haz clic en el punto que te interesa. Te recomiendo que uses "capas", para poder poner ese "objeto" donde más te guste.

Elegimos "insertar" , media y "SWF" , si es un archivo FLASH.

Las películas "Flash", son animaciones que, al igual que los botones y el texto "Flash", tienen extensión .swf.

Como ya tenemos algo en ese formato, vamos a insertarlo.

Podemos agregar atributos de accesibilidad a ese elemento (pero no olvides ponerle "título", para luego reconocerlo, que en DW no se ven!).

Ese archivo se mostrará con una "F" grande, en un recuadro de color oscuro.

La opción "bucle", si está activada, indica que, al finalizar la película, ésta volverá a comenzar desde el principio (lo normal).

La opción "reproducción automática", si la marcamos, nada más cargar ese archivo Flash, lo dejará activado, para que pueda verse lo antes posible.

Podemos ver si se ejecuta, pulsando, abajo a la derecha, el botón "Reproducir".

Vamos a insertar un archivo de audio, justo debajo del archivo de flash.

Por eso, la opción "insertar", "media", "plug-in", nos permite introducir cualquier elemento multimedia.

Elegimos el archivo correspondiente (recomendado, tener un .midi "a mano"). Son melodías y ocupan muy poco espacio.

Los archivos "plug in" que insertemos, aparecerán con un símbolo de "puzzle".

Ahora, podremos establecer la altura y anchura con la que se mostrarán los controles de audio. En caso de no especificar ningún tamaño, se mostrará el tamaño por defecto de los controles (los valores iniciales que tienen establecidos).

Todos los objetos insertados a través de la opción "plug-in", precisan que el navegador tenga instalado ese mismo plugin (adobe flash, shockwave....).

En el apartado URL plug-in, podemos introducir la dirección web adecuada, en caso de que la persona no lo tenga instalado.

Los sonidos se reproducen automáticamente al cargarse la página web y se reproducen SOLO UNA VEZ. Estos valores pueden cambiarse "toqueteando" en el código.

Añadimos, justo antes del objeto (swfobject o similar), la línea:

<embed src="media/audio.mid" autostart="false" loop="true"></embed>

Podemos añadir autostart="false" para uqe se reproduzca automáticamente y loop="true", para que se cree un bucle y suene todo el tiempo.

NOTA: media/audio.mid , hace referencia a la carpeta "media", dentro de nuestro Sitio de DW y audio.mid es el archivo concreto.

Para insertar un video: insertar, media, plugin.

Los videos, igual que los sonidos, solo se reproducen una vez.

En el apartado código, añadimos:

<embed src="media/chotillo.avi" width="32" height="32" autostart="false" loop="true"></embed>

(código válido para ese archivo en concreto, con esas dimensiones de tamaño de video -si es más grande, se reducirá para que entre en esa ventana)

Podemos probar a quitar el tamaño reducido del video, en la parte inferior (An. y Al.). Déjalos sin nada (ni cero, ni 32....). Nada es nada.

Si nos aparece un aviso de "copiar archivos dependientes", decimos que sí.

Formularios en Dreamweaver: leedlo con calma!!!

Menús de salto: desplegable que me permita elegir rápidamente opciones

Insertar capas en Dreamweaver

Tenemos que ir a:

-insertar

-objetos de diseño

-elijo Div PA (para poner una capa "flotante" , dentro de la que insertaré la tabla)

PA = Posición absoluta (nos permite moverla donde queramos)

Ahora, en la parte inferior, donde pone ID , pondré el nombre de lo que deseo (tabla1, menú, etc).

Iz y Sup, indican la distancia en pixeles que hay entre los límites izquierdo y superior del documento y la capa.

An y Al, son la anchura y altura de esa capa.

Indice "Z", es el número de orden en la colocación de las capas. Una capa con un número Z bajo, será solapada por otras capas con un número "Z" más alto (como si un segundo piso estuviera "por encima" de un primero y visto desde arriba, sólo viéramos ese segundo pido).

VIS = visibilidad inicial de la capa

dentro de ahí:

-default: visibilidad predeterminada, que depende del elemento donde se encuentre insertada la capa

-inherit: hace que se muestre la capa mientras se esté mostrando el elemento donde está insertada

-visible: hace que se muestre la capa aunque no se esté mostrando el elemento donde está insertada

-hidden (oculto): hace que la capa se oculte. Es la que vamos a seleccionar.

Para ver todas las capas:

-menú ventana , elementos PA

Como enviar un formulario "directo" a nuestro buzón de correo

Fuente: http://www.forosdelweb.com/f17/enviar-formulario-con-dreamweaver-mx-191948/

Para poder enviar un formulario (usando Outlook o lo que tenga configurada esa persona), podemos probar el siguiente código.

Cópialo entero y guárdalo en un documento que se llame formulario.html

Recuerda que la línea donde dice "mailto:xesusvazquez@yahoo.es" , es porque ese formulario llegará sólo (única y exclusivamente) a esa cuenta de correo. Cámbialo por la tuya, para ver cómo funciona, ¿ok?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!>
<META content="" name=Author>
<META content="" name=keywords> 
<BLOCKQUOTE>
<BLOCKQUOTE>
<BLOCKQUOTE>
<form name="form1" method="post" action="mailto:xesusvazquez@yahoo.es">
<div align="center">
<TABLE>
<TBODY>
<TR>
<TD align=right><FONT face="Arial, Helvetica" size=2><B>Nombre:
</B></FONT></TD>
<TD><INPUT size=50 name=nombre> </TD>
</TR>
<TR>
<TD align=right><FONT face="Arial, Helvetica" size=2><B>Cargo:
</B></FONT></TD>
<TD><INPUT size=50 name=cargo> </TD>
</TR>
<TR>
<TD align=right><FONT face="Arial, Helvetica" size=2><B>Empresa:
</B></FONT></TD>
<TD align=right><INPUT size=50 name=empresa> </TD>
</TR>
<TR>
<TD align=right><FONT face="Arial, Helvetica" size=2><B>Direccion:
</B></FONT></TD>
<TD align=right><INPUT size=50 name=direccion1> </TD>
</TR>
<TR>
<TD align=right><FONT face="Arial, Helvetica" size=2><B>Direccion:
</B></FONT></TD>
<TD align=left><INPUT size=50 name=direccion2> </TD>
</TR>
<TR>
<TD align=right><FONT face="Arial, Helvetica" size=2><B>Ciudad:
</B></FONT></TD>
<TD align=left><INPUT size=50 name=ciudad> </TD>
</TR>
<TR>
<TD align=right><FONT face="Arial, Helvetica" size=2><B>Provincia:
</B></FONT></TD>
<TD align=left><INPUT size=15 name=provincia> </TD>
</TR>
<TR>
<TD align=right><FONT face="Arial, Helvetica" size=2><B>Codigo
Postal: </B></FONT></TD>
<TD align=left><INPUT size=15 name=cp> </TD>
</TR>
<TR>
<TD align=right><FONT face="Arial, Helvetica" size=2><B>Pais:
</B></FONT></TD>
<TD align=left><INPUT size=15 name=pais> </TD>
</TR>
<TR>
<TD align=right><FONT face="Arial, Helvetica" size=2><B>E-mail:
</B></FONT></TD>
<TD align=left><INPUT size=25 name=email> </TD>
</TR>
<TR>
<TD align=right><FONT face="Arial, Helvetica" size=2><B>Tel: </B></FONT></TD>
<TD align=left><INPUT size=15 name=tel> </TD>
</TR>
<TR>
<TD align=right><FONT face="Arial, Helvetica" size=2><B>Fax:

</B></FONT></TD>
<TD align=left><INPUT size=15 name=fax> </TD>
</TR>
<TR>
<TD align=middle colSpan=2><BR>
<FONT face="Arial, Helvetica" size=2><B>Escriba su consulta:
</B></FONT></TD>
</TR>
<TR>
<TD align=middle colSpan=2><TEXTAREA name=comentarios rows=5

cols=48></TEXTAREA>
</TD>
</TR>
<TR>
<TD align=middle colSpan=2> <p><BR>
<INPUT type=reset value=Borrar>

<input type="submit" name="Submit"

value="Enviar">
</p></TD>
</TR>
</TBODY>
</TABLE>
</div>
</FORM></BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE>
<CENTER>
<HR align=center width="100%" color=#ffa518 SIZE=2>
<BR></CENTER>
<title>Formulario de Contacto</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

</body>
</html>

Para conseguir 3 botones y que cada botón vaya a un sitio , debes poner delanbte la etiqueta >A HREF="http://www.dondetellevelacabeza.es"> y luego cerrarlo con un </A>.

Prueba este código:

<HTML>
<HEAD>
<TITLE> menú de cursos , para elegir lo que

quieras </TITLE>
</HEAD>

<BODY>

<A HREF="http://www.cursos.es">
<form name="groovyform">
<input
type="button"
name="groovybtn1"
class="groovybutton"
value="1.Cursos"
title="">
</form>
</A>

<A HREF="http://www.dondeestamos.es">
<form name="groovyform">
<input
type="button"
name="groovybtn1"
class="groovybutton"
value="2.Donde estamos"
title="">
</form>

<A HREF="http://www.manuales.es">
<form name="groovyform">
<input
type="button"
name="groovybtn1"
class="groovybutton"
value="3.Manuales"
title="">
</form>

Y luego, este otro, que es lo mismo, pero con código CSS delante, que le da formato a todos los botones:

<HTML>
<HEAD>
<TITLE> menú de cursos , para elegir lo que

quieras </TITLE>
</HEAD>

<BODY>

<style type="text/css">

input.groovybutton
{
font-size:16px;
font-family:Trebuchet MS,sans-serif;
font-weight:bold;
color:#FFFFFF;
width:400px;
background-color:#66CCCC;
border-style:groove;
border-color:#336633;
border-width:2px;
}

</style>

<script language="javascript">

function goLite(FRM,BTN)
{
window.document.forms[FRM].elements

[BTN].style.color = "#FFFFCC";
window.document.forms[FRM].elements

[BTN].style.borderColor = "#00CC00";
}

function goDim(FRM,BTN)
{
window.document.forms[FRM].elements

[BTN].style.color = "#FFFFFF";
window.document.forms[FRM].elements

[BTN].style.borderColor = "#336633";
}

</script>

Código y procedimiento para crear botones de menú en nuestra página web

para poder usar un programa de crear botones, tengo que recordar que tras poner el texto que necesito y el aspecto q me gustaria q tuviese, se van a generar uno o dos códigos.

cod. izquierda: css (sólo si uso "mouse over", si no, aparecerá "en blanco")

cod.derecha: el html necesario para q aparezca el botón del menú

Es importante recordar que deberias aplicar primero el codigo de apariencia (el "css") y luego, el boton sobre el q hará ese efecto.

Puedes probar este código que te propongo y recordar que no todos los navegadores aceptan cierto tipo de efectos:

<HTML>
<HEAD>
<TITLE> cabecera de tu web , es decir,

donde está la persona </TITLE>
</HEAD>

<BODY>
<style type="text/css">

input.groovybutton
{
font-size:16px;
font-family:Trebuchet MS,sans-serif;
font-weight:bold;
color:#FFFFFF;
width:400px;
background-color:#66CCCC;
border-style:groove;
border-color:#336633;
border-width:2px;
}

</style>

<script language="javascript">

function goLite(FRM,BTN)
{
window.document.forms[FRM].elements[BTN].style.color = "#FFFFCC";
window.document.forms[FRM].elements[BTN].style.borderColor = "#00CC00";
}

function goDim(FRM,BTN)
{
window.document.forms[FRM].elements[BTN].style.color = "#FFFFFF";
window.document.forms[FRM].elements[BTN].style.borderColor = "#336633";
}

</script>

<form name="groovyform">
<input
type="button"
name="groovybtn1"
class="groovybutton"
value="Manuales Cursos Contacto"
title="Manuales gratuitos de todo tipo"
onMouseOver="goLite(this.form.name,this.name)"
onMouseOut="goDim(this.form.name,this.name)">
</form>

</BODY>
</HTML>

Otro programa realmente interesante para hacer botones (no gratuito al 100% , ojo!!!)

Fuente: http://web-buttons.com/samples.html

O bien, desde softonic: http://free-web-buttons.softonic.com/

Hoy, veremos este programa para generar botones "atractivos" (visualmente) para nuestra web. Dado que es la versión gratuita, no podremos hacer todo lo que publicitan, pero nos ahorrará muchísimo tiempo, cuando querramos llevarlo a Dreamweaver.

martes, 24 de abril de 2012

Programa para botones -CSS Button Designer-

Fuente: http://css-button-designer.softonic.com/

Programa gratuito, fácil de manejar y con muchas opciones (botón normal, botón al pulsarse, etc). Nos da 2 códigos (el del aspecto -CSS-) y el del botón en sí (HTML).

He generado los códigos y los he acoplado a la estructura básica, quedando así:

<HTML>
<HEAD> <TITLE> TITULO </HEAD> </TITLE>

<BODY>

1er botón

<style type="text/css">

input.groovybutton
{
font-size:16px;
font-family:Comic Sans MS,sans-serif;
color:#0033FF;
border-top-style:outset;
border-top-color:#CC33FF;
border-top-width:2px;
border-bottom-style:window-inset;
border-bottom-color:#CC33FF;
border-bottom-width:2px;
border-left-style:outset;
border-left-color:#CC33FF;
border-left-width:2px;
border-right-style:outset;
border-right-color:#CC33FF;
border-right-width:2px;
}

</style>

<script language="javascript">

function goLite(FRM,BTN)
{
window.document.forms[FRM].elements[BTN].style.color =

"#FF9966";
}

function goDim(FRM,BTN)
{
window.document.forms[FRM].elements[BTN].style.color =

"#0033FF";
}

</script>

<form name="groovyform">
<input
type="button"
name="groovybtn1"
class="groovybutton"
value="Cursos"
title=""
onMouseOver="goLite(this.form.name,this.name)"
onMouseOut="goDim(this.form.name,this.name)">
</form>

2º botón

<style type="text/css">

input.groovybutton
{
font-size:16px;
font-family:Comic Sans MS,sans-serif;
color:#0033FF;
border-top-style:outset;
border-top-color:#CC33FF;
border-top-width:2px;
border-bottom-style:window-inset;
border-bottom-color:#CC33FF;
border-bottom-width:2px;
border-left-style:outset;
border-left-color:#CC33FF;
border-left-width:2px;
border-right-style:outset;
border-right-color:#CC33FF;
border-right-width:2px;
}

</style>

<script language="javascript">

function goLite(FRM,BTN)
{
window.document.forms[FRM].elements[BTN].style.color =

"#FF9966";
}

function goDim(FRM,BTN)
{
window.document.forms[FRM].elements[BTN].style.color =

"#0033FF";
}

</script>

<form name="groovyform">
<input
type="button"
name="groovybtn1"
class="groovybutton"
value="Contacto"
title=""
onMouseOver="goLite(this.form.name,this.name)"
onMouseOut="goDim(this.form.name,this.name)">
</form>

</BODY>

</HTML>

Uso avanzado de marcos: poner 2 páginas en 1 sola

El fin de este ejercicio es tener un archivo "separado" que se llame, por ejemplo, marcos.html

Este archivo no tiene nada, sólo hace referencia a la división de la pantalla en partes, concretamente un 15%. En la parte superior muestra ejemplo5 y en la parte inferior, ejemplo 6.

<html>
<head>
<title>Las dos filas</title>
</head>
<frameset rows="15%,*">
<frame src="ejemplo5.html">
<frame src="ejemplo6.html">
</frameset>

IMPORTANTE: no usar etiqueta BODY, ya que sólo aparecerían las divisiones, pero NO la información.

Texto con colores en HTML

colores básicos en inglés:

white
orange
green
blue
purple
brown
yellow
pink
red

<br>

<HTML>
<HEAD>
<TITLE>Ejemplo 11</TITLE>
</HEAD>
<BODY>

<font face="Arial" color="orange" size=5>El tipo (face) de esta

letra debe ser "Arial", el color (color) debe ser "anaranjado" y el

tamaño (size) debe ser "1"</font>
<br>
<font face="Arial" color="red" size=4>El tipo (face) de esta letra

debe ser "Arial", el color (color) debe ser "anaranjado" y el

tamaño (size) debe ser "1"</font>
<br>
<font face="Arial" color="yellow" size=3>El tipo (face) de esta

letra debe ser "Arial", el color (color) debe ser "anaranjado" y el

tamaño (size) debe ser "1"</font>
<br>
<font face="Arial" color="blue" size=2>El tipo (face) de esta letra

debe ser "Arial", el color (color) debe ser "anaranjado" y el

tamaño (size) debe ser "1"</font>
<br>
<font face="Arial" color="green" size=1>El tipo (face) de esta letra

debe ser "Arial", el color (color) debe ser "anaranjado" y el

tamaño (size) debe ser "1"</font>

<br>
<marquee>Bienvenidos a mi página</marquee>
<H1>
<p align="right">Tablas avanzadas</H1></p>

<TABLE WIDTH="50%" BORDER="1" CELLSPACING="3"

CELLPADDING="2">
<TR>
<TD COLSPAN="2" ALIGN="right">Dato 1</TD>
<TD>Un texto cualquiera</TD>
<TD ROWSPAN="2">Dato 3</TD>
</TR>
<TR>
<TD>Dato 4</TD>
<TD>Dato 4</TD>
<TD ALIGN="center">Dato 5</TD>
</TR>
</TABLE>

</BODY>
</HTML>