--- fernand0 has changed the topic to: 1:00 GMT Gustavo Gonzalez Colombia "Desarrollo de presentaciones Flash en Linux utilizando PHP" || english: #redes || umeet.uninet.edu
xtingrayHola a todos (hello to everyone)
xtingrayantes que nada me gustaria agradecer la oportunidad que por segunda vez nos ofrece MJesus para participar en umeet...
xtingrayesperamos hacer parte de la familia umeet en los futuros eventos :)
xtingrayAhora si... entremos en materia...
xtingrayInicialmente me gustaria hacer una aclaracion respecto al formato SWF...
xtingraymucha gente piensa que es propietario y que pertenece a Macromedia... pero no es asi
xtingraySWF es un formato abierto! ;)
xtingraypor alguna extraña razon... asi como muchos scanners se encuentran sin soporte para Linux... siento que aun falta mucho por hacer respecto al formato SWF
xtingrayesperemos que luego de investigaciones como la que realizamos... el movimiento GNU y los programadores de codigo abierto en general...
xtingraydecidamos generar un aplicacion importante para el desarrollo de presentaciones en formato SWF sobre Linux :)
xtingrayMientras esperaba mi turno para empezar la conferencia...
xtingraydecidi crear un pequeño ejemplo de mi trabajo con SWF que espero les guste:
xtingrayhttp://www.kazak.ws/flash/umeet.swf
xtingrayeste ejemplo ha sido desarrollo 100% sobre plataforma Linux
xtingrayAhora bien...
xtingray¿Que tipo de presentaciones en formato SWF puedo realizar utilizando PHP?
xtingrayPor el momento no es posible contar con todas las alternativas ofrecidas por las propuestas comerciales de productos como los de Macromedia, sin embargo, en t?rminos de presentaciones es mucho lo que ya se puede lograr a trav?s del uso de herramientas de libre distribuci?n.
xtingrayEsta presentacion pretende explorar las opciones que pueden aprovecharse utilizando PHP
xtingraySiguiendo con los demos... paso a exponerles otro conjunto de ejemplos:
xtingrayhttp://www.kazak.ws/12pinguinos/swf/test.html
xtingrayTodos han sido realizados utilizando herramientas de libre distribucion de las cuales hablare a continuacion.
xtingray(Obviamente corriendo sobre Linux) ;)
xtingrayEsta presentacion se divide en dos partes: la primera tratara sobre la instalacion de las herramientas de desarrollo para las presentaciones... y la segunda acerca de la implementacion de presentaciones directamente a traves de un ejemplo
xtingrayPregunta: <jmones> Cuando dices que swf es un formato abierto... qué quieres decir? que se ha publicado (en plan rtf o pdf)? que está estandarizado?
xtingraySi, toda las especificaciones acerca de este formato pueden ser encontradas en http://www.openswf.org
xtingrayBueno... sigamos con la primera parte... la de las herramientas y la instalacion:
xtingrayMing es una libreria de codigo abierto desarrollada como interfaz entre varios lenguajes de programacion (Java, Python, Perl, C++ y    
xtingrayPHP) y el formato de animacion y dibujo vectorial SWF.
xtingrayEl sitio oficial de Ming es: http://ming.sourceforge.net/ . En dicho enlace podra encontrar varios recursos relacionados con la libreria, entre ellos, algunos tutoriales.
xtingrayA pesar de que ming trae soporte para varios lenguajes... esta presentacion se enfoca a PHP... por ello:
xtingrayPre-Requisito: Dominar el lenguaje de programaci?n PHP
xtingrayNota: Si aun no sabe y desea comenzar a aprender, visite: http://www.php.net
xtingray :P
xtingray* Instalacion del Software (Usuarios Unix/Linux)
xtingrayAdvertencia para Novatos: Trate de realizar esta instalacion en un equipo en donde no se encuentre un servidor web con soporte para PHP instalado previamente. Esto con el fin de evitar sobre-escribir o dañar alguna instalacion anterior asociada a PHP. Si usted es un experto en el tema, ignore este mensaje.
xtingrayPaso 1:
xtingray    *
xtingray      Baje la ultima version de la libreria Ming desde: http://ming.sourceforge.net
xtingray      El archivo debera llamarse algo como: ming-0.2a.tgz
xtingray*
xtingrayBaje la ultima version de php desde: http://www.php.net/downloads.php
xtingray El archivo debera llamarse algo como: php-4.X.X.tar.gz
xtingray*
xtingrayBaje la mini libreria para presentaciones 12pinguinos desde:
xtingray http://www.kazak.ws/12pinguinos/12pinguinos.tar.gz
xtingray    *
xtingray      Opcional] Baje algunas fuentes de texto ".fdb" (seguramente las necesitara):
xtingray      http://www.neuralust.com/%7Emingdocs/fonts/getfonts.htm
xtingrayPaso 2:
xtingray    *
xtingray      Mueva las fuentes de todos los programas mencionados en el Paso 1 a un directorio de trabajo. Ej: /usr/local/src/flash
xtingray    *
xtingray      Descomprima las fuentes de cada programa con las siguientes instrucciones:
xtingray% tar xvfz ming-0.2a.tgz (se creara el directorio ming-0.2a)
xtingray % tar xvfz php-4.2.1.tar.gz (se creara el directorio php-4.2.1)
xtingray % tar xvfz 12Pinguinos.tar.gz (se creara el directorio 12p)
xtingrayPaso 3:
xtingray    *
xtingray      Instalacion de Ming
xtingray
xtingrayIngrese al directorio de las fuentes de la libreria Ming:
xtingray% cd /usr/local/src/flash/ming-0.2a
xtingray Ejecute:
xtingray
xtingray% make
xtingray % make install
xtingray    *
xtingray      Instalacion de PHP
xtingrayAhora instale PHP con soporte para Ming ejecutando:
xtingray% cd /usr/local/src/flash/php-4.1.2
xtingray% ./configure --with-ming
xtingray% make
xtingray% make install
xtingraySi en este punto no ha recibido mensajes de error, entonces seguramente ya esta listo para empezar a programar sus propias diapositivas. Ingrese al directorio de la librer?a 12pinguinos:
xtingray% cd /usr/local/src/flash/12p
xtingrayPara probar si todo esta bien, ejecute el siguiente comando:
xtingray% php test.php
xtingraySi el archivo test.swf es generado en este mismo directorio y puede verlo a traves de su navegador, entonces usted esta listo para empezar.
xtingray* Uso de la Libreria 12Pinguinos.php
xtingrayEl primer consejo a tener en cuenta, es realizar el inventario de todos los textos que desea colocar en su presentacion, para con ello, definir el numero total de diapositivas.
xtingrayA continuacion, cree un directorio de trabajo para generar los archivos de las diapositivas. Ej:
xtingray% mkdir /home/flash-php
xtingrayRealice una copia de la libreria 12Pinguinos.php a su directorio de trabajo:
xtingray% cp 12Pinguinos.php /home/flash-php
xtingray% cd /home/flash-php
xtingrayCree los siguientes subdirectorios dentro de su directorio de trabajo:
xtingray% mkdir fonts
xtingray% mkdir images
xtingrayEn el directorio "images" coloque todas las imagenes que desee utilizar en sus diapositivas.¿Recuerda las fuentes de letra que mencione en la etapa de instalacion? Mueva todas las que haya bajado al subdirectorio "fonts", entre mas fuentes tenga, su diseño podra ser mas variado.
xtingrayNota: La extension de las fuentes es ".fdb", no se soportan tipos diferentes (ni siquiera lo intente).
xtingrayA continuacion, edite el archivo 12Pinguinos.php a partir de la linea #10 y defina los nombres de los archivos flash de cada una de sus diapositivas en el arreglo "slide". Hagalo secuencialmente de la primera a la ultima.
xtingrayEl numero de elementos en el arreglo "slide" sera igual al numero de diapositivas que usted desea elaborar.
xtingrayLa extension de cada uno de los elementos debera ser ".swf" a pesar de que los archivos a programar sean de extension ".php". Precisamente estos ultimos generaran a los primeros.
xtingrayVamos a suponer que definio el arreglo de la siguiente manera:
xtingray$slide[0] = "diapositiva01.swf";
xtingray$slide[1] = "diapositiva02.swf";
xtingray$slide[2] = "diapositiva03.swf";
xtingray...
xtingrayEl siguiente paso sera construir los archivos: diapositiva01.php, diapositiva02.php, diapositiva03.php, y asi sucesivamente.
xtingrayVamos con el primero. En un editor de texto plano (Ej: pico, vi, emacs, etc) adicione las siguientes lineas y salve el archivo como "diapositiva01.php".
xtingraylinea 1: <?php
xtingraylinea 2: @require "12Pinguinos.php";
xtingraylinea 3: $movie = doMovie();
xtingraylinea 4:
xtingrayl?nea 5: //Espacio de Trabajo
xtingraylinea 6:
xtingraylinea 7: $movie->save($slide[0]);
xtingrayl?nea 8: ?>
xtingrayEsta sera la primera diapositiva de la presentacion, aunque aun no dice mucho muestra el numero de componentes minimos que debe poseer una diapositiva.
xtingrayDe hecho, cada archivo ".php" a construir, deber? iniciarlo con dichas l?neas a manera de plantilla. La l?nea 2 hace la importaci?n de la librer?a 12Pinguinos.php. La l?nea 3 inicializa la diapositiva como un archivo flash.
<-- jacobo has quit (Signed off)
xtingrayEntre la linea 4 y la 6, se adicionaran todos los mensajes y las imagenes a mostrar en esta diapositiva. A esta seccion la hemos denominado "Espacio de Trabajo".
xtingrayLa linea 7 se encarga de crear el archivo "diapositiva01.swf" (en este momento, seria una diapositiva en blanco).
xtingrayA continuacion, procederemos a decorar el archivo con componentes graficos y un texto. Introduzca las siguientes lineas en la seccion "Espacio de Trabajo" :
xtingray$frame = doBorder($movie);
xtingray$title = "Mi Primera Diapositiva";
xtingray$posY = 90;
xtingray$frame = makeTitle($movie,$posY,$title);
xtingrayAhora nuestro archivo se vera asi:
xtingraylinea 1: <?php
xtingraylinea 2: @require "12Pinguinos.php";
xtingraylinea 3: $movie = doMovie();
xtingraylinea 4:
xtingraylinea 5: $frame = doBorder($movie);
xtingraylinea 6: $title = "Mi Primera Diapositiva";
xtingraylinea 7: $posY = 90;
xtingraylinea 8: $fontName = "fonts/ArialBlack.fdb";
xtingraylinea 9: $frame = makeTitle($movie,$posY,$title,$fontName);
xtingraylinea 10:
xtingraylinea 11: $movie->save($slide[0]);
xtingraylinea 12: ?>
xtingrayA este punto, la diapositiva ya posee un marco decorativo, insertado en la linea 5 por la funcion "doBorder".
xtingrayUsted puede consultar dicha funcion en el archivo 12Pinguinos.php y modificarla a su gusto y crear su propio estilo. De hecho, esperamos que la libreria crezca y pueda ofrecer varios modelos, pues a decir verdad, aun queda mucho por hacer!
xtingrayAdicionalmente en la linea 9 estamos creando el titulo de la diapositiva.
xtingrayLa funcion "makeTitle" se encarga de centrar una cadena de caracteres y colocarla a la altura posY del area de trabajo. Para el ejemplo especifico "$posY = 90".
xtingrayEn la linea 8 definimos el tipo de fuente a utilizar para el texto. En este punto debera escoger una de las fuentes que adiciono en el directorio "fonts". Para este caso particular, escogi la fuente "ArialBlack.fdb". Escoja una a su gusto.
xtingrayHora de adicionar un parrafo a la diapositiva. Inserte las siguientes instrucciones despues de la linea 9:
xtingray$words[0] = "Este es el punto I";
xtingray$words[1] = "Este es el punto II";
xtingray$words[2] = "Este es el punto III";
xtingray$font[0] = $font[1] = $font[2] = new SWFFont("fonts/Impact.fdb");
xtingray$size[0] = $size[1] = $size[2] = 35;
xtingray$color[0] = $color[1] = $color[2] = 0xff;
xtingray$pos[0] = $pos[1] = $pos[2] = 100;
xtingray$numLines = 3;
xtingray$posY = 3;
xtingray$frame = makeText($movie,$numLines,$posY,$pos,$font,$color,$size,$words);
xtingrayTal como lo puede apreciar, la funcion "makeText" se encargara de ubicar de manera ordenada las cadenas almacenadas en el arreglo "words" utilizando los parametros de apariencia de los arreglos:
xtingray    *
xtingray      "font" : Define el tipo de fuente para cada linea (en este caso "Impact.fdb")
xtingray    *
xtingray      "size" : Define el tamaño de la fuente para cada linea
xtingray    *
xtingray      "color": Define la intensidad del rojo en el espacio RGB de colores asociado a cada linea. En el futuro, esperamos que la funcion soporte los tres campos: rojo, verde y azul. Por ahora G = 0 y B = 0 siempre
xtingray    *
xtingray      "pos" : Define la ubicacion en el eje X del texto de cada linea
xtingrayAdemas de dos variables simples:
xtingray    *
xtingray      "numLines": Define el numero de lineas a exponer
xtingray    *
xtingray      "posY" : es un factor que define la posicion en el eje Y en donde comenzara la primera linea del parrafo (en este caso de solo 3 lineas).
xtingrayRecuerde que usted puede definir caracteristicas diferentes para cada una de las lineas a escribir en la diapositiva segun los valores que coloque en los diferentes arreglos descritos anteriormente. Ello dependera de su diseño.
xtingrayAprendamos a adicionar imagenes en la diapositiva:
xtingray$frame = $movie->add(getImage("images/xtingray.jpg"));
xtingray$frame->scaleTo(0.5,0.5);
xtingray$frame->moveTo(-110,120);
xtingrayUna vez se haya familiarizado con la distribucion espacial de sus diapositivas, seguramente deseara adicionar imagenes en determinados lugares.
xtingrayLa funcion "getImage" de la libreria 12Pinguinos, recibe como parametro el nombre y la ruta de la imagen a colocar, en este caso: "images/xtingray.jpg".
xtingraySi usted lo desea, puede escalar la imagen en los ejes X y Y con la funcion "scaleTo" propia de Ming. Los factores de escalamiento van de 0 a 1.0 en ambos ejes.
xtingrayCon la funcion "moveTo" propia de Ming, podra decidir la ubicacion exacta de la imagen.
xtingrayHasta este punto, una diapositiva sencilla esta casi lista. Para finalizar, colocaremos un boton en la parte inferior de la diapositiva que nos permita enlazarla con la segunda y asi conseguir la secuencia de textos deseada para la presentacion.
xtingrayEllo lo conseguiremos con la siguiente instruccion:
xtingray$x = 300;
xtingray$y = 400;
xtingray$nextSlide = "'./$slide[1]'";
xtingray$image1 = "images/lt1.jpg";
xtingray$image2 = "images/lt2.jpg";
xtingray$frame = doButton($movie,$nextSlide,$x,$y,$image1,$image2);
xtingrayLa funcion "doButton" de la libreria 12Pinguinos se encarga de crear un boton que enlaza la diapositiva actual con otra. Los parametros que recibe son:
xtingray    *
xtingray      "movie" : la diapositiva actual
xtingray    *
xtingray      "nextSlide" : el nombre y la ruta de la diapositiva a enlazar
xtingray    *
xtingray      "x" : la posicion en el eje X en donde se ubicara el boton (Generalmente, centrada)
xtingray    *
xtingray      "y" : la posicion en el eje Y en donde se ubicara el boton (Generalmente, parte inferior de la diapositiva)
xtingray    *
xtingray      "image1" : Imagen del boton cuando el raton no esta sobre el
xtingray    *
xtingray      "image2" : Imagen del boton cuando el raton esta sobre el (Generalmente, imagen iluminada)
xtingrayPara el caso de las diapositivas intermedias, en las que se puede avanzar o retroceder a la diapositiva siguiente o a la anterior respectivamente, el usuario puede hacer uso de la funcion "doTwoButton", definida en la libreria.
xtingrayEn este punto, es hora de crear nuestra primer diapositiva SWF, para ello, ejecutamos el comando:
xtingray% php diapositiva01.php
xtingraySi todo sale bien, el archivo "diapositiva01.swf" sera generado. Adelante con las demas.
xtingray;)
xtingrayUna vez culminada su coleccion de diapositivas, seguramente deseara publicarla en Internet. Para hacerlo de manera sencilla, basta construir una pagina web que enlace el primer archivo de su exposicion (en nuestro caso: diapositiva01.swf) Si le agrega JavaScript, obtendra un resultado mas interesante.
xtingraySi desea un ejemplo de como hacerlo, revise el archivo "test.html" que se encuentra en el mismo directorio en donde se encuentra la libreria 12pinguinos (ej. /usr/local/src/flash/12p), inclusive, puede modificarlo a sus requerimientos.
xtingrayLa linea que mas le debe interesar (quizas la unica) es la n?mero 7:
xtingraywindow.open('story01.swf','win','width=790,height=505');
xtingrayCambie el primer argumento de la funcion, en este caso "story01.swf", por el nombre de su primer diapositiva. Los parametros "width" y "height" definiran el tamaño de la ventana que saldra en el momento en que usted visite el enlace que aparece en la pagina "test.html".
xtingrayTenga en cuenta que usted puede definir la resoluci?n y el tama?o de sus diapositivas seg?n sus necesidades. Por defecto, la librer?a 12Pinguinos.php esta dise?ada para trabajar en un espacio de 480x500 en las proporciones SWF (aparentemente no son pixeles), como lo muestra la siguiente instrucci?n propia de la librer?a Ming:
xtingray$movie->setDimension(480,500);
xtingrayNo es imperativo acogerse a esta resoluci?n, sin embargo, seg?n la resoluci?n que usted escoja, deber? trabajar los gr?ficos que desee utilizar en sus diapositivas para as? obtener un resultado ?ptimo.
xtingrayEn el subdirectorio "images" dentro del comprimido de la librer?a, encontrar? copia de algunos de los gr?ficos que utilic? para la elaboraci?n de mi demo. Puede basarse en ellos para definir su resoluci?n de trabajo y hacer sus propios botones.
xtingrayAdicionalmente, en los archivos de ejemplo (*.php) podra encontrar la definicion en pixeles de cada una de las im?genes utilizadas.
xtingrayCon la pr?ctica aprender? a proporcionar sus trabajos en el espacio. Buena Suerte!
xtingrayHasta este punto culmina la "mini" gu?a de inducci?n. Espero le sea de mucha utilidad.
xtingrayLa cantidad de efectos y de posibilidades definidas en el archivo 12Pinguinos.php es variada, aunque la probabilidad de que crezca cientos de veces su tamaño es bastante factible con el tiempo y el aporte de todos.
xtingraySi usted es un buen programador de php, seguramente podra aprovechar todos los recursos ofrecidos por la libreria, e inclusive, posiblemente adicione nuevo codigo a la misma y lo comparta... cosa que esperamos suceda muchas veces.
xtingrayPara una mejor comprensi?n de todas las funciones ofrecidas en la librer?a 12Pinguinos.php, le recomendamos que revise los 12 archivos de ejemplos adjuntos en el comprimido de la librer?a. Buena suerte.
xtingrayY que la fuerza los acompañe ;)
xtingrayAhoras si... tiempo de preguntas ;)
xtingray<Arador> xtingray: aparte de para crear SWF...que tal esta el tema de reproductores? ¿hay algun plugin para mozilla por ejemplo que sea free software?
sarnoldxtingray :)
xtingrayPara el caso de Mozilla y Netscape, puede verificar la existencia del plugin escribiendo la siguiente instruccion en la barra de navegaci?n: about:plugins
xtingraySi el plugin esta instalado, una l?nea relacionada con Flash y su versi?n aparecer? en la lista de plugins de su navegador.
xtingraySi desea adquirir el plugin para Linux, consulte el siguiente url:
xtingrayhttp://www.macromedia.com/shockwave/download/alternates/
xtingrayIf you are looking for swf players for linux look there: http://www.macromedia.com/shockwave/download/alternates/
garoedaxtingray: i finished my translation before you :-)
garoedaxtingray: very interesting !
xtingraygaroeda: yes i saw it ;)
xtingrayalgo que queria adicionar... es que los archivos pueden generarse de forma dinamica...
xtingraylo cual permite que la informacion pueda ser consultada de una base de datos de manera dinamica
Aradorxtingray: sabes donde estan las especificaciones del SWF (solo por leer un poco ;)?
xtingraywww.openswf.org <- aqui las encuentras
Aradorok
xtingray si alguno desea las fuentes del demo de umeet: http://www.kazak.ws/flash/umeet.tar.gz
xtingraysi lo quiere ver en linea: http://www.kazak.ws/flash/umeet.swf
viZardgustavo, qué es eso de Orquídea?
viZardno me lo explique mucho para no dañar esa charla ;-)
xtingrayun proyecto para generar una distribucion Linux a nivel de universidades ;)
xtingray<angelLuis> xtingray: podrías pasar las fuentes a archivos rpm?
xtingraysi! pero primero hay que terminar de ampliar la libreria
xtingrayla idea es que permita generar estadisticas graficas. Ej: pie charts
xtingrayde hecho... un proyecto que esta en la mira... es desarrollar una interfase web (wizard) para hacer slides automaticamente
xtingraysin que los usuarios tengan que saber php...
xtingraypero aun esta en proyecto... pues actualmente estamos trabajando en dos que nos consumen todo el tiempo
xtingrayhttp://www.kazak.ws/xpg
xtingrayhttp://www.kazak.ws/bibliox
xtingraypara los que deseen el articulo en español sobre esta presentacion:
xtingrayhttp://www.kazak.ws/flash.php
xtingrayY en ingles:
xtingrayhttp://www.kazak.ws/12pinguinos/flash-en.php
angelLuisok gracias
xtingrayBueno, espero que esta charla haya sido de su agrado y muchas gracias por asistir :)
angelLuis:))
angelLuisa ti de parte de todos y todas
xtingraygracias :)
<-- xtingray has quit (Umeet 2002: Hip! hip! urrra!!!)

Generated by irclog2html.pl 2.1 by Jeff Waugh - find it at freshmeat.net!