CREOSIGNUM » WebPadawans

Esquinas redondeadas con css3

study — Sat, 17 Apr 2010 15:00:58 +0000

Una de las nuevas características de este nuevo/futuro estándar del w3 consorcium nos da la posibilidad de agregarles elegantes esquinas redondeadas a nuestros divs.

Es importante aclarar que esta propiedad no puede ser “leída” por ninguna versión de Internet Explorer (para variar) aunque de Microsoft prometen/avisan/auguran/esperan que su futura versión IE9 si la soporte. De todas formas tampoco es que por eso el sitio vaya a descuadrarse en ie, simplemente no se van a ver las esquinas redondeadas.

Bueno pasemos al código:

Supongamos que tenemos el siguiente div:

Con sus correspondientes estilos:

#soy-un-div

{

width: 500px;

height: 300px;

background-color: #009900; /*o sea verde*/

}

Entonces nuestro div se ve así:

Sencillito, minimalista y liviano pero un poco aburrido, eso si.

Para redondear sus esquinas usaremos la propiedad border-radius. Pero tendremos que usarla por cuadruplicado ya que solo el Opera (todos de pie) puede leer correctamente la propiedad. Los demás navegadores utilizan, digamos, su propia implementación. Nuestro código queda así:

#soy-un-div

{

width: 500px;

height: 300px;

background-color: #009900; /*o sea verde*/

-webkit-border-radius: 10px; /* para Safari y Chrome */

-moz-border-radius: 10px; /* Para Firefox y deribados */

-khtml-border-radius: 10px; /* Para... ¿Konkeror? */

border-radius: 10px; /* Para el todopoderoso Opera */

}

Noten que a cada propiedad hay que asignarle una medida que se corresponde al radio. Si indicamos 2 ( border-radius: 5px 8px; ) la primera es el radio horizontal y la segunda el vertical. Nuestra div ahora queda así:

Si lo que queremos es redondear específicamente una de las esquinas, por ejemplo la esquina superior derecha, usamos lo siguiente:

border-top-right-radius: 50px;

-webkit-border-top-right-radius: 50px;

-khtml-border-top-right-radius: 50px;

-moz-border-radius-topright: 50px; /* no me pregunten porque Firefox lo usa de otra forma */

Así si lo agregáramos al div anterior lograríamos el siguiente efecto:

Bueno esto es todo por hoy, desde ya les digo que hay otras formas de lograr esquinas redondeadas compatibles también con IE pero esas las veremos mas adelante.

CSS3, HTML5 y los navegadores

study — Thu, 08 Apr 2010 21:13:15 +0000

Web-iando por ahí me encontré con el siguiente sitio que ha realizado una completa comparativa respecto al soporte que los principales browsers de la actualidad le dan a estos nuevos estandares. Y hablando de roma, si este fin de semana ando con ganas puede que postee algo sobre css3 para el que tenga interes.

Como publicar código fuente en Wordpress

study — Thu, 08 Apr 2010 17:23:23 +0000

Como una estadística personal (no oficial), me animaría a decir que casi un cuarto de los blogs de internet hablan de tecnología, de estos la mitad van a tener que publicar en algún momento algunas líneas de código fuente en sus post. Así que por lógica a una octava parte de la blogsfera debería interesarle el siguiente post.

Bueno a la cuarta parte no, porque no todos usan como cms Wordpress en un server propio. Genial el segundo párrafo y ya me estoy yendo por las ramas.

Intentémoslo de nuevo, de lo que quería hablarles es de Code Colorer un excelente plugin para el cms de Automattic cuya finalidad es permitirnos insertar código fuente de una manera entendible en nuestros post. La verdad para cuando di con este plugin ya había probado como media docena pero me quede con este porque entre otras cosas posee soporte para los siguientes lenguajes:

abap, actionscript, actionscript3, ada, apache, applescript, apt_sources, asm, asp, autoit, avisynth, bash, basic4gl, bf, bibtex, blitzbasic, bnf, boo, c, c_mac, caddcl, cadlisp, cfdg, cfm, cil, cmake, cobol, cpp-qt, cpp, csharp, css, d, dcs, delphi, diff, div, dos, dot, eiffel, email, erlang, fo, fortran, freebasic, genero, gettext, glsl, gml, gnuplot, groovy, haskell, hq9plus, html4strict, idl, ini, inno, intercal, io, java, java5, javascript, kixtart, klonec, klonecpp, latex, lisp, locobasic, lolcode, lotusformulas, lotusscript, lscript, lsl2, lua, m68k, make, matlab, mirc, modula3, mpasm, mxml, mysql, nsis, oberon2, objc, ocaml-brief, ocaml, oobas, oracle11, oracle8, pascal, per, perl, php-brief, php, pic16, pixelbender, plsql, povray, powershell, progress, prolog, properties, providex, python, qbasic, rails, rebol, reg, robots, ruby, sas, scala, scheme, scilab, sdlbasic, smalltalk, smarty, sql, tcl, teraterm, text, thinbasic, tsql, typoscript, vb, vbnet, verilog, vhdl, vim, visualfoxpro, visualprolog, whitespace, whois, winbatch, xml, xorg_conf, xpp, yaml, z80.

