Blog personal de Sergio Madrigal donde encontrar textos sobre ciencia y tecnología, psicología, cine y literatura y quizá alguna cosita más.

Categoría: programación (página 1 de 1)

Estructura básica de un documento web.

El primer paso a la hora de comenzar a diseñar una página web es centrarnos en su estructura.

Todos los documentos  HTML (HyperText Markup Language) están compuestos por 3 etiquetas fundamentales:

  • html
  • head
  • body

La primera etiqueta, html, define lo que comprende el documento web, es el inicio del mismo. Éste, a su vez, se divide en dos partes diferenciadas: head y body.

En la sección head es donde colocaremos aquellos elementos que no están relacionados directamente con el contenido del documento. Es decir, hojas de estilo, scripts, códigos especiales, etc. Dentro de ella colocaremos la etiqueta title que definirá el título de nuestro documento web.

En la sección body es donde propiamente desarrollaremos el contenido de nuestra web y es lo único que se va a mostrar en el navegador.

Aquí os muestro un pequeño ejemplo de cómo debería ser la estructura básica

[cce lang=’html4strict’ ]

<!DOCTYPE html>

<html>
<head>
<title>Title of the document</title>
</head>

<body>

Body of the document.

</body>

</html>

[/cce]

Comenzando con LaTeX – Breve tutorial.

Desde mis tiempos universitarios he sentido cierto interés sobre LaTeX.

LaTeX es un sistema de composición de textos, orientado especialmente a la creación de libros, documentos científicos y técnicos que contengan fórmulas matemáticas. [ es.wikipedia.org ]

La diferencia fundamental con un procesador de textos convencional, como por ejemplo Microsoft Word™ es que si bien éste es un editor WYSIWYG, aquello que ves es aquello que obtienes, LaTeX se fundamenta en un archivo de código de marcas. Algo parecido a HTML.

Ventajas

Es independiente del sistema operativo. Lo cual nos permite llevar nuestros archivos LaTex (.tex) a cualquier entorno y crear los archivos que queramos con independencia de la arquitectura que empleemos.

Es un estándar de facto en el mundo científico. La mayoría de papers, documentos teóricos, prácticas, hasta incluso exámenes, están hechos con este sistema.

Desventajas

Es un lenguaje de marcas lo que inexorablemente implica enfrentarse con una hoja en blanco en la que lo que escribimos y lo que pretendemos obtener no tienen una relación directa. En resumidas cuentas, la curva de aprendizaje es diferente que la de editores convencionales.

Comenzando con LaTeX

Para empezar con LaTex necesitaremos dos sencillos programas gratuitos

– TeXWorks [ http://www.tug.org/texwork ]

– MiKTeX  [ http://miktex.org/2.9/setup ]

Una vez instalados iniciaremos el software TeXWorks que automáticamente nos detectará el software de impresión LaTeX MiKTeX.

Para empezar podemos crear un pequeño y sencillo documento con este código ejemplo que os facilito:

[cc lang=’latex’]

\documentclass[11pt,a4paper]{article}

\usepackage[utf8]{inputenc}

\usepackage[spanish]{babel}

\usepackage{graphicx}

\begin{document}

\title{Ejemplo Documento}

\author{Sergio Madrigal Muelas}

\maketitle

\section{Seccion Ejemplo}

Esta es una sección de ejemplo

\end{document}

[/cc]

Una vez lo tengáis bastará con guardarlo y compilarlo (Ctrl + T) para ver el resultado en formato PDF.

Si tenéis cualquier consulta no dudéis en usar los comentarios.

Creando un panel deslizante con jQuery

jQuery es realmente una herramienta potente que nos permite extender la funcionalidad del navegador para mejorar la experiencia del usuario de forma notable.

Uno de estos días dedicaré un análisis algo más extenso sobre la idoneidad de trabajar con jQuery + PHP y de qué ventajas reales nos ofrece.

Lo que hoy nos ocupa es un pequeño tutorial de cómo realizar de forma rápida y sencilla un vistoso panel deslizante que nos permita «mostrar» y «esconder» información a partir de una pestaña que aparezca en la parte superior de nuestra web.

En los siguientes fragmentos os muestro el código asociado a los 3 archivos que necesitáis tener:

[cc lang=’css’ ]#panel{
margin-top: 600px;
width: 100%;
height: 0px;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
}[/cc]

[cc lang=’html4strict’ ]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

[/cc]

[cc lang=’javascript’ ]
$(document).ready(function() {
$(«div#panel»).height(0);
$(«div.panel_button»).click(function(){
$(«div#panel»).animate({
height: «200px»
});
$(«div.panel_button»).toggle();
});
$(«div#hide_button»).click(function(){
$(«div#panel»).animate({
height: «0px»}, «fast»);
});
});
[/cc]

