Flash básico 01: Introducción a Flash

Nov 05, 07 by Juan Lebrijo about Flash, blog

Vamos a comenzar una serie de artículos referentes al Diseño Web de objetos en movimiento con la herramienta Flash. Aunque es software propietario, Macromedia (absorbida por Adobe en diciembre de 2005) siempre ha hecho herramientas de calidad en el campo del Desarrollo web. Adobe está haciendo un buen trabajo con las herramientas.

Personalizar el entorno

Lo primero sería presentaros una imagen del entorno:

Se puede personalizar el entorno, poniendo barras de herramientas arriba-abajo-izquierda-derecha. Las barras de herramientas se seleccionan en el menú Ventanas. Así puedes personalizar totalmente tu entorno de trabajo. Para agrupar ventanas dentro de una misma con pestañas:

Hay que hacer sobre la ventana lo siguiente:

botón derecho sobre la cabecera de la ventana --> "Agrupar Ventana con...".

Para moverte por la escena mediante atajos de teclado:

Espacio: Manita para mover el lienzo
ctrl.+esp: lupa +
ctrl.+esp+alt: lupa -

Las propiedades de la escena se pueden ver presionando con el botón derecho sobre el tapíz:

Aquí encontramos dos valores importantes dimensiones de la parte visible, y velocidad (fps, fotogramas por segundo).

Color

La barra de Herramientas heredada de otras aplcaciones, que contiene lapicero, pluma, selector, cortar,... Se puede destacar:

Las figuras simples en flash tienen trazo y relleno, y se puede seleccionar sus colores en el submenu Colores.
Presionando Mayus dibujando un óvalo te lo fija a circulo
Clic simple sobre la figura selecciona contorno ó relleno. Doble clic selecciona todo.

Podemos ver varios ejemplos de borde-relleno en el siguente flash (fuente): Para hacer degradados se utiliza la paleta de Color, que permite un mayor juego con el color:

Esta paleta se encuenta en el Menú: Ventana --> Mezclador de colores.Podemos ver un ejemplo de degradado a continuación (y desargar el fuente):

Generando los ejecutables

Para probar rápido, con atajo de teclado: ctrl.+intro. Te crea el equivalente con extensión .swf, y te lo muestra ejecutándose. O manejando todo el proceso desde menú Archivo, puedes manejar los ficheros generados. Esto se usa para generar el código HTML para insertarlo en una web.

Flash basics 01: Introduction

Nov 05, 07 by Juan Lebrijo about Flash, blog

We are going to start a series of posts about Web-Designing of motion objects with Flash tool. Although this is proprietary, Macromedia (bought by Adobe on december 2005) always have made quality tools in Web Development area. Adobe is making a good continuity.

Personalize the framework

First of all we show you the framework aspect:

We can personalize the framework placing tool bars up-down-right-left sides. Tool bars are selected in Windows menu. Then you can personalize all your framework. To group in the same window various tabs:

We can do the following steps:

Right button over the header of the window --> "Group window with...".

Some useful hotkeys in the frame:

Space: Hand to move the canvas
ctrl.+space: magnify +
ctrl.+space+alt: away -

We can see the scene properties over the canvas pushing the right button mouse:

Here we can see two important values as dimensions of the viewing part and speed (fps, frames per second).

Colour

The tool bar from other image edit applications, wich contains pencil, pen, selectopr, cutting, .... We can ephasize:

Flash figures are composed by line and filling, and you can select the colour in its sub-menu.
Pushing Mayus fix the oval form to circle.
One clic over the figure select line or filling. Double clic selects all.

We can see various examples line-filling in the following flash (source): To degrade the colour we can use the Color tool, wich allows more capabilities with the colour:

We can get this window in the menu: Windows --> Color mixer.We can see a degrade exple in the following file (download source):

Generating the binaries

For a quickly show, the hotkey: ctrl.+intro. Creates the .swf extension file, and execute it. Or manage all proccess from File menu, you can manage generated files. You can generate HTM code to insert in a web page.

Traducir un tema de Wordpress

Nov 01, 07 by Juan Lebrijo about Wordpress, blog

Esta web es bilingüe, pero cuando seleccionais el castellano quiero que todo (contenido+theme) se vean en castellano. Si vuestra web no es bilingüe podeis traducir el theme de forma limpia y rápida con los pasos que os daré a continuación. Para castellanizar un theme (o traducir la parte visual a cualquier idioma) de wordpres me he basado en la información vertida por anieto2k y yukei en sendos posts de su propiedad (por si quereis profundizar más). anieto2k tiene también un repositorio donde puedes compartir con todos tu tema una vez traducido. Vamos a detallar todo el proceso de traducción. Para ello utilizaremos el theme en que se basa este blog: Web 2.0 (descargar). Pero vale para cualquier otro tema de wp. El tema Web 2.0 castellanizado os lo he dejado aquí (para mapas ISO-8859-1, para UTF-8 os dejo los ficheros de idioma) y en el repositorio de anieto2k.