Je je, algunos de estos no los oí nombrar en mi p()7@ vida. Lo importante es que si necesitamos publicar algunas (o muchas) líneas de algunos de esos lenguajes Code Colorer las colocara en un lindo cuadrito y las coloreara para nosotros. El aspecto grafico y los colores pueden elegirse desde el panel de control del plugin, si no nos gusta ninguno con algunos conocimientos de css no tendremos problemas para personalizarlos al máximo. Los estilos los encontramos en wp-content/plugins/codecolorer/codecolorer.css

Eso sí Code Colorer no reconoce automáticamente los lenguajes sino que tenemos que indicárselo para cada uno de nuestros bloques de código (se utilizan unos sencillos shortcodes). Por ejemplo para insertar un trozo de código de php usamos lo siguiente:

[cc_php]

function saludar() {

echo “Hola Mundo”;

}

[/cc_php]

nuestro código se ve asi:

<?php

function saludar() {

echo "Hola Mundo";

}

?>

Pero esto no es todo ya que mediante varios shortcodes y aún más parámetros para estos podemos configurar como se mostrara el código. Por ejemplo si queremos escapar el código, numerarlo y a la vez evitar que se muestre el scroll horizontal (o sea obligarlo a ocupar no más del ancho del post) usamos lo siguiente:

[ccen_php nowrap=”false”]

function saludar() {

echo “Hola Mundo”;

}

[/ccen_php]

Ahora nuestro código queda así:

1
2
3
4
5
6
7
8
9
10

function saludar() {

echo "Hola Mundo";

}

?>

Nótese que estos shortcodes utilizan la siguiente estructura:

[ccMODO_LENGUAJE PARÁMETROS]…[/ccMODO_LENGUAJE]

La lista completa de modos y parámetros la pueden encontrar en la web de Dmytro Shteflyuk (que nombrecito) su autor.

Para cerrar les dejo aun frase que vi en la firma de José Conti, un conocido mío, “Queria cambiar el mundo pero no encontre el código fuente”.

Tutorial de diseño web (parte 4): Listas

study — Wed, 07 Apr 2010 00:06:13 +0000

En este post vamos a aprender a utilizar listas, unas estructuras impresionantemente útiles a la hora de ordenar el contenido.

Listas

No son mas que una forma de estructurar nuestro contenido como ítems en (valga la redundancia) una lista. Las hay de 3 tipos: listas ordenadas, listas sin ordenar y listas de definición.

Listas ordenadas

Su aspecto es el siguiente:

Observamos que en las listas ordenadas cada ítem se encuentra numerado. Las etiquetas necesarias para las listas ordenadas son 2

. Y la estructura de una lista ordenada es la siguiente:

<ol>

<li>...</li>

<li>...</li>

<li>...</li>

<li>...</li>

</ol>

Así por ejemplo el código de la lista de la imagen seria el siguiente:

<ol>

<li>Primer ítem</li>

<li>Segundo ítem</li>

<li>Tercer ítem</li>

</ol>

La cantidad de ítems por lista es ilimitada.

Listas desordenadas

Tienen el siguiente aspecto:

Observamos que esta vez los ítems no se encuentran numerados sino que se encuentran acompañados por viñetas, estas no solo pueden tener forma de puntos sino que con CSS podemos cambiarlas por cuadrados, por una imagen de nuestra preferencia o inclusive podemos crear una lista sin viñetas.

