Videobox: Un Lightbox para video

Enero 19th, 2010 6 Comentarios »

En clase hemos visto multitud de clones del script LightBox. Son muy sencillos de usar y obtenemos un efecto muy interesante para mostrar las fotos de nuestras paginas.

Por si alguno no se acuerda, yo en clase suelo explicar el uso del LyteBox que, como veis, no es mas que un clone muy sencillo del anterior.

Pues bien, el mismo efecto que conseguimos en las fotos podemos conseguirlo en los videos de youtube que enlacemos en nuestras paginas usando para ello VideoBox.

Colocar VideoBox es exactamente igual que colocar cualquier clone de LightBox. Lo primero es descargar el archivo con todo lo necesario: AQUI.

Lo siguiente es enlazar las librerias .js y el CSS:

<script src="js/mootools.js" type="text/javascript"></script>
<script src="js/swfobject.js" type="text/javascript"></script>
<script src="js/videobox.js" type="text/javascript"></script>

<link rel=”stylesheet” href=”css/videobox.css” type=”text/css” media=”screen” />

Y para finalizar, al igual que pasaba con LightBox y similares, colocamos el atributo rel en los enlaces que usados para ver los videos de youtube que queremos poner en nuestras paginas:

<a href="http://www.youtube.com/watch?v=uhi5x7V3WXE" rel="vidbox" title="caption"> Foto relacionada con el video </a>

Tampien tenemos la opción de cambiar la resolución que queremos para la reproducción de nuestro video de forma muy sencilla: rel="vidbox width height".

Por ejemplo:

<a href="http://www.youtube.com/watch?v=VhtIydTmOVU" rel="vidbox 800 600" title="caption"> Foto relacionada con el video </a>

Galeria de Fotos Polaroid

Enero 18th, 2010 Sin Comentarios »

Aqui os traigo un efecto muy llamativo con el que vais a poder colocar vuestras imágenes imitando las fotos tipo polaroid: demo

Montar este “efecto” es muy sencillo. Como siempre, lo primero es descargarse las librerias necesarias de aqui.
Dentro del fichero que descargamos, aparte de estar todo lo necesario para que funcione el efecto, tenemos también un ejemplo que podemos abrir para editarlo y ver como funciona (index.html).

Lo siguiente es enlazar las librerias necesarias y el CSS:

<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/jsapi.js"></script>
<script type="text/javascript" src="js/script.js"></script>

Lo ultimo que tenemos que hacer hacer es mantener la siguiente estructura HTML para insertar las fotos:
<div id="polaroidcontainer">
<div class="polaroid">
<img src="images/01_colosseum.png" alt="Colloseum" />
<p>Coloseum in Rome</p>
</div>
<div class="polaroid">
<img src="images/02_vatican.png" alt="Vatican" />
<p>Vatican</p>
</div>
<!-- Mas imagenes aqui -->
</div>

Aclaraciones

El primer DIV ‘polaroidcontainer‘ sirve para delimitar “la mesa” donde estarán colocadas nuestras fotos. El tamaño de esa “mesa” lo podemos tocar en el CSS buscando el selector correspondiente:

#polaroidcontainer { width:800px; height:400px; }

Para ir poniendo fotos nuevas tan solo debemos ir añadiendo:

<div class="polaroid">
<img src="Ruta de la nueva foto" alt="alt de la foto" />
<p>Titulo de la foto</p>
</div>

El DIV ‘polaroid‘ es el encargado de hacer el efecto deseado. Dentro del CSS veremos que usa como imagen de fondo para cada foto el archivo: polaroid-bg.jpg para imitar el estilo de foto polaroid.
Dentro de este DIV ira la foto deseada (con etiqueta IMG) y el titulo de cada foto (entre etiquetas P).

Si ademas combinais este efecto con el LyteBox o similares, os queda una galeria de fotos muy completa.

Pagina Oficial del Efecto

Textareas elasticos

Enero 15th, 2010 Sin Comentarios »

He encontrado un efecto muy curioso y muy facil de activar: Textareas elasticos
Con este efecto vamos a conseguir que nuestros textareas ocupen solo la altura necesaria para albergar el texto que escriba el usuario. Si el usuario escribe/borra texto, el textarea se adapta al contenido. Ver Demo.

Si mirais la documentación de la pagina que os he pasado antes, o mejor, si mirais el código fuente de la página de demostración, vereis que es muy sencillo “echar a andar” ese efecto:

Lo primero es descargar y enlazar librerias .js necesarias:

<script type="text/javascript" src="ext-core.js"></script>
<script type="text/javascript" src="elastic-textarea.js"></script>

Como veis, usa la API Ext JS JavaScript Podeis descargarla de AQUI. Para el ejemplo solo necesitamos el fichero ext-core.js, es decir, del fichero .zip que nos descargamos, solo necesitamos (para este efecto) el fichero ext-core.js de todos los que trae.

La siguiente libreria, elastic-textarea.js, la descargamos de AQUI.

Para acabar, definimos nuestro textarea con un id, pej:

<textarea id="comentarios">Texto del textarea</textarea>

