David Esperalta

Si te gusta el diseño gráfico y el desarrollo web; si eres un aficionado a cuanto puede hacerse con herramientas como Javascript, CSS y HTML, entre otras, no debes perderte el sitio web de Román Cortés, donde se muestran sus trabajos, ni tampoco su bitácora personal, con algunas entradas que te dejarán con la boca abierta de par en par, como podrás comprobar tú mismo.

Efectivamente, uno no puede dejar de apreciar y admirar el trabajo de Román Cortés, y, al mismo tiempo, sentir cierta envidia sana por la cantidad de cosas que este hombre está capacitado para hacer. Podría poner aquí algunos ejemplos, pero, la bitácora del artista es digna de leerse entera de arriba a abajo, merece la pena hacerlo, y sería vano por tanto sacar una u otra entrada a colación.

Así que no dejes de echar un vistazo por ti mismo, verás como pasas un rato agradable y divertido, cuando menos. Es fácil, sólo tienes que visitar: romancortes.com

A la hora de llevar a cabo páginas web, de dar salida al código HTML, es importante darse cuenta de que el cliente, el navegador, ha de procesar dicho código HTML y que esto tiene consecuencias que notará el lector de nuestra página. Antes, cuando se usaban tablas para maquetar páginas web, esto era acaso más conocido, puesto que, por ejemplo, el navegador Internet Explorer, no mostraba el contenido de una tabla hasta que la misma estuviera completamente "cargada".

Si en la celda de una tabla existía una imagen, por ejemplo, Internet Explorer no mostraba la tabla en cuestión hasta que la imagen estuviera cargada completamente. Hoy no se utilizan tablas para "maquetar" (¿cómo? ¿que todavía hay algún caso?) pero, sigue siendo necesario tener algunas cosas en cuenta a la hora de dar salida a nuestro código HTML. En esta entrada voy a hablar de una de ellas: la necesidad de incluir el estilo de una página antes de cualquier otra cosa, si puede ser.

Si usas hojas de estilo en tus páginas (que será lo más normal) y también usas código JavaScript, como pueda ser la biblioteca jQuery, pongamos por caso, sitúa en la cabecera del documento HTML, en primer lugar, las hojas de estilo, y, a continuación, el código JavaScript. No conviene hacerlo al revés, por lo que he mencionado más arriba: el navegador, que es el encargado de procesar el código HTML, podría mostrar parte o toda la página "sin estilo", precisamente, porque se encuentra cargando el código JavaScript necesario.

Como la página se muestra al usuario sin estilo, pero, sólo por un par de segundos, en el mejor de los casos, se causa una especie de "flash": el usuario verá la página sin estilo durante un segundo o dos y, luego, ¡zas!, el navegador aplica el estilo que faltaba y la página "cambia" en un momento a la vista del usuario. Todo esto se evita, como queda dicho, añadiendo antes los estilos que el código JavaScript, para que, cuando el navegador muestre la página, esta ya cuente con su estilo correspondiente, aunque quede por cargar aún su código JavaScript.

Hace poco escribí cierta entrada sobre un "invento" que se me había ocurrido (¡ay, mente calenturienta!) acerca de usar una determinada "plantilla de clases CSS", con el fin de ahorrarme cierto trabajo. Como entonces me pareció que podía ahorrárselo a los demás también, me tiré a la piscina y publiqué la plantilla en cuestión.

Hoy, gracias a los comentarios de Óscar, dizque lector de esta bitácora, tengo que reconocer (y no me pesa en absoluto) que estaba equivocado. No sólo la plantilla en cuestión es un error, sino que debería replantearme el uso de ciertas clases en mis "hojas de estilo", puesto que no estoy utilizándolas correctamente, y puede ser que, en lugar de ahorrarme trabajo, me lo den en un futuro.

Bien. Pues a ver si se me ha metido en la cabeza lo que Óscar a tenido a bien informarme. Ciertamente, creo que desde su primer comentario intuí que yo estaba equivocado, aunque, insistí en el asunto, porque, no terminaba de verlo claro, no porque me negara a ver mi error, sino porque, sinceramente, no conseguía ver claro el asunto.

Pero ahora sí que lo veo claro, o por lo menos más claro, o por lo menos me doy cuenta de que la plantilla de clases CSS en cuestión, ni tiene razón de ser, ni es correcto su uso. Me quedan sin duda muchas cosas que aprender sobre este y sobre otros temas, por eso quiero agradecer una vez más a Óscar por sus comentarios.

