Insertar un Video en nuestra web

Insertar un Video en nuestra web

En ocaciones es necesario colocar un video en nuestra pagina web para mostrar un anuncio u ofrecer alguna guia o manual. Pero el video debe de tener un formato especifico para cada explorador, debido a que no todos pueden repodrucir los mismo formatos, a continuación se muestra como hacerlo.

Una vez que tenemos el vídeo en un formato adecuado, podemos insertarlo en la página web mediante el elemento HTML <video>. Su estructura es muy similar a la que se empleas con las imágenes, aunque en este caso sí lleva etiqueta de cierre.

<video src=”video/fireworks_reducido.webm”></video>

La ruta del vídeo debe ser la que corresponda (en nuestro ejemplo, está colocado dentro de una carpeta llamada video). Al probar la película en el navegador, obtendremos un resultado similar al de la figura:

Muestra video

 

Nota: Si no se muestran los controles o el vídeo no se reproduce, haga clic con el botón derecho sobre él para mostrar un menú con las opciones necesarias para corregirlo.

Así podemos probar diferentes formatos para ver cuál es el que se reproduce en nuestros navegadores habituales. Esa misma página no se reproducirá correctamente en Internet Explorer, pero sí lo hará en Google Chrome. De hecho, Google Chrome sería capaz de reproducir cuatro de los formatos que hemos generado, como se muestra en la figura:

Varios videos

 

La etiqueta video ofrece una solución alternativa, para evitar estos inconvenientes de formatos, que consiste en ofrecer el vídeo en varios formatos, para que sea el propio navegador el que muestre el más adecuado.

La etiqueta se escribiría de la siguiente manera:

<video>
<source src=”video/fireworks_reducido.mp4″ type=”video/mp4″ />
<source src=”video/fireworks_reducido.ogg” type=”video/ogg” />
<source src=”video/fireworks_reducido.webm” type=”video/webm” />
</video>

Este ejemplo concreto se reproduciría perfectamente en la mayor parte de los navegadores actuales.

Dimensiones del vídeo

Como sucedía con las imágenes, en un vídeo podemos indicar su anchura y altura mediante los valores width y height. De hecho es recomendable hacerlo, para que el navegador sepa de antemano el espacio que debe destinar al vídeo. Por tanto, este ejemplo es más adecuado que el anterior:

<video width=”300″ height=”208″>
<source src=”video/fireworks_reducido.webm” type=”video/webm” />
</video>

Los valores que emplearemos serán los que utilizamos al crear el vídeo.

Más parámetros

Hay otros parámetros que resultan útiles para la reproducción del vídeo:

  • controls: si queremos que se muestren los controles que permiten pararlo, reproducirlo, etc. Basta con insertar ese término, sin más valores.
  • autoplay: al indicar este valor, el vídeo se reproducirá en cuanto esté listo.
  • preload: hace que el vídeo se empiece a cargar en cuanto se accede a la página. Por el contrario, indicando preload=”none”, no se cargará hasta que el usuario haga clic en el vídeo para su reproducción. Esta segunda opción es muy útil, si el vídeo no es el recurso fundamental de la página y vamos a tener personas que no estén interesadas en verlo, ya que nos ahorrará mucho ancho de banda.
  • loop: indicándolo conseguiremos que el vídeo se reproduzca cíclicamente. Si no indicamos nada, al terminar su reproducción se detendrá.
  • muted: el vídeo no tendrá sonido al comenzar.

Nota: Como se puede observar, la mayoría de estos parámetros no requieren indicar su estado. Son valores booleanos, que están activos o inactivos. Si se indica el parámetro, está activo y si no, no lo están. 

Con todo esto podríamos definir lo que harían estos ejemplos:

<video src=”video/fireworks_reducido.webm” width=”300″ height=”208″ autoplay controls></video>

Se carga el vídeo y se reproduce inmediatamente, mostrando los controles.

<video src=”video/fireworks_reducido.webm” width=”300″ height=”208″ preload controls></video>

Se muestran los controles, el vídeo se precarga, pero no se reproduce hasta que el usuario pulsa el botón de reproducción.

<video src=”video/fireworks_reducido.webm” width=”300″ height=”208″ preload=”none” controls></video>

Igual que el anterior, pero no se precarga hasta que el usuario hace clic.

Tomado de www.ite.educacion.es

Descarga el manual en formato pdf en  este Link

Creación de botonera de action script en Flash

Creación de botonera de action script en Flash

 

 

 

 

 