Si observamos el funcionamiento es realmente sencillo. Por un lado disponemos de una definición CSS para un elemento div de las dimensiones que queremos que sea nuestro panel con la propiedad «overflow:hidden».

Gracias a esto y al height inicial de 0px, el panel no se mostrará inicialmente, mientras que el botón, que bien puede ser una pestaña en PNG, sí que aparecerá (su versión ON).

El archivo javascript es el que, obviamente, gestiona la funcionalidad, y lo hace mediante dos conceptos:

Cuando detecta un evento «click» sobre la pestaña (que no es más que una imagen) desencadena el funcionamiento: cambia los parámetros de height del panel de forma progresiva (dando la sensación de que el panel se desliza) y cambia la imagen de la pestaña a su versión OFF.

Sencillo, limpio y rápido.

Y ya sabéis, dudas o lo que necesitéis, en los comentarios.

 

Consejos programación PHP

Ha llegado el momento de sumergirme de lleno en la programación orientada a objetos haciendo uso de PHP, es por ello, que resulta interesante, antes de comenzar a programar, tener en cuenta una serie de premisas básicas:

7 sencillas normas a la hora de programar en PHP/POO:

  • Una clase: un archivo php. Nunca escribir en un mismo documento php más de una clase. Fuera del contenido de la clase no escribiremos ningún procedimiento/método/función o parte de código.
  • Guardar cada archivo con un nombre que lo identifique claramente. Una buena forma de seguir un orden es emplear el propio nombre de la clase precedido de un prefijo que identifique el tipo de archivo. Por ejemplo, para la clase «BaseDeDatos» podríamos guardarla como class.basededatos.php.
  • Emplear siempre minúsculas para los archivos. Esto generará menos confusión a la hora de gestionarlos.
  • Hacer lo mismo para el caso de interfaces: interface.basededatos.pho o para las clases abstractas/finales: abstract.basededatos.php, final.basededatos.php.
  • Utilizar la nomenclatura «Camel» para las clases, esto es, diferenciar las palabras empleando mayúsculas. Un ejemplo es la clase anterior: BaseDeDatos.
  • Para el caso de las variables empleamos la misma nomenclatura.
  • Para el caso de los métodos, la primera palabra comenzarla con minúscula: setType().

Definiendo este tipo de normas tendrás un proyecto desde el comienzo unificado de forma que conforme vaya creciendo en contenido no te encuentres ante una montaña de archivos sin sentido.

Eliminar campos NULL con MySQL/PHP

Hace unos cuantos días tuve que supervisar la migración de una serie de bases de datos antiguas almacenadas en formato CSV a un nuevo sistema basado en MySQL.

Uno de los problemas que aparecieron durante el proceso de migración fue el de que los campos vacíos eran rellenados, en el caso de que éstos fueran de tipo texto, con el valor NULL.

El siguiente script realiza un repaso rápido de la base de datos buscando en el campo que se le indique los valores NULL y los sustituye por un espacio en blanco.

";
echo "";
echo "";
echo "";

}else{

$campo = $_POST["CAMPO"];

// Fase I: Establecimiento de la conexión. 
$link=mysql_connect("localhost","root","")or die(mysql_error());
$db = mysql_select_db("contactos",$link) or die(mysql_error());
echo "

Conexión a base de datos realizada con éxito.

"; // Fase II: Seleccion de base de datos y bucle de reemplazo: $sql = "update contacto set ".$campo." = \"\" where ".$campo." = \"NULL\""; // Ejecutamos la consulta $query = mysql_query($sql); // Comprobamos el resultado $error = mysql_error(); if( $error )echo 'Hubo un error en la consulta' ; else { $filas = mysql_affected_rows (); echo 'Filas afectadas: ' . $filas ; } } ?>

Nota: Es importante que en este caso, se busca el valor de texto NULL y no el carácter especial NULL. Si lo que buscamos es reemplazar este segundo, bastará con modificar la línea SQL de la siguiente forma:

$sql = "update contacto set ".$campo." = \"\" where ".$campo is null;