Las etiquetas que se utilizan también son 2:
- . Su estructura es la siguiente:
 
 <ul>
 
 <li>...</li>
 
 <li>...</li>
 
 <li>...</li>
 
 <li>...</li>
 
 </ul>
 
 el código del ejemplo es el siguiente:
 
 <ul>
 
 <li>Primer ítem</li>
 
 <li>Segundo ítem</li>
 
 <li>Tercer ítem</li>
 
 </ul>
 
 Listas de definición
 
 Finalmente el último tipo de lista tiene el siguiente aspecto:
 
 Como verán este es el tipo de lista más complejo y cada ítem se divide en un término y una definición. Las etiquetas que usaremos son 3:
 
 y
 . Y su estructura será la siguiente:
 
 <dl>
 
 <dt>primer término</dt>
 
 <dd>definición del primer término</dd>
 
 <dt>segundo término</dt>
 
 <dd>definición del segundo término</dd>
 
 <dt>tercer término</dt>
 
 <dd>definición del tercer término</dd>
 
 <dt>cuarto término</dt>
 
 <dd>definición del cuarto término</dd>
 
 </dl>
 
 El código del ejemplo es el siguiente (las etiquetas
 las puse para separar mejor los ítems):
 
 <dl>
 
 <dt>Linux</dt>
 
 <dd>Kernel monolítico desarrollado por Linus Torvalds</dd>
 
 
 
 <dt>Internet</dt>
 
 <dd>Conjunto descentralizado de redes de comunicación</dd>
 
 
 
 <dt>Creative Commons</dt>
 
 <dd>Organización no gubernamental sin ánimo de lucro</dd>
 
 </dl>
 
 Hasta acá hemos visto los 3 tipos de lista, queda bajo el criterio del webmaster elegir el tipo mas conveniente de acuerdo a la necesidad.
 
 Es muy importante aclarar que los ítems no solo pueden ser textos, sino que también podemos incluir dentro de ellos cualquier otro tipo de elementos: imágenes, párrafos, divs (después vamos a ver bien que son), links y hasta otras listas; en este último caso lograremos listas anidadas. Por ej:
 
 <ul>
 
 <li>
 
 Mis videojuegos favoritos:
 
 <ol>
 
 <li>Call of Duty 1</li>
 
 <li>Prince of Persia the Sands of Time</li>
 
 <li>Indiana Jones and the Fate of Atlantis</li>
 
 <li>Toda la saga Monkey Island</li>
 
 <li>Frets on Fire</li>
 
 </ol>
 
 </li>
 
 <li>
 
 Mis piezas de soft preferidas:
 
 <dl>
 
 <dt>Wordpress</dt>
 
 <dd>Versátil y poderoso CMS de Automattic</dd>
 
 <dt>Opera</dt>
 
 <dd>Poderoso, liviano, veloz y completísimo navegador web.</dd>
 
 <dt>Notepad++</dt>
 
 <dd>Excelente editor de texto para programadores, soporta múltiples lenguajes y consume muy pocos recursos</dd>
 
 </dl>
 
 </li>
 
 </ul>
 
 Como vemos podemos anidar varios tipos de listas para lograr estructuras más complejas. Nuestra lista se ve así (aviso que lo que dice ahí es lo primero que se me vino a la cabeza):
 
 ¿Y House?
 
 Para los que estaban preguntando donde se metían ahora el sitio sobre Doctor House que veníamos desarrollando desde el primer post, les cuento que no me olvide. En este post lo que vamos a hacer es una segunda página (usando listas, obvio) con una pequeña descripción de los personajes principales de la serie (menos de House ya que lo describimos en la home). En el próximo post que tratará sobre links y anclas, “conectaremos” esta página, con la que ya veníamos trabajando.
 
 Antes de empezar aclaro que la info la saque de Wikipedia, no la escribí yo.
 
 Primero que nada recuerden codificar su archivo como utf-8 (en notepad++ van al menú Formato/Codificar en UTF-8). Ahora vamos a crear la estructura base de la página (espero que todavía se acuerden como):
 
 version="1.0" encoding="UTF-8"?>
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" >
 
 <head>
 
 <title>Doctor House | Personajes Principales</title>
 
 </head>
 
 <body>
 
 </body>
 
 </html>
 
 Ahora guárdenla como personajes.html dentro de la carpeta donde tenían la otra página. ¿Ya esta?, bueno sigamos. Ahora vamos a agregarle un título h1 y un separador horizontal:
 
 version="1.0" encoding="UTF-8"?>
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" >
 
 <head>
 
 <title>Doctor House | Personajes Principales</title>
 
 </head>
 
 <body>
 
 <h1>Los Personajes Principales de la Serie</h1>
 
 <hr />
 
 </body>
 
 </html>
 
 Su página debería estar quedando así:
 
 Bueno ahora vamos al plato fuerte, la lista. La misma será una lista de definición con la siguiente estructura:
 
 <dl>
 
 <dt>Personaje (actor)</dt>
 
 <dd><img .../>...
 
 <dt>Personaje (actor)</dt>
 
 <dd><img .../>...
 
 ...
 
 <dt>Personaje (actor)</dt>
 
 <dd><img .../>...
 
 </dl>
 
 Las imágenes que vamos a usar son las siguientes:
 
 Todas obviamente van en la carpeta images que ya habíamos creado la vez pasada. Ahora si nuestra lista completa queda de la siguiente forma:
 
 <dl>
 
 <dt>Dra. Lisa Cuddy (Lisa Edelstein)</dt>
 
 <dd>
 
 <img src="images/cuddy.jpg" width="90" align="left" alt="Lisa Cuddy" style="margin: 4px;" />Es Decana en Medicina, endocrinóloga y directora del hospital, y por tanto jefa de House, con quien se enfrenta constantemente por su poco ortodoxa manera de hacer su trabajo. Pese a ello, y a todos los problemas que le ha causado, se niega a plantearse su despido, al considerarle el mejor médico del hospital y uno de los mejores médicos diagnostas del mundo. A lo largo de la serie ha demostrado sus intenciones de ser madre por lo que ha intentado métodos de inseminación artificial. Conoció a House en la época de la universidad y lo contrató porque ningún otro hospital lo había admitido. A partir de la tercera temporada la tensión sexual entre ella y House se hace cada vez más evidente.
 
 
 
 </dd>
 
 
 
 <dt>Dr. James Evan Wilson (Robert Sean Leonard)</dt>
 
 <dd>
 
 <img src="images/wilson.jpg" width="90" align="left" alt="James Wilson" style="margin: 4px;" />Es un oncólogo y Jefe del Departamento de oncología del hospital. Es el único amigo de House que se conoce en la serie, por lo que sólo él se atreve a hablarle con sinceridad y discutirle de tú a tú, aportando un contrapunto a los a veces extravagantes razonamientos de House y siempre soporta sus bromas y maltratos. Por lo general no participa en el diagnóstico de los casos. Es un médico ejemplar y siempre apegado al protocolo (todo lo contrario a House). Vivió en casa de House durante algunos capítulos, debido a una infidelidad de su mujer. Durante el transcurso de la 4ª temporada mantiene un romance con la Dra. Amber Volakis. A raíz de la muerte de esta, al final de la 4ª temporada, renuncia al Hospital, pero retorna en la siguiente temporada.
 
 
 
 </dd>
 
 
 
 <dt>Dr. Robert Chase (Jesse Spencer)</dt>
 
 <dd>
 
 <img src="images/chase.jpg" width="90" align="left" alt="Robert Chase" style="margin: 4px;" />Intensivista, es un australiano que muestra una gran ambición y oportunismo, cosa que en ocasiones le lleva a enfrentarse con todos sus compañeros. Procedente de una familia rica. House lo hostiga constantemente a causa de ello. Su padre, un reumatólogo de fama mundial, también ha aparecido en la serie (Se revela su muerte en la 2da. temporada, en el capítulo 8; The Mistake, por cáncer de pulmón). Estuvo en el seminario, pero para complacer a su padre se convirtió en médico. Actualmente trabaja en cirugía ya que fue despedido por House, que creyó que ya había aprendido todo lo que podía. Es novio de la Dra. Cameron en la 4ta temporada y se casa con ella al final de la 5a temporada.
 
 
 
 </dd>
 
 
 
 <dt>Dra. Allison Cameron (Jennifer Morrison)</dt>
 
 <dd>
 
 <img src="images/cameron.jpg" width="90" align="left" alt="Allison Cameron" style="margin: 4px;" />Inmunóloga a quien House afirma que la contrató, antes que por sus excelentes antecedentes, por su belleza física, ya que normalmente una mujer de esa belleza no estudia medicina y termina casándose con un hombre rico. En el pasado se casó, movida por un amor confundido con compasión, con un hombre que tenía una enfermedad terminal. Hay cierta tensión amorosa entre ella y el Dr. House, ya que en determinados momentos ella se ha mostrado atraída por él. Actualmente es la jefa de urgencias del hospital debido a que renunció a su puesto en el último capítulo de la tercera temporada. Es novia del Dr.Robert Chase en la cuarta temporada y posteriormente se convierte en su esposa al final de la 5a temporada.En la sexta temporada rompe con Chase se va del hospital y del departamento culpando a House de corromper a Chase para que este matara a Dibala. En la sexta temporada ella declara su amor hacia él.
 
 
 
 </dd>
 
 
 
 <dt>Dr. Eric Foreman (Omar Epps)</dt>
 
 <dd>
 
 <img src="images/foreman.jpg" width="90" align="left" alt="Eric Foreman" style="margin: 4px;" />Neurólogo, se siente habitualmente maltratado por su jefe, aunque también lo reconoce como un gran médico. Es muy inteligente y la mayoría de las veces suele ser enviado a las investigaciones menos convencionales, tales como los constantes allanamientos de morada que realizan, debido a sus antecedentes como delincuente juvenil, por los cuales dijo en una ocasión House que lo había contratado. Dejó el equipo de House porque pensaba que si continuaba trabajando con él acabaría siendo como él, pero luego regresa para vigilar todos los movimientos que hace House con su nuevo equipo. En la quinta temporada mantiene una relación con la Dra Remy Hadley.
 
 
 
 </dd>
 
 
 
 <dt>Dr. Lawrence Kutner (Kal Penn)</dt>
 
 <dd>
 
 <img src="images/kutner.jpg" width="90" align="left" alt="Lawrence Kutner" style="margin: 4px;" />Médico del deporte y rehabilitación. Es uno de los médicos contratados por House en la cuarta temporada. Es de origen indio y a los seis años vio como sus padres eran asesinados en un atraco a la tienda que regentaban. Es el más entusiasta del grupo, en varias ocasiones realizó acciones arriesgadas y era objeto de las bromas de House. En el episodio 20 de la 5ta temporada Simple explicación se suicida sin razón alguna. Reaparece en el episodio 24 de la 5ta temporada como una alucinación del Dr. House.
 
 
 
 </dd>
 
 
 
 <dt>Dra. Remy Hadley (Olivia Wilde)</dt>
 
 <dd>
 
 <img src="images/13.jpg" width="90" align="left" alt="13" style="margin: 4px;" />Internista contratada por House en la cuarta temporada. House siente mucha curiosidad por ella por lo que al final la contrata. Además tiene la enfermedad de Huntington la cual tenía un 50% de probabilidad de padecer al ser un trastorno genético que tenía su madre. La Dra. Hadley no conoce esto hasta que se hace la prueba en el capítulo 16 de la cuarta temporada, "El corazón de Wilson". Además, House y Foreman creen que es bisexual, confirmándolo en la quinta temporada. Es llamada "Trece" (apodada por House) ya que era el número que usaba en la prueba de selección para ser uno de los médicos contratados por House. Mantiene una relación con Foreman en la 5a temporada.
 
 
 
 </dd>
 
 
 
 <dt>Dr. Chris Taub (Peter Jacobson)</dt>
 
 <dd>
 
 <img src="images/taub.jpg" width="90" align="left" alt="Chris Taub" style="margin: 4px;" />Cirujano plástico. Es el tercer candidato contratado por House en la cuarta temporada. Abandonó la cirugía plástica al mantener relaciones con la hija de uno de sus socios por lo cual sus compañeros le dijeron que se largara o se lo contarían a su esposa. También se ha revelado en la serie que en su juventud intentó suicidarse a causa de una depresión porque tiene la nariz enorme, pero su familia lo ayudó a sobreponerse.
 
 
 
 </dd>
 
 </dl>
 
 Observen que dentro de cada ítem incluí un párrafo y dentro de este, texto y una imagen alineada a la izquierda. Las etiquetas
 solo tienen como fin separar visualmente a los ítems. Nuestra página ahora se ve así:
 
 Es cierto, todavía tiene un aspecto bastante austero, pero eso mejorará cuando vayamos aprendiendo css. La próxima links y anclas.

