1295979994_rulers[1]

Una de las tareas más comunes al momento de programar o diseñar aplicaciones web es el de centrar el contenido para que este se vea más agradable a la vista, sin embargo una tarea tan sencilla puede complicarse cuando se busca una correcta visibilidad en todos los navegadores posibles, ya sea el afamado Chrome, el siempre confiable Firefox o hasta la oveja negra de Internet Explorer.

Quizá muchos de ustedes aún utilicen tablas para la maquetación de sus diseños, sin embargo esta practica es cada vez menos utilizada por la complejidad de mantenimiento y por el uso de nuevas tecnologías web como es el caso de CSS (Hojas de estilo en cascada).

Pues bien, vamos a suponer que tenemos algo como esto:

<html>
<head>
      <title>Pagina centrada </title>
</head>
<body>
     <div>Esto es lo que vamos a centrar </div>
</body>
</html>

Es una estructura simple de una página web, lo que vamos a centrar se encuentra en el “div”, para centrarlo en la mayoría de los navegadores modernos lo podemos hacer con estilos CSS, para ello agregamos el estilo a nuestra página web entre las etiquetas <head> y </head>

<link rel="stylesheet" type="text/css" href="estilo.css" />

 

Donde “estilo.css” será nuestra hoja de estilos donde definiremos lo siguiente:

#contenido{
    width: 800px; // Aquí puedes definir el ancho que quieras
    margin-left:auto;
    margin-right:auto;
}

Con esto solo faltaría agregar el estilo a nuestro div, cambiando esto:

<div>Esto es lo que vamos a centrar </div>

Por esto:

<div id="contenido">Esto es lo que vamos a centrar </div>

Guardando nuestros archivos y abriendo nuestro archivo HTML en cualquier navegador actual debe quedar nuestro contenido centrado, y todo lo que pongamos dentro del div que creamos se centrará también horizontalmente a la página, desde texto hasta imágenes.

El problema radica cuando queremos que esto funcione también para Internet Explorer en sus versiones más antiguas (6 , 7 , 8… ) y esto es porque es un navegador que no respeta los estándares correctamente. por lo tanto tendremos que hacer un pequeño “hack” para hacer que funcione también con este navegador.

Tendremos que cambiar nuestro archivo de “estilos.css” por algo como esto:

body{
  text-align:center; // Este es el hack para hacer que Internet Explorer centre el contenido del div
}
#contenido{
  text-align:left; // Regresamos el texto a la izquierda para que el contenido quede centrado pero el texto alineado a la izquierda. 
  width: 800px; // Aquí puedes definir el ancho que quieras
  margin-left:auto;
  margin-right:auto;
}

Es un pequeño paso más para que nuestra página sea compatible con los navegadores actuales y con IE, pero con esto tendremos centrado nuestro contenido sin necesidad de utilizar las obsoletas tablas para maquetar.

Espero les haya sido útil y entendible la explicación.

lenguajes_programacion_web

Muchas veces necesitamos ejecutar una determinada función definida en JavaScript en cualquier parte de nuestro código PHP o HTML sin necesidad de ningún enlace o componente, esto podemos hacerlo en HTML de la siguiente forma:

<script type="text/javascript">
miFuncion();
</script>

Cómo vemos tan solo tenemos que escribir la función (o funciones) dentro de esas etiquetas y se ejecutaran cuando se llegue a esa parte del código, pero recuerda que para utilizarla la función debe de estar definida en el mismo documento HTML o haber importado el archivo que la contiene de la forma que ya conocemos:

<script src="funciones.js" type="text/javascript"></script>

Ahora si queremos hacer lo mismo en PHP no hay más ciencia, ya que como sabemos PHP lo que hace al final es generar código HTML, por lo que podríamos hacer algo como esto:

for ($i=0;$i<10;$i++){
echo '<script type="text/javascript">';
echo 'miFuncion()';
echo '</script>';

El código anterior no hace más que imprimir las mismas etiquetas de arriba solo que esta vez utilizando PHP y la instrucción “echo” para imprimir las etiquetas,  en este ejemplo utilizamos un ciclo “for” para llamar a la función 10 veces.

Espero les sea de utilidad.

Todos hemos escuchado hablar de Albert Einstein y su teoría de la relatividad, pero la verdad es que muy pocos sabemos lo que significa, y mucho menos el como Einstein llego a este descubrimiento.

Por esto es que comparto con ustedes este documental de The History Channel que se dedica a explicar la importancia de la teoría de la relatividad en la ciencia, y el proceso e incluso los errores de Einstein que lograron consolidar esta teoría. La serie de vídeos esta muy interesante y se las recomiendo al 100%, ya que gracias a ellos podemos entender un poco más la teoría de la relatividad, así como más sobre la vida personal de Albert Einstein, así como como el amor también influyo en su vida y en su carrera.

Pueden ver el documental desde aquí, o directamente en YouTube:

Me enteré hace meses gracias a SpamLoco

Aprender HTML y CSS es necesario para trabajar en la Web, y a veces es tedioso aprender uno de esos lenguajes simplemente con lecturas sobre el tema, sin embargo me encuentro con una página que nos ofrece una forma curiosa de realizar el aprendizaje de una manera más interactiva y curiosa.

Se trata de una página web la cual está dividida en secciones, en la cual seleccionaremos alguna de las etiquetas que queremos aprender, a la derecha se nos mostrará una descripción del funcionamiento de dicha etiqueta, y en la parte inferior aparece un ejemplo del uso de dicha etiqueta, donde podemos ver el código utilizado e incluso realizar modificaciones sobre él y ver el resultado.

La página en cuestión se llama htmlPlayground.

Enlace: htmlPlayground.

1. Comenta a varios niveles

Comenta los distintos bloques de los que se compone tu código, aplicando un criterio uniforme y distinto para cada nivel. Puedes, por ejemplo, seguir un modelo como:

  • En cada clase, incluir una breve descripción, su autor y fecha de última modificación
  • Por cada método, una descripción de su objeto y funcionalidades, así como de los parámetros y resultados obtenidos

En realidad, lo importante es ceñirse a unas normas (comúnmente aceptadas si se trata de trabajo en equipo) y aplicarlas siempre. Las reglas concretas pueden ser elegidas a la conveniencia de cada cual.

Obviamente, una solución bastante aceptable e incluso aconsejable es utilizar las convenciones y herramientas (como XML en C# ó Javadoc para el mundo Java) que ayudan y facilitan esta tarea.

2. Usa párrafos comentados

Como complemento al punto anterior, es recomendable dividir un bloque de código extenso en “párrafos” que realicen una tarea simple, e introducir un comentario al principio de forma que se guíe al lector, precediéndolos, además, de una línea en blanco que ayude a separar cada uno del anterior.

  ...

  // Comprobamos si todos los datos
  // son correctos
  foreach (Record record in records)
  {
     if (rec.checkStatus()==Status.OK)
     {
        ...
     }
  }

  // Ahora pasamos a realizar las
  // transacciones
  Context ctx = new ApplicationContext();
  ctx.BeginTransaction();
  ...

3. Tabula por igual los comentarios de líneas consecutivas

Si tenemos un bloque de líneas de código donde existe por cada una de ellas un comentario, es buena costumbre tabularlos todos a la misma posición, de forma que quedarán alineados y serán más sencillos de leer, sobre todo si forman parte de la misma frase.

  const MAX_ITEMS = 10; // Número máximo de paquetes
  const MASK = 0x1F;    // Máscara de bits TCP

Ojo a las tabulaciones. Hay editores que usan el carácter ASCII (9) y otros, en cambio, lo sustituyen por un número determinado de espacios, que suelen variar según las preferencias personales del desarrollador. Lo mejor es usar espacios simples o asegurarse de que esto es lo que hace el IDE correspondiente.

4. No insultes la inteligencia del lector

Debemos evitar comentarios absurdos como:

   if (a == 5)     // Si a vale cinco, ...
      counter = 0; // ... ponemos el contador a cero
   ...

Este exceso necesita mucho tiempo a la hora de su creación, lo necesitará para su mantenimiento y, además, la mayoría de las veces distraerá al lector con detalles que no es necesario conocer o que pueden ser deducidos echando un vistazo al código.

5. Sé correcto

Evita comentarios del tipo “ahora compruebo que el estúpido usuario no haya introducido un número negativo”, o “este parche corrije el efecto colateral producido por la patética implementación del inepto desarrollador inicial”.

El uso de este tipo de comentarios no dice nada a favor de su creador, y, además, nunca se sabe quién los va a leer en el futuro. Emarts, en “Sapos, culebras y código fuente” muestra ejemplos de comentarios de este tipo.

Otro tema relacionado y, a mi entender, igualmente importante: cuida la ortografía. El hecho de que los comentarios no se vean desde el exterior no implican que puedas descuidarlos. Una ortografía correcta mejora la calidad de la expresión escrita y, por tanto, de la comunicación, que es de lo que se trata.

6. No pierdas el tiempo

No comentes si no es necesario, no escribas nada más queContinúa leyendo