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:
image001.png 92.9 KB
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:
image005.png 1.31 KB
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:
image003.png 5.62 KB
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.
image007.png 4.18 KB
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:
image009.png 19.2 KB
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 ...:
poedit.JPG 36.3 KB
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
Worpress Theme translation
Nov 01, 07 by Juan Lebrijo about Wordpress, blog
This is a bilingual web, but when you select up the spanish language, I want all (content+theme) to see in spanish. If your web is not polyglot, you can translate the theme clean and quicly in some following steps. To keep a theme in spanish (or other language) i am based on anieto2k's y yukei's informaton in their blogs. anieto2k have a repository where you can share your translated theme. We are going to detail the translate process. So that we are going to use this web based theme: Web 2.0 (download). But it can be used for any wordpress theme. The Web 2.0 in spanish is here­ (for ISO-8859-1 charset, for UTF-8 charsets I leave the language files), and in theanieto2k's repository.

Tagging strings

First will be to tag the strings that we want to translate inr our PHP code. This is the most tedious action, PHP file by file tagging the strings as follows:
  • RETURN __(): For the strings in functions, returns trough the 'return' the translate string. traducida.
    • e.g.: <?php next_posts_link('Older Entries') ?> -----------> <?php next_posts_link(__('Older Entries','w2')) ?>
  • ECHO _e(): For the strings wrote directly in HTML, the function makes an 'echo' of the translate string.
    • e.g.: <h2>Not Found</h2> -----------> <h2><?php _e('Not Found','w2'); ?></h2>
'w2' is the translation theme domain. Used for the definition of various translation files in the same PHP code. Then we will say to the PHP interpreter to translate where it find tags. We will do it in the header (...../wp-content/themes/web-20-100/header.php), loading the load_theme_textdomain('dominio') function: 
.....................
<head>
   .....................
   <meta http-equiv="Content-Language" content="<?php the_language_locale(); ?>" />
   .....................
   <?php load_theme_textdomain('w2'); ?>
</head>
   .....................
   .....................
WARNING: The language is defined in metacontent "Content-Language", where we can take the value to conmut betewwen languages: es_ES.mo, es_AR.mo,... or not translate if it do not recognize.

Extracting tagged strings

The Gettext software will extract the strings tagged, it will unify them in a po extension file. Istalling gettext on 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.
In our theme root (...../wp-content/themes/web-20-100/ in my case) we will create a file (file-list.txt) which contains the name of all the files touched in the tagging point: 
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
An axecute the gettext with the following options: 
xgettext --keyword=__ --keyword=_e --language=PHP --files-from=file-list.txt --from-code=UTF-8 -d es_ES
We have the catalog generator file: es_ES.po. Let's open it and you see all the strigs referenced for the function and line where they are allocated. We can modify the theme, and we want remake the catalog, but with no loss of made translations. Then we can use -j option, this make a 'join' with the old version of es_ES.po. More or less: 
xgettext --keyword=__ --keyword=_e --language=PHP --files-from=file-list.txt -j --from-code=UTF-8 -d es_ES

Translating strings

We will use PoEdit to translate text strings. For Debian (or debian based as Ubuntu) users we have PoEdit in the repositories: 
elite:~# apt-get install poedit
Editing the file es_ES.po, and translating ...:
poedit.JPG 36.3 KB
When we save the file will generate the es_ES.mo file, this is the 'machine code' which really translates the strings. WARNING: If in the .mo file (or .po after save) you see rare symbols (í), maybe you must change the PoEdit's configuration charset, located in menu Catalog --> Options. And change, like me: ISO-8859-1. Finally we must copy in the them root directory (...../wp-content/themes/web-20-100/ in my case) the es_ES.mo file.