Pasos para la creacion:

  • Abrimos un nuevo documento flash, seleccionamos archivo, nuevo, documento flash.

  • Utizamos la opcion ajustar a ventana que aparece un poco arriba de la pagina.
  • Utilizamos la herramienta de rectangulo y lo rellenamos con el color que deseamos.

  • luego seleccionamos la herramienta de selección y elegimos la herramienta de degrado.

  • Añadiremos un texto y utilizamos la herramienta de selección.

  • Ahora copiaremos este rectangulo con texto presionando la tecla CTRL sin soltar y bajamos con el mause, repetiremos esta accion dependiendo cuantos botones queramos.

  • Ahora solo cambiaremos texto a los demas  rectangulo, para ahorrar tiempo le agregue numero .

  • Muy bien ahora solo acomodaremos los rectangulos.

  • Para esto vamos a darle el nombre de instancia pero solo a los botones  que  van estar ocultos.

  • Selecionamos con un clip el rectangulo que le pondremos su nombre de instancia asi aremos con todas.

  • NOTA: siempre recuerden el nombre de instancia que se le dan a sus simbolos , recordar solo a los botones q vamos a ocultar los demas no.

  • insertaremos una capa nueva . la 1er capa la llamaremos botones y la 2da capa acciones.

  • Seleccionamos la capa de acciones y seleccionamos la opcion acciones-fotograma.

  • Luego escribiremos los nombres de instancia que le asignamos a los botones que vamos a ocultar.

  • seleccionamos la opcion revisar sintaxis para ver si no hay herrores.

  • Presionamos la tecla CTRL + ENTER para probar la pelicula.

Como se observa los botones desaparecieron, y solo hay uno visible. Esto es lo que paso con el codigo mencionado.

  • Ahora vamos animar los botones desaparecidos, siempre es bueno poner comentarios para no perderse.

  • copiamos este codigo y lo pegamos  despues del primer codigo, ahece pegar y copiar con el fin de ahorrar tiempo.

  • Ahora bien solo cambiaremos el nombre de intancia por el nombre de instancia de 2 boton. Aremos lo mismo de pegar y cambiar propiedades con el otro boton o el numero de botones que tengan.

  • Cuando tengamos los botones terminados le damos clip en la opcion revisar sintaxis para ver si hay errores.

  • Seleccionamos la opcion linea de tiempo.

  • Ahora animaremos y programaremos la aparicion de los botones al click.

  • Le damos doble click al primer boton , luego seleccionamos el boton nuevamente y lo convertimos en clip de pelicula. Le pondremos de nombre de boton5 y de nombre de instancia b_btn. NOTA pueden ponerle cualquier nombre yo le puse esos para que se guien.

  • Ahora añadiremos un nuevo fotograma clave presionando la tecla F6. Como pueden ver tiene el nombre de instancia que esta en el fotograma 1. Ahora en el fotograma 2 se lo cambiaremos. OJO esto es muy importante.

  • Ahora insertaremos una nueva capa y luego un fotograma clave, recuerden seleccionar el fotograma y presionar F6.

Seleccionamos la capa2 del fotograma1, le damos clip derecho para desplegar opciones y le damos clip en la opcion acciones. Ahora programaremos nuestro boton recuerden estamos en el fotograma1.

Onrollover:  aki indico que al pasar por el boton se apague un 45%.

Onrollout: esta funcion hace que cuando no pase el puntero por aki regrese a su capacidad a 100%.
Presionamos CTRL + ENTER  para probar pelicula.

  • Ahora aremos que al click a este boton aparescan los demas.

NOTA: aki estoy diciendo que al presionar el boton este se vaya al fotograma2 de nuestro boton que no esta oculto y que haga alos demas botones visibles.

  • Presionamos CTRL + ENTER  para probar pelicula.

  • Ahora seleccionamos linea de tiempo le damos clip a escena1 y nos hubicamos en la capa de acciones , fotograma1.

  • Muy bien ya es visible ahora vamos a ocultarla.

  • Seleccionamos acciones-fotograma, ahora vamos a programar en el fotograma2 de nuestro boton principal para ocultar los botones.

  • Luego nos vamos a linea de tiempo capa2, fotograma1.

  • Ahora vamos a programar en el fotograma2 de nuestro boton principal para ocultar botones.

  • Para esto copiamos el codigo del primer fotograma de nuestro boton principal y lo pegamos en el segundo fotograma.

  • Ahora solo cambiamos el nombre de instancia por el nombre de instancia que pusimos en el segundo fotograma.

  • Cambiamos el 2 por el 1 y cambiamos true por false, presionamos CTRL + ENTER para probar pelicula. Y listo ya esta

  • nuestra botonera con action script 2.0.

 

Así es como se vería la botonera: 