El pendrive, el mejor amigo del webmaster.

study — Mon, 05 Apr 2010 23:30:25 +0000

Seamos sinceros, trabajar en tu casa, en calzoncillos, con una pata arriba de la computadora y comiendo pizza es lo más. Pero a todo webmaster le puede pasar de tener que actualizar un sitio así se encuentre en medio de la calle, en la facultad, en lo de un amigo o en donde sea.

Los afortunados que tengan una notebook (o una netbook) y que la tengan encima en ese momento solo tendrán que buscar una red wifi o 3g y conectarse. Los que no, pueden llevarse una batería de software en el pendrive, programas listos para funcionar con solo colocarlos en un puerto usb. He aquí una pequeña selección:

Opera usb:

Si tenemos que retocar los estilos de un sitio poco podremos hacer si nos encontramos ante el vetusto ie6. ¿la solución? Llevar nuestro propio navegador en el pen. Opera es un excelente navegador, liviano, completo y altamente compatible con los estándares de xhtml y css (con un 100% en el acid 3). Realmente muy recomendable no solo para webmasters.

Firefox Portable

Si bien usarlo desde un pendrive es un poco molesto, el popular navegador de la Fundación Mozilla también tiene su versión portable.

Google Chrome Portable

También podemos llevar el navegador de Google en el pen.