Me va a tocar el trabajo de repasar las hojas de estilo de ciertos proyectos que tengo en marcha, pero, será un trabajo que no me cueste trabajo, si vale la redundancia, porque procuraré ahora seguir ciertas directrices que antes, simplemente, no estaba teniendo en cuenta. Tú, si quieres, revisa la plantilla en cuestión, y luego los comentarios de Óscar, porque, quién sabe si también podrás aprender algo.

Ja ja ja. Me río yo sólo... por lo que se ve, en esta bitácora. Pero, en fin. Qué le vamos a hacer. No era de esto de lo que quería hablar. Tal vez otro día. Ahora quiero hablar de un invento (no es tal, ni mucho menos, esa era la "broma") en que he estado ocupado últimamente, por decirlo así, puesto que, lo que es pensar en ello, creo que llevo haciéndolo hace tiempo.

Me estoy refiriendo a cierta plantilla con clases CSS (Cascading Style Sheet, lo mismo te quedas igual) que he publicado en una página de esta bitácora, y, que igual te resulta útil, o curioso, o una tontería, yo qué sé, si no me dices nada. Copio aquí la plantilla por ocupar espacio y porque queda bonita, me parece a mí, vamos.

/* 
Usefull CSS classes
Under GNU LGPL license
(C) 2008 David Esperalta
http://www.davidesperalta.com
 
Please, dont remove this note
You can remove the legend if
you want a minor file size
*/
 