Y colocamos la llamada a la funcion:

<script type="text/javascript">
elasticTextArea("comentarios");
</script>

Y ya esta :)

Todas las instrucciones (en ingles) y los enlaces que yo he puesto aqui vienen en la pagina oficial del efecto: Six Revision

Todos los tutoriales subidos!!!

Diciembre 3rd, 2009 Sin Comentarios »

Por fin he terminado de arreglar y subir todas las partes del video tutorial de manejo del PhpMyAdmin.

He subido el volumen del sonido, eliminado el ruido de fondo y he añadido un efecto zoom bastante util para ver mejor las cosas.

Ya no tengo la voz de dormido que tanto le gustaba a Alba!!! :)

Os recuerdo que los enlaces a los videos están aquí: Tutorial PhpMyadmin

Espero vuestros comentarios y/o correcciones.

Optimizando nuestros CSS

Noviembre 24th, 2009 Sin Comentarios »

Dentro de las “buenas costumbres” que debemos tener a la hora de crear nuestra hoja de estilos está la de optimizar dicha hoja una vez la tengamos terminada. De esta forma vamos a conseguir que nuestro archivo pese bastante menos.

Alguno pensará que no es necesario optimizar el peso de un triste archivo CSS que apenas pese 3Kb. Pues muy mal pensado :) Hay que intentar optimizar todo lo posible este tipo de cosas (peticiones al servidor y descarga de archivos necesarios), maxime cuando el ADSL en España va como va.

Además, se recomienda juntar todas las hojas de estilo de nuestro sitio para tener UN SOLO archivo css (asi solo se realiza una petición al servidor). Si hacemos esto, probablemente el archivo pese mas de 3Kb.

A continuación os muestro un par de paginas dedicadas a la optimizacion de archivos css. Son muy sencillas de usar (se utiliza un formulario). Subimos el archivo css o copiamos su contenido en el formulario. Le damos a optimizar y… voila! nos devuelve el código optimizado y toda la información referente a los cambios que ha realizado y al ratio de optimizacion conseguido. Las páginas son cssoptimizer y css compressor

CSS Optimizer

CSS Compressor

Recomendacion para leer: CSS Avanzado

Octubre 4th, 2009 2 Comentarios »

Aqui estamos otro curso mas!!! Durante este tiempo de descanso he estado mirando un par de libros interesantes relacionados con el tema de diseño web.

El primero es la Guia Practica de Anaya Multimedia sobre Joomla 1.5.X. El libro esta muy bien (en la línea de las guias de esta colección), sin embargo, al ser una lectura “obligada” por temas de trabajo, no la estoy disfrutando todo lo que debiera.

Mi siguiente recomendación si me gusto mucho cuando la leí. Es mas, lo estoy volviendo a releer ahora mismo con el objetivo de hacer unos apuntes nuevos para este curso :) .
El libro en cuestión es CSS Avanzado. Como veis es de la famosa pagina Librosweb.

Son solo 150 páginas pero MUY interesantes y con mucha información MUY UTIL. Es el complemento perfecto al libro que usamos en clase (sacado de la misma pagina).
Comenta desde trucos para obtener efectillos curiosos usando CSS (transparencias, bordes redondeados, sombra paralela…) hasta propiedades y selectores avanzados. Pasando por temas de depuración, rendimiento y “buenas costumbres para hacer una CSS”.

No os dejéis engañar por el titulo. Lo de “Avanzado” es para que se lea el otro libro primero. Cualquiera de vosotros (hablo de mis alumnos que tienen el titulo :) ) puede leerlo y entenderlo perfectamente. Y lo mejor es que, con dedicarle un poco de lectura por las tardes, en 3-4 días lo tenéis listo.

Para finalizar, agradecer a D. Javier Eguíluz Pérez, autor de estos libros, por compartir de forma gratuita, sus conocimientos sobre el tema de diseño web. Yo personalmente, he aprendido mucho leyendo sus libros (que han sido casi todos :p)

Altura mínima en Internet Explorer

Julio 19th, 2009 1 Comentario »

Aqui os dejo una cortita entrada muy interesante del blog ‘blocdeesbozos‘ de mi alumnito frikidelosquedacharlas preferido.

Comenta como hacer funcionar ‘min-height’ en Internet Explorer. Copio tal cual:

Es una combinación de selectores CSS para conseguir que un div tenga un alto mínimo. Esto viene muy bien para decorar tablas que, vía MySQL, tendrán resultados diferentes en función de lo que se busque. Gracias a esto, la imagen de fondo de la tabla siempre aparecerá:

    .tabla{
           min-height:500px;
           height:auto !important;
           height:500px;
    }

Me hizo falta para una cosa del trabajo, y después de mucho buscar, dí con la solución. Aquí podéis ver una prueba. Independientemente del tamaño que alcance esa lista (podéis probar con varias provincias), la marca de agua colocada en el fondo siempre mantendrá el mismo alto, y por tanto se verá entera.

Articulo original : Blocdeesbozos

Posicionar una Web en Flash

Julio 17th, 2009 Sin Comentarios »