Notepad++ portable

Revisar 3000 líneas de código php, javascript, css y xhtml en el bloc de notas puede llegar a provocar que nos subamos con una uzi al techo de un edificio y hagamos algo… poco racional. Por suerte contamos con este editor de texto que tiene soporte para reconocer y colorear 47 lenguajes. Además permite el uso plugins, entre ellos un corrector ortográfico.

Filezilla portable

No es ningún secreto que todo webmaster necesita un buen cliente de ftp y Filezilla esta a la altura de las expectativas.

Xampp Server portable

Alguno pensara que llevar un servidor en el pendrive ya es demasiado, pero les aseguro que mas de una vez he necesitado de uno. Xampp pondrá a funcionar un completo server lamp en nuestro pen. Incluye una versión lite y otra full, ambas son muy sencillas de usar.

Inkscape portable

Otra cosa que más de una vez he necesitado es un buen programa de dibujo vectorial para salir de algún apuro. Si bien reconozco que solo he probado este programa una o dos veces, es de lo mejorcito del sofá libre en el rubro.

Gimp portable

La contraparte para retoque fotográfico de inkscape, a mi no me gusta y su desempeño en el drive no es demasiado bueno, pero puede llegar a resultar salvador.

Nvu Portable

Un editor html visual, no recomiendo nunca hacer sitios de manera visual pero si no les queda otra…