/* Leyend
fr = Float Left
fr = Float Right
cb = Clear Both
cl = Clear Left
cr = Clear Right
tc = Text Cursor
wc = Wait Cursor
hc = Help Cursor
dc = Default Cursor
pc = Pointer Cursor
cc = Crosshair Cursor
dn = Display None
db = Display Block
di = Display Inline
vh = Visibility Hidden
vv = Visibility Visible
ao = Auto Overflow
ho = Hidden Overflow
so = Scroll Overflow
vo = Visible Overflow
fp = Fixed Position
sp = Static Position
ap = Absolute Position
rp = Relative Position
al = Align Left
ar = Align Right
ac = Align Center
aj = Align Justify
bf = Bold Font
if = Italic Font
nf = Normal Font
af = Arial Font 
vf = Verdana Font  
of = Overline Font
uf = Underline Font
sf = Strike Font
wr = White and Red
rw = Red and White
wb = White and Black
bw = Black and White
*/
.fl{float:left}                   
.fr{float:right}                  
.cb{clear:both}
.cl{clear:left}
.cr{clear:right}
.tc{cursor:text}
.wc{cursor:wait}
.hc{cursor:help}
.dc{cursor:default}
.pc{cursor:pointer}
.cc{cursor:crosshair}
.dn{display:none}
.db{display:block}
.di{display:inline}
.vh{visibility:hidden}
.vv{visibility:visible}
.ao{overflow:auto}
.ho{overflow:hidden}
.so{overflow:scroll}
.vo{overflow:visible}
.fp{position:fixed}
.sp{position:static}
.ap{position:absolute}
.rp{position:relative}
.al{text-align:left}
.ar{text-align:right}
.ac{text-align:center}
.aj{text-align:justify}
.bf{font-weight:bold}
.if{font-style:italic}
.nf{font-weight:normal}
.af{font-family:Arial}
.vf{font-family:Verdana}
.of{text-decoration:overline}
.uf{text-decoration:underline}
.sf{text-decoration:line-through}
.wr{background:#fff;color:red}
.rw{background:red;color:#fff}
.wb{background:#fff;color:#000}
.bw{background:#000;color:#fff}

Ahora bien, ya que has visto de qué va el asunto, más o menos por encima, te invito a informarte un poco mejor, si es que lo encuentras lo suficientemente interesante: Usefull CSS classes. Esta entrada la dejaré tal cual, quiero decir, si tengo algo que actualizar o decir acerca de la "plantilla CSS" en cuestión, lo haré en la página de esta bitácora, que acabo de enlazar.

Actualización importante: Los comentarios de Óscar, que puedes leer más abajo, me dejan claro que usar una plantilla como la que presento arriba, lejos de ser útil, puede resultar perjudicial, y, sobre todo, no es la forma correcta de hacer las cosas. Lee los comentarios a esta entrada, sobre todo los de Óscar, pero también los míos, intentando enterarme del asunto, y creo que también tú comprenderás que el uso de una plantilla así sería un error. Ah, ¡y agradece a Óscar la información al respecto! Aquí una entrada sobre esto último.

Odio los espacios en blanco en el código fuente, al final de las líneas. Incluso he programado varias herramientas para deshacerme de ellos cada dos por tres.

La que uso con CMS es una escrita en PHP, y, basta que "visite" cierta URL para que se eliminen los espacios en blanco al final de las líneas de todos los archivos del proyecto.

Tratando con PHP, HTML, etc., no es ninguna tontería. Raro es el día que "paso la herramienta CleanLines" y no se eliminan varios miles de espacios.

Eso significan un par de KB. Un par de KB (como mínimo) no es ninguna tontería, hablando de HTML, JavaScript, CSS... de PHP no estoy tan seguro.

Pero, en todo caso: es que odio los espacios y los quitaría de todos modos. :P

Sigo trabajando en ello, aunque me siga pareciendo mentira, y el caso es que hoy he estado todo el día liado con SMC... y he logrado cosas que no hubiera pensado lograr... tan pronto.

Así que estoy, se puede decir, más o menos contento con el trabajo de hoy. ¿Que qué he conseguido? Pues... entre otras cosas... estoy de lleno en el "loop" de entradas... lo que en WordPress llaman el "super loop".

Estoy implementando el asunto de forma muy similar a como se hace en WordPress, si bien no me he fijado en su código, sino por fuera, y bueno... no quiero comparar mi proyecto (nunca mejor dicho) con WordPress... ni nada que se lo parezca.

Pero mi contento no se debe sólo a lo dicho, aunque está completamente relacionado. Hoy quien me tiene especialmente contento es Eclipse Europa, o sea, probablemente el mejor "IDE" para trabajar con PHP, XHTML, CSS y JavaScript (si le enchufas Aptana) que existe ahora mismo. Eclipse Europa y olé.

Como que si todavía no lo has probado y te suena interesante no debes dejar de hacerlo, fíjate lo que te digo. De lo mejor el editor de código. Para cualquiera de los lenguajes mencionados es estupendo, para PHP es ya el no va más... o poco le falta para serlo, vamos.

¿Cómo? ¿Que muestre el "famoso loop" de SMC? Bueno... ni con mucho puedo decir que vaya a quedar de esta forma o de otra, entre otras cosas porque dependerá de la plantilla o tema en cuestión, ahí va como se ve ahora mismo en el tema "por defecto" de SMC...:

 
 <div id="content">
 
 
 
 
 
      <div id="entry-<?php EntryID() ?>" class="entry">
       <div class="entrytitle">
 
         <a title="<?php EntryTitle() ?>" href="<?php EntryPermalink() ?>"></a>
 
        <span class="entryauthor">
 
 
         </span>
       </div>
       <div class="entrycontent">
 
       </div>
      </div>
 
 
 
 
    <div id="navigator">
     <span>« </span>
     <span> »</span>
    </div>
 
 
 
    <div id="noentries">
 
    </div>
 
 
 
 </div>

Si conoces WordPress por dentro... vamos, si has visto alguna vez al menos uno de sus temas, sin duda te sonará el código anterior. Es una buena forma de conseguir, precisamente, que pueda haber distintas plantillas. Pero, ya digo... todo esto del SMC este de los co***** está tan verde aún... Veremos a ver. :P

Actualización: El código que ves más arriba, correspondiente al archivo "index.php" del tema principal de mi p*** SMC, se acabó de escribir... hace un ratín, y son ahora casi las seis de la mañana. Que conste, por si fuera menester.

Si estás buscando un entorno de desarrollo para PHP, HTML, CSS, JavaScript, no tienes que darle más vueltas. Hoy por hoy, Eclipse, junto con los plugins PHP-IDE y Aptana, es de lo mejorcito que puedes encontrar.

Personalmente, vengo usándolo desde hace ya bastante tiempo, y, tenía ganas de usar ya la versión 3.2 de Eclipse, de nombre Europa, porque, cuando la probé (recién salida) parecía haber mejorado, en velocidad, por ejemplo, respecto de la anterior versión.

Sin embargo, me quedé con las ganas de usar Eclipse Europa, porque no hubo modo de instalar los plugins PHP-IDE y Aptana, así que me quedé con la versión 3.2 de Eclipse, y bueno, con esa versión he estado... hasta hoy...

Hace unos días se publicaba la versión 1.0 del entorno Eclipse PHP Development Tools, que se basa en Eclipse Europa, o sea, la última versión de Eclipse, como he dicho. Y he querido probarla, y probar a ver si podía instalar el plugin de Aptana... que era lo que podía echar en falta.

Y todo ha ido bien. De modo que a partir de ahora usaré Eclipse Europa + PDT (que viene a ser como el sustituto de PHP-IDE) + Aptana, que incluye el mejor editor de JavaScript y puede que de CSS que pueda conseguirse ahora mismo.

Y más contento que unas pascuas, porque se nota bastante que Eclipse ha mejorado (sobre todo en velocidad de respuesta), y porque, como he dicho, no creo que haya entorno alguno mejor para trabajar con PHP y los lenguajes que necesariamente están alrededor de este.

Uno se plantea cada vez más dejar a Windows de lado, o, cuando menos, abrirse a otros sistemas operativos, concretamente, Linux, por ser un sistema operativo libre, sostenido en buena medida por usuarios comprometidos con su libertad.

¿Cómo hacer para programar sin estar atado a un sistema operativo en concreto? ¿Acaso usar Java? ¿Qué otra cosa ahí? Y enseguida aparece la respuesta: la web. Las aplicaciones web; sean sistemas más o menos complejos, o, sencillamente páginas web.

Programar aplicaciones web usando PHP, por ejemplo, permite a tu aplicación correr no ya en distintos sistemas operativos, pero, en prácticamente cualquier navegador de internet. Y el propio desarrollo puede realizarse en distintos sistemas sin problemas.

Adoro PHP. Un lenguaje libre, que cuenta con una comunidad a su alrededor admirable, que además cuenta con muchísimas herramientas. No es moco de pavo. Si no existiera PHP habría que inventarlo, desde luego.

Basar tu trabajo en HTML, CSS, PHP, JavaScript... ¡pueden hacerse virgerías con estos lenguajes! A las pruebas me remito. ¿Porque tú navegas por internet verdad? Pues ahí lo tienes. Basar tu trabajo en código que a buen seguro va a poder utilizarse durante mucho tiempo, sin ataduras.

¿Qué más se puede pedir? De todo tiene que haber, supongo. Y entornos como Delphi, hay que reconocerlo, son una maravilla, pero, tienen un coste, no sólo el de la dlicencia (que también), sino que crea una dependencia que a largo plazo puede perjudicar.

Se me podrá argumentar que no todo puede estar en la web, que las aplicaciones de escritorio ofrecen lo que la web no puede ofrecer. Y es completamente cierto. Y por eso digo que de todo tiene que haber.

Pero yo hablo desde el punto de vista de alquien que comenzase ahora... que quisiera ganarse la vida desarrollando software. ¿Qué puede impulsar a esta persona a realizar desarrollos atados a una determinada tecnología "propietaria"? ¿Por qué, si puede hacerlo con tecnologías libres?

Creo que por un lado está el coste del desarrollo web. Si uno desarrolla un programa con Delphi para Windows... no necesita sino distribuir dicho programa, y para esto hay cien sitios web que estarán encantados de proporcionarte los medios precisos.

Pero un "hosting" que soporte PHP hay que pagarlo. Cada mes. O anualmente. Hay que pagarlo. Y también hay que pagar el dominio. En todo caso hay un coste insoslayable, que tal vez quien desarrollo su aplicación para Windows pueda evitar, sobre todo si se ve obligado a ello...

En definitiva, que considerar la web como nuestro objetivo lo veo como una buena idea. Como una forma de ir más allá de los distintos sistemas operativos, estando en todos ellos a un mismo tiempo. Y de una forma en que nos costará menos trabajar, sobre todo si queremos hacerlo según mandan los cánones.

Me refiero sobre todo a las licencias del software que usamos para trabajar. Para trabajar con HTML, CSS, PHP, JavaScript... contamos HOY con el software libre necesario. Entornos de desarrollo similares a Delphi en Linux, por ejemplo,... no parece que vaya a haber ninguno en algún tiempo, por lo menos.