Navegando por los mil blogs a los que estoy subscrito, he encontrado un articulo muy interesante sobre el posicionamiento de páginas en flash.

Es cortito y recomiendo su lectura:

Posicionar una Pagina Flash

Alternativa al WAMP

Julio 14th, 2009 2 Comentarios »

Durante mucho tiempo, en las clases he estado usando el WAMP Server como servidor web para nuestros ejercicios de PHP. Como ya conoceis la mayoria, es sencillo de instalar y la sopciones que trae por defecto son mas que suficientes para probar los ejercicios del curso.

Sin embargo, este curso no he podido usarlo. El centro nos ha “capado” los equipos. Para acceder a cada ordenador hay que introducir unos datos proporcionados por los informaticos (normalemente nombre.apellido1 y DNI). Dichos datos se validan en un servidor LDAP externo a la clase (luego va todo por red) y los permisos que tenemos TODOS (incluido yo) son pocomo mas que los de la cuenta “Invitado” de WindowsXP.
Esto se hace para evitar que los PC’s se infecten de virus y que yo veo bien. Pero seamos serios, un curso de Diseño Web necesita un acceso al PC, si no total, al menos mucho mas amplico al que tenemos actualmente.

[Modo llorica ON]

Al no poder instalar NADA (ni PSPAD, ni TopStyle, ni versiones de prueba de Adobe…) se une el que muchas paginas de diseño, de tutoriales, de recursos… son filtradas y aparece el mensaje de error del “Proxy de la Junta” impidiendo su acceso.

DEMASIADAS paginas estan restringidas por el proxy. Y cuando digo demasiadas digo casi un 85% de las paginas normales que hay por internet (nada obsceno ni cosas de esas). Youtube va mal. No carga casi ningun video y cuando empieza a cargar alguno, tarda muchisimo.
Por supuesto, los puertos FTP (para poder subir paginas a internet) y SMTP (para el envio de correos con funciones PHP) estan cerrados.

El PSPAD y el TopStyle no han funcionado bien en todo lo que llevamos de curso. No puedo crear carpetas para compartir archivos con los alumnos (me han habilitado una carpeta publica en un servidor aparte). Cuando la red se cae (que se ha caido ya 3 veces), nos quedamos sin carpeta de clase y sin acceso a los ordenadores…

Y aun asi, los informaticos han intentado siempre ayudarme y “minimizar” los efectos de esta situacion. Pero claro, las ordenes vienen de arriba…

[Modo LLorica OFF]

Esta claro que, con esta situación, hay que buscarse la vida para poder instalar un servidor web de manera SENCILLA y accesible por la gran mayoria. Gracias a dios, y siendo un poco previsor, ya le tenía echado el ojo al XAMPP PORTABLE.

Su instalación es mas sencilla que la del Wamp. Tan solo hay que descargarse el fichero y descomprimir su contenido en la carpeta que queramos (como si quiere ser en el escritorio, aunque yo no lo recomiendo).

A continuación, abrimos la carpeta donde hemos extraido los archivos y pulsamos sobre el fichero: setup_xampp.bat

Ficheros XAMPP Portable

Esto solo hay que hacerlo la primera vez que ejecutemos el Xampp. Despues ya no hace falta hacerlo mas.
Lo siguiente (esto si hay que hacerlo siempre que queramos usar el Xampp) es hacer doble click sobre el archivo xampp-control.exe para obtener el panel de control.

Icono Xampp-Control

En dicho panel, hay que activar los modulos de Apache y MySQL pulsando sobre los botones Start correspondientes. Si todo ha ido bien, aparecerá un cartelito al lado de cada modulo que pone Running

Panel de Control Xampp

Para comprobar que todo ha ido bien, escribimos Localhost en la URL de nuestro navegador preferido y debemos obtener algo como esto:

Pagina inicio Localhost

Si os dais cuenta, en el menu de la izquierda de esa página hay un enlace para acceder al PhpMyAdmin.

Para finalizar, no existe la carpeta www como en el WAMP. Las paginas de los ejercicios deben meterse en la carpeta htdocs.

Video Tutoriales PhpMyAdmin

Julio 13th, 2009 1 Comentario »

He corregido los video-tutoriales para aprender a crear una Base de Datos con el PhpMyAdmin. Tienen mejor calidad que los antiguos, efectos de Zoom y estoy mas “despierto” que en las versiones antiguas :)
Eso si, algunos videos tienen ruido de fondo :S Supongo que será por la mala calidad de mi micrófono.

Aqui os dejo los enlaces a youtube:

Parte 1: Presentacion y creacion de la Base de Datos.
Parte 2: Creación de Tablas (I).
Parte 3: Creación de Tablas (II) y relaciones.
Parte 4: Rellenando Tablas y Creando Relaciones
Parte 5: Rellenando Tabla Cursos
Parte 6: Terminando de Rellenar Todas las Tablas
Parte 7: Exportar/Importar la Base de Datos

Noviembre de 2009: Estas versiones están corregidas y mejoradas (efecto zoom y eliminación del ruido).