CSS - XHTML - USABILIDAD - ACCESIBILIDAD - ACTIONSCRIPT
La verdad es que en el html ( englobo html puro, xhtml y otras variantes ) siempre hay etiquetas que dejamos de lado. Puede que por ignorancia o puede que por desconocimiento.
Una de ellas son las listas de definición ( Definition Lists ). Estan se caracterizan por usar una definición ( dt ) y su explicación ( dd ). Veamos su estructura:
A partir de aquí estan listas tienen mucho juego. Por ejemplo, para crear una carta de un restaurante:
Posted in Css.
Hoy estaba navegando por la red mirando artículos sobre indexación y he localizado un post que se me pasó por alto en SEO Marketing Tools. En dicho posts nos aconsejan e informan como mejorar la indexación de nuestras webs y convertirnos en un especialista SEO en 30 días. La gran mayoria de consejos son de sentido común cuando uno lleva cierto tiempo en este negocio pero otros ni tan siquiera los sabia.
Yo os coloco los 10 que me han gustado, el resto podéis leerlos en su web:
Posted in SEO.
Hasta ahora hemos trabajado en la implementación de una clase que nos sirva para gestionar botones. Es muy simple, logicamente, pero con el tiempo la iremos ampliando.
Ahora toca crear un pequeño menu horizontal en este caso y activar el boton para que cuando se pase uno por encima muestre el cursor con el dedo ( hand cursor )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | package { // Contiene la libreria para objectos MovieClip import flash.display.MovieClip; // Contiene la libreria para manipulacion de eventos del raton import flash.events.MouseEvent; // Contiene la libreria para manipulacion de textos import flash.text.TextField; // Definimos el nombre de la clase // Debe empezar por mayusculas y tener // el mismo nombre que el archivo que la contiene public class ButtonStd extends MovieClip { // Variables private var _id:uint; private var _action:Function; // Método constructor que inicializa la clase public function ButtonStd(_label:String, _id:uint, _action:Function) { this._label = _label; this._id = _id; this._action = _action; this.setEvents(); } // Metodo para configurar los eventos asociados al boton private function setEvents():void { // Activamos modo Boton ( cambia el cursor al pasar por encima ) this.buttonMode = true; this.useHandCursor = true; this.mouseChildren = false; // asociamos un metodo al evento de pulsar el raton addEventListener(MouseEvent.CLICK, click_handler); // asociamos un metodo al evento de pasar por encima con el raton addEventListener(MouseEvent.MOUSE_OVER, over_handler); // asociamos un metodo al evento salir del boton con el raton addEventListener(MouseEvent.MOUSE_OUT, out_handler); } // Metodo 'setter' para modificar la etiqueta del boton public function set _label(_label:String):void { // Usamos la función getChildByName cuando queremos buscar un // elemento creado directamente en este caso y con nombre // label_txt. Por otra parte decimos que dicho elemento es // de tipo TextField mediante as [tipo] this.label_txt = getChildByName("label_txt") as TextField; label_txt.text = _label; } // Metodos relacionados con los eventos private function click_handler(event:MouseEvent):void { this._action(this._id); } private function over_handler(event:MouseEvent):void { this.label_txt.textColor = 0xff0000; } private function out_handler(event:MouseEvent):void { this.label_txt.textColor = 0x333333; } } } |
Hemos añadido a nuestro código una pequeña mejora. Cuando pasamos sobre un elemento que tiene la opción de ser pulsado, debemos mostrar un icono de cursor diferente.
En AS2 usabamos useHandCursor ( true / false ) y ya estaba. Con AS3 usariamos lo siguiente:
1 2 3 | this.buttonMode = true; this.useHandCursor = true; this.mouseChildren = false; |
Fijaros que dicho código lo uso solo dentro de setEvents que es el método que gestiona los eventos.
Ahora revisemos como podemos hacer que un determinado botón realice acciones adecuadas para él mismo.
1 2 3 4 | // Metodos relacionados con los eventos private function click_handler(event:MouseEvent):void { this._action(this._id); } |
Hemos añadido dos nuevas variables, las dos serán inicializadas mediante parámetros externos cuando el boton sea inicializado. El primero es un identificador ( id ) del botón que estamos usando. En este caso dicho identificativo sera un número, muy útil para arrays y xml. Por otra parte, cuando pulsemos nuestro boton lanzaremos una acción. Dicha acción ( o función ) activará un determinado código segun el id del botón.
Ahora debemos abrir nuestro archivo fla. Si teneis el anterior ejemplo2 podeis reeditarlo, o sino seguid los pasos de este post.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | // Array con etiquetas de los botones var labels:Array = new Array('Quienes somos','Objetivos','Productos','Contactar'); // Recorremos array creando botones var nElements:Number = labels.length; for (var i:Number = 0; i < nElements; i++) { // Instancializamos la clase ButtonStd var myLabel:String = labels[i]; var myButton:ButtonStd = new ButtonStd(myLabel, i, doActionMainMenu); // Ubicamos el nuevo ButtonStd ( fijaros que no es _x,_y o _width) myButton.x = 100 + ((myButton.width + 10) * i); myButton.y = 100; // Añadimos el ButtonStd al escenario // esto equivale a un attachMovie addChild(myButton); } function doActionMainMenu(id:uint):void { trace("Accion del elemento: " + labels[id]); } |
El código es bastante sencillo, cuando pulsamos un boton internamente llama a la función asociada y le pasa como parámetro el id del boton pulsado. Posteriormente, en el código del fla, realizamos una accion para dicho id. Por ejemplo, podriamos cargar un xml, un clip externo, abrir un menu, etc..
Posted in AS3.
Partiendo del último ejemplo que creamos, vamos a mejorarlo añadiendo nuevas funcionalidades.
Creamos una carpeta llamada ejemplo2 y dentro de ella creamos los ficheros ejemplo2.fla y ButtonStd.as. No vamos a explicar como crear dichos archivos.
Abrimos ButtonStd.as ( automaticamente deberia abrirse con Flash ) y escribimos lo siguiente:
1 2 3 4 5 6 7 8 9 10 11 12 | package { // Definimos el nombre de la clase // Debe empezar por mayusculas y tener // el mismo nombre que el archivo que la contiene public class ButtonStd { // Método constructor que inicializa la clase public function ButtonStd() { } } } |
Con esto no vamos a llegar muy lejos, pero es la estructura básica que debe tener nuestra clase de Boton Estandar. El AS2 soliamos usar MovieClips como botones, en AS3 no tenemos porque cambiar. Por otra parte también teniamos claro que en la gran mayoria de casos los botones ( movieclips ) realizaban acciones con determinados eventos del ratón ( onPress, onRelease, onRollOver, onRollOut ).
Por tanto sabemos que debemos importar dentro de la clase ButtonStd las clases asociadas a MovieClips y a Eventos de Raton
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | package { // Contiene la libreria para objectos MovieClip import flash.display.MovieClip; // Contiene la libreria para manipulacion de eventos del raton import flash.events.MouseEvent; // Definimos el nombre de la clase // Debe empezar por mayusculas y tener // el mismo nombre que el archivo que la contiene public class ButtonStd extends MovieClip { // Método constructor que inicializa la clase public function ButtonStd() { } } } |
Guardad el archivo y vamos al siguiente paso.
Ahora debemos crear un archivo fla con el nombre ejemplo2
Cread en el escenario un recuadro ( personalitzadlo como más os guste ), cread un campo de texto en blanco sobre el cuadro y con el nombre de label_txt
Una vez habeis hecho esto seleccionad dichos elementos y pulsad F8. Debeis rellenar los campos tal y como veis esta captura.
Con esto lo que hemos es asociar nuestro package ButtonStd a un objeto de nuestra libreria.
Ahora cread una nueva linea de tiempo y su nombre debe ser AS ya que colocaremos el código que necesitamos a continuación. Si quereis el objeto que teneis en el escenario se puede borrar ya que lo hemos incluido en la libreria.
1 2 3 4 5 6 7 8 9 | // Instancializamos la clase ButtonStd var myButton:ButtonStd = new ButtonStd (); // Ubicamos el nuevo ButtonStd // ( fijaros que no es _x y _y ) myButton.x = 100; myButton.y = 100; // Añadimos el ButtonStd al escenario // esto equivale a un attachMovie addChild(myButton); |
Para modificar la etiqueta asociada al botón usaremos el paso de variables. así pues fijaros como nos queda la clase. A parte añadimos un nuevo método para seleccionar y cambiar el valor del elemento label_txt que hemos creado dentro del botón.
Código package ButtonStd
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | package { // Contiene la libreria para objectos MovieClip import flash.display.MovieClip; // Contiene la libreria para manipulacion de eventos del raton import flash.events.MouseEvent; // Contiene la libreria para manipulacion de textos import flash.text.TextField; // Definimos el nombre de la clase // Debe empezar por mayusculas y tener // el mismo nombre que el archivo que la contiene public class ButtonStd extends MovieClip { // Método constructor que inicializa la clase public function ButtonStd(_label:String) { this._label = _label; } // Metodo 'setter' para modificar la etiqueta del boton public function set _label(label:String):void { // Usamos la función getChildByName cuando queremos buscar un // elemento creado directamente en este caso y con nombre // label_txt. Por otra parte decimos que dicho elemento es // de tipo TextField mediante as [tipo] this.label_txt = getChildByName("label_txt") as TextField; label_txt.text = label; } } } |
Código de la línea de tiempo para modificar.
1 | var myButton:ButtonStd = new ButtonStd ('EtiquetaBoton'); |
Vamos por la segunda parte, añadir eventos de ratón a nuestro botón. En este caso, vamos a hacer que cuando pasemos por encima el texto tenga otro color, y cuando estemos fuera recupere el color de texto original. Si pulsamos mostraremos por pantalla un simple trace.
Para ello, como nos gusta tener el código lo mejor estructurado posible vamos a crear un método donde vamos a definir todo lo relacionado con eventos y que vosotros debeis añadir al paquete actual. ( He borrado los comentarios para no alargar demasiado el codigo )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | package { import flash.display.MovieClip; import flash.events.MouseEvent; import flash.text.TextField; public class ButtonStd extends MovieClip { // Hemos añadido una llamada al metodo que asigna eventos public function ButtonStd(_label:String) { this._label = _label; this.setEvents(); } public function set _label(_label:String):void { this.label_txt = getChildByName("label_txt") as TextField; label_txt.text = _label; } // Metodo para configurar los eventos asociados al boton private function setEvents():void { // asociamos un metodo al evento de pulsar el raton addEventListener(MouseEvent.CLICK, click_handler); // asociamos un metodo al evento de pasar por encima con el raton addEventListener(MouseEvent.MOUSE_OVER, over_handler); // asociamos un metodo al evento salir del boton con el raton addEventListener(MouseEvent.MOUSE_OUT, out_handler); } private function click_handler(event:MouseEvent):void { trace('click'); } private function over_handler(event:MouseEvent):void { trace('over'); } private function out_handler(event:MouseEvent):void { trace('out'); } } } |
Probad la película y vereis que sucede. Podeis asociar muchos más eventos, pero de momento con estos tres ya tenemos más que suficiente. De momento solo hacemos trace, así que vamos a modificar el evento MOUSE_OVER y MOUSE_OUT para que cambie el texto de color.
1 2 3 4 5 6 7 | private function over_handler(event:MouseEvent):void { this.label_txt.textColor = 0xff0000; } private function out_handler(event:MouseEvent):void { this.label_txt.textColor = 0x333333; } |
Fácil, ¿verdad? Que si, no desespereis, si ha costado no es porque haya sido dificil, sino porque no tenemos nuestros amigos createEmptyMovieClip o attachMovie, o asignar directamente a un objeto. Pero vamos, es cuestión de paciencia.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | package { // Contiene la libreria para objectos MovieClip import flash.display.MovieClip; // Contiene la libreria para manipulacion de eventos del raton import flash.events.MouseEvent; // Contiene la libreria para manipulacion de textos import flash.text.TextField; // Definimos el nombre de la clase // Debe empezar por mayusculas y tener // el mismo nombre que el archivo que la contiene public class ButtonStd extends MovieClip { // Método constructor que inicializa la clase public function ButtonStd(_label:String) { this._label = _label; this.setEvents(); } // Metodo 'setter' para modificar la etiqueta del boton public function set _label(_label:String):void { // Usamos la función getChildByName cuando queremos buscar un // elemento creado directamente en este caso y con nombre // label_txt. Por otra parte decimos que dicho elemento es // de tipo TextField mediante as [tipo] this.label_txt = getChildByName("label_txt") as TextField; label_txt.text = _label; } // Metodo para configurar los eventos asociados al boton private function setEvents():void { // asociamos un metodo al evento de pulsar el raton addEventListener(MouseEvent.CLICK, click_handler); // asociamos un metodo al evento de pasar por encima con el raton addEventListener(MouseEvent.MOUSE_OVER, over_handler); // asociamos un metodo al evento salir del boton con el raton addEventListener(MouseEvent.MOUSE_OUT, out_handler); } private function click_handler(event:MouseEvent):void { trace('click'); } private function over_handler(event:MouseEvent):void { this.label_txt.textColor = 0xff0000; } private function out_handler(event:MouseEvent):void { this.label_txt.textColor = 0x333333; } } } |
Enlaces relacionados:
Display Object Container - LiveDocs Adobe
AS3 Mouse Events and Mouse Related User Actions
Posted in AS3.
Bueno, no sé si comprendisteis nada de lo que dije ayer sobre los packages, pero aquí va un ejemplo completo.
Fichero: com\lah\Trace.as
1 2 3 4 5 6 7 8 | package com.lah { public class Example{ public function Example() { trace("Example"); } } } |
Fichero: trace.fla
1 2 3 | import com.lah.*; // El * importa todas las clases de la carpeta var myExample:Example = new Example(); |
A que mola, eh? Bueno, pues ahora solo habeis visto la puntita del iceberg….
Porque realmente un package es como una gran clase que engloba otras más pequeñas.
Por ejemplo:
galeria ( package )
galeria/botonera ( clase )
galeria/botonera/boton ( subclase )
galeria/thumbnail ( clase )
galeria/thumbnail/marco ( subclase )
galeria/thumbnail/fondo ( subclase )
galeria/thumbnail/imagen ( subclase )
galeria/thumbnail/cargador ( subclase )
Venga pues, vamos a probar de colocar un clip en el escenario creado manualmente.
Os vais directamente a la linea de tiempo y creais un clip. En los datos que os pide existe un campo llamado clase, pues allí colocais el siguiente nombre clipA
Ahora, pulsais F9 y copiad este código.
1 2 3 4 5 6 7 | // Instanciamos la clase var clip1:clipA = new clipA(); // Inicializamos propiedades ( fijaros que no llevan _propiedad ) clip1.x = 100; clip1.y = 100; // Añadimos al Stage el clip addChild(clip1); |
Los packages nos sirven para dejar más limpia la linea de tiempo y tener mejor organizado el código, pero no son de obligado uso. Sin embargo, el objetivo de todas estas explicaciones es acabar usando packages.
!!Quiero clickar!! !!Quiero clickar!!
Vale, pues ahora tienes que pensar un poquito más, así que necesitamos una clase para gestionar el evento que vas a realizar sobre el objeto clip1. Para ello debes crear en la misma carpeta donde esta el fla un archivo llamado clipA.as y dentro de él, el siguiente código:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | package { import flash.display.MovieClip; import flash.events.MouseEvent; // Definimos la clase public class clipA extends MovieClip { public function clipA() { addEventListener(MouseEvent.MOUSE_DOWN, mouse_down); } private function mouse_down(event:MouseEvent):void { trace("CLICK!"); } } } |
El código que tienes en la línea de tiempo lo debes mantener tal cual está, ya que lo necesitamos para vincular en el escenario el clip que hemos definido bajo la clase clipA.
¿Has ejecutado ya?
Supongo que sí, y si pulsas encima del clip, se mostrará un trace con el mensaje CLICK!!, aps, si, tienes razón, te falta la manita y el dedito, pero de momento ya tenemos un evento asociado al objeto por si no os habeis dado cuenta.
Ahora quiero evitar definir tanto código en la línea de tiempo ( que es el principal objetivo del AS3 ), asi que vamos a crear una nueva clase en el mismo package que nos va a permitir manipular el escenario.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
Y, para que funcione, en el primer fotograma de vuestro archivo FLA:
1 | var _root:Main = new Main(this); |
Se podria y se puede mejorar. Básicamente todo lo que os he explicado esta extraido ( y adaptado a mi blog ) de la web Codigo.ActionScript
Posted in AS3.
Hace más d eun año que compré el libro Actionscript para desarrolladores Flash de O’reilly y hace poco me he decido tomarme en serio pasarme a AS3. Para ello necesitaré grandes dosis de paciencia y sobre todo muchas horas de aprendizaje.
Antes que nada decir que AS3 ha sido pensado para basarse en clases y por lo tanto mucho de lo que aquí publicaré irá enfocado a dichas funcionalidades. Por otra parte no voy a dar clases básicas de tipos de objetos, a menos que lo requiera la situación.
El código fuente del libro suele usar la nomenclatura:
1 | package dir1.dirN.file; {} |
Así que ya empezamos mal. porque no se parece en nada a la nomenclatura de AS2, es similar, pero no igual.
Veamos, para llamar una clase usabamos en AS2
1 | import dir1.dirN.file; {} |
¿Ha funcionado? No, ¿que hacemos? Pues pensar que no es una llamada a una clase normal. ¿Entonces donde va?
Apretais Ctrl + Shift + F12 ( Pantalla de configurar Publicación ) > Pestaña Flash > Configuración ( al lado de versión de ActionScript ) > Ruta de clases
Sorpresa!!!! Pues para mi también.
Pues no, claro que no, si estais en un fotograma y pulsais F9 podreis escribir también el código de toda la vida. Pero eso si, no os funcionaran las llamadas #include que se usaban en AS2. Tenedlo en cuenta, para eso se usan los packages.
Si probais este simple código vereis no hay problema alguno.
1 2 | var n:Number = 1000; trace('Mi número es: ' + n); |
Buah! pero que fácil, ya ves, pim pam, seguiré usando F9 y pasaré de esos tediosos packages.
Pues claro que sí, sino que sentido tendria que Macromedia (ups), Adobe haya trabajado tanto en crear ese sistema.
Veamos, los packages son muy útiles para juntar código y evitar tener millones de lineas esparcidas por el proyecto sin saber que funcionalidades tienen o a qué pertenecen. Por ejemplo, podriamos crear un package que gestione toda la sección de una web, o un package que gestione una galeria de fotos, etc..
Creo que voy pillando, vale, pero yo quiero añadir un clip en el escenario y pulsar encima y añadir clips desde la libreria!!!
Ahora tenemos que hablar de un punto muy crítico, el sistema de objetos usado hasta ahora desde la creación del actionscript como lenguage de programación a cambiado mucho. Todo ello se debe al hecho de simplificar y mejorar el rendimiento de flash para aplicaciones que van más allá de una simple web con bonitos efectos gráficos y animaciones. Para ello lo han reestructurado mucho y por ejemplo codigo como el que sigue no funcionaria.
1 2 | var scene_mc:MovieClip = this; scene_mc.createEmptyMovieClip('boton_mc',1); |
Sí, genera un error molón que no veas, y claro, que pasa ahora, pues deberemos esperar y entender el diagrama de objetos que ahora debemos usar para entender el nuevo sistema.
Nuevo diagrama de objetos en AS3
Me estas mareando por dios, no puedo más, déjame respirar!!!
Seamos sinceros, no es fácil cambiar años de programación en una hora, dos o tres. Se necesitan dias, semanas o tal vez más, pero ánimo y paciencia. Ya iremos descubriendo cosas.
Posted in AS3.
El tiempo es inexorable y pasa con tremenda rapidez. Muchas veces, sin darnos cuenta, tenemos una fecha ya encima y al siguiente ya solo es un recuerdo. Estos dias ( demasiados para mi gusto ) he tenido este blog un poco dejado de la mano de dios. La verdad es que su utilidad principal es la de ser una biblioteca con enlaces útiles dedicado al mundo profesional en el que trabajo, el diseño y la programación web.
Sin embargo, me propuse darle un enfoque más serio y aportar algo más, en este caso referente a flash. ¿Que ha sucedido? pues que me he volcado mucho en el PHP y su interacción con Flash y claro, en ese circulo vicioso ( y lo es mucho ) pues me he dedicado más a experimentar más que a la labor didactiva hacia otros. Entre tanto ajetreo he jugado con el diablo del AS3 ( Actionscript 3 ) y me ha dado mucho miedo ( básicamente por el gran cambio de los nombres de funciones ).
Vamos, que he decidido publicar mis pequeños ( y aunque muchos pienses absurdos ) avances en dicho lenguaje y publicar alguna clase para AS2 que creo útil. Como primer paso, pues actualizar el blog para poder mostrar código, sino mal.
Por cierto, he estado tres semanas con la mano rota, así que también cuenta a mi favor esa dejadez…jejejeje
Posted in Mi Weblog.
Gracias al fácil sistema de actualización de wp y a la automatización de actualización de plugins en unos 10 minutso como mucho se puede actualizar un blog basado en Wordpress. De hecho he actualizado todos aquellos blogs que gestiono directamente en un plis plas.
En cuanto a los temas que hay instalados en cada uno de ellos, por suerte, no me han dado ningún tipo de error, ni fallo, crucemos los dedos.
También he actualizado la sección de software. Ahora he vinculado todas las descargas a servidores externos para no abusar del ancho de banda que tengo asignado. Además he añadido un par de librerias nuevo y creado una sección para aquellos paquetes que se requieren para ejecutar programas bajo windows.
Posted in Mi Weblog.
La verdad es que siempre me ha gustado el contenido que aporta Smashing Magazine, y de tanto en tanto alguno sobre sale más que el resto. En esta nueva entrega, nos enseñan 50 diseños de portafolios bajo el título “50 Beautiful And Creative Portfolio Designs“.
A parte, en este mismo artículo, al final del todo, nos remiten al autor Jacob Gube que también creó un artículo de como crear un portafolio de forma correcta.
Posted in Diseño.
Los patterns podriamos decir que son motivos que pueden repetirse de forma indefinida, tanto a lo alto, como a lo largo, de forma que pueden crear fondos perfectos para webs. No importa si la web es plana ( html ) o interactiva ( flash ). Son muy útiles y si además estan creados para photoshop pues mucho mejor.
Enlaces relacionados:
Posted in Diseño.