Desde hace años que me pase a las capas abandonando la maquetación en tablas, si algo he hechado de menos siempre ha sido el "como centrar texto verticalmente sin valign". Para solucionar este problema, siempre he usado subcapas con margin o paddings o directamente padding superior en la capa padre para bajar el texto, aunque eso se comporta de manera distinta dependiendo del navegador. En una pagina que estoy montando me he puesto a investigar, como alguna vez hago con el intellisense mirando todo lo que me encuentro y en esta ocasión le ha tocado el turno al css. Buscando me he encontrado con un atribuo de css que se llama line-height, que agranda la linea del texto a la altura que le indiquemos, lo que quiere decir que si tenemos un menú, de pastillas de 50px de alto y le indicamos que el line-height es 50px, el texto aparecerá centrado. Realmente no es algo milagroso ya que no es dinámico, pero para menús y cosas así viene genial.

Os dejo un ejemplo de como se utilizaría:

Ejemplo del html:

 
<div id="menu">
<div class="menuOption">Inicio</div>
</div>
 

Ejemplo del css:

#menu {
  height: 50px;
}
 
.menuOption {
  line-height: 50px;
  text-align: center;
}

Con este ejemplo anterior, nos dibujaría una pastilla (mas o menos) y nos dejaría el texto centrado verticalmente y ya de paso centrado horizontalmente también.

Cuando escribimos un texto en un input de tipo text (input type="text") nos encontramos que por regla general el navegador nos va a autocompletar lo que estemos escribiendo en ese momento con texto que ya hayamos escrito con anterioridad, recordando para un input que se llama "nombre" el o los nombres que hayamos introducido.

La practica del autocompletado es muy util siempre que tengamos formularios repetitivos, tales como los formularios de registro que suelen llamarse siempre de forma similar y siempre suelen pedir los mismos datos, evitandonos volver a escribir todos nuestros datos una y otra vez.

Existen casos en los que quizas no queramos que el navegador nos autocomplete ese texto, puede darse el caso que tengamos una tienda online que realiza el pago con tarjeta de crédito y no queramos que esa tarjeta de crédito se nos autocomplete. Para evitar esto, existe un atributo que es utilizado por la gran mayoria de los navegadores que es el atributo autocomplete="on|off", que si se desactiva con el valor off, indica al navegador que no ha de autocompletar ese campo.

Aunque en muchos casos es muy buena practica usar el atributo autocomplete, el W3C no tiene reconocido este atributo como atributo de la etiqueta input, con lo cual al intentar validar y encontrarse con el atributo autocomplete, nos dara un error de validación. Para solucionar el error de validación lo que haremos sera utilizar javascript para añadir este atributo, así la funcionalidad seguira estando ahí, pero no tendremos problemas de validación.

Lo unico que deberemos hacer es añadir el siguiente código al final de la página, o al menos, justo despues de declarar el input

  <script type="text/javascript">
    //<![CDATA[
    var elemento = document.getElementById("IdDelInput")
    elemento.setAttribute("autocomplete", "off");
    //]]&gt;
  </script>

De esta forma conseguiremos que al introducir un texto en un input no se autocomplete por el navegador y si queremos autocompletar lo podamos hacer por javascript.

Un buen y bonito ejemplo de autocompletado de campos es el que use para muchoviaje en los campos de origen y destino

Durante el desarrollo de mi último proyecto, me encontré con un xml de transformación o xslt, donde debía de usar el símbolo del euro (€), pero esta transformada, que no deja de ser un xml, estaba codificada en iso-8859-1, y no podía cambiar la codificación. A la hora de añadir el símbolo del euro, si usaba directamente el carácter €, fallaba porque estaba mezclando codificaciones, y si usaba € como viene siendo en html, fallaba porque no es un carácter válido de xslt. La solución, usar los caracteres especiales, en este caso para el euro (€) es el €

En un proyecto importante en el que estoy trabajando tenemos que añadir una serie de nuevas funcionalidades a una aplicación muy grande y eso supone también modificar la web que visitan cientos de miles de personas al día. Al ver que mis compañeros de HTML están más bien peladitos me ofrecí voluntario para hacerla ya que daban libertad dentro de unos limites.