Marcar cadenas

Lo primero será marcar las cadenas de texto que queremos traducir en nuestro código PHP. Esto es lo más tedioso, se trata de ir por todos los ficheros php del theme marcando las cadenas que queremos traducir de la siguiente manera:

RETURN __(): Para las cadenas dentro de funciones, devolverá mediante el "return" la cadena traducida.
- e.g.: <?php next_posts_link('Older Entries') ?> -----------> <?php next_posts_link(__('Older Entries','w2')) ?>
ECHO _e(): Para las cadenas estampadas directamente en el HTML, digamos que la función hace un "echo" de lo traducido.
- e.g.: <h2>Not Found</h2> -----------> <h2><?php _e('Not Found','w2'); ?></h2>

Donde w2 es el dominio de traducción del tema. Utilizado para la posible definición de varios ficheros de traducción en el mismo idioma dentro del mismo código php. Faltará decirle al servidor que haga la traducción donde haya marcas. Esto se hace en la cabecera (...../wp-content/themes/web-20-100/header.php), cargando la función load_theme_textdomain('dominio'):

.....................
<head>
   .....................
   <meta http-equiv="Content-Language" content="<?php the_language_locale(); ?>" />
   .....................
   <?php load_theme_textdomain('w2'); ?>
</head>
   .....................
   .....................

OJO: El lenguaje se define en el metacontenido "Content-Language", de donde tomará el valor para conmutar entre los lenguajes según los ficheros: es_ES.mo, es_AR.mo,... ó no traducir si no lo reconoce.

Extracción de cadenas marcadas

El software Gettext extraerá las cadenas que hemos marcado según el punto anterior, unificándolas todas en un fichero de extensión .po. Instalar gettext en debian:

elite:~# apt-get install gettext
Leyendo lista de paquetes... Hecho
Creando árbol de dependencias... Hecho
Paquetes sugeridos:
  cvs gettext-doc
Se instalarán los siguientes paquetes NUEVOS:
  gettext
0 actualizados, 1 se instalarán, 0 para eliminar y 1 no actualizados.
Necesito descargar 2190kB de archivos.
Se utilizarán 6582kB de espacio de disco adicional después de desempaquetar.

En el raíz de nuestro theme (...../wp-content/themes/web-20-100/ en nuestro caso) creamos un fichero (file-list.txt) que contenga el nombre de todos los ficheros php que hemos tocado marcando su interior:

404.php
attachment.php
comments.php
functions.php
index.php
page.php
search.php
single.php
archives.php
comments-ajax.php
footer.php
header.php
links.php
searchform.php
sidebar.php
style.php

Y ejecutamos gettext con las siguientes opciones:

xgettext --keyword=__ --keyword=_e --language=PHP --files-from=file-list.txt --from-code=UTF-8 -d es_ES

Con lo que tendremos el fichero generador de catálogos: es_ES.po. Si lo abrís con un editor vereis apuntadas todas y cada una de las cadenas referenciadas por la función y la línea en la que se encuentran. Si modificamos el theme y queremos rehacer el catálogo, pero sin perder las cadenas ya traducidas. Utilizamos la opción -j, que en vez de generar un nuevo es_ES.po, hace un "join" con el contenido del anterior. Mas o menos:

xgettext --keyword=__ --keyword=_e --language=PHP --files-from=file-list.txt -j --from-code=UTF-8 -d es_ES

Traducción de las cadenas

Utilizaremos PoEdit para traducir las cadenas de texto. Para los usuarios de Debian (ó sistemas basados como Ubuntu) tenemos PoEdit en los repositorios:

elite:~# apt-get install poedit

Editamos el fichero es_ES.po, y a traducir ...:

Cuando guardemos el fichero se generará es_ES.mo que es el fichero en "código máquina" que realmente traducirá las cadenas. OJO: Si en el fichero .mo (ó en el .po después de guardar) veis símbolos raros (ÃƒÆ’Ã‚Â) en lugar de acentos, es posible que tengais que jugar con la configuración del charset en PoEdit, que se encuentra en el menú Catálogo --> Opciones. Y poner como en mi caso, el latin1: ISO-8859-1. Finalmente hay que colocar en el raíz de nuestro theme (...../wp-content/themes/web-20-100/ en nuestro caso) el fichero es_ES.mo. pun