¿Qué cuales utilizo?

En lo personal me llevo siempre el Opera (desde ahí navego ahora), el Notepad++ (nunca se sabe donde te vas a tener que poner a programar) y el Filezilla. Aunque ahora voy a agregar también el xampp y el inkscape.

Acuerden que la mayoría de las aplicaciones pesadas no van a correr con la misma suavidad que si estuvieran instaladas en el hd, el rendimiento depende en parte del peso de la aplicación pero también del tipo de usb (por supuesto funcionan mejor en 2.0 que en 1.1) y de la velocidad de lectura y escritura del drive. Pueden probar la velocidad del suyo con CristalDiskMark.

Obviamente este post lo realice en torno a soft libre o en su defecto freeware. Ya que si no les hubiera puesto un link para descargar el adobe cs4 portable. Pero contradice los principios del blog de limitarse al soft legal.

Espero les sea de utilidad.

Libros para webmasters (y webpadawans)

study — Tue, 19 Jan 2010 20:14:17 +0000

Hace unos dias, me descargue un libro en pdf, sobre ajax y me sorprendio ver que era muy completo y detallado (ya a esa altura esperaba cualquier cosa). En ese momento (como lo encontre a traves de Google) ni me fije de donde venia, pero si vi que estaba licenciado bajo Creative Commons.

Hoy me puse a buscar uno sobre css avanzado y caí otra vez en el sitio donde habia descargado el anterior, este sitio se llama Libros Web y nos ofrece varios libros en español sobre desarrollo web, que pueden serle útiles tanto a los que quieren comenzar con esto como a los que ya saben algo y quieren perfeccionarse.

Visitenlo porque la verdad esta muy bueno, aemas todos los libros se pueden leer online o descargar como pdf, una joyita. Les dejo el listado de libros:

CSS Avanzado

Symfony, la guía definitiva (un framework para php)

Introducción a AJAX

Introducción a JavaScript

Introducción a CSS

Introducción a XHTML

Referencia de CSS 2.1

Leanlos, no tienen desperdicio.

Crear aplicaciones Flash, sin Flash

study — Tue, 05 Jan 2010 20:42:21 +0000

Si son adeptos al soft libre y/o al freeware (o si no saben diferenciarlos ) es probable que creen dibujos vectoriales con Inskape, retoquen imágenes con Gimp o diseñen en 3d con Blender. Pero el tema se les complica si lo que quieren es crear una película Flash, ya que no solo es una tecnología propietaria, sino que el programa es asquerosamente caro (u$s 600 para arriba si mal no recuerdo).

Ahora que si bien existen algunos programas alternativos, estos son muy específicos y básicos, algunos permiten crear botones o textos animados, y otros se orientan más hacia la animación que otra cosa. Y así es como al día de hoy no tenemos una alternativa libre (convincente) a flash.

Pero esto no es tan así como parece, no hay (o yo no conozco) un programa que nos permita hacer todo lo que nos permite flash, de forma visual. Ahora que si no tenemos miedo a ensuciarnos un poco las manos con código podemos usar Adobe Flex.

Flex es un Framework que nos permitirá crear aplicaciones que corran sobre Flash Player (igual que flash), para esto combinaremos un lenguaje orientado a objetos (Actionscript 3, el mismo que en flash) y un metalenguaje (mxml, es un tipo de xml). Además Flex es de código abierto y ya que tendremos acceso a todas las clases de Flash, elementalmente (con un poco de rebusque) no tendremos limite en cuanto a lo que podamos desarrollar. Otra ventaja es que a partir de nuestro código podremos crear una película Flash para insertar en una web o una aplicación AIR para el escritorio.

Ojo no confundan Flex (a secas), que es el Framework, con Flex Builder, que es un IDE (Entorno Integrado de Desarrollo, creo) pago y propietario.

Para crear nuestras aplicaciones de forma gratuita usaremos el Flex 3 SDK que nos permitirá compilar nuestro código en un bonito archivo swf (o sea una película flash). Además para no tener que programar en un deprimente bloc de notas y no tener que hacernos lío con la consola lo mejor es que usemos el IDE gratuito (pero no libre) FlashDevelop. Este es un programa que no depende de adobe y corre sobre .net así que para hacerlo funcionar en Linux habrá que rebuscársela un poco. FlashDevelop, que va por su versión 3, es un IDE bastante completo que nos permitirá crear y administrar un proyecto, coloreará y corregirá nuestro código y tiene también la función de autocompletar. Además hace algo que yo valoro muchísimo, importa las clases correspondientes cuando yo me olvido (cosa que hago muy seguido).

