Flash básico 01: Introducción a Flash
Nov 05, 07 by Juan Lebrijo about blog, Flash
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:
image001.png 92.9 KB
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:
image005.png 1.31 KB
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:
image003.png 5.62 KB
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.
image007.png 4.18 KB
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:
image009.png 19.2 KB
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.
Traducir un tema de Wordpress
Nov 01, 07 by Juan Lebrijo about blog, Wordpress
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 blog, Wordpress
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.