[swf:http://www.trucosmultimedia.tk/Files/botonera.swf 800px 534px]

Parte #1

Parte #2

 

Descargar el manual en formato pdf en  este Link

Descargar archivo del código fuente en este Link

Crear un formulario web que guarda los datos en un txt

Crear un formulario web que guarda los datos en un txt

Muchas veces necesitamos guardar la información que se ingresa en un formulario para poder revisarlos en otro momento dado, pero si no hemos configurado una base de datos o un email para el envío de la información introducida en los campos del formulario, la forma mas fácil es guardar esos datos en un archivo de texto. En este tutorial vamos a usar un formulario que va a estar compuesto de un área de texto llamado texto, un campo de texto llamado nombre y un campo de texto llamado e-mail, además de un captcha (imagen de verificación).

Crear un captcha

Vamos a empezar creando un archivo captcha.php, que debe ir junto al archivo que tenga el formulario. El código de este archivo captcha.php es el siguiente:

<?php 
// archivo: captcha.php 
function randomText($length) { 
$pattern = “1234567890abcdefghijklmnopqrstuvwxyz”; 
for($i=0;$i<$length;$i++) { 
$key .= $pattern{rand(0,35)}; 

return $key; 
}?> 
<?php 
session_start(); 
$_SESSION[‘tmptxt’] = randomText(8); 
$captcha = imagecreatefromgif(“bgcaptcha.gif“); 
$colText = imagecolorallocate($captcha, 0, 0, 0); 
imagestring($captcha, 5, 16, 7, $_SESSION[‘tmptxt’], $colText); 
header(“Content-type: image/gif”); 
imagegif($captcha); 
?>

Lo que os pongo en rojo es la ruta de la imagen que se verá de fondo detrás de las letras del captcha, podeis poner la imagen que querais.

Código html del formulario

Una vez tengamos el archivo captcha.php creado vamos a pasar a crear el código html de nuestro formulario. Por lo tanto creamos una página html y añadimos el código siguiente. He resaltado en rojo los nombres de los campos del formulario, en naranja el nombre de la página php a la que manda el formulario y en azul el código perteneciente al captcha:

<center><form action=”texto.php” method=”post” enctype=”multipart/form-data” name=”formredac”> 
Texto:<br /> 
<textarea name=”texto” cols=”60″ rows=”8″></textarea> 
<br />Nombre:<br /><input name=”nombre” type=”text” size=”30″ maxlength=”40″ style=”text-align:center” /> 
<br />Email:<br /><input name=”email” type=”text” size=”30″ maxlength=”50″ style=”text-align:center” /> 
<br /><img src=”../captcha.php” width=”100″ height=”30″><br> 
<input name=”tmptxt” type=”text” style=”text-align:center”><br> 
<input name=”” type=”submit” value=”Enviar” /> 
<input name=”action” type=”hidden” value=”checkdata”> 
</form></center>

De aquí sólo tiene que explicar el último código azul, que es un campo oculto (no se ve), y lo que hace es guardar el texto del captcha para que después se compare con lo que se ha escrito.

Código php del formulario

Ahora vamos a hacer la página php, que en el caso del código anterior como se ve en naranja) le llamaremos texto.php. A esta página php le pondremos el código html que queramos. Luego añadiremos el código php siguiente exactamente donde queramos que aparezca la frase de “se ha enviado correctamente” o “No ha introducido bien el texto de la imagen” en su caso:

<?php 
session_start(); 
if ($_POST[‘action’] == “checkdata”) { 
if ($_SESSION[‘tmptxt’] == $_POST[‘tmptxt’]) { 

$nombre_archivo = ‘texto.txt‘; 
$contenido = “\r\nTexto:” . $_POST[“texto“] . “\r\nNombre:” . $_POST[“nombre“] . “\r\nEmail:” . $_POST[“email“] . “\r\n\r\n\r\n”;
if (is_writable($nombre_archivo)) {
if (!$gestor = fopen($nombre_archivo, ‘a’)) { 
echo “<p>No se puede abrir el archivo para guardar su texto. Por favor, si el problema persiste contacte con el administrador.</p>”; 
exit; 
}
if (fwrite($gestor, $contenido) === FALSE) { 
echo “<p>No se puede escribir al archivo para guardar su texto. Por favor, si el problema persiste contacte con el administrador.</p>”; 
exit; 
}
echo “<p>Su texto fue enviado correctamente y está pendiente de verificación.</p>
<p><a href=’index.html’>Volver al índice</a></p>”; fclose($gestor);
}
else { 
echo “<p>No se puede escribir sobre el archivo para guardar su texto. Por favor, si el problema persiste contacte con el administrador.</p>”; 

}
else { 
echo “<span class=’Estilo1′>El código captcha es incorrecto</span><br><a href=’javascript:history.go(-1);’>Volver atrás</a>”; 


?>

En este código encontramos primero en rojo la ruta del archivo txt en el que se guardarán los datos. Después en celeste y naranja encontramos un estructura que se repite con un punto entre cada una: “\nCeleste: ” . $naranja . Lo que encontramos en naranja ahí es de nuevo el nombre del campo, y lo que encontramos en celeste es lo que nos llegará en el mensaje antes de lo que se puso en el campo. Por ejemplo, si en el campo nombre puse “Antonio” y en lo de celeste tengo puesto “Nombre:” pues me llegará en el mensaje “Nombre: Antonio”.

Por último en azul encontramos dos frases que si quereis podeis cambiar.

Archivo txt

Por último tenemos que crear el archivo texto.txt (abrís el bloc de notas y le dais a guardar como). Lo subís a vuestro servidor y una vez subido le cambiais los permisos y le poneis los permisos 777 (si usais el filezilla sólo teneis que darle botón derecho al archivo subido desde el filezilla, darle a “Atributos de archivo” y marcar todas las casillas o escribir 777 abajo). Luego subís todo lo demás al servidor y lo probais (teneis que probarlo subido).

Os dejo subida una muestra de este formulario. Aquí teneis el formulario, y lo que escribais se guardará aquí.

Tomado de Tu web de Informática

Descarga el manual en formato pdf en  este Link

www.000webhost.com