Al apañar la web para las nuevas características me encuentro con que esta hecha con el diseñador de webforms de Visual Studio, y me encuentro con cosas como align="absBottom" en una imagen para centrarla verticalmente.

Como aparte de las modificaciones que debía de hacer y como me sobraba tiempo y me aburría, convertí la web de formato indefinido a XHTML correcto con CSS, tenia que arreglar ese tipo de cosas, así que el alineamiento de la imagen se puede hacer con CSS con el estilo vertical-align que tomaría los siguientes valores

• top
• left
• right
• middle
• bottom

El código seria este:

  <img src="..." align="absBottom">

El nuevo código sería:

  <img src="..." class="middle" title="...."
 alt="...." />

Y la clase CSS seria:

  .middle {
    vertical-align: middle;
    /* Valores: top, left, right, middle, bottom */
  }

En muchas ocasiones he escrito código Javascript en una web de XHTML y al intentar validar unas veces funcionaba y otras no. Probando un poco más me di cuenta que cuando escribía código Javascript con ampersans (&) y signos de menor o mayor (< >) el código no validaba. Es cuando caigo en la solución, si XHTML no deja de ser un XML, probemos a poner un CDATA.

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org
/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
dir="ltr" lang="es-ES">
....
....
<script type="text/javascript">
//<![CDATA[
//Aquí metemos nuestro codigo javascript
//]]>
</script>

Con esto ya podemos escribir código Javascript embebido sin que por ello no nos valide nuestra web.

Hace ya algunos años que me dedico a la programación en exclusiva de PHP en entornos web, pero a pesar de tratarse de entornos web, no son páginas web, sino webservices, donde la presentación gráfica esta de sobra porque todo se transmite por XML. Durante este tiempo he pasado por diferentes IDE's de programación, terminando en el Zend Studio 5.2 y 5.5, ya que para entornos de desarrollo complejos donde el numero de clases, interfaces, variables, etc. es enorme y se mueven multitud de datos, es el mejor con diferencia.

Es cierto que el Zend Studio es maravilloso si lo comparamos con el resto de IDE's de PHP que hay en el mercado, sobre todo y algo que los demás no tienen es el reconocimiento de las clases que nosotros mismos desarrollamos y su documentación al estilo PHPDoc. Hace algunos meses, redescubrí el plugin PDT de Eclipse, que había dejado de estar verde, para tener un autocompletado del código casi equiparable con el del propio Zend Studio, pero con la gran ventaja de ser mas ligero a pesar de que Eclipse consume más memoria  RAM.

Hace un par de días, vi por primera vez Aptana, un IDE basado en Eclipse que incorpora interesantes funcionalidades como una mejor cobertura del autocompletado de código en cuanto a HTML y CSS se refiere y algo que me ha maravillado, un autocompletado y reconocimiento de clases y funciones de Javascript. Esto me ha maravillado porque para desarrollar una web gráfica, es lo mejorcito que he visto.

Lo que había pensado y efectivamente se puede hacer, es que si PDT es un plugin de Eclipse y Aptana es otro plugin de Eclipse, quizás se pudieran mezclar creando un conjunto realmente bueno por no decir el mejor para el desarrollo web.  Lo más curioso, es que analizando un poco las funcionalidades de Aptana, me he dado cuenta o eso me ha parecido, que la parte de PHP usa el plugin PDT (al menos es igualito) pero de una versión vieja, que por mi experiencia creo que se trata de la 0.7. Así que aventurandome a mezclar los dos plugins y cruzando los dedos para que los apartados de PHP no se den de ostias, los instale.

El resultado de mi experimento es un Eclipse con el plugin de PDT y Aptana instalados a la perfección, si creo un nuevo proyecto de PHP con la vista de PHP (PDT) utiliza todo el entorno de PDT para las páginas PHP y el sitema de Aptana para todas las paginas de Javascript, HTML, CSS, etc. por lo que podemos tener el que sería para un profesional, el mejor IDE de desarrollo para PHP, HTML, CSS y Javascript que podemos encontrar, completamente gratuito y multiplataforma.