Lo que no termino de entender es porque si Flex Builder (el IDE de adobe) esta basado en Eclipse, todavía no existe una versión de este que soporte Flex. Tengo entendido que hay una forma (bastante complicada) de parcharlo para que funcione con dicho Framework pero no la probé.

Para terminar el post, les dejo un simple ejemplo para que vean como se combina el MXML con el Actionscript. La siguiente aplicación tiene por propósito cargar nuestro nombre y luego saludarnos:

"1.0" encoding="utf-8"?>

xmlns:mx="http://www.adobe.com/2006/mxml" paddingTop="5" paddingRight="5" paddingLeft="5" paddingBottom="5">

/*importo la clase que necesito para el cartel de alerta*/

import mx.controls.Alert;

/*creo mi función saludar*/

private function saludar():void {

/*utilizo una decisión simple*/

if (nombre.text != "") {

Alert.show("Hola " + nombre.text);

}else{

Alert.show("Por favor introduzca su nombre");

}

}

]]>

title="Saludar 1.0" width="320" height="180" paddingTop="30" paddingBottom="30" horizontalAlign="center">

text="Por favor ingrese su nombre:"/>

id="nombre" width="200" />

label="Saludar" click="saludar()" />

>

>

Observaran que Actionscript 3 es un lenguaje que hereda su sintaxis de C y se parece mucho a Java, por otra parte MXML tiene un gran parentesco con el xhtml (podemos abrir y cerrar etiquetas para crear componentes y atributos para modificarlos). Además si queremos podemos usar estilos CSS para personalizar el aspecto grafico de la aplicación.

Bueno eso es todo por hoy, si quieren ir viendo algo pueden usar la guía para desarrolladores de Flex aunque esta en ingles y no es demasiado didáctica (no tiene dibujitos ). Por otra parte si comentan bastante y me dan ánimo en una de esas me armo unos tutoriales . A me olvidaba, les dejo el programita:

[swf]http://www.creosignum.com/images/Saludar.swf,330,190[/swf]

Google y los Webmasters

study — Fri, 18 Dec 2009 20:27:08 +0000

Antes de comenzar con el post quiero que sepan que me pase las últimas 3 horas intentando recuperar el .doc que tenia el texto en un pendrive con el filesystem jodido. Para lo cual probe una decena de programas de recuperación y 3 sistemas operativos, espero sepan valorar el esfuerzo. Ahora va el post enserio:

Que el gigante de los buscadores se ha coronada como el rey (casi) indiscutible de la World Wide Web no es una novedad para nadie. Pero Internet son sus Webs y por ende quienes tienen control sobre ella son los webmasters. Google esto lo sabe y por eso ha desarrollado decenas de herramientas para ganarse su cariño. En el siguiente post me propongo hacer un pequeño repaso por ellas.

Blogger

Si aún no tenemos nuestro propio espacio web y necesitamos un espacio que vallamos a actualizar periódicamente lo nuestro son los blogs y el sistema de Google para esto es el archiconocido Blogger. Las ventajas de este servicio son: la disponibilidad de cientos de plantillas para personalizar su aspecto grafico y la posibilidad de modificarlas, la posibilidad de agregar gadgets para agregar funcionalidades y la posibilidad de usar un dominio propio (por defecto el dominio queda nombredelblog.blogspot.com). Para los que tengan la suerte de vivir en Argentina les cuento que los dominios .com.ar son gratuitos y pueden registrarse en www.nic.ar.

De todas formas si piensan en hacer un blog, les recomiendo que utilicen Wordpress en su propio servidor (en poco tiempo iniciare una serie de tutoriales sobre esto).

Herramientas para Webmasters

Comencemos por lo básico, la indexación de nuestro sitio, no se si será cierto el dicho “Si no esta en Google no existe”, pero si no nos posicionamos bien en el, es como si no existiésemos. A si que lo primero que debemos hacer luego de dar de alta nuestro sitio en Google es pasarnos por las ‘Herramientas para Webmasters’ que nos ofrece el buscador. En ellas podremos obtener todos los datos acerca de como se indexa nuestro sitio y detectar tempranamente cualquier problema de posicionamiento.

Para hacer uso pleno de ellas será necesario certificarnos como dueños del sitio sobre el que queremos informarnos. Para ello necesitaremos una cuenta de Gmail y pegar un código que nos dan, en nuestro header (o sea entre las etiquetas y ).

Una vez hecho esto, podremos ver cuales sitios nos han linkeado, en que búsquedas aparecemos mejor posicionados, que paginas son las mas linkeadas, si el Google bot a tenido algún problema al indexar las paginas de nuestro site y hasta si tenemos algún malware inyectado en nuestro código.

Pero quizás la funcionalidad mas importante a la que tengamos acceso es a la de enviar un sitemap xml para asegurarnos que el Google indexe todas nuestras páginas sin excepción.

Analytics

Bien nuestro sitio ya figura en Google, ahora es tiempo de obtener alguna información acerca de nuestros visitantes. Google Analytics es un sistema online de estadísticas para nuestra Web, en el podremos saber la cantidad de visitas diarias, semanales y mensuales que tenemos, cuales son los contenidos que mas les interesan, de donde son, cuanto tiempo permanecen en el sitio, que porcentaje de las visitas regresan y mas. Además vamos a poder obtener algunos datos de índole técnica como el sistema operativo y el navegador de nuestros visitantes, la resolución de pantalla y hasta que versión de Flash Player utilizan. Todos datos que sin dudas son útiles para el webmaster, los primeros a la hora de crear contenido que atraiga visitas y los segundos a la hora de diseñar/rediseñar el sitio.

Para usar analytics necesitamos una cuenta en Gmail y pegar un código que nos dan, justo al final del cuerpo de nuestra página (justo antes de la etiqueta )

Gadgets

Tal vez ya oyeron hablar de estos gadgets de Google ya que los han integrado en varios lugares, podemos usarlos en nuestro escritorio con Google Desktop Bar y hasta en Gmail, así que ¿porque no agregar algunos a nuestra web?. Los gadgets no son más que pequeñas miniaplicaciones de todo tipo: informativos, juegos, calendario y relojes, video y más. Para insertarlos en nuestro sitio vasta ir a la página oficial y copiar el código del que nos interese, luego lo pegamos en la parte del sitio que nos interese y listo.

Docs y Wave

El primero no es un recurso para webmaster propiamente dicho pero siempre podemos necesitar un editor de texto avanzado en cualquier lugar. El segundo, aunque aún se encuentra en beta cerrada, nos permitirá crear trabajos conjuntos con otras personas, imagínense cocrear un artículo sobre algún tema con otra persona que esta a miles de kilómetros, y en tiempo real.

Adsense

Bien, ya tenemos creado y funcionando nuestro sitio, es hora de intentar monetizar nuestro esfuerzo, la forma más fácil de hacerlo es con publicidad adecuada a nuestro ‘target’. Para eso nació adsense el servicio de publicidad contextual de Google.

Es publicidad contextual justamente porque se adapta al contexto en donde se encuentre, si la página habla de autos el banner mostrara publicidad sobre autos. Así solamente debemos preocuparnos por generar contenido de calidad que atraiga visitas y adsense hará el resto. Ojo adsense tiene una estricta normativa en cuanto a su uso y si la violamos de cualquier forma, nos cancelaran la cuenta ipso facto.

De todas formas no se hagan ilusiones con el dinero si no lograron por lo menos 1000 visitas diarias (los primeros meses tendremos suerte si logramos 20 visitas diarias, pero no se desanimen) no lograran hacer demasiado dinero

Los bloques de publicidad de adsense pueden ser de texto (hipervínculos) o imágenes. Para insertarlos debemos generar el banner desde el asistente del sitio oficial y luego copiar el código que nos dan, en nuestro sitio.

Buscador

Tal vez nuestro sitio no sea tan grande como para necesitar buscador o tal vez ya tengamos uno y seamos feliz con el, pero lo cierto es que, en caso de necesitarlo, podemos insertar el buscador de Google para realizar búsquedas internas en nuestro sitio. Con un poco de personalización en cuanto a xhtml y css, podremos integrarlo totalmente al aspecto de nuestro sitio, sino deberemos conformarnos con pegar un código donde queramos el buscador y que los resultados de búsqueda se nos presenten el la típica página blanca. También podemos usar adsense en las búsquedas que realicen en nuestro sitio.

FeedBurner

Elementalmente se presenta como un servicio para administrar nuestros feeds rss. Algo que nos va a importar (y mucho) si tenemos un blog. Feedburner nos permite llevar estadísticas de quienes se suscriben a nuestros feeds y también nos permite insertar adsense en ellos. Además nos da la posibilidad de transformar nuestros feeds en un sistema de newsletters, con lo cual los visitantes que prefieran no usar un lector rss podrán suscribirse con su email.

Si bien lo de la sindicación es automático, en caso de que queramos crear un servicio de newsletters, Feedburner nos dará un código para insertar un pequeño widget en nuestra web. El problema (que no se si ya habrán solucionado) es que el formulario que el usuario que desee suscribirse debe completar, esta en inglés.

¿Los requerimientos? que nuestro sitio utilice rss y tener una cuenta Gmail.

Bueno estos son todos los que me acuerdo (hay mas no lo duden) y seguramente mientras escribía esto ya sacaron algo nuevo. Además están las herramientas de desarrollo de Google de las que algún día hablare en otro post. Si quieren aportar algo, los comentarios están abiertos. Salu2.

Study