Repositorio Institucional de Documentos

Clásicos de la Electricidad ~ Creación de un portal web divulgativo sobre la electricidad y su historia Por David López Aznar Proyecto final de carrera dirigido por Don Jesús Letosa Fleta Universidad de Zaragoza Escuela Universitaria de Ingeniería Técnica Industrial de Zaragoza Departamento de Ingeniería Eléctrica qQqQqQqQqQqQ Deseo AGRADECER, la Ayuda, Cariño y Comprensión Recibidos durante los últimos años por Toda Mi Gente. QqQqQqQqQqQq David López Aznar David López Aznar Clásicos de la Electricidad Índice V Índice PRÓLOGO XIII CAPÍTULO I. XHTML –PRESENTANDO LA INFORMACIÓN–1 1. Introducción................................................................. 1 1.1. ¿Qué es HTML?...................................................... 1 1.2. Nacimiento......................................................... 2 1.3. Arquitectura Cliente-Servidor.......................................... 2 1.4. Posibilidades........................................................ 3 1.5. Navegadores........................................................ 4 1.6. Editores............................................................ 4 1.7. XHTML versus HTML................................................ 5 2. Estructura de un documento XHTML............................................ 5 2.1. Definición del Tipo de Documento (DTD). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 2.2. Cabecera........................................................... 7 2.3. Cuerpo............................................................. 7 2.4. Ejemplo de estructura de un documento.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 3. Etiquetas de la cabecera....................................................... 8 3.1. Title............................................................... 8 3.2. Style............................................................... 8 3.3. Link............................................................... 8 3.4. Script.............................................................. 9 3.5. Meta............................................................... 9 4. Etiquetas del cuerpo......................................................... 1 0 4.1. Comentarios....................................................... 1 0 4.2. Estructuración de textos. ............................................ 1 0 4.3. Imágenes.......................................................... 1 2 4.4. Enlaces. .......................................................... 1 2 4.5. Listas............................................................. 1 5 4.6. Tablas. ........................................................... 1 9 4.7. Agrupación de elementos............................................. 2 6 4.8. Estilos predefinidos.................................................. 2 6 5. Conclusiones. .............................................................. 2 9 David López Aznar Clásicos de la Electricidad Índice VI CAPÍTULO II. CSS –HAZLO CON ESTILO–31 1. Introducción................................................................ 3 1 1.1. ¿Qué es CSS?....................................................... 3 1 1.2. Posibilidades de CSS................................................. 3 2 1.3. ¿Dónde introducir CSS?.............................................. 3 2 2. Diseño del portal............................................................ 3 6 2.1. Definición de zonas.................................................. 3 6 2.2. Redefinición de etiquetas HTML....................................... 4 1 2.3. Creación de estilos propios............................................ 4 1 3. Estilos..................................................................... 4 2 3.1. Textos. ........................................................... 4 2 3.2. Enlaces y puntero del ratón........................................... 4 3 3.3. Listas............................................................. 4 3 3.4. Tablas. ........................................................... 4 4 4. Ejemplos de hojas de estilo.................................................... 4 4 CAPÍTULO III. JAVASCRIPT –DINAMISMO EN LA WEB–47 1. Introducción................................................................ 4 7 1.1. ¿Qué es JavaScript?. ................................................ 4 8 1.2. Posibilidades de JavaScript........................................... 4 8 1.3. ¿Dónde introducir JavaScript?......................................... 4 8 2. Elementos del lenguaje....................................................... 4 9 2.1. Comentarios....................................................... 4 9 2.2. Sentencias......................................................... 4 9 2.3. Declaración de variables.............................................. 4 9 2.4. Operadores. ....................................................... 4 9 2.5. Sentencias condicionales. ............................................ 5 1 2.6. Bucles. ........................................................... 5 4 2.7. Funciones. ........................................................ 5 5 2.8. Eventos........................................................... 5 6 3. Ejemplos de código. ......................................................... 5 7 3.1. Fecha (1 archivo).................................................... 5 7 3.2. Fecha (2 archivos)................................................... 5 9 CAPÍTULO IV. PHP –DINAMISMO Y VERSATILIDAD EN LA WEB–63 1. Introducción................................................................ 6 3 1.1. ¿Qué es PHP?...................................................... 6 3 David López Aznar Clásicos de la Electricidad Índice VII 1.2. Posibilidades de PHP................................................ 6 3 1.3. ¿Dónde introducir PHP?.............................................. 6 4 1.4. ¿Funciona PHP en nuestro servidor?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 4 2. Elementos del lenguaje....................................................... 6 5 2.1. Comentarios....................................................... 6 5 2.2. Sentencias......................................................... 6 5 2.3. Declaración de variables.............................................. 6 5 2.4. Operadores. ....................................................... 6 5 2.5. Sentencias condicionales. ............................................ 6 6 2.6. Bucles. ........................................................... 6 6 3. Ejemplos de código. ......................................................... 6 7 3.1. ¿Qué hora es? (1 archivo)............................................. 6 7 3.2. Plantilla (Varios archivos)............................................ 6 7 CAPÍTULO V. RSS –LAS NOVEDADES PUBLICADAS EN INTERNET–69 1. Introducción................................................................ 6 9 1.1. ¿Qué es RSS?....................................................... 7 0 1.2. ¿Dónde puedo encontrar orígenes de datos RSS?. . . . . . . . . . . . . . . . . . . . . . . . . . 7 0 1.3. Suscribirse a una fuente RSS.......................................... 7 0 2. Creación de orígenes de datos RSS 2.0........................................... 7 1 2.1. Introducción....................................................... 7 1 2.2. Ejemplo de origen de datos RSS 2.0..................................... 7 2 2.3. Estructura del código de ejemplo....................................... 7 5 2.4. Etiquetas obligatorias de channel...................................... 7 6 2.5. Etiquetas opcionales interesantes de channel.. . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 7 2.6. Etiquetas de item................................................... 7 7 CAPÍTULO VI. TRATAMIENTO DE IMAGEN –CON SOFTWARE LIBRE–79 1. Introducción................................................................ 7 9 1.1. Necesidades más habituales al trabajar con imágenes. . . . . . . . . . . . . . . . . . . . . . 7 9 2. GIMP..................................................................... 8 0 CAPÍTULO VII. EDICIÓN DE VÍDEO –CON PINNACLE STUDIO–81 1. Introducción................................................................ 8 1 2. Edición de vídeo con Pinnacle Studio............................................ 8 1 2.1. Introducción....................................................... 8 1 2.2. Edición de vídeo. ................................................... 8 2 David López Aznar Clásicos de la Electricidad Índice VIII 3. Conclusiones. .............................................................. 8 4 CAPÍTULO VIII. EXPERIMENTOS ELECTROMAGNÉTICOS –WEB–85 1. Introducción................................................................ 8 5 2. Experimentos............................................................... 8 7 2.1. Plantilla........................................................... 8 7 2.2. Clasificación PIRA. ................................................. 8 7 3. Web de los experimentos...................................................... 8 8 4. Conclusiones. .............................................................. 9 5 CAPÍTULO IX. CLÁSICOS DE LA ELECTRICIDAD –WEB CON PHP– 97 1. Introducción................................................................ 9 7 1.1. El nombre del dominio............................................... 9 8 1.2. Registro de dominios................................................. 9 9 1.3. Alojamiento web................................................... 100 1.4. Primer alojamiento de clasicosdelaelectricidad.info. . . . . . . . . . . . . . . . . . . . . . . 101 2. Diseño y evolución de Clásicos de la Electricidad. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 3. Plantilla básica creada con PHP............................................... 107 4. Las secciones del portal...................................................... 110 4.1. Inicio............................................................ 110 4.2. Bitácora.......................................................... 110 4.3. Prensa........................................................... 110 4.4. Enlaces. ......................................................... 111 4.5. Documentos....................................................... 111 4.6. Biografías. ....................................................... 111 4.7. Bibliografía....................................................... 111 4.8. Normativa........................................................ 112 4.9. Multimedia....................................................... 114 4.10. Cursos.......................................................... 115 4.11. Autor........................................................... 115 5. Mirando al futuro de un portal con vistas al pasado. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 5.1. Parcela Técnica.................................................... 116 5.2. Parcela Histórica................................................... 116 6. Proyecto personal.......................................................... 117 CAPÍTULO X. LA BÚSQUEDA DE LA EXCELENCIA EN LA CREACIÓN DE PÁGINAS WEB 125 1. Introducción............................................................... 125 David López Aznar Clásicos de la Electricidad Índice IX 2. Los estándares de internet integrados en clásicos.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 2.1. W3C Validator para HTML.......................................... 126 2.2. W3C Validator para CSS. ........................................... 128 2.3. W3C Validator para feeds RSS........................................ 128 3. Clásicos y los buscadores..................................................... 128 3.1. Integrar las búsquedas en nuestro portal. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128 3.2. Darse de alta en los principales buscadores. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129 3.3. Mejorando nuestra presencia en internet (sitemaps). . . . . . . . . . . . . . . . . . . . . . 129 4. Herramientas para webmasters............................................... 130 5. Posibles mejoras (la búsqueda continúa)........................................ 131 5.1. Accesibilidad...................................................... 131 CAPÍTULO XI. THE ART OF THE LECTURE –EXPERIENCIA DOCENTE– 133 1. Introducción............................................................... 133 2. Temas a tener en cuenta para preparar una charla. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 3. Ejemplos prácticos de preparación de una charla. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 3.1. El siglo de oro de la electricidad (15 de Febrero de 2008).. . . . . . . . . . . . . . . . . . 138 3.2. Los guardianes del conocimiento (8 de Mayo de 2010).. . . . . . . . . . . . . . . . . . . . 141 4. Conclusiones. ............................................................. 145 CONCLUSIONES FINALES 147 ANEXO A: CARACTERES HTML 151 Caracteres ISO 8859-1 (Latin-1)................................................. 151 Caracteres matemáticos, griegos y simbólicos HTML.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155 Puntuación general.................................................... 155 Símbolos tipo carta. ................................................... 155 Latin Extended-B...................................................... 155 Flechas.............................................................. 156 Símbolos técnicos...................................................... 156 Operadores matemáticos................................................ 157 Símbolos varios. ...................................................... 158 Griego............................................................... 159 Formas geométricas.................................................... 161 Caracteres especiales HTML. .................................................. 161 Caracteres de control................................................... 161 Latin Extended-A...................................................... 161 David López Aznar Clásicos de la Electricidad Prólogo XVI Sólo me queda desearos que disfrutéis de Clásicos de la electricidad tanto como yo preparándolo. No dudéis en visitar el portal http://www.clasicosdelaelectricidad.info, y sobre todo no dudéis en poneros en contacto conmigo para cualquier consulta o sugerencia a través de [email protected]. David López Aznar. David López Aznar Clásicos de la Electricidad Capítulo I. XHTML 1 Cita 1304, pág 179 de opción 23 citada en bibliografía. 7 Pág. 13 de opción 1 citada en bibliografía. 8 Capítulo I. XHTML –Presentando la información– bB «Se ha dicho que hace falta poseer muchas lenguas para poder pensar conscientemente en la propia. No hay nada más exacto. Cada idioma es una visión del mundo. » 7 Hermann Alexander von Keyserling (1880-1946). Filósofo alemán. «Cada nueva forma de codificar información o lenguaje que descubro me aporta una nueva ilusión por aprenderlo.» David López Aznar. 1 de Abril de 2010. Bb 1. Introducción Gran parte de lo que sé de HTML y XHTML lo aprendí en Qualitas Management, empresa a la que estoy muy agradecido por el año y medio que compartimos. El perfeccionamiento de las técnicas que allí aprendí me lo han proporcionado los libros que he ido leyendo en este tiempo y la experiencia del trabajo diario. 1.1. ¿Qué es HTML? HTML es el acrónimo de (HyperText Markup Language). Es un lenguaje de 8 etiquetas que permite representar información por pantalla a través de Internet. Estas etiquetas suelen aparecer de dos en dos, una de apertura y otra de cierre. Las etiquetas están formadas por una palabra reservada que se repite tanto en las de apertura como en las de cierre, así como de los signos <apertura> y </cierre>. David López Aznar Clásicos de la Electricidad Capítulo I. XHTML 2 Pág. 126 de opción 35 citada en bibliografía. 9 Artículo sobre Robert Cailliau de opción 38 citada en bibliografía, y consultada en línea el 1 de 10 Abril de 2010. Pág. 50 de opción 26 citada en bibliografía. 11 1.2. Nacimiento Lenguaje creado en el CERN en 1989 por Tim Berners-Lee y Robert Cailliau, veáse 9 fotografía de la figura 3. La idea de Tim de aprovechar el hipertexto para compartir información, no triunfó entre los investigadores del CERN, con la ayuda de Robert que se interesó por ella y la renovó, consiguieron el apoyo y visto bueno del resto de investigadores . 10 1.3. Arquitectura Cliente-Servidor La arquitectura cliente-servidor es una de las más utilizadas en informática. Consiste en que los clientes se encargan de realizar las peticiones necesarias al servidor y el servidor devuelve la respuesta a la petición de cada cliente. A continuación se detallan todos y cada uno de los pasos : 11 ì Petición de página web por parte del cliente, que desconoce la IP del servidor web y contacta con el router. í El router contacta con el servidor DNS, trasladandole la petición del cliente. î El servidor DNS devuelve la IP del servidor web al router. ï El router devuelve la respuesta del servidor DNS al cliente. ð Ahora el cliente ya conoce la IP del servidor web, por lo que puede hacer la petición adecuada. ñ El router traslada la petición del cliente al servidor web. ò El servidor web genera la respuesta a la petición del cliente y la devuelve al router. ó El router devuelve la respuesta al cliente que inició la comunicación. Figura 3. Tim Berners-Lee (izquierda) y Robert Cailliau (derecha). David López Aznar Clásicos de la Electricidad Capítulo I. XHTML 3 La comunicación en la arquitectura cliente-servidor siempre debe ser iniciada por los clientes, y nunca por los servidores que sólo deben contestar cuando se les realiza una petición. Habitualmente los usuarios no son conscientes de los 6 pasos intermedios de la figura 4, ya que ellos tan sólo escriben una url en la barra de direcciones del navegador y pulsan Enter a la espera de que aparezca al instante la página web en sus pantallas. Esto es así porque los sistemas se encargan de hacer todos esos pasos de forma automática y transparente para el usuario. 1.4. Posibilidades El punto fuerte de HTML desde su creación fue la posibilidad de enlazar con otros documentos y páginas web, es decir el hipertexto. HTML no es un lenguaje de programación, por tanto no permite realizar ninguna tarea salvo aquélla para la que fue creado, mostrar información por pantalla. Con el tiempo las limitaciones de HTML se fueron subsanando rápidamente, apareciendo las tablas, Javascript, las hojas de estilo y otras mejoras visuales como la posibilidad de utilizar imágenes con transparencia. Todo ello permitió que incluso personas ajenas a la informática como los publicistas se interesaran por HTML. El hecho anterior puede parecer que limita mucho el uso de las páginas web, pero queda solucionado con los lenguajes de servidor cómo PHP, .NET o JSP que se encargan de realizar las operaciones que sean necesarias y devolver al navegador de los clientes código HTML. Además el acceso a bases de datos relacionales permite crear aplicaciones profesionales. Figura 4. Arquitectura Cliente-Servidor. David López Aznar Clásicos de la Electricidad Capítulo I. XHTML 4 12http://www.adobe.com/es/products/flashplayer/ 13http://www.adobe.com/es/products/reader/ 14http://www.java.com/es/download/index.jsp Pág. 259 de opción citada 35 en bibliografía. 15 16http://www.opera.com/ 17http://www.apple.com/es/safari/ 18http://www.mozilla-europe.org/es/firefox/ 19http://www.google.es/chrome 20http://www.w3.org/Amaya/ El hecho de que HTML sea un estándar a nivel mundial y de que se pueda visualizar con cualquier navegador, sistema operativo, o dispositivo conectado en red sin necesidad de instalar software adicional, lo ha terminado convirtiendo en una buena opción para algunas aplicaciones informáticas. Si bien, he dicho que no era necesario software adicional, esto no es del todo cierto, puesto que algunas páginas pueden requerir que tengamos instalado Flash player , Acrobat reader , la máquina 12 13 virtual de Java , o algunos codecs extras para poder ver los vídeos. 14 1.5. Navegadores HTML es un estándar del W3C Consortyum. El W3C Consortyum es un consorcio 15 fundado en 1994 por Tim Berners-Lee para desarrollar los estándares de la web. De las siglas anteriores W3, viene de World Wide Web, dónde el 3 nos evita tener que escribir tres W seguidas. El hecho de que HTML sea un estándar debería ser más que suficiente para garantizar que cualquier página web debería de verse igual de bien en cualquier navegador y en cualquier sistema operativo. Sin embargo, esto no siempre es así. Por ello cuando desarrollemos páginas web, deberemos cumplir el estándar intentando conseguir con ello que nuestra aplicación se vea dignamente en la mayor parte de los navegadores. Los principales navegadores en la actualidad son Opera , Safari , Mozilla 16 17 Firefox e Internet Explorer. Como desarrolladores deberemos comprobar que 18 nuestras páginas se ven dignamente en ellos, ya que cubrimos gran variedad de público y sistemas operativos. Otros navegadores que podemos probar son Epiphany y Konqueror para Linux, Google Chrome , y Amaya que es un navegador y editor 19 20 propuesto por el W3C. 1.6. Editores David López Aznar Clásicos de la Electricidad Capítulo I. XHTML 5 21http://notepad-plus.sourceforge.net/ 22http://www.htmlkit.com/ 23http://kompozer.net/ 24http://www.adobe.com/es/products/dreamweaver/ 25http://netbeans.org/ Págs. 525-528 de opción 6 citada en bibliografía. 26 Para la creación de páginas web tan sólo es necesario un editor de textos. Para esta misión nos sirven los que vienen con el sistema operativo ya sea el bloc de notas de Windows , edit del DOS o vi de los sistemas GNU/Linux. ® Si bien con todos los editores anteriores podemos crear páginas web, hay que reconocer que son entornos poco amigables. Por ello una pequeña ayuda gráfica del tipo usar varios colores para cada parte del código nunca viene mal. En este aspecto podemos conseguir algunos editores más sofisticados de forma gratuita como pueden ser Notepad++ , HTML-Kit o Kompozer . También hay otras soluciones 21 22 23 profesionales de pago como Dreamweaver . Yo personalmente me decanto por 24 Netbeans que es una solución profesional y gratuita, que permite trabajar 25 cómodamente con HTML, CSS, Javascript, PHP... 1.7. XHTML versus HTML Hasta ahora he hablado de HTML, sin embargo el título del capítulo es XHTML , 26 todo tiene su explicación. XHTML es el acrónimo de eXtensible HyperText Markup Language, si te fijas básicamente cambia la primera palabra. XHTML es el estándar que ha sustituido y sustituirá a HTML. La escritura del código es mucho más estricta y ordenada porque estamos trabajando con documentos XML, que se caracterizan por estar bien construidos. Las etiquetas que podemos utilizar son básicamente las mismas que con HTML siempre y cuando cumplamos una serie de reglas básicas como son: #La escritura en minúsculas de todas las etiquetas y atributos, porque XML diferencia entre mayúsculas y minúsculas. #Cerrar todas las parejas de etiquetas. Y aquéllas etiquetas que no tienen pareja se cierran añadiendo un espacio y una barra inclinada, tal y como se ve en el ejemplo siguiente <etiqueta sola />. #Anidar correctamente las etiquetas. Para esta misión nos puede ayudar el dejar las correspondientes sangrías con la tecla tab . 2. Estructura de un documento XHTML David López Aznar Clásicos de la Electricidad Capítulo I. XHTML 6 27http://www.w3.org/QA/2002/04/valid-dtd-list.html Lenguaje de marcado matemático (Mathematical Markup Language) basado en XML. Permite 28 introducir ecuaciones complejas en HTML, por desgracia los navegadores todavía no dan demasiado buen soporte a esta tecnología. Permite utilizar gráficos vectoriales (Scalable Vector Graphics) y esta basado en XML. 29 2.1. Definición del Tipo de Documento (DTD) La definición del tipo de documento se coloca en la primera línea de código de un archivo HTML. En ella especificamos la versión del estándar W3C a utilizar. Para cada número de versión suelen existir las opciones Strict y Transitional. La primera de ellas es la más exigente ya que significa que no se pueden utilizar elementos obsoletos. La versión de transición es una opción interesante durante los primeros años de implementación de un estándar. Actualmente los navegadores se adapten a las versiones estrictas razonablemente bien. La primera línea de nuestros documentos de ahora en adelante debe de ser alguna de las siguientes o de las que podamos encontrar recomendadas por el W3C . 27 Personalmente me decanto por XHTML 1.0 Strict. HTML 4.01 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> XHTML + MathML + SVG 28 29 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> XHTML 1.1 David López Aznar Clásicos de la Electricidad Capítulo I. XHTML 7 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 2.2. Cabecera El contenido de la cabecera no se muestra por pantalla, a excepción del título, tal y como veremos más adelante. La cabecera contiene esencialmente información sobre el documento. En el punto 3 se tratarán las principales etiquetas que suelen formar parte de ella. Las etiquetas que delimitan esta zona son las siguientes: <head> <!-- Etiquetas de la cabecera --> </head> 2.3. Cuerpo El contenido del cuerpo son los elementos que se mostrarán en la pantalla del cliente. Más adelante en el punto 4 se tratarán las principales etiquetas que pueden formar parte del cuerpo. Las etiquetas que delimitan esta zona son las siguientes: <body> <!-- Etiquetas del cuerpo del documento --> </body> 2.4. Ejemplo de estructura de un documento El siguiente es un ejemplo de código de un documento XHTML mínimo, hay algunas etiquetas como meta y title que las veremos más adelante. Fijarse en el hecho de que después del DTD el resto de etiquetas están encerradas entre las etiquetas html. De ahora en adelante la ñ, la tilde, la diéresis y otros símbolos especiales se verán precedidos del símbolo &, puede encontrase más información en el Anexo A. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- Etiquetas de la cabecera --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Título del documento</title> </head> <body> <!-- Etiquetas del cuerpo del documento --> </body> </html> David López Aznar Clásicos de la Electricidad Capítulo I. XHTML 8 3. Etiquetas de la cabecera 3.1. Title Es una etiqueta obligatoria y su función es la de definir el título del documento. Es un elemento que se muestra en la barra superior de los navegadores. Un ejemplo de como utilizarla y el resultado es el siguiente: <head> <title> Experimentos de electricidad y magnetismo. </title> </head> 3.2. Style Permite trabajar con estilos en la cabecera del documento directamente. Si bien es más recomendable definir todo lo referente a los estilos en otros archivos diferentes del tipo hojas de estilo CSS como veremos más adelante. <head> <style type="text/css"> h1 { color: red; } </style> </head> 3.3. Link Este elemento sirve para definir un vínculo y puede ser utilizado cualquier número de veces. Su uso más habitual es para enlazar hojas de estilo CSS ubicadas en archivos externos como ya adelantamos en el punto anterior. <head> <link rel="stylesheet" href="../css/divs.css" /> <link rel="stylesheet" href="../css/standard.css" /> <link rel="stylesheet" href="../css/estilos.css" /> </head> Figura 5. Resultado de utilizar la etiqueta title. David López Aznar Clásicos de la Electricidad Capítulo I. XHTML 9 Otra posibilidad es la de enlazar con el favicon de la página. Un favicon es un icono o logotipo que aparece en algunos navegadores en la barra de direcciones. A continuación un ejemplo de como utilizarlo y el resultado. <head> <link rel="shortcut icon" href="../imgs/favicon.ico" /> </head> 3.4. Script Este elemento permite introducir código JavaScript que es un lenguaje de script que se ejecuta desde el navegador del cliente. Este elemento puede utilizarse tanto en la cabecera como en el cuerpo del documento, aunque suele ser más habitual que aparezca en la cabecera. <head> <script language="javascript" type="text/javascript"> </script> </head> 3.5. Meta Suele utilizarse para identificar al documento de forma más sencilla por parte de los buscadores. Las palabras clave keywords y la descripción description suelen ser los puntos importantes para los buscadores. Generator nos indica el programa utilizado para hacer el archivo, author somos nosotros, y la primera de todas las etiquetas meta nos indica el juego de caracteres a utilizar. <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="David López Aznar" /> <meta name="generator" content="Amaya, see http://www.w3.org/Amaya/" /> <meta name="keywords" content="experimentos, electricidad" /> <meta name="description" content="Sitio dedicado a la electricidad." /> </head> Figura 6. Resultado de enlazar un favicon con la etiqueta link. David López Aznar Clásicos de la Electricidad Capítulo I. XHTML 16 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Listas descriptivas. Glosarios.</title> </head> <body> <dl> <dt>Cadmio</dt> <dd> Elemento químico, metal de color blanco algo azulado, brillante y muy parecido al estaño, dúctil y maleable. </dd> <dt>Cobre</dt> <dd> Metal rojizo, maleable y dúctil, muy buen conductor del calor y la electricidad, que combinado con otros metales forma aleaciones como el bronce y el latón, y es de amplio uso industrial. </dd> <dt>Estaño</dt> <dd> Metal de color blanco plateado, más duro y brillante que el plomo, resistente a la humedad, que se utiliza para fabricar hojalata, en aleaciones como el bronce, etc. </dd> <dt>Hierro</dt> <dd> Elemento químico metálico muy abundante en la naturaleza, dúctil y tenaz, de color gris plateado, aunque normalmente se presenta negruzco por las impurezas de carbono; tiene un amplio uso industrial. </dd> </dl> </body> </html> David López Aznar Clásicos de la Electricidad Capítulo I. XHTML 17 Listas ordenadas Las listas ordenadas se construyen con dos tipos de etiquetas. Las etiquetas <ol></ol> para definir el comienzo y final de la lista. Y las etiquetas <li></li> para cada elemento de la lista. A continuación un ejemplo rico, rico y con fundamento, y el correspondiente resultado por pantalla. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Listas ordenadas.</title> </head> <body> <h1>Pasos para hacer una tortilla de patata</h1> <ol> <li>Cortar y lavar las patatas.</li> <li>Echar el aceite en la sartén.</li> <li>Echar sal en las patatas.</li> <li>Echar las patatas a la sartén.</li> <li>Romper los huevos en un bol y batirlos.</li> <li>Cuando las patatas estén hechas, echarlas al bol.</li> <li>Mezclarlas bien con el huevo.</li> <li>Volver a echar a la sartén, y dejar que se haga.</li> <li>Dar la vuelta a la tortilla.</li> </ol> </body> </html> Figura 10. Ejemplo de lista ordenada. David López Aznar Clásicos de la Electricidad Capítulo I. XHTML 18 Listas sin orden establecido Las listas sin un orden establecido se construyen con dos tipos de etiquetas. Las etiquetas <ul></ul> para definir el comienzo y final de la lista. Y las etiquetas <li></li> para cada elemento de la lista. A continuación un ejemplo de código para complementar al punto anterior y el correspondiente resultado por pantalla: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Listas sin orden establecido.</title> </head> <body> <h1>Ingredientes para hacer una tortilla de patata</h1> <ul> <li>Aceite de oliva.</li> <li>Sal.</li> <li>Patatas.</li> <li>Huevos.</li> </ul> </body> </html> Figura 11. Ejemplo de lista sin orden establecido. David López Aznar Clásicos de la Electricidad Capítulo I. XHTML 19 4.6. Tablas Las tablas son uno de los elementos más importantes de HTML. Y durante mucho tiempo han servido para estructurar las páginas web. Actualmente hay mejores métodos de estructurar las páginas, por lo que sólo deberían utilizarse las tablas en los casos en los que realmente la información deba presentarse en forma tabular. Las tablas empiezan y acaban con las etiquetas <table></table>. Con las etiquetas <tr></tr> definimos cada fila. Con las etiquetas <th></th> quedan definidas cada una de las celdas de la fila de cabecera. Con las etiquetas <td></td> quedan definidas las celdas del resto de filas. Con la etiqueta <caption></caption> podemos definir el título de la tabla. A continuación un ejemplo de código y el correspondiente resultado por pantalla: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Tablas.</title> </head> <body> <h1>Tablas</h1> <table border="1"> <caption> Gran Premio de Jérez 1999. Motociclismo 500 c.c. </caption> <tr> <th>Puesto</th> <th>Piloto</th> <th>Nacionalidad</th> <th>Marca Motocicleta</th> <th>Tiempo</th> </tr> <tr> <td>1</td> <td>Álex Crivillé</td> <td>Española</td> <td>Honda</td> <td>47 min. 38,667 s.</td> </tr> David López Aznar Clásicos de la Electricidad Capítulo I. XHTML 20 32http://www.motogp.com/es/Results+Statistics <tr> <td>2</td> <td>Max Biaggi</td> <td>Italiana</td> <td>Yamaha</td> <td>47 min. 38,824 s.</td> </tr> <tr> <td>3</td> <td>Sete Gibernau</td> <td>Española</td> <td>Honda</td> <td>47 min. 44,769 s.</td> </tr> </table> </body> </html> Los datos utilizados para este ejemplo son los reales del Gran Premio de Jérez 32 del año 1999, año en el que el Álex Crivillé se convertía en el primer y único español campeón del mundo de motociclismo de la categoría de 500 c.c. Figura 12. Ejemplo de tabla en HTML. David López Aznar Clásicos de la Electricidad Capítulo I. XHTML 21 La anterior es una tabla relativamente sencilla, pero también podemos hacer uso de la asociación de celdas de una fila o de una columna. A continuación veremos un ejemplo de un horario escolar en el que se hace uso de la unión de celdas de la misma fila haciendo uso de <td colspan="nº celdas a unir">Texto celda</td>. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Tablas.</title> </head> <body> <table border="1"> <caption> Horario escolar 4º ESO. Curso académico 1998-1999. </caption> <tr> <th>Hora</th> <th>Lunes</th> <th>Martes</th> <th>Miércoles</th> <th>Jueves</th> <th>Viernes</th> </tr> <tr> <td>08:15–09:10</td> <td>Lenguaje</td> <td>Ética</td> <td>Educación Física</td> <td>Ética</td> <td>Lenguaje</td> </tr> <tr> <td>09:10–10:05</td> <td>Cultura Clásica</td> <td>Inglés</td> <td>Física y Química</td> <td>Matemáticas</td> <td>Inglés</td> </tr> David López Aznar Clásicos de la Electricidad Capítulo I. XHTML 22 <tr> <td>10:05–11:00</td> <td>Educación Física</td> <td>Física y Química</td> <td>Religión</td> <td>Ciencias Sociales</td> <td>Religión</td> </tr> <tr> <td>11:00–11:30</td> <td colspan="5">Recreo</td> </tr> <tr> <td>11:30–12:25</td> <td>Biología y Geología</td> <td>Biología y Geología</td> <td>Ciencias Sociales</td> <td>Biología y Geología</td> <td>Física y Química</td> </tr> <tr> <td>12:25–13:20</td> <td>Matemáticas</td> <td>Iniciación Profesional</td> <td>Matemáticas</td> <td>Iniciación Profesional</td> <td>Cultura Clásica</td> </tr> <tr> <td>13:20–14:15</td> <td>Ciencias Sociales</td> <td>Lenguaje</td> <td>Inglés</td> <td>Lenguaje</td> <td>Tutoría</td> </tr> </table> </body> </html> David López Aznar Clásicos de la Electricidad Capítulo I. XHTML 23 33http://en.wikipedia.org/wiki/1991_NBA_Playoffs A continuación veremos un ejemplo de asociación de celdas de distintas filas mediante el elemento rowspan. Para ello utilizaremos los datos de las finales de la NBA del año 1991 en la que Michael Jordan obtuvo su primer anillo de campeón con 33 los Bulls de Chicago frente a Los Ángeles Lakers de Magic Johnson. Figura 13. Ejemplo de tabla con asociación de celdas de una misma fila. Figura 14. Ejemplo de tabla con asociación de celdas de distintas filas. David López Aznar Clásicos de la Electricidad Capítulo I. XHTML 24 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Tablas.</title> </head> <body> <table border="1"> <caption>1991 NBA Playoffs</caption> <tr> <th>Conferencia</th> <th>Primera ronda</th> <th>Semifinal conferencia</th> <th>Final conferencia</th> <th>Final</th> <th>Campeón</th> </tr> <tr> <td rowspan="8">Este</td> <td>Chicago</td> <td rowspan="2">Chicago</td> <td rowspan="4">Chicago</td> <td rowspan="8">Chicago</td> <td rowspan="16">Chicago</td> </tr> <tr> <td>New York</td> </tr> <tr> <td>Milwaukee</td> <td rowspan="2">Philadelphia</td> </tr> <tr> <td>Philadelphia</td> </tr> David López Aznar Clásicos de la Electricidad Capítulo I. XHTML 25 <tr> <td>Detroit</td> <td rowspan="2">Detroit</td> <td rowspan="4">Detroit</td> </tr> <tr> <td>Atlanta</td> </tr> <tr> <td>Boston</td> <td rowspan="2">Boston</td> </tr> <tr> <td>Indiana</td> </tr> <tr> <td rowspan="8">Oeste</td> <td>Portland</td> <td rowspan="2">Portland</td> <td rowspan="4">Portland</td> <td rowspan="8">L.A. Lakers</td> </tr> <tr> <td>Seattle</td> </tr> <tr> <td>Phoenix</td> <td rowspan="2">Utah</td> </tr> <tr> <td>Utah</td> </tr> <tr> <td>L.A. Lakers</td> <td rowspan="2">L.A. Lakers</td> <td rowspan="4">L.A. Lakers</td> </tr> David López Aznar Clásicos de la Electricidad Capítulo II. CSS 32 1.2. Posibilidades de CSS Las posibilidades que sumó CSS a HTML, son comparables al cambio de la televisión en blanco y negro por la televisión en color. En definitiva consiguió dar algo más de vida a las páginas web, permitiendo controlar de forma centralizada el aspecto de todo un portal sin demasiados dolores de cabeza para el encargado de realizar los cambios. De esta forma podemos lavar la cara de todo nuestro portal cada cierto tiempo sin necesidad de hacer cambios una a una, en cada una de las páginas del portal. Podemos modificar colores, tamaños, tipos de letra, distancias entre objetos, fondos, listas, tablas, cambiar aspecto del puntero del ratón y del texto al pasar por encima de un enlace... En definitiva conseguimos páginas más vistosas y mucho más dinámicas. En combinación con JavaScript (lenguaje del lado del cliente), podemos sacar todavía más partido a CSS, y conseguir aún más dinamismo. 1.3. ¿Dónde introducir CSS? En las etiquetas HTML Podemos incluir CSS en cada una de las etiquetas presentadas en el capítulo de XHTML sin más que añadir style="propiedad1: valor1; propiedad2: valor2; ...; propiedad n: valor n;" a la etiqueta. Si bien, es una práctica desaconsejada ya que tendremos los estilos repartidos por todo un documento, y el cambio en una etiqueta no supondrá un cambio importante en el resto de etiquetas del documento. Es una opción razonable para probar cosas en el momento de creación de la página, pero no en el momento de poner el portal en producción. A continuación un ejemplo de uso. Merece la pena observar cómo han crecido las etiquetas que ya conocíamos. Más adelante explicaremos para que sirven las propiedades que hemos modificado. Figura 17. Ejemplo de modificación directa de los estilos de una etiqueta. David López Aznar Clásicos de la Electricidad Capítulo II. CSS 33 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Estilos.</title> </head> <body> <h1 style="text-decoration:underline; color:navy; text-align:center;"> Estilos </h1> <p style="text-align:center; font-family:Georgia, 'Times New Roman', Times, serif; font-size:24px;"> Este es un ejemplo de lo que no se debe hacer trabajando con <strong>CSS</strong>. </p> <p style="text-align:center;"> <img src="stylesheet.png" alt="Logotipo de CSS válido" style="border-color:#990000; border-style:solid; border-width:medium; padding:10px;" /> </p> </body> </html> En la cabecera del documento HTML Una opción algo mejor que la anterior es incluir en la cabecera del documento todos los estilos que se utilizan en la página. Aunque es una opción algo más centralizada que la anterior, y con un cambio en la cabecera conseguimos aplicar los cambios a todas las etiquetas implicadas, seguimos sin poder aprovechar el código entre distintas páginas de un portal. Si que es cierto que podemos copiar y pegar el código en todas y cada una de las páginas, pero eso supone que tendremos que realizar esta operación cada vez que hagamos un cambio en un estilo. El código a incluir en la cabecera se muestra a continuación. <style type="text/css"> <!--Definiciones de los estilos --> </style> A continuación se muestra el código necesario para trabajar colocando los estilos en la cabecera del documento HTML y obtener un resultado igual al de la figura 17. La palabra reservada class veremos más adelante para que sirve y cuando emplearla. David López Aznar Clásicos de la Electricidad Capítulo II. CSS 34 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Estilos.</title> <style type="text/css"> h1 { text-decoration:underline; /*Subrayado*/ color:navy; /*Azul marino el color del texto*/ text-align:center; /*Centrado*/ } img { border-color:#990000; /*Color del borde en hexadecimal*/ border-style:solid; /*Tipo de borde continuo*/ border-width:medium; /*Grosor del borde medio*/ padding:10px; /*Espacio entre el borde y la imagen*/ } p { font-family:Georgia, "Times New Roman", Times, serif; /*Tipo de letra*/ font-size:24px; /*Tamaño de letra*/ } .centrado { text-align:center; /*Centrado de texto*/ } </style> </head> <body> <h1> Estilos </h1> <p class="centrado"> Este es un ejemplo de lo que no se debe hacer trabajando con <strong>CSS</strong>. </p> <p class="centrado"> <img src="stylesheet.png" alt="Logotipo de CSS válido" /> </p> </body> </html> David López Aznar Clásicos de la Electricidad Capítulo II. CSS 35 En un archivo externo CSS La opción más aconsejable es la de definir un archivo externo de hojas de estilos, que no es más que un archivo de texto que por convenio tiene la extensión css. De esta forma modificando ese archivo o archivos los cambios se aplican a todo el portal sin necesidad de copiar y pegar código como en los casos anteriores. Lo único que tenemos que hacer es indicar a cada documento HTML la ruta del archivo css. A continuación un ejemplo del código a incluir en la cabecera del documento. <link rel="stylesheet" href="ruta relativa del archivo" /> No suelo colocar todos los estilos en el mismo fichero, habitualmente los separo por criterios lógicos. En este caso he creado dos ficheros de hoja de estilos y los he colocado dentro del directorio \css, uno de los ficheros contiene la redefinición de las etiquetas estándar y en otro están los estilos propios que he creado. El resultado es igual al de la figura 17. 1css estilos.css standard.css index.html estilos.css .centrado { text-align:center; /*Centrado de texto*/ } standard.css h1 { text-decoration:underline; /*Subrayado*/ color:navy; /*Azul marino el color del texto*/ text-align:center; /*Centrado*/ } img { border-color:#990000; /*Color del borde en hexadecimal*/ border-style:solid; /*Tipo de borde continuo*/ border-width:medium; /*Grosor del borde medio*/ padding:10px; /*Espacio entre el borde y la imagen*/ } p { font-family:Georgia, "Times New Roman", Times, serif; /*Tipo de letra*/ font-size:24px; /*Tamaño de letra*/ } David López Aznar Clásicos de la Electricidad Capítulo II. CSS 36 index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Estilos.</title> <link rel="stylesheet" href="css/standard.css" /> <link rel="stylesheet" href="css/estilos.css" /> </head> <body> <h1> Estilos </h1> <p class="centrado"> Este es un ejemplo de lo que no se debe hacer trabajando con <strong>CSS</strong>. </p> <p class="centrado"> <img src="stylesheet.png" alt="Logotipo de CSS válido" /> </p> </body> </html> Esta forma de trabajar es la que utilizaremos siempre a partir de ahora. Es la que nos permite realizar cambios para todas nuestras páginas de una sola vez. 2. Diseño del portal 2.1. Definición de zonas La mejor forma de diseñar una página web es coger una hoja de papel y un lápiz, pensar en la forma de navegar por el portal, si va a haber una cabecera y un pie, navegación superior, navegación izquierda o derecha, y el tamaño y ubicación del área dedicada al contenido. Todo ello podemos definirlo como zonas o cajas a las que daremos un nombre, estas zonas o cajas son las que harán de andamios para nuestro portal. Los textos e imágenes de nuestras páginas aparecerán dentro de esas zonas. Como un primer esbozo puede servirnos el hacer el dibujo a ojo. Conforme queramos hilar más fino deberemos pensar en las pantallas en las que se verán nuestras páginas y su relación de aspecto. Antes era sencillo casi todas las pantallas tenían una relación de aspecto de 4/3 mientras que ahora también hay muchas con relación 16/9. David López Aznar Clásicos de la Electricidad Capítulo II. CSS 37 Además de la relación de aspecto hay que contar con la resolución de la pantalla. El problema se agrava si se piensa en que actualmente se puede navegar desde dispositivos tan distintos cómo teléfonos móviles, ordenadores miniportátiles, PDA, ordenadores de sobremesa, etc... Sin embargo se suelen seguir dando por buenos para diseñar los valores mínimos de las pantallas 4/3, estos son 800 x 600px y 1024 x 768 px. Personalmente hace tiempo que me decanto por el segundo puesto que nos permite trabajar con un área mayor sin disminuir por ello en exceso la compatibilidad. De los 1024 x 768 px, hay que descontar en horizontal el espacio para la barra de desplazamiento vertical, yo para curarme en salud suelo jugar con 990 px en horizontal. En vertical hay que descontar el alto de la barra del menú inicio, la barra de estado, barras de herramientas y barra de menús del navegador, por lo que suelo dar por bueno unos 600 px. Con este tamaño de 990 x 600 px es con el que tenemos que jugar para dar un ancho y un alto a cada una de nuestras cajas. Una vez dimensionadas las cajas debemos indicar en coordenadas cartesianas en px, con referencia la esquina superior izquierda del área de navegación el punto en el que colocar cada caja. De esta forma quedarán colocadas en su lugar y bien definidas para todo el portal. En la siguiente imagen puede observarse un diseño muy común en muchas páginas, con cabecera, contenido, pie, menu principal y menu lateral. Figura 18. Boceto inicial del portal web. David López Aznar Clásicos de la Electricidad Capítulo II. CSS 38 El código necesario para conseguir la imagen anterior es el siguiente. Aunque la elección de colores no es la más adecuada, nos sirve por el momento para delimitar adecuadamente las zonas y saber si están colocadas como nosotros queremos. 1css divs.css index.html divs.css /*Capas generales */ #cabecera { position:absolute; /*Tipo de posicionamiento*/ top:5px; /*Coordenada Y*/ left:5px; /*Coordenada X*/ width:980px; /*Anchura*/ height:60px; /*Altura*/ background-color:lime; /*Color de fondo*/ } #menuprincipal { Figura 19. Ejemplo clásico de definición de zonas en un portal web. David López Aznar Clásicos de la Electricidad Capítulo II. CSS 39 position:absolute; /*Tipo de posicionamiento*/ top:70px; /*Coordenada Y*/ left:5px; /*Coordenada X*/ width:980px; /*Anchura*/ height:30px; /*Altura*/ background-color:#FFCCFF; /*Color de fondo*/ } #menulateral { position:absolute; /*Tipo de posicionamiento*/ top:105px; /*Coordenada Y*/ left:5px; /*Coordenada X*/ width:250px; /*Anchura*/ height:450px; /*Altura*/ background-color:aqua; /*Color de fondo*/ } #contenido { position:absolute; /*Tipo de posicionamiento*/ top:105px; /*Coordenada Y*/ left:260px; /*Coordenada X*/ width:725px; /*Anchura*/ height:450px; /*Altura*/ background-color:yellow; /*Color de fondo*/ } #pie { position:absolute; /*Tipo de posicionamiento*/ top:560px; /*Coordenada Y*/ left:5px; /*Coordenada X*/ width:980px; /*Anchura*/ height:35px; /*Altura*/ background-color:silver; /*Color de fondo*/ } index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Cajas</title> <link rel="stylesheet" href="css/divs.css" /> </head> David López Aznar Clásicos de la Electricidad Capítulo II. CSS 40 <body> <div id="cabecera"> Cabecera. 980 x 60 px. Coordenadas (5,5). </div> <div id="menuprincipal"> Menu principal. 980 x 30 px. Coordenadas (5,70). </div> <div id="menulateral"> Menu Lateral. 250 x 450 px. Coordenadas (5,105). </div> <div id="contenido"> Contenido. 725 x 450 px. Coordenadas (260,105). </div> <div id="pie"> Pie. 980 x 35 px. Coordenadas (5,560). </div> </body> </html> En el archivo divs.css se ha utilizado el carácter # (almohadilla) para preceder al nombre de cada una de las capas o zonas a utilizar en las páginas de nuestro portal. Con el carácter # creamos identificadores para identificar objetos en nuestra página, estos identificadores sólo pueden utilizarse una vez por página. Por ello, luego en el archivo index.html se utiliza la etiqueta div con un id que se corresponde con uno de los identificadores creados previamente en el archivo divs.css. Una vez dentro de una zona div podemos utilizar todas las etiquetas XHTML vistas en el capítulo anterior, y escribir todo el texto que sea necesario. Si bien en las zonas en las que preveamos que el texto y las imágenes van a exceder el tamaño de las zonas delimitadas debemos añadir la siguiente línea de código que indica al navegador que añada barras de desplazamiento a la capa en la que se excede el tamaño. Esto sólo está previsto para la zonas contenido y menulateral. overflow: auto; /*Desbordamiento auto. Barras de desplazamiento si es necesario*/ Con todo esto ya tenemos la estructura de nuestra web. En los siguientes puntos buscaremos la forma de mejorar el aspecto general. David López Aznar Clásicos de la Electricidad Capítulo II. CSS 41 2.2. Redefinición de etiquetas HTML La redefinición de etiquetas HTML nos permite adaptar las etiquetas predefinidas a nuestras necesidades. De esta forma podemos conseguir que todas las tablas tengan el mismo aspecto, que todos los enlaces se comporten de la misma forma, o elegir el tamaño y tipo de letra de los párrafos. La redefinición no puede ser más sencilla, tan sólo hay que poner el nombre de la etiqueta sin almohadilla, ni punto, y encerrar entre llaves las propiedades que queremos cambiar. Se verá mejor con un ejemplo de código en el que modificamos las propiedades de la etiqueta body. body { font-family: Verdana, Arial, Helvetica, sans-serif; /*Tipo de letra*/ color: #000066; /*Color del texto*/ background-color: #99CCFF; /*Color de fondo*/ } Ya he indicado que suelo separar el código CSS en distintos archivos. La redefinición de etiquetas estándar XHTML, las suelo colocar en un archivo de nombre standard.css. 2.3. Creación de estilos propios La creación de estilos propios se hace de forma similar al punto anterior, sólo que ahora tenemos la libertad de elegir el nombre que queramos emplear, y tenemos que colocar un punto justo delante de ese nombre. Estos estilos propios los suelo incluir en un archivo de nombre estilos.css. .centrado { text-align:center; /*Centra el texto*/ } Para utilizar el estilo centrado tenemos que utilizar el atributo class de cualquier etiqueta XHTML. En este ejemplo podemos hacerlo por ejemplo con la etiqueta de párrafo: <p class="centrado"> Texto a centrar. </p> David López Aznar Clásicos de la Electricidad Capítulo III. JavaScript 48 1.1. ¿Qué es JavaScript? Esta es la primera pregunta a la que intenta responder el libro de Keogh, y que yo zanjaría diciendo que es un lenguaje de programación de script que funciona en el lado del cliente. Al tratarse de un lenguaje que se ejecuta en el navegador del cliente, y no en el servidor, tiene algunas limitaciones que zanjaremos en el próximo capítulo con PHP. 1.2. Posibilidades de JavaScript Las posibilidades de JavaScript son muchas, como por ejemplo una primera validación de formularios, ayudas gráficas, realizar acciones al producirse eventos de ratón o de otro tipo. Es común que se utilicen paletas de color, calendarios o menús emergentes desarrollados con JavaScript. Uno de los usos que más se utilizaron durante años es el de utilizar ventanas publicitarias emergentes, actualmente estas molestas ventanas son bloqueadas por los versiones más modernas de los principales navegadores. 1.3. ¿Dónde introducir JavaScript? JavaScript puede introducirse directamente en cualquier zona del body de nuestros documentos html, o dentro del head. Si lo introducimos en el body, se ejecuta siempre al cargar la página. Si lo introducimos en el head se ejecuta sólo cuando llamamos al código JavaScript desde el documento HTML. Desde mi punto de vista es preferible si trabajamos de esta manera introducir el código dentro de la cabecera. <script language="javascript" type="text/javascript"> </script> La otra opción a la hora de trabajar con JavaScript es utilizar un archivo externo en el que guardar nuestras funciones, para que estén disponibles para todas nuestras páginas. Al igual que con CSS, esta será nuestra opción favorita. Lo único que hay que hacer es guardar el archivo con extensión js. Para llamarlo desde nuestras páginas tendremos que añadir el siguiente texto en la cabecera. <script src="funciones.js" type="text/javascript"> </script> David López Aznar Clásicos de la Electricidad Capítulo III. JavaScript 49 2. Elementos del lenguaje 2.1. Comentarios Los comentarios de línea se hacen mediante dos barras //, lo que va antes de ellas en la misma línea no es comentario. Actúan desde las dos barras hasta el final de la línea por lo que son muy utilizadas para comentar el uso de variables. // Comentario de línea Los comentarios de bloque suelen utilizarse para comentar el uso de las funciones justo antes de éstas. Afectan a todo lo que haya entre /* */ aunque haya varias líneas entre medio. Si bien es costumbre utilizar la siguiente sintaxis, que es la que utilizan muchos programadores con Java. /** * Comentarios de bloque * en varias líneas */ 2.2. Sentencias Cada sentencia o instrucción debe finalizar con ; y estar en una sola línea. 2.3. Declaración de variables Los nombres de las variables pueden constar de cualquier letra, dígito o incluso subrayado, pero no pueden empezar con un dígito. Tampoco se pueden utilizar como nombre de las variables palabras clave o reservadas del lenguaje. Para declarar una variable utilizamos la palabra var delante del nombre de la variable. var miVariable; Para inicializar una variable es suficiente con añadir el signo = al final de lo anterior. var miEntero = 80; var miCadena = 'Punto de Cruz'; var miBooleano = false; 2.4. Operadores 2.4.1. OPERADORES ARITMÉTICOS El orden de las operaciones es el mismo que el que se enseña en el colegio, si bien lo mejor es utilizar paréntesis para evitar problemas en caso de duda. En cualquier caso las operaciones siguen el siguiente orden: David López Aznar Clásicos de la Electricidad Capítulo III. JavaScript 50 1. Las operaciones se deben realizar de izquierda a derecha. 2. Las operaciones entre paréntesis se realizan primero. En caso de paréntesis anidados, el paréntesis más interno tiene preferencia. 3. Las operaciones de multiplicación y división se realizan a continuación de los paréntesis. En caso de existir ambas operaciones el orden es de izquierda a derecha. 4. Las sumas y restas se realizan a continuación de las multiplicaciones y divisiones. En caso de existir ambas operaciones el orden es de izquierda a derecha. Operador Descripción + Suma - Resta * Multiplicación / División % Resto de la división ++ Incremento en 1 -- Decremento en 1 2.4.2. OPERADORES DE ASIGNACIÓN Los operadores de asignación nos permiten dar valor a las variables. Ya hemos utilizado el operador = en el punto en el que tratábamos la declaración de variables. Realmente con este operador es más que suficiente para trabajar, pero el lenguaje nos ofrece algunos operadores más que nos permiten realizar algunas operaciones de forma más eficiente. Operador Descripción = Asignación. += Suma valor y luego asigna. -= Resta valor y luego asigna. *= Multiplica valor y luego asigna. /= Divide valor y luego asigna. %= Calcula el resto de la división y luego asigna. David López Aznar Clásicos de la Electricidad Capítulo III. JavaScript 51 2.4.3. OPERADORES LÓGICOS Los operadores lógicos trabajan con valores booleanos que sólo pueden tomar los valores verdadero (true) o falso (false). Suelen utilizarse en las condiciones de bucles y sentencias condicionales. Operador Descripción && Y (AND). || O (OR). ! Negación (NOT) 2.4.4. OPERADORES DE COMPARACIÓN Los operadores de comparación están muy relacionados con los operadores lógicos y suelen utilizarse en las condiciones de bucles y sentencias condicionales. Operador Descripción == Igual a != No igual a > Mayor que < Menor que >= Mayor o igual que <= Menor o igual que 2.5. Sentencias condicionales Solemos considerar más importantes en una organización a las personas que por su puesto pueden tomar decisiones. Si el hecho de poder tomar decisiones significa poder para quien las toma, entonces las sentencias condicionales son la herramienta que nos permite ejercer ese poder en la programación. La toma de decisiones implica asumir el riesgo a equivocarse. En el caso de la programación, el mayor problema es saber delimitar bien y averiguar la condición más precisa posible para tomar una u otra decisión. Figura 20. Empleada enseña idea a su jefa para que tome una decisión. David López Aznar Clásicos de la Electricidad Capítulo III. JavaScript 52 Las sentencias condicionales permiten tomar decisiones durante la ejecución de un programa según se cumplan unas condiciones o no. Son uno de los elementos comunes a todos los lenguajes. Tan usuales son, que tan sólo sufren unas ligeras modificaciones en su sintaxis entre unos lenguajes y otros. En mi opinión, las decisiones traumáticas a tomar deberían ser siempre tomadas por personas responsables, y no por la decisión de una máquina (que se debe a la decisión previa de un programador). De lo contrario estaremos dejando que las máquinas nos gobiernen tal y como paso en Wall Street hace unas semanas. 2.5.1. IF Es la sentencia condicional más sencilla. Indica que se ejecutan unas determinadas sentencias sólo si se cumple una condición. if (condición) { //Sentencias a ejecutar si se cumple la condición } 2.5.2. IF ELSE Es la sentencia condicional completa. Con ella, y el anidamiento de sentencias con esta estructura se pueden tomar las decisiones más complejas. Indica que si se cumple una condición se ejecutan unas sentencias, y en caso de no cumplirse se ejecutan otras. if (condición) { //Sentencias a ejecutar si se cumple la condición } else { //Sentencias a ejecutar cuando no se cumple la condición } 2.5.3. IF ELSE IF Esta sentencia no siempre ha estado presente en todos los lenguajes, y puede ser sustituida por la sentencia if else anidada como veremos en el siguiente punto. Pueden colocarse tantos else if como sean necesarios, aunque no conviene que sean demasiados. if (condición1) { //Sentencias a ejecutar si se cumple la condición 1 } else if (condición2) { //Sentencias a ejecutar si no se ha cumplido la condición 1, pero se cumple la 2 } else if (condición3) { //Sentencias a ejecutar si no se cumplen ni la condición 1, ni la 2, pero sí la 3 } else { //Sentencias a ejecutar si no se cumple ninguna de las condiciones anteriores } David López Aznar Clásicos de la Electricidad Capítulo III. JavaScript 53 2.5.4. IF ELSE ANIDADOS Para conseguir lo mismo que en el ejemplo anterior nos valdría el siguiente código, en el que sólo se han utilizado las sentencias if else tradicionales. if () { //Sentencias a ejecutar si se cumple la condición 1 } else { //Sentencias a ejecutar si no se cumple la condición 1 if (condición 2) { //Sentencias a ejecutar si se cumple la condición 2 } else { //Sentencias a ejecutar si no se cumple la condición 2 if(condición 3) { //Sentencias a ejecutar si se cumple la condición 3 } else { //Sentencias a ejecutar si no se cumple la condición 3 } } } 2.5.5. SWITCH CASE Este tipo de sentencias se suelen utilizar cuando se conocen los posibles valores que puede tomar una variable, como por ejemplo en el caso de un menú de opciones. switch (valor) { case valor1: //Sentencias a ejecutar si valor=valor1 break; case valor2: //Sentencias a ejecutar si valor=valor2 break; case valorn: //Sentencias a ejecutar si valor=valorn break; default: // Sentencias a ejecutar si ninguno de los valores case coincide (opcional) } La estructura funciona de la siguiente forma: 1. El navegador compara el valor switch con el primer valor case. Si coinciden, se ejecutan las sentencias por debajo del valor case. Si break es la última sentencia por debajo del valor case, el navegador se salta el resto de valores case y ejecuta la sentencia que sigue la llave de cierre. Si break no es la última sentencia, el navegador compara el valor switch con el segundo valor case. David López Aznar Clásicos de la Electricidad Capítulo III. JavaScript 54 2. Siempre que no coincidan, el navegador continúa comparando el valor switch con los valores case en el orden en el que aparecen los valores case en la sentencia switch case. 3. Si ninguno de los valores case coincide con el valor switch, entonces el navegador ejecuta las sentencias por debajo de la palabra clave default y luego sale de la sentencia switch case y ejecuta la sentencia que sigue a la llave de cierre. 4. Si default no está presente con la sentencia switch case, el navegador sale de la sentencia switch case y continúa con la sentencia que sigue a la llave de cierre. 2.6. Bucles Los bucles o estructuras iterativas son otro elemento que podemos encontrar en todos los lenguajes. Los bucles permiten realizar operaciones repetitivas tantas veces como sea necesario. En esta estructura, estriba en mi opinión la gran ventaja de los ordenadores frente a los seres humanos, puesto que no se cansan, ni se quejan por realizar muchas veces la misma operación. Todo bucle deberá hacer en algún momento falsa su condición, para conseguir que la ejecución del programa salga del bucle, o de lo contrario se entrará en lo que se conoce cómo bucle infinito o cuelgue del programa. 2.6.1. FOR Se trata de una buena estructura iterativa si conocemos el número exacto de veces que tenemos que repetir las operaciones. Su sintaxis es la siguiente: for (valor inicial; expresión condicional; siguientes sentencias de bucle) { //Sentencias a repetir } 2.6.2. WHILE Es el bucle por excelencia, con él se pueden construir todos los demás. Sus sentencias se ejecutan mientras sea cierta una determinada condición. while (condición) { //Sentencias a repetir } David López Aznar Clásicos de la Electricidad Capítulo III. JavaScript 55 2.6.3. DO WHILE Es un bucle similar al anterior, con la diferencia de que en este caso se evalúa la condición al final del mismo por lo que siempre se ejecutan las sentencias al menos una vez. do { //Sentencias a repetir } while (condición) 2.7. Funciones Las funciones son estructuras que reúnen dentro de ellas los elementos del lenguaje vistos hasta ahora. Las funciones pueden recibir parámetros de entrada, así como devolver un resultado, aunque ambas cosas son opcionales. Las funciones sólo pueden ser llamadas después de su aparición. Las normas para dar nombre a las funciones son las mismas que para las variables. Los parámetros de entrada que pueda recibir una función, parecen entre paréntesis después del nombre de la función, y separados por comas y en orden. En el caso de que se devuelva algún valor se hará dentro de la función con la palabra return. Aquí van algunos ejemplos de funciones. Función sin parámetros de entrada o salida function miFuncion() { //Bloque de código } Función con parámetros de entrada y salida function miFuncion(parámetro1, parámetro2) { //Bloque de código return valor; } Función sin parámetros de entrada pero que devuelve un valor function miFuncion() { //Bloque de código return valor; } David López Aznar Clásicos de la Electricidad Capítulo III. JavaScript 56 2.8. Eventos En un lenguaje como JavaScript, los eventos son el desencadenante que debe iniciar la ejecución de unas determinadas sentencias. Muchos de estos eventos ocurren al realizar una determinada acción con el ratón. Evento Descripción onload Se ejecuta cuando el navegador termina de cargar una ventana o todos los marcos dentro de un conjunto de marcos. onunload Se ejecuta cuando el navegador deja de mostrar un documento en una ventana o marco. onclick Se ejecuta cuando se hace clic con el botón del ratón sobre un elemento. ondblclick Se ejecuta cuando se hace doble clic con el botón del ratón sobre un elemento onmousedown Se ejecuta cuando se hace clic con el botón del ratón mientras el cursor se encuentra sobre un elemento. onmouseup Se ejecuta cuando se suelta el botón del ratón mientras el cursor se encuentra sobre un elemento. onmouseover Se ejecuta cuando el cursor del ratón se mueve sobre un elemento. onmousemove Se ejecuta cuando se mueve el cursor del ratón mientras está sobre un elemento. onmouseout Se ejecuta cuando el cursor del ratón se aleja de un elemento. onfocus Se ejecuta cuando un elemento recibe el foco. onblur Se ejecuta cuando un elemento pierde el foco. onkeypress Se ejecuta cuando se pulsa y suelta una tecla. onkeydown Se ejecuta cuando una tecla se mantiene pulsada. onkeyup Se ejecuta cuando se suelta una tecla. onsubmit Se ejecuta cuando se envía un formulario. onreset Se ejecuta cuando se restablece un formulario. onselect Se ejecuta cuando se selecciona texto en un campo de texto. onchange Se ejecuta cuando un elemento pierde el foco de entrada de datos y el valor del elemento ha cambiado desde recibir el foco. David López Aznar Clásicos de la Electricidad Capítulo III. JavaScript 57 3. Ejemplos de código 3.1. Fecha (1 archivo) El resultado por pantalla debería ser similar al siguiente: Hoy es Jueves, 3 de Junio de 2010 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Fecha actual</title> <script language="javascript" type="text/javascript"> function FechaActual() { var fecha = new Date(); var diasemana = fecha.getDay(); var dia = fecha.getDate(); var mes = fecha.getMonth(); var anyo = fecha.getFullYear(); switch (diasemana) { case 0: diasemana = 'Domingo'; break; case 1: diasemana = 'Lunes'; break; case 2: diasemana = 'Martes'; break; case 3: diasemana = 'Miércoles'; break; case 4: diasemana = 'Jueves'; break; case 5: diasemana = 'Viernes'; break; case 6: diasemana = 'Sábado'; break; David López Aznar Clásicos de la Electricidad Capítulo IV. PHP 64 1.3. ¿Dónde introducir PHP? PHP permite mezclarse con el código HTML, lo que permite realizar aplicaciones de forma mucho más rápida que con otros lenguajes, pero como contraprestación puede darse el caso de obtener un código más difícilmente mantenible si no se hace con cuidado. Los archivos con código PHP tienen extensión php por defecto. Las etiquetas que permiten distinguir fragmentos de código PHP de HTML son las siguientes: <?php // Instrucciones PHP ?> 1.4. ¿Funciona PHP en nuestro servidor? Es habitual utilizar el siguiente código para probar si funciona correctamente PHP en nuestro servidor. Para ello crearemos un archivo de nombre index.php y lo colocaremos en el directorio raíz del servidor. Una vez hayamos probado que funciona eliminaremos ese archivo, ya que dada demasiada información valiosa a posibles atacantes de nuestro portal. El resultado debería ser parecido al de la imagen. <?php phpinfo(); ?> Figura 21. Resultado de ejecutar la sentencia phpinfo() en un servidor web con PHP. David López Aznar Clásicos de la Electricidad Capítulo IV. PHP 65 2. Elementos del lenguaje Los elementos del lenguaje son muy similares a los de JavaScript por lo que no se hará demasiado hincapié en ellos. 2.1. Comentarios Los comentarios de línea, pueden hacerse de cualquiera de las dos maneras: // Comentario de línea # Comentario de línea Los comentarios de bloque suelen utilizarse para comentar el uso de las funciones justo antes de éstas. Afectan a todo lo que haya entre /* */ aunque haya varias líneas entre medio. Si bien es costumbre utilizar la siguiente sintaxis, que es la que utilizan muchos programadores con Java. /** * Comentarios de bloque * en varias líneas */ 2.2. Sentencias Cada sentencia o instrucción debe finalizar con ; y estar en una sola línea para mejorar la legibilidad del código. 2.3. Declaración de variables Las variables en PHP comienzan con el símbolo $. La asignación de valores es la misma que en JavaScript y se realiza con el símbolo =. 2.4. Operadores 2.4.1. OPERADORES ARITMÉTICOS Exactamente igual que en el caso de JavaScript. 2.4.2. OPERADORES DE ASIGNACIÓN Muy similar al caso de JavaScript, pero además se dispone del siguiente de concatenación caracteres. Operador Descripción . Concatenación de caracteres, (en JavaScript era el signo +). .= Concatena caracteres y luego asigna. David López Aznar Clásicos de la Electricidad Capítulo IV. PHP 66 2.4.3. OPERADORES LÓGICOS Los operadores lógicos son los mismos que en JavaScript. 2.4.4. OPERADORES DE COMPARACIÓN Los operadores de comparación son los mismos que en JavaScript. 2.5. Sentencias condicionales Las sentencias condicionales son exactamente las mismas que en JavaScript, con las siguientes excepciones: Puede escribirse tanto else if como elseif. if (condición1) { //Sentencias a ejecutar si se cumple la condición 1 } elseif (condición2) { //Sentencias a ejecutar si no se ha cumplido la condición 1, pero se cumple la 2 } elseif (condición3) { //Sentencias a ejecutar si no se cumplen ni la condición 1, ni la 2, pero sí la 3 } else { //Sentencias a ejecutar si no se cumple ninguna de las condiciones anteriores } 2.6. Bucles Los bucles son exactamente los mismos que en JavaScript con la siguiente excepción, que lleva ; al final: do { //Sentencias a repetir } while (condición); David López Aznar Clásicos de la Electricidad Capítulo IV. PHP 67 3. Ejemplos de código 3.1. ¿Qué hora es? (1 archivo) El resultado por pantalla debería ser similar al siguiente: Son las 15:50:22 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>Hora</title> </head> <body> <p> Son las <strong> <?php echo date("H:i:s"); ?> </strong> </p> </body> </html> 3.2. Plantilla (Varios archivos) Recuerdo de mi época de estudiante de programación cómo el profesor don Luis Gambau nos decía a menudo «Divide y vencerás», esa es una de las ideas que más ventajosa me ha resultado durante años a la hora de afrontar muchos problemas. En este caso, separaremos los contenidos en varios archivos y luego los juntaremos en una plantilla. De esta forma si por ejemplo la cabecera y el pie van a ser comunes a todas las páginas puedo reutilizarlo, y en caso de tener que modificar cualquiera de ellos sólo habrá que hacer cambios en un archivo. La orden que nos permite reunir el resto de archivos que necesitamos es require(). El siguiente es un ejemplo muy sencillo, en el capítulo 9 se desarrollara un caso real algo mucho más completo. cabecera.php <p> Cabecera de la página </p> David López Aznar Clásicos de la Electricidad Capítulo IV. PHP 68 contenido.php <p> Entre los contenidos que mostramos destacan los siguientes:<br /> Son las <strong><?php echo date("H:i:s"); ?></strong><br /> La versión de PHP utilizada es <?php echo phpversion(); ?> </p> pie.php <p> Pie de Página </p> plantilla.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>Plantilla</title> </head> <body> <?php require ('cabecera.php'); require ('contenido.php'); require ('pie.php'); ?> </body> </html> Figura 22. Ejemplo de plantilla realizada con PHP. David López Aznar Clásicos de la Electricidad Capítulo V. RSS 69 Pág. 123, cap. IV de opción 15 citada en bibliografía. 38 Pág. 40, cap. 3 de opción 14 citada en bibliografía. 39 Capítulo V. RSS –Las novedades publicadas en internet– bB «The secret is comprised in three words—Work, Finish, Publish. » 38 «El secreto está comprendido en tres palabras: trabajar, terminar, publicar. » 39 Michael Faraday (1791-1867). Científico británico. Bb 1. Introducción La cita anterior es el consejo que Michael Faraday dio en una ocasión a un joven científico. Sin duda alguna trabajar, terminar y publicar, son las tres principales acciones a realizar también en la publicación de contenidos en internet. La principal finalidad de la publicación de contenidos es conseguir que la gente los vea, pero eso no siempre es fácil porque no podemos asegurar que los navegantes que puedan estar interesados en nuestros contenidos naveguen con demasiada frecuencia por nuestras páginas. Con idea de subsanar este problema los portales aportaban suscripciones a las novedades mediante correo electrónico, pero esto suponía una molestia en forma de correo basura en cuanto el navegante se suscribía a las novedades de varios portales. Con lo que el usuario terminaba por eliminar los mensajes sin leerlos. Con RSS se evita mandar cientos de correos a cientos de usuarios. Con RSS es el usuario quien accede de forma sencilla y unificada a las novedades de los sitios de su interés a través de la conexión con un archivo XML alojado en el servidor. La conexión con el archivo XML se refresca cada cierto tiempo en busca de titulares. David López Aznar Clásicos de la Electricidad Capítulo V. RSS 70 1.1. ¿Qué es RSS? Según Steven Holzner, opción 20 citada en bibliografía; RSS “Really Simple Syndication” (sindicación realmente sencilla) es una tecnología que nos permite seleccionar el origen de nuestra información. 1.2. ¿Dónde puedo encontrar orígenes de datos RSS? Encontrar orígenes de datos RSS, es lo más sencillo del mundo. Son muchos los sitios web que incorporan esta tecnología. En la figura 23 pueden verse una serie de iconos y de enlaces habituales para RSS. Los tres iconos de la izquierda, son los más genéricos, y los de la derecha son los específicos de las compañías con las que los usuarios suelen tener cuentas para leer RSS. Los iconos más habituales son los más genéricos, siendo los más utilizados el naranja con bordes redondeados y el naranja con el texto XML. Además de los iconos, en algunos sitios web se utiliza texto con enlaces. Los textos más habituales son: RSS, Subscribe to my feed, Subscribe to our feed, Subscribe to feed, Get the Nombre Web news... 1.3. Suscribirse a una fuente RSS Al hacer clic sobre uno de los iconos del punto anterior, si utilizamos las últimas versiones de los navegadores, veremos las noticias como esperamos si por el contrario, utilizamos versiones antiguas veremos un código con etiquetas XML, que seguramente no seamos capaces de comprender. En cualquiera de los casos la url que indicará el navegador en la barra de direcciones será la del archivo RSS correspondiente. Debemos seleccionar y copiar dicha dirección. Una vez copiada, abriremos un programa lector de fuentes RSS, por ejemplo Windows Live™ Mail, y haremos clic en la sección Fuentes, por último haremos clic sobre el enlace Agregar fuente y pegaremos la dirección en la ventana emergente. Inmediatamente después comenzaremos a ver las breves reseñas con las ultimas novedades del sitio. Además de Windows Live™ Mail, podemos utilizar soluciones en línea como http://es.my.yahoo.com/ o http://www.google.es/ig?hl=es. En la siguiente imagen puede verse un ejemplo en el que podemos leer la reseña sobre una noticia del actual presidente de los Estados Unidos de América y la empresa petrolera BP responsable del reciente vertido de crudo en las costas norteamericanas. Para ampliar la información tendremos que hacer clic en el enlace Ver con conexión. Figura 23. Iconos habituales RSS. David López Aznar Clásicos de la Electricidad Capítulo V. RSS 71 2. Creación de orígenes de datos RSS 2.0 2.1. Introducción La creación de un fichero de origen de datos RSS es muy similar a la creación de un archivo HTML. Al igual que en HTML se utilizan etiquetas de apertura y cierre muy similares, esto es así porque como hemos dicho antes el origen de datos es un archivo XML, pero con etiquetas estándar. La extensión más habitual para este tipo de archivos es xml. Para explicar las etiquetas más habituales de este tipo de archivo aprovecharemos el ejemplo de código del siguiente apartado. Dicho ejemplo es el fichero RSS disponible en la dirección http://www.clasicosdelaelectricidad.info/rss.xml, a fecha 21 de Junio de 2010. El resultado por pantalla en el navegador Internet Explorer 8 es el de la figura 25. Figura 24. Uso de Windows Live™ Mail para leer fuentes RSS. David López Aznar Clásicos de la Electricidad Capítulo V. RSS 72 2.2. Ejemplo de origen de datos RSS 2.0 <?xml version="1.0" encoding="UTF-8" ?> <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"> <channel> <title>Novedades</title> <link>http://www.clasicosdelaelectricidad.info/</link> <description> Todas las novedades de Clásicos de la electricidad. </description> <atom:link href="http://www.clasicosdelaelectricidad.info/rss.xml" rel="self" type="application/rss+xml" /> <language>es-es</language> <category>Electricidad</category> <pubDate>Sun, 16 Aug 2009 16:33:45 GMT</pubDate> <lastBuildDate>Mon, 21 Jun 2010 12:37:55 GMT</lastBuildDate> Figura 25. Resultado en Internet Explorer 8 de la fuente RSS del ejemplo de código. David López Aznar Clásicos de la Electricidad Capítulo V. RSS 73 <image> <title>Novedades</title> <url>http://www.clasicosdelaelectricidad.info/imgs/rss/logo.png</url> <link>http://www.clasicosdelaelectricidad.info/</link> <description>Logotipo de Clásicos de la electricidad.</description> </image> <item> <title> Description d’un appareil électro-dynamique construit par M. Ampère </title> <link> http://www.clasicosdelaelectricidad.info/documentos/ampere/appareil/appareil.php </link> <description> Documento publicado por Ampère en 1824. </description> <pubDate>Tue, 18 Aug 2009 14:00:00 GMT</pubDate> <guid isPermaLink="true"> http://www.clasicosdelaelectricidad.info/documentos/ampere/appareil/appareil.php </guid> <category>Documentos</category> <category>Máquinas eléctricas</category> <category>Ampère</category> </item> <item> <title>Faraday as a discoverer</title> <link> http://www.clasicosdelaelectricidad.info/biografias/faraday/discoverer/discoverer.php </link> <description> Faraday as a discoverer es la biografía de Michael Faraday escrita por su amigo John Tyndall y publicada un año después de la muerte de Faraday. </description> <pubDate>Mon, 10 Aug 2009 14:00:00 GMT</pubDate> <guid isPermaLink="true"> http://www.clasicosdelaelectricidad.info/biografias/faraday/discoverer/discoverer.php </guid> <category>Biografías</category> David López Aznar Clásicos de la Electricidad Capítulo VI. Tratamiento de imagen 80 2. GIMP GIMP es un programa de edición de imágenes que permite trabajar por capas al igual que otros programas comerciales como Photoshop. El aspecto del programa es el de la siguiente imagen, podemos observar que no se diferencia en exceso de otros programas comerciales. A continuación, indico los pasos a seguir para realizar algunas de las operaciones que considero más habituales: #Para realizar una captura de pantalla hay que pulsar ImprPant y luego abrir GIMP, y hacer clic en el menú Archivo > Crear > Desde el Portapapeles. #Para modificar el tamaño de una imagen hay que hacer clic en el menú Imagen > Escalar la imagen. Suele utilizarse para escalar iconos. #Para modificar color, contraste y brillo puede utilizarse el menú Colores, una buena opción suele ser escoger la opción Auto > Balance de blancos. #Desenfoque, y otros efectos artísticos pueden encontrarse desde el menú Filtros, que ofrecen muchas posibilidades con las fotografías. Sin duda el programa tiene muchas más posibilidades que se pueden ir descubriendo poco a poco. Figura 26. GIMP y sus barras de herramientas. David López Aznar Clásicos de la Electricidad Capítulo VII. Edición de Vídeo 81 Fragmento del aforismo 105, págs. 257-258 de opción 16 citada en bibliografía. 43 Capítulo VII. Edición de vídeo –con Pinnacle Studio– bB «Lo bueno, si breve, dos veces bueno y aun lo malo, si poco, no tan malo. » 43 Baltasar Gracián (1601-1658). Escritor español. Bb 1. Introducción En este capítulo seguiremos el consejo de Gracián por partida doble. En el primero de los casos, porque considero que los vídeos cortos se aprovechan mucho mejor con fines didácticos, evitando el aburrimiento y cansancio de los estudiantes. En el segundo caso, por no cansar a los lectores de esta memoria, que en el presente capítulo versa sobre la edición de vídeo con un programa de uso muy intuitivo. El programa utilizado ha sido Pinnacle Studio 10.8, lo he utilizado porque era el que venía con los discos de instalación de una tarjeta digitalizadora de vídeo que adquirí hace unos años. Además también disponemos de opciones gratuitas como Windows Movie Maker o Kino para GNU/Linux. Entre las opciones de pago además de Pinnacle, podemos optar por Corel Video Studio, o Adobe Premiere. 2. Edición de vídeo con Pinnacle Studio 2.1. Introducción Con Pinnacle Studio podemos juntar, editar y cortar vídeos. Además de trabajar con vídeos, podemos trabajar con fotografías e imágenes. Podemos añadir a nuestras creaciones, cortinillas, textos, efectos, sonidos, música y mucho más. En mi opinión el secreto para hacer un buen vídeo consiste en no abusar de todas esas cosas, y utilizar sólo las que estimemos oportunas en cada caso. David López Aznar Clásicos de la Electricidad Capítulo VII. Edición de Vídeo 82 2.2. Edición de vídeo El programa nos ofrece las siguientes pestañas con las que trabajar: Capturar, Editar y Hacer vídeo. La mayor parte del tiempo trabajaremos en la de edición. Como vemos la pantalla está dividida en tres zonas. La parte superior izquierda nos permite acceder a los archivos, y efectos que queremos añadir. La parte superior derecha nos permite ver y oír el material editado hasta el momento. La parte inferior es el lugar donde se van añadiendo los archivos y efectos, tan sólo hay que arrastrarlos desde la parte superior izquierda. La parte inferior cuenta con tres vistas posibles que son esquemática, línea temporal y lista . La primera de las imágenes utiliza la vista esquemática, que a mi modo de ver es la más intuitiva de utilizar. La vista de línea temporal se muestra en la segunda de las imágenes y a mi modo de ver lo mejor es utilizarla al trabajar con la banda sonora y algunos efectos de transición. En cuanto a la vista en forma de lista, es una lista con los detalles de duración y nombres de vídeos, fotografías y transiciones, personalmente es la que menos utilizo. Figura 27. Imagen del programa de edición de vídeo durante la creación del vídeo Los guardianes del conocimiento para charla de 8 de Mayo de 2010. David López Aznar Clásicos de la Electricidad Capítulo VII. Edición de Vídeo 83 44http://audacity.sourceforge.net/?lang=es Una de las mayores dificultades al editar un vídeo es la de cuadrar los tiempos entre imagen y banda sonora. En el caso de que queramos hacer una única pista de audio, lo mejor es hacerlo primero con un programa de edición de audio. Podemos utilizar Audacity que 44 es gratuito, sencillo de utilizar y muy completo. Además nos permite aplicar de forma sencilla efectos, añadir pistas, hacer grabaciones con micrófono, etc... Figura 28. Línea temporal de la edición del vídeo Los guardianes del conocimiento. Figura 29. Vista en forma de lista de la edición del vídeo Los guardianes del conocimiento. Figura 30. Audacity funcionando en Windows. David López Aznar Clásicos de la Electricidad Capítulo VII. Edición de Vídeo 84 45http://winff.org/html_new/ A la hora de generar un archivo final de vídeo soy partidario de generarlo con calidad de DVD tal y como se muestra en la figura. En el caso de las páginas web, posteriormente hay que convertir los vídeos a un formato más pequeño para que no se vea a trompicones o de forma lenta. Puesto que los estándar de vídeo son muchos, lo más fácil es convertirlo a formato de vídeo .flv de Flash, ya que Flash está muy extendido entre los navegadores web. Para está última misión podemos utilizar el programa gratuito WinFF . 45 3. Conclusiones El tiempo dedicado a la edición de vídeo puede convertirse en infinito sino ponemos fin en algún momento. La edición de vídeo es un trabajo creativo que se va aprendiendo poco a poco, pero que una vez aprendido se puede hacer a destajo, como en el caso de la página de experimentos para la que cree, y convertí unos ochenta. Figura 31. Creación del archivo de vídeo Los guardianes del conocimiento. David López Aznar Clásicos de la Electricidad Capítulo VIII. Experimentos electromagnéticos 85 Primera estrofa de la canción «El sitio de mi recreo», publicada como maqueta del recopilatorio 46 de nombre homónimo actualmente descatalogado, la versión definitiva apareció en el LP «Océano de sol» del año 1994. Primer párrafo del relato «Eleonora», pág. 303 de opción 29 citada en bibliografía. 47 Capítulo VIII. Experimentos electromagnéticos –Web– bB «Donde nos llevó la imaginación, donde con los ojos cerrados, se divisan infinitos campos. » 46 Antonio Vega Tallés (1957-2009). Músico español. «Los que sueñan de día vienen a conocer muchas cosas que escapan a los que sólo duermen de noche. En sus confusas visiones obtienen vislumbres de eternidad, y se sobrecogen, durmiendo, al advertir que se han hallado al borde del gran secreto. » 47 Edgar Allan Poe (1809-1849). Escritor estadounidense. Bb 1. Introducción Los arpegios de «El sitio de mi recreo», por alguna razón me siguen llevando a lugares que sólo pueden existir en la imaginación. Una de las grandezas de Antonio Vega era la facilidad con la que conseguía encontrar las palabras precisas en cada verso. Palabras certeras que invitan a la reflexión y consiguen que uno siga soñando despierto. Muy probablemente cómo indica Poe al soñar de día obtenemos vislumbres de eternidad, y nos hallamos al borde de descubrir algún gran secreto. David López Aznar Clásicos de la Electricidad Capítulo VIII. Experimentos electromagnéticos 86 Construí un motor de corriente continua durante el curso 2002-2003 como trabajo de 48 asignatura, que con los arreglos necesarios funcionaría de maravilla. De momento no se incluye en la recopilación de experimentos del documento anexo. 49http://es.creativecommons.org/ En cualquier caso, soñemos o no despiertos, el hecho de descubrir un secreto siempre es excitante. En ocasiones descubrirlo puede llevarnos toda una vida, incluso puede llegar a convertirse en el motor que conduce nuestra vida. En el caso de Galileo, Newton, Faraday, Maxwell o Einstein el motor de sus vidas fue la búsqueda de los secretos de la naturaleza. Todos estos científicos, filósofos, músicos y escritores fueron capaces de ver cosas que no eran obvias. Galileo sentó las bases de la mecánica, Newton subido sobre sus hombros alcanzó a ver algo más lejos. Faraday podía ver campos eléctricos y magnéticos, Maxwell que le admiraba profundamente formuló las ecuaciones por las que se regían estos campos. Einstein nos descubrió pensamientos sobre el espacio, el tiempo y la energía que probablemente todavía no estén a nuestro alcance. El hecho de que decidieran compartir sus descubrimientos y creaciones les honra. Durante un breve espacio de tiempo especialmente creativo creí poder ver las líneas de campo de las que me hablaba Antonio Pardina en sus clases. Las mismas líneas de campo que Faraday podía ver con los ojos cerrados. Con el objeto de que todos podamos hallarnos algo más cerca de comprender los secretos de la electricidad, y de que podamos ver líneas de campo como Faraday, nacieron los experimentos que prepararon profesores y alumnos durante la última década. En algunos casos fuí espectador de algunos de ellos durante las clases y las sesiones de prácticas. En otros participe activamente con la construcción de alguna máquina . En el caso de la máquina de Poggendorff (curso 2008-2009), forme parte 48 del jurado de selección a propuesta de Jesús Letosa, el resto de miembros del jurado eran el profesor Sergio Artal y el alumno David Panivino. Como recordatorio de todo el trabajo realizado por profesores y estudiantes durante la última década, Jesús me propuso la realización de documento impreso, fotografías, vídeos y página web sobre los experimentos. La página web de los experimentos con los videos, fotografías y animaciones ha estado en servicio durante el curso 2009-2010 para los alumnos de la asignatura de Electricidad y magnetismo, a través del Anillo Digital Docente. Próximamente se estudia su integración dentro del portal Clásicos de la electricidad. De hecho sino se ha integrado ya, ha sido a la espera de estudiar la posibilidad de publicar los contenidos bajo licencia Creative Commons . También he pensado en la posibilidad de realizar un DVD con todos los 49 vídeos de los experimentos. Por razones de espacio y por la entidad de la obra he decidido facilitar esta primera antología de experimentos en documento anexo aparte. David López Aznar Clásicos de la Electricidad Capítulo VIII. Experimentos electromagnéticos 87 2. Experimentos 2.1. Plantilla La plantilla de experimentos incluye las siguientes secciones que son comunes a la mayor parte de ellos: #Tema. #Fotografías. #Vídeos. #Materiales necesarios. #Descripción. #Tiempo dedicado en clase. #Disponibilidad. #Localización. #Autoría. #Observaciones. #Última actualización. De esta forma se tienen completamente catalogados todos los experimentos, con la información que se considera más relevante. Esta plantilla es muy similar en su versión impresa y en su versión electrónica. La plantilla y las fichas de los experimentos fueron propuestas por Jesús, yo me encargue de darles forma en los documentos generados. 2.2. Clasificación PIRA PIRA (Physics Instructional Resourse Association), es la clasificación por la que se ha optado para recopilar los experimentos. Es una clasificación en la que están presentes los principales experimentos físicos. Se puede saber algo más sobre ella en el documento anexo. David López Aznar Clásicos de la Electricidad Capítulo VIII. Experimentos electromagnéticos 88 3. Web de los experimentos La web de los experimentos cuenta con las secciones: presentación, autoría de los materiales, clasificación PIRA y experimentos. De todas ellas la más importante es la última que cuenta con la totalidad de los experimentos. Como puede verse en la imagen las páginas cuentan con un menú lateral que permite la navegación entre experimentos de forma sencilla. Además una barra superior nos recuerda en todo momento en que página nos encontramos. Hay varias carpetas que contienen las imágenes y videos. Las carpetas son: audiovisual, css, descargas, imgs y videos. Las páginas web están directamente sobre el directorio raíz. Para la creación de esta página web se han utilizado las técnicas vistas en los dos primeros capítulos sobre HTML y CSS. A continuación se muestra el código empleado como plantilla de las páginas web de los experimentos: Figura 32. Página web de Experimentos de Electricidad y Magnetismo. David López Aznar Clásicos de la Electricidad Capítulo VIII. Experimentos electromagnéticos 89 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Experimentos</title> <link rel="stylesheet" href="css/standard.css" /> <link rel="stylesheet" href="css/divs.css" /> <link rel="stylesheet" href="css/estilos.css" /> </head> <body> <div id="cabecera"> Los logotipos. Experimentos de Electricidad y Magnetismo </div> <div id="menu"> Los enlaces del menú principal </div> <div id="menulateral"> Índice de experimentos </div> <div id="ubicacion"> Estoy en <strong>Experimentos</strong> › <strong>El título.</strong> </div> <div id="contenido"> <h1>El título.</h1> <h2>Tema</h2> <ul> <li class="tema">Lista de temas.</li> </ul> <h2>Fotografías</h2> <p> Las imágenes. </p> <h2>Vídeos</h2> <h2>Materiales necesarios</h2> <ul> <li class="material"> Lista de materiales empleados. </li> </ul> David López Aznar Clásicos de la Electricidad Capítulo IX. Clásicos de la electricidad 97 Extraído de “Escrito en el ordenador, II: Matad al portador del mensaje” del cuaderno de 50 filosofía de Santiago Auserón en “La Huella Sonora”. Debido al interés de los textos, he decidido incluirlos en uno de los anexos bajo el nombre “Cuaderno de filosofía”, junto a otros que creo puedan ser de interés. Capítulo IX. Clásicos de la electricidad –Web con PHP– bB «Quizá el texto electrónico cumpla, en relación con la letra impresa, una función parecida a la que a ésta le tocó cumplir en otro tiempo con respecto a la tradición oral: hacer de emisario delegado. La antigüedad dudó también acerca del valor de la escritura, la tradición homérica consideraba la palabra hablada como un valor firme, mientras que la tablilla escrita podía llevar un mensaje falaz o traicionero, la orden incluso de matar al portador. » 50 Santiago Auserón (1954-…). Filósofo y músico español. Bb 1. Introducción Clásicos de la electricidad es un portal web en el que se recopilan documentos de interés histórico sobre la electricidad y los principales hombres que ayudaron a cimentar las teorías científicas que en la actualidad se dan por veraces. Clásicos fue engendrado durante los años de estudio de la carrera y cobró forma al final de ella. Pensé que sería bueno reunir y recuperar la historia de esa materia a la que había dedicado varios años de mi vida. Mis estudios posteriores sobre informática fueron de vital importancia para la creación del portal. Lo positivo de clásicos es que los textos no se descatalogan, y se permite un acceso libre y gratuito desde cualquier parte del mundo. Tal y como indica Santiago Auserón en la cita anterior el papel que juega el texto electrónico no está claramente definido y habrá que evaluarlo dentro de un tiempo, mientras tanto disfrutemos de los textos escritos por los guardianes del camino del conocimiento. David López Aznar Clásicos de la Electricidad Capítulo IX. Clásicos de la electricidad 98 Desgraciadamente creó que se convirtió en papel reciclado. 51 La razón por la que no coinciden las fechas es porque Luis se lesionó un brazo antes de comenzar 52 la gira por lo que se pospusieron las fechas hasta su recuperación. Durante esa gira volvieron nuevamente a Zaragoza durante las fiestas del Pilar, concretamente el 13 de Octubre estuvieron en el Paseo Independencia tocando de maravilla, apesar de la lluvia. 1.1. El nombre del dominio Antes de dar un nombre al portal, hice una lista con posibles nombres del 51 portal web. De entre todos ellos el que más me gustaba era el actual. Y justo unas semanas más tarde vi volviendo a casa un cartel de un concierto de Luis y Santiago Auserón como “Las Malas Lenguas” en su gira “Clásicos de la electricidad”. A continuación puede verse la entrada que compré y la noticia con la que comenzó mi cuaderno de bitácora personal, si nos fijamos en las fechas del concierto veremos que 52 no coinciden: Título: Clásicos de la electricidad. Fecha: 9 de Junio de 2005. Mensaje: El Lunes 13 de Junio de 2005, Luis y Santiago Auserón (fundadores de Radio Futura junto a Enrique Sierra), presentan en directo su último proyecto musical “Clásicos de la electricidad” en el Teatro Principal. Hacen un repaso de los clásicos anglosajones del rock, blues, jazz de los últimos 50 años. Las traducciones a cargo de Santiago Auserón incluyen temas de Ottis Reading, David Bowie, Elvis, The Beattles... ¡En definitiva un espectáculo musical en mayúsculas! Se puede encontrar más información en: http://www.lahuellasonora.com/gira_ampliada.php?a=santiago-auseron&id=17 Figura 33. Entrada original del primer concierto de Las malas lenguas en Zaragoza durante la gira 2005. Figura 34. Carteles de la gira “Clásicos de la electricidad” de Las Malas Lenguas durante el año 2005. David López Aznar Clásicos de la Electricidad Capítulo IX. Clásicos de la electricidad 99 Domain Name System. 53 1.2. Registro de dominios Registrar un dominio es relativamente sencillo si disponemos de tarjeta de crédito y somos capaces de seguir instrucciones por pantalla aunque estén en inglés. En internet podemos encontrar multitud de registradores de dominio, si bien la mayor diferencia entre ellos es el precio y las características que ofrecen. El dominio clasicosdelaelectricidad.info fue registrado el día 13 de Marzo de 2007. Yo opté por https://joker.com/ tal y como nos sugirió Eduardo, profesor del curso “Técnico de Sistemas Microinformáticos” de Qualitas. Entre las ventajas que nos ofrecía esta empresa alemana estaba la de poder hacernos cargo nosotros mismos de todos los contactos del dominio incluidos contacto administrativo y contacto técnico. Además nos permite administrar fácilmente los servicios de nuestro dominio mediante la modificación del servicio de DNS . Para registrar un dominio seguiremos 53 los siguientes pasos: 1. Primero nos registraremos en la página facilitando nuestro correo electrónico, tras este paso recibiremos un correo electrónico en inglés (posiblemente aparezca en la bandeja de correo no deseado), lo leeremos y seguiremos los pasos que nos indiquen para averiguar nuestra contraseña. 2. A continuación nos identificaremos en el portal utilizando nuestro correo electrónico y contraseña. 3. Desde la zona de registro de dominios comprobaremos los dominios libres con el nombre que deseemos. Figura 35. Panel de registro de dominios del portal joker.com. David López Aznar Clásicos de la Electricidad Capítulo IX. Clásicos de la electricidad 100 4. Si esta libre el que queremos comprar, seleccionaremos el número de años que será de nuestra propiedad (no hay que preocuparse demasiado ya que se puede ir renovando). Si el dominio no está libre, probaremos con otro nombre. 5. A continuación seguiremos los pasos que nos indiquen desde easy o advanced setup, donde principalmente rellenaremos un formulario con nuestros datos y pagaremos con la tarjeta. Una vez acabemos con los pasos anteriores recibiremos nuevos correos electrónicos indicándonos que hemos adquirido correctamente el dominio. En el siguiente punto se indica como contratar servicio de hosting o alojamiento web. 1.3. Alojamiento web Al igual que con las empresas registradoras de dominios existen multitud de empresas que ofrecen servicios de hosting o alojamiento web. Nuevamente tendremos que seguir las instrucciones que nos indiquen. Por precio y características me he decantado por las siguientes, que además disponen de página web en castellano: #http://www.sync.es/ #http://www.1and1.es/ Es muy importante leer con atención todo lo referente a IP de los servidores y cambios que tengamos que realizar en el servidor DNS. Los cambios no suelen funcionar inmediatamente, ya que puede tardar más de 24 horas en replicarse la información DNS a nivel mundial, si bien hasta ahora la experiencia me dice que entorno a la media hora los cambios suelen ser efectivos. Una vez hecho todo lo anterior, podremos administrar desde un portal web al que accederemos con usuario y contraseña nuestro ftp, cuentas de correo electrónico y gestionar las páginas del servidor web entre otras muchas cosas. Figura 36. Panel de control proporcionado por sync. David López Aznar Clásicos de la Electricidad Capítulo IX. Clásicos de la electricidad 101 1.4. Primer alojamiento de clasicosdelaelectricidad.info Para publicar los contenidos podemos aprovechar la herramienta web vista en el punto anterior. En el caso de clásicos de la electricidad, se puede ver su aspecto en los comienzos en la siguiente imagen. Los primeros archivos alojados fueron los siguientes, teniendo default.html una estructura muy simple. 1images construccion.png dla.png logocabecera.png valid-xhtml10-blue.png default.html Los contenidos anteriores fueron primero publicados desde un ordenador de mi casa que hacía las veces de servidor. En el cuaderno de bitácora del portal puede contrastarse este hecho. Figura 37. Primera publicación de Clásicos de la electricidad. David López Aznar Clásicos de la Electricidad Capítulo IX. Clásicos de la electricidad 102 La página web de la que se obtuvieron los datos en ese momento era la siguiente: 54 http://www.cualesmiip.eu/, dicha página ha cambiado últimamente por lo que recomiendo esta otra http://www.adslayuda.com/ip.html. Título: Hospedaje encontrado. Fecha: 3 de Mayo de 2008. Tras la experiencia de hospedar este sitio web en mi propia casa, y en mi dormitorio. Decidí contratar servicio de hospedaje web aprovechando el puente del 1 de Mayo, con un doble objetivo, no quedarme sordo, y poder dormir bien. Además de la tranquilidad de saber que el servicio debería funcionar las 24 horas del día. Disculpen las molestias quienes hayan intentado acceder al sitio entre San Jorge y el puente de Mayo, pues sólo determinados días y a determinadas horas lo habrán conseguido con éxito. Gracias a todo el mundo por su apoyo, y en especial a Javier y Diego Irisarri que desde el mismo alumbramiento de esta web depositaron su confianza y apoyo. David López Aznar. Entre los problemas que tuve que solucionar estaba el cambio de IP pública del router. Si bien descubrí, que mientras no desenchufará la línea telefónica o el enchufe del router, o hubiera un apagón u otro imprevisto similar el router mantenía la misma dirección IP pública por lo que llegue a la conclusión de que una IP variable que permanece constante por largo tiempo es casi una IP fija. Los datos más 54 significativos del estudio son los siguientes: Fecha IP externa router Del 5 al 14 de Marzo de 2008 88.19.157.177 Del 1 al 17 de Abril de 2008 88.12.161.155 Del 18 de Abril al 10 de Mayo 2008 88.11.249.56 Del 17 al 30 de Mayo de 2008 88.12.161.186 Del 4 de Junio al 11 de Julio de 2008 88.12.138.15 2. Diseño y evolución de Clásicos de la Electricidad Uno de los puntos que más veces cambié al menos al iniciar el proyecto fue el diseño del portal. Desarrollando en primera instancia para monitores de 800×600px, para más tarde dar el salto a 1024×768px que hacía ya algún tiempo que era la resolución más habitual. Finalmente el aspecto en la actualidad es el siguiente: David López Aznar Clásicos de la Electricidad Capítulo IX. Clásicos de la electricidad 103 En un primer momento el aspecto era algo distinto, aunque no demasiado ya que la navegación entre archivos era muy similar. En la siguiente imagen puede observarse el aspecto de la maqueta del portal con fecha 15 de Junio de 2007. Figura 38. Diseño actual de Clásicos de la electricidad. Figura 39. Maqueta del portal con fecha 15 de Julio de 2007. David López Aznar Clásicos de la Electricidad Capítulo IX. Clásicos de la electricidad 104 Tan sólo unos días más tarde la maqueta evolucionaba hasta tener un aspecto algo mejorado, con una navegación muy similar a la actual y un sonido de rumor de olas de fondo. Si bien todavía no cumplía con los estándar del W3C. En cualquiera de los casos anteriores el portal contaba con cabecera, menú principal, menú lateral y zona de contenidos. Esto es exactamente lo que comenté en el capítulo dedicado a CSS. A continuación puede verse el código fuente del fichero correspondiente a esta parte: css/divs.css #cabecera { position: absolute; top: 5px; left: 10px; width: 980px; height: 60px; } #contenedorRelojes { position: absolute; top: 70px; left: 10px; width: 980px; height: 35px; color: #FFFFFF; background-color: #003399; } #reloj { position: absolute; top: 8px; left: 5px; width: 80px; } #fechahoy { position: absolute; top: 8px; left: 90px; width: 400px; } Figura 40. Maqueta del portal con fecha 21 de Agosto de 2007. David López Aznar Clásicos de la Electricidad Capítulo IX. Clásicos de la electricidad 105 #standardxhtml { position: absolute; top: 2px; left: 490px; width: 88px; } #standardcss { position: absolute; top: 2px; left: 580px; width: 88px; } #secciones { position: absolute; top: 8px; left: 760px; width: 216px; text-align: right; font-style: italic; font-weight: bold; } #menuprincipal { position: absolute; top: 106px; left: 10px; width: 980px; height: 25px; font-size: 12px; font-weight: bold; } #contenidos { position: absolute; overflow: auto; top: 136px; left: 10px; width: 980px; height: 450px; } #buscadores { position: absolute; top: 10px; height: 130px; } #contenidosizquierda { position: absolute; top: 160px; width: 250px; height: 280px; font-size: 12px; font-weight: bold; } #contenidosizquierdaautor { position: absolute; left: 5px; width: 240px; height: 15px; } #contenidosizquierdatitulo { position: absolute; top: 16px; left: 5px; width: 240px; height: 15px; } #contenidosizquierdaindice { position: absolute; top: 35px; left: 5px; width: 240px; height: 240px; overflow: auto; } David López Aznar Clásicos de la Electricidad Capítulo IX. Clásicos de la electricidad 112 En bibliografía tienen cabida muchos de los libros que no puedo publicar en clásicos de la electricidad por el copyright, o que no merece la pena que lo haga porque son fácilmente localizables en formato tradicional. En algunos casos es posible que alguno haya sido descatalogado, pero siempre se puede intentar encontrarlo de segunda mano por internet. Los libros están clasificados de la siguiente forma: clásicos técnicos, libros biográficos, otros libros de los clásicos, historia de la ciencia, libros para charlar, normativa española, electricidad y magnetismo y máquinas eléctricas. 4.8. Normativa En esta sección se hace referencia a las principales normas y reglamentos que rigen en España sobre electricidad. Se hace referencia a ellos y se enlazan directamente con los correspondientes Boletines Oficiales del Estado. En un futuro quiero recopilar también los textos de normativas antiguas para poder seguir la evolución de las normativas a lo largo del tiempo. Por el momento se cuenta con enlaces a los siguientes reglamentos: #Reglamento sobre Condiciones Técnicas y Garantías de Seguridad en Centrales Eléctricas, Subestaciones y Centros de Transformación. (1982). #REAL DECRETO 3275/1982, de 12 de Noviembre, sobre condiciones técnicas y garantías de seguridad en centrales eléctricas y centros de transformación. #ORDEN de 6 de Julio de 1984 por la que se aprueban las instrucciones técnicas complementarias del Reglamento sobre Condiciones Técnicas y Garantías de Seguridad en Centrales Eléctricas, Subestaciones y Centros de Transformación. #ORDEN de 18 de Octubre de 1984 complementaria de la de 6 de Julio que aprueba las Instrucciones Técnicas Complementarias del Reglamento sobre Condiciones Técnicas y Garantías de Seguridad en Centrales Eléctricas, Subestaciones y centros de Transformación. #ORDEN de 27 de Noviembre de 1987 por la que se actualizan las instrucciones técnicas complementarias MIE-RAT 13 y MIE-RAT 14 del Reglamento sobre Condiciones Técnicas y Garantías de Seguridad en Centrales Eléctricas, Subestaciones y Centros de Transformación. #CORRECCIÓN de erratas de la Orden de 27 de Noviembre de 1987 por la que se actualizan las instrucciones técnicas complementarias Mie-Rat 13 y Mie-Rat 14 del Reglamento sobre condiciones técnicas y garantías de seguridad en centrales eléctricas, subestaciones y centros de transformación. David López Aznar Clásicos de la Electricidad Capítulo IX. Clásicos de la electricidad 113 #ORDEN de 23 de Junio de 1988 por la que se actualizan diversas Instrucciones Técnicas Complementarias MIE-RAT del Reglamento sobre Condiciones Técnicas y Garantías de Seguridad en Centrales Eléctricas, Subestaciones y Centros de Transformación. #CORRECCIÓN de erratas de la Orden de 23 de Junio de 1988 por la que se actualizan diversas Instrucciones Técnicas Complementarias MIE-RAT del Reglamento sobre Condiciones Técnicas y Garantías de Seguridad en Centrales Eléctricas, Subestaciones y Centros de Transformación. #ORDEN de 16 de Abril de 1991 por la que se modifica el punto 3.6 de la Instrucción Técnica Complementaria MIE-RAT 06 del Reglamento sobre Condiciones Técnicas y Garantías de Seguridad en Centrales Eléctricas, Subestaciones y Centros de Transformación. #ORDEN de 16 de Mayo de 1994 por la que se adapta al progreso técnico la ITC MIE-RAT 02 del Reglamento sobre Condiciones Técnicas y Garantías de Seguridad en Centrales Eléctricas, Subestaciones y Centros de Transformación. #ORDEN de 15 de Diciembre de 1995 por la que se adapta al progreso técnico la Instrucción Técnica Complementaria MIE-RAT 02 del Reglamento sobre Condiciones Técnicas y Garantías de Seguridad en Centrales Eléctricas, Subestaciones y Centros de Transformación. #CORRECCION de errores de la Orden de 15 de Diciembre de 1995 por la que se adapta al progreso técnico la Instrucción Técnica Complementaria MIE-RAT 02 del Reglamento sobre Condiciones Técnicas y Garantías de Seguridad en Centrales Eléctricas, Subestaciones y Centros de Transformación. #ORDEN de 10 de Marzo de 2000 por la que se modifican las Instrucciones Técnicas Complementarias MIE-RAT 01, MIE-RAT 02, MIE-RAT 06, MIE-RAT 14, MIE-RAT 15, MIE-RAT 16, MIE-RAT 17, MIE-RAT 18 y MIE-RAT 19 del Reglamento sobre condiciones técnicas y garantías de seguridad en centrales eléctricas, subestaciones y centros de transformación. #CORRECCIÓN de errores de la Orden de 10 de Marzo de 2000 por la que se modifican las Instrucciones Técnicas Complementarias MIE-RAT 01, MIE-RAT 02, MIE-RAT 06, MIE-RAT 14, MIET-RAT 15, MIE-RAT 16, MIE-RAT 17, MIE-RAT 18 y MIE-RAT 19 del Reglamento sobre Condiciones Técnicas y Garantías de Seguridad en Centrales Eléctricas, Subestaciones y Centros de Transformación. #Reglamento electrotécnico para baja tensión e instrucciones técnicas complementarias (ITC) BT01 a BT51. (2002). David López Aznar Clásicos de la Electricidad Capítulo IX. Clásicos de la electricidad 114 #REAL DECRETO 842/2002, de 2 de Agosto, por el que se aprueba el Reglamento electrotécnico para baja tensión. #SE DECLARA la nulidad del inciso 4.2.c.2 de la ITC BT-03 anexa, por SENTENCIA del TS de 17 de Febrero de 2004 (Ref. BOE-A-2004-6072). #SE MODIFICA el art. 22, la ITC BT03, SE SUSTITUYE lo indicado y SE AÑADEN las disposiciones adicionales 1 a 4, por REAL DECRETO 560/2010, de 7 de Mayo (Ref. BOE-A-2010-8190). #CORRECCIÓN de errores en BOE núm. 149, de 19 de Junio de 2010 (Ref. BOE-A-2010-9716). #Reglamento sobre condiciones técnicas y garantías de seguridad en líneas eléctricas de alta tensión. (2008). #REAL DECRETO 223/2008, de 15 de Febrero, por el que se aprueban el Reglamento sobre condiciones técnicas y garantías de seguridad en líneas eléctricas de alta tensión y sus instrucciones técnicas complementarias ITC-LAT 01 a 09. #CORRECCION de erratas en BOE num. 120 de 17 de Mayo de 2008 (Ref. BOE-A-2008-8664). #CORRECCIÓN de errores en BOE núm. 174 de 19 de Julio de 2008 (Ref. BOE-A-2008-12385). #SE MODIFICA Arts. 13.1, 16, 19, la ITC-LAT 03, SE SUSTITUYE lo indicado, y SE AÑADEN las disposiciones adicionales 1 a 4, por REAL DECRETO 560/2010, de 7 de Mayo (Ref. BOE-A-2010-8190). #CORRECCIÓN de errores en BOE núm. 149, de 19 de Junio de 2010 (Ref. BOE-A-2010-9716). #Reglamento de eficiencia energética en instalaciones de alumbrado exterior. (2008). #REAL DECRETO 1890/2008, de 14 de Noviembre, por el que se aprueba el Reglamento de eficiencia energética en instalaciones de alumbrado exterior y sus Instrucciones técnicas complementarias EA-01 a EA-07. 4.9. Multimedia La sección multimedia cuenta por el momento con una sección dedicada a documentales y especiales sobre electricidad, por el momento cuenta con varios especiales de Informe semanal y Documentos TV que enlazan directamente con la página de RTVE. Para esta sección he ido tan atrás en el tiempo cómo me han permitido los archivos digitalizados de RTVE. Por el momento estos son los David López Aznar Clásicos de la Electricidad Capítulo IX. Clásicos de la electricidad 115 documentales: #Documentos TV #En busca de la energía. (Martes, 9 de Junio de 2009). #Informe Semanal #La cuestión de los residuos nucleares. (Sábado, 6 de Febrero de 2010). #Cierre de Garoña, de momento no. (Sábado, 4 de Julio de 2009). #Una factura con carga. (Sábado, 12 de Julio de 2008). #Debate nuclear. (Sábado, 29 de Abril de 2006). #Chernobil en la memoria. (Sábado, 22 de Abril de 2006). #Endesa, alta tensión. (Sábado, 25 de Febrero de 2006). Esta sección cuenta además con un monográfico sobre tormentas, en el que se pueden encontrar fotografías y vídeos grabados por el autor. 4.10. Cursos En esta sección quiero ir añadiendo, pequeños monográficos, ejercicios resueltos, propuestos, anexos y tablas que permitan a los navegantes iniciarse poco a poco en el mundo de la electricidad. Por el momento cuenta con los siguientes documentos: #Anexo con prefijos del Sistema Internacional de Unidades. 4.11. Autor En esta sección me presento a los usuarios del portal, facilitando mi correo electrónico para que puedan realizar comentarios y sugerencias. Además expongo una breve biografía sobre mi persona y explico las razones y aficiones que motivaron la creación del portal, el texto es el siguiente: Acerca de clásicos Como autor de clásicos de la electricidad pretendo fomentar la lectura de las obras de grandes científicos de la historia. Por ello decidí embarcarme en este proyecto de recopilación de textos originales que por su antigüedad son ya de dominio público. La afición por estas lecturas viene de mi época universitaria, cuando llegaron a mis manos Reglas y consejos sobre investigación científica de Don Santiago Ramón y Cajal y Historia química de una vela de Michael Faraday. Si bien el interés que sentía por estas personalidades ya era grande, creció exponencialmente al leerlos. David López Aznar Clásicos de la Electricidad Capítulo IX. Clásicos de la electricidad 116 Embarcarme en este proyecto ha sido muy importante para mí. Permitiéndome recuperar mi vieja afición por los ordenadores y obligándome a formarme debidamente en el campo del diseño web. A la vez, he continuado leyendo y buscando textos antiguos sobre mi pasión “la electricidad”. Los cambios y mejoras en el portal se irán produciendo poco a poco, conforme mis ratos libres me lo permitan. Pero estos cambios serán constantes, ya que es un proyecto en el que quiero trabajar por mucho años. David López Aznar. 5. Mirando al futuro de un portal con vistas al pasado Marty McFly y el doctor Emmett Brown (Doc) podían viajar en el tiempo con su De Lorean (esa es la magia de la ciencia ficción), nosotros no, pero al menos podemos leer y ver las obras que nos legaron los guardianes del camino del conocimiento. Podemos divagar sobre el futuro, aventurarnos a imaginar cómo será el clásicos de la electricidad de la segunda década del tercer milenio. 5.1. Parcela Técnica En la parcela técnica, probablemente migraré el portal a las especificaciones HTML 5 y CSS 3. Si bien por ahora la especificación HTML 5 se encuentra en desarrollo experimental y la compatibilidad de CSS3 varía según los navegadores creo que se subsanaran estos problemas en un futuro no muy lejano. Tal es mi confianza en ello que he comenzado a hacer pruebas en mi página personal http://www.dlopez.eu con estas tecnologías con resultados algo dispares según los navegadores pero razonables en todos los casos. 5.2. Parcela Histórica En la parcela histórica sigo buscando documentos para recuperar. Por ahora un listado más o menos inmediato que quiero recuperar es el siguiente: Documentos: #FARADAY, Michael. Experimental Researches in Electricity. (1839, 1844 y 1855). (3 tomos). #FARADAY, Michael. The chemical history of a candle. (1861). #FARADAY, Michael. A course of six lectures on the various forces of matter and their relations to each other. (1860). #GILBERT, William. De Magnete. (1600). David López Aznar Clásicos de la Electricidad Capítulo IX. Clásicos de la electricidad 117 Cita de la canción “Man in the mirror”, del LP de 1987 Bad de Michael Jackson, fue escrita y 56 compuesta por Siedah Garrett y Glen Ballard. Tanto le gustaba a Michael esta cita que además la citaba al final del disco en la zona de agradecimientos y autorías. Tal vez como agradecimiento Michael hacía un dueto con Siedah en la siguiente canción del disco “I just can’s stop loving you”, compuesta por él. #MAXWELL, James Clerk. A treatise on electricity and magnetism. (1873). (2 tomos). Biografías: #GLADSTONE, J. H. Michael Faraday. (1872). #THOMPSON, Silvanus P. Michael Faraday: his life and work. (1898). 6. Proyecto personal Para mi clásicos de la electricidad es mucho más que el nombre de un portal de internet o de mi proyecto final de carrera. Para mi ha sido el cauce que me ha permitido ahondar en la búsqueda de preguntas del tipo ¿Quién soy?, aunque pueda resultar paradójico no me preocupan demasiado las respuestas, me preocupa más la búsqueda, me preocupa más el camino seguido, me preocupa más la evolución seguida. Puede resultar chocante en una sociedad en la que se buscan resultados inmediatos. Pero sigo pensando que de vez en cuando hay que mirar bien adentro para que el cambio se note fuera. «If you want to make the world a better place, take a look at youself and make a change. » 56 «Si quieres hacer del mundo un lugar mejor, mirate y haz cambios.» Siedah Garrett & Glen Ballard. Compositores estadounidenses. Traducción David López Aznar. Implicarse emocionalmente en los proyectos en los que uno trabaja puede resultar doloroso, pero de esa implicación surgen obras de mayor calado y trascendencia. En ocasiones el desánimo, el miedo al rechazo y las exigencias que nos imponemos nosotros mismos, nos llevan a desechar o dejar en la reserva obras que con algunos cambios podrían ser maravillosas. Como ejemplo de búsqueda personal y enemigo interior propongo la siguiente letra de Santiago Auserón que fue desechada en 1984 y finalmente recuperada con acierto en 1997. David López Aznar Clásicos de la Electricidad Capítulo IX. Clásicos de la electricidad 118 La noche de fuego Letra y música: Santiago Auserón. Cuando la luz se apaga caen mis brazos como papel de seda en aguas del océano más negro El viento las cenizas me trae del mundo que ayer hice arder vienen a recordarme el precio Como un perro acosado un loco fugitivo que lleva al enemigo en su interior Voy buscando un arroyo que apague la marea de fuego pero el ruido del mar me retiene en un rincón de esta playa Cuatro pedazos de fotografía cuyos rostros me hablan aún palabras lanzadas a un blanco que corre desnudo Como un perro acosado un loco fugitivo que lleva al enemigo en su interior Voy buscando un arroyo que apague la marea de fuego pero el ruido del mar me retiene en un rincón de esta playa Rarezas. Radio Futura. (1992) Luis Auserón: Bajo. Enrique Sierra: Guitarra eléctrica. Santiago Auserón: Voz, guitarra eléctrica, sintetizador, ruidos. Batería programada por el grupo. Grabada en cassette 4 pistas en “Torre Áurea”, El Escorial, el mes de Noviembre de 1984. Maqueta para “De un país en llamas”. Transferido a 16 pistas, sincronizado y rearreglado en casa de Enrique, Madrid, el mes de Julio de 1992, por Enrique Sierra y Luis Auserón. La huella sonora. Juan Perro. (1997) Santiago Auserón: Voz, armónica. John Parsons: Guitarra eléctrica, acústica, slide Weissenborn. Francisco Amat: Tres cubano, coro. Javier Colina: Contrabajo, coro. Moisés Porro: Batería, percusiones, coro. Descubrí esta canción en las navidades de 2001-2002 justo el año en que entre en la carrera. Aparecía en un álbum de Rarezas que sólo estaba disponible en el primer cofre de Radio Futura que edito en formato Compact Disc la compañía Ariola. David López Aznar Clásicos de la Electricidad Capítulo IX. Clásicos de la electricidad 119 Esa era la huella sonora del Radio Futura de “De un país en llamas”, sonido innovador que ya 57 había comenzado con Oscuro affaire del disco anterior “La ley del desierto / La ley del mar”. Creo que era Martes. 58 La noche de fuego sonaba por entonces algo siniestra , si bien era de las canciones 57 que más me gustaban de ese disco. En las fiestas del Pilar de 2002, un día al salir de las clases de Fernando 58 Artero de Instalaciones eléctricas me acerqué a un concierto de la plaza de El Pilar en la que actuaban Gabriel Sopeña, Especialistas, Distrito 14 y finalmente Juan Perro en su gira “Cantares de vela”. Decir que el concierto se alargó hasta cerca de las 2 de la madrugada, con dos horas y media de concierto por parte de Santiago y 2 bises incluidos. La canción encargada de abrir el concierto de Juan Perro fue La noche de fuego, pero en una versión totalmente nueva y sorprendente para mi, el tema era de su época de exploración del son cubano con Raíces al viento y La huella sonora, si bien con Mr. Hambre había vuelto al rock, y con Cantares de vela exploraba el jazz. Como puede observarse Santiago, filósofo y músico continuaba en su búsqueda de un arroyo que apagara la marea de fuego, en búsqueda de un nuevo sonido, continuaba buscando nuevas formas para sus canciones, continuaba buscandose asimismo. En definitiva el trabajo de exploración que ha realizado durante todos estos años ha sido de gran valor para él, para los que seguimos su trabajo, y para quienes han continuado los caminos que ha ido abriendo a lo largo de los años. Sobre los caminos que se abren infinitos a nuestros pies otro especialista es Antonio Vega Tallés, una persona muy grande a la que le daba miedo la enormidad. La canción que he escogido forma parte de su último LP de estudio “3000 noches con Marga” y lleva por nombre Caminos infinitos. Caminos infinitos Letra y música: Antonio Vega Tallés Recorrió con la mirada las esquinas del papel Y una puerta dibujada se abriría para él Descubriendo al otro lado y más allá de lo que alcanza a ver Los caminos infinitos infinitos a sus pies Se amontonan tantos años uno a uno, diez a diez La luz de la mesilla ilumina hoy letras de ayer De las anchas calles al estrecho callejón Del mechero al primer fuego de la cima al socavón Hay, caminos infinitos Para encontrar otra luz de cruce (otra luz de cruce) otra señal de bus Recuperar (recuperar) cada uno su razón y mi desordenada habitación David López Aznar Clásicos de la Electricidad Capítulo IX. Clásicos de la electricidad 120 Un camino se adentraba en los campos que soñé Con el otro se cruzaba el camino del saber Y yo en la encrucijada busco la respuesta a un porqué Busco el camino infinito que va desde el 9 al 10 Hay, caminos infinitos Para encontrar otra luz de cruce otra señal de bus Recuperar (recuperar) cada uno su razón y mi desordenada habitación (mi desordenada habitación) Hay, caminos infinitos... ... Uhh... Caminos y caminos... Uhh... ... Uhh... Caminos infinitos... ... Caminos y caminos... ... Caminos infinitos... ... infinitos Recorrió con la mirada las esquinas del papel Y una puerta dibujada se abriría para él Descubriendo al otro lado más allá de lo que alcanza a ver Los caminos infinitos infinitos a sus pies (infinitos a sus pies) Se amontonan tantos años uno a uno, diez a diez La luz de la mesilla ilumina hoy letras de ayer De las anchas calles al estrecho callejón Del mechero al primer fuego de la cima al socavón Hay, caminos infinitos Hay, caminos infinitos ... y caminos, y caminos... 3000 noches con Marga. Antonio Vega. (2005) Antonio Vega: Voz, coros, guitarra eléctrica, guitarra acústica, bajo, batería. Jorge D’anrco: Coros, guitarra eléctrica, guitarra acústica. Luismi Baladón: Coros, bajo. Toni Jurado: Batería. Angie Pao: Batería. Fijarse en que Antonio toca todos los instrumentos, al igual que el beattle Paul McCartney en algunos temas de su Chaos and creation in the backyard del mismo año, un signo más de la implicación de Antonio con ese disco homenaje a su chica. Durante ese curso tuve la suerte de ir a un concierto de Antonio en el Teatro Principal, al que recuerdo que llegué con el tiempo justo tras salir de la clase de electrónica de Sergio Artal, por eso recuerdo que era Martes, cosa que se puede confirmar con la entrada, si bien la tinta no era de las buenas cómo se puede observar en la imagen. Recuerdo a un Antonio poderoso y elegante a la guitarra, que consiguió ganarnos con sus tesoros. David López Aznar Clásicos de la Electricidad Capítulo IX. Clásicos de la electricidad 121 Las canciones de Antonio han sido durante los últimos años de gran influencia para mí, al volver a casa por la noche su voz era una voz familiar, y sus letras me invitaban a la reflexión, tristes y a la vez con un punto de esperanza, “Y es que hoy, aún quedan ojos que mirar, no se oiga ni una queja más”. Por eso la muerte de este extraño tan familiar me resulto tan dolorosa. Muestra de esa implicación emocional de la que hablaba páginas atrás, muestro la carta de despedida que prepare tan sólo dos días después de su muerte. Carta de despedida a un maestro (que me prometió que no se iría mañana) Zaragoza, Jueves, 14 de Mayo de 2009. Estimado maestro: Según la Real Academia de la Lengua Española maestro significa «(…) persona (…) de mérito relevante entre las de su clase». Pocas veces ha sido esto más cierto que en tu caso. El Martes me sorprendió la noticia de tu marcha definitiva. Ese mismo día se marchaba para siempre un pedazo de mi vida, y sin duda de la de mucha gente. Lloré amargamente. Me enteré escuchando al ‘oldie’, al que se oía muy afectado. Fueron muchas las muestras de cariño por parte de los oyentes. Fueron muchos los corazones doloridos. El Miércoles, sentí la tierra abrirse de par en par. Vi al cielo llorar amargamente y escuché su portentoso llanto. Cielo roto, agujeros en la inmensidad. A partir de ahora tendré que volver a enfrentarme a tus canciones como tantas veces antes. Cada vez será distinto, tristeza y alegría, nostalgia y esperanza, introspección y extroversión, lugares conocidos y por descubrir. Figura 41. Entrada original algo maltrecha del concierto de Antonio Vega en el Teatro Principal de Zaragoza el 7 de Marzo de 2006. David López Aznar Clásicos de la Electricidad Capítulo X. La Búsqueda de la excelencia 128 60http://www.google.es/cse/ 61http://es.search.yahoo.com/info/addsearchdetail 2.2. W3C Validator para CSS Podemos revisar el código CSS con el siguiente validador del W3C que se encuentra disponible en la siguiente página web: http://jigsaw.w3.org/css-validator/. Al igual que en el caso anterior el W3C nos facilita el código a añadir como enlace al validador. Como los resultados del validador son muy similares a los del punto anterior no se incluye ninguna imagen. 2.3. W3C Validator para feeds RSS Para revisar el código de los feeds RSS podemos utilizar el siguiente validador del W3C: http://feed.w3.org/, al igual que en los casos anteriores se nos avisará de todo lo que tengamos que modificar, y se nos facilitará el código a añadir para validar desde nuestra propia página. 3. Clásicos y los buscadores 3.1. Integrar las búsquedas en nuestro portal Una de las principales tareas que podemos llevar a cabo dentro de Clásicos de la electricidad es la búsqueda entre las páginas del portal. Cuestión que irá cobrando más sentido conforme más crezca el portal. Supongamos que queremos saber todas las páginas en las que aparece la palabra Wimshurst, tan sólo tenemos que utilizar esta búsqueda en el portal para descubrir en qué páginas se encuentra. Estas funcionalidades las aportan Google y Yahoo que nos facilitan el código 60 61 necesario desde sus correspondientes páginas web. La experiencia me dice que el código dado no cumple el estándar W3C pero funciona, si queremos dejarlo limpio de errores hay que realizar las pruebas vistas anteriormente y hacer las oportunas correcciones. A continuación facilito el código ya corregido de Yahoo. <form method="get" action="http://es.search.yahoo.com/search"> <p> <input type="radio" name="vs" value="" id="ysvs0" checked="checked" /> <label for="ysvs0"><!-- Icono busqueda mundial --></label> <input type="radio" name="vs" id="ysvs1" value="<!-- URL del portal -->" /> <label for="ysvs1"><!-- Icono busqueda portal --></label> <input type="text" name="p" size="12" /> <input type="hidden" name="fr" value="yscpb" /> <input type="image" src="../imgs/buscadores/yahoo.png" /> </p> </form> David López Aznar Clásicos de la Electricidad Capítulo X. La Búsqueda de la excelencia 129 62http://www.bing.com/siteowner 63http://sitemaps.org/es/protocol.php El código de Google: <form method="get" action="http://www.google.com/search"> <p> <input type="radio" name="sitesearch" value="" checked="checked" /> <!-- Icono busqueda mundial --> <input type="radio" name="sitesearch" value="<!-- URL del portal -->" /> <!-- Icono busqueda portal --> <input type="hidden" name="ie" value="UTF-8" /> <input type="hidden" name="oe" value="UTF-8" /> <input type="text" name="q" size="12" maxlength="255" value="" /> <input type="image" name="btnG" src="../imgs/buscadores/google.png" /> <input type="hidden" name="domains" value="<!-- URL del portal -->" /> </p> </form> En el momento de incluir esta funcionalidad en Clásicos no encontré cuadro de búsquedas de Microsoft, en la actualidad se puede integrar con su buscador Bing . 62 3.2. Darse de alta en los principales buscadores Para facilitar la localización de nuestros dominios a los buscadores lo mejor es utilizar sus servicios de alta. #Yahoo http://siteexplorer.search.yahoo.com/es/free/request #Google http://www.google.co.ve/addurl/?continue=/addurl #Bing http://www.bing.com/webmaster/SubmitSitePage.aspx 3.3. Mejorando nuestra presencia en internet (sitemaps) Si queremos ganar posiciones en los resultados de búsqueda deberemos crear contenidos de calidad, obtener el mayor número de visitas posibles, y conseguir un buen número de enlaces de sitios de calidad. Ya que en la actualidad no es suficiente con las etiquetas meta de la cabecera, deberemos considerar otras opciones cómo la creación de ficheros sitemap facilitando la indexación de nuevas páginas del portal a los buscadores. Los ficheros sitemap, son ficheros xml que incluyen una lista de direcciones de páginas, la prioridad, frecuencia de modificación, y última modificación de cada una de ellas... Para trabajar con ellos basta con estudiar la información facilitada en la web del protocolo. 63 David López Aznar Clásicos de la Electricidad Capítulo X. La Búsqueda de la excelencia 130 64http://www.bing.com/toolbox/webmasters/ 65http://www.google.com/webmasters/tools/ 66http://es.docs.yahoo.com/servicios-web-search.html 67http://www.google.com/analytics/ 4. Herramientas para webmasters Bing , Google y Yahoo proporcionan algunas herramientas gratuitas que 64 65 66 resultan muy interesantes a la hora de mejorar nuestra presencia en internet, son las llamadas herramientas para webmasters. También hay herramientas que nos permiten analizar el tráfico que reciben nuestras páginas, Google nos proporciona una gratuita de nombre Analytics con la 67 que podemos obtener completos informes. En la siguiente imagen se muestra el resumen de un informe del portal Clásicos de la electricidad, que como se puede observar incluye información sobre el número de visitas, usuarios, procedencia, páginas más visitadas, visitas por día, e infinidad de información valiosa. Figura 44. Informe de Google Analytics de Clásicos de la electricidad. David López Aznar Clásicos de la Electricidad Capítulo X. La Búsqueda de la excelencia 131 5. Posibles mejoras (la búsqueda continúa) 5.1. Accesibilidad Si bien he tratado de hacer las páginas facilitando tanto como he sabido su lectura a las personas invidentes, todavía me queda mucho que aprender en este terreno. Por ello me propongo estudiar más adelante las recomendaciones WCAG 1.0 en sus tres niveles A, AA y AAA. Y una vez asimiladas intentar pasar a las recomendaciones WCAG 2.0. El objetivo principal es el de eliminar barreras y llegar con la máxima calidad a cuanta más gente mejor. Todo ello supondrá, nuevas revisiones de código y pasar algunas pruebas más. Algunas páginas a visitar para trabajar en este sentido son las siguientes: #http://cidat.once.es/home.cfm?id=701&nivel=2 #http://www.w3c.es/Traducciones/es/WAI/intro/accessibility #http://www.w3c.es/Traducciones/es/WAI/intro/wcag #http://www.tawdis.net/ David López Aznar Clásicos de la Electricidad Capítulo XI. The Art of the Lecture 133 Capítulo 18, página 185 de opción 2 citada en bibliografía. 68 Capítulo XI. The art of the lecture –Experiencia docente– bB «Una buena conversación debe agotar el tema, no a sus interlocutores. » 68 Winston Churchill (1874-1965). Político británico. Bb 1. Introducción La cita anterior nos marca el camino de lo que deberían ser nuestras apariciones ante una audiencia dispuesta a escucharnos, ya seamos profesores dando una clase, sacerdotes predicando la homilía, políticos en un acto de campaña o cualquier otra persona que deba hablar en público. En este empeño he estado trabajando los últimos años durante mis clases, y en todos los actos en los que me he visto obligado a hablar en público. He intentado siempre conseguir que el público y el alumnado no se aburriera, que tuviera bien despiertos los ojos, que prestara atención, pero esto que es tan fácil de decir no es fácil de conseguir. Precisamente por no ser fácil, admiro tanto a algunos de los profesores que he ido teniendo a lo largo de los años y que han sabido transmitirnos ese entusiasmo por aprender. De entre todos los comunicadores hay uno especial para mí, un comunicador de otro tiempo cuya leyenda llega hasta nuestros días, admirado por muchos entonces y ahora. Un comunicador cuyas palabras impregnaron las páginas de los libros y de esta forma fueron transmitidas de generación en generación. Sin más dilación, señoras y señores les presentó a Michael Faraday, el hombre culpable de que me embarcará en semejante proyecto hace ya algunos años. La figura de Michael Faraday me resulto fascinante gracias a las clases de electricidad y magnetismo de Antonio Pardina. Antonio Usón, Jesús Letosa y Joaquín Mur reforzaron ese interés, gracias a los vídeos del Universo mecánico del profesor David Goodstein, que se emitieron durante algunas sesiones de prácticas. He de decir David López Aznar Clásicos de la Electricidad Capítulo XI. The Art of the Lecture 134 Este pasaje de su vida aparece tal cual lo he encontrado en unos libros que recientemente 69 adquirí por internet. El primer fragmento es el original en inglés (págs. 69-70 de la opción 7 citada en bibliografía) y el segundo una traducción a castellano publicada poco después en Argentina (págs. 72-73 de la opción 8 citada en bibliografía). que esos maravillosos vídeos cumplen a la perfección esa labor de comunicar y divulgar manteniendo el interés del espectador. La biografía de Michael Faraday es una de las más interesantes que he conocido, y ha dado para llenar cientos de libros. De entre todos los posibles instantes escojo el momento que bajo mi humilde opinión cambio su vida, porque entonces y ahora las cosas pueden cambiar en un abrir y cerrar de ojos. Se trata del momento69 en el que Faraday conoce a Sir Humphry Davy, persona que con el tiempo se convertiría en su maestro y mentor. Quien iba a decir por entonces, que el discípulo con los años terminaría superando en fama y logros a su maestro. His last course of lectures as the Royal Institution’s professor was announced in 1812. A youth named Michael Faraday was given a ticket for the lectures by a Mr. Dance. Faraday carefully made notes of the lectures, which filled 386 pages of manuscript. This famous book still exists in the library of the Royal Institution. Faraday wrote to Davy near the end of 1812 explaining that he wished to escape from trade, which he thought vicious and selfish, and serve science, which he imagined made its pursuers amiable and liberal. He therefore asked for any laboratory appointment that might be available, and enclosed his notes of the lectures as evidence of his fitness. Davy replied: “Decemb. 24th, 1812 Sir, I am far from displeased with the proof you have given me of your confidence, and which displays great zeal, power of memory and attention. I am obliged to go out of town, and shall not be settled in town till the end of January. I will then see you at any time you wish. It would gratify me to be of any service to you. I wish it may be in my power. I am, Sir, your obedient humble servant, H. DAVY.” Early in 1813 he sent for Faraday and told him of the situation of assistant in the Laboratory, then vacant. He still advised him not to lose his prospects as a bookseller’s apprentice, saying science was a harsh mistress, and smiled at his notion concerning the superior moral feelings of philosophic men, saying he would leave him the experience of a few years to set him right on that matter. David López Aznar Clásicos de la Electricidad Capítulo XI. The Art of the Lecture 135 Su última serie de conferencias como profesor de la Royal Institution fué anunciada en 1812. Un señor Dance regaló una entrada para las conferencias a un joven llamado Michael Faraday. Éste tomó notas cuidadosamente en las conferencias, llenando trescientas ochenta y seis páginas de manuscrito. Este libro famoso existe aún en la biblioteca de la Royal Institution. Faraday escribió a Davy hacia el final de 1812, explicándole que deseaba escapar del comercio, que consideraba inmoral y egoísta, y quería servir a la ciencia, la que, imaginaba, hacía liberales y amables a sus cultores. En consecuencia solicitaba cualquier cargo de laboratorio que hubiera vacante, e incluía sus notas de las conferencias como prueba de su capacidad. Davy replicó: «Diciembre 24 de 1812. »Señor: »Estoy muy satisfecho con la prueba que me ha dado de su confianza, y que revela gran entusiasmo, capacidad de retención y atención. Me veo obligado a ausentarme de la ciudad y no volveré definitivamente hasta fin de Enero. En esa oportunidad estaré dispuesto a recibirlo cuando usted quiera. » Me agradaría poder serle de utilidad, y espero que esto estará en mi poder. »Soy su seguro servidor, »H. DAVY.» A principios de 1813 mandó buscar a Faraday y le habló de la plaza de ayudante de laboratorio, que se hallaba vacante. Le aconsejó aún que no perdiera de vista sus posibilidades como aprendiz de librero, diciéndole que la ciencia era una amante desapacible, y respondiendo con una sonrisa a las ideas de Faraday sobre los sentimientos morales superiores de los filósofos, diciéndole que la experiencia de unos cuantos años le cambiaría las ideas al respecto. De este momento trascendental para la historia de la ciencia y por ende de la humanidad, se desprende entusiasmo e idealismo por parte del joven Faraday y gratitud y realismo por parte de Davy. Puede que Davy tengan razón, y el idealismo se vaya desvaneciendo con el tiempo. Las palabras de Davy no desanimaron a Faraday que acepto el trabajo de ayudante de laboratorio, y no tardaría en irse de viaje por Europa como su ayudante. Sin dejar de darle la razón a Davy que la tiene, me gusta seguir creyendo en los valores que defendía Faraday. Faraday no era un hombre convencional, y su ilusión y entusiasmo se vieron casi intactos a lo largo de su vida. Fue muy activo y prolífico a lo largo de toda su carrera, salvo un breve período de tiempo hacía la primera mitad de la década de 1840 por enfermedad. Muestra de ello son las conferencias de los Viernes por la tarde que pronunciaba habitualmente. Y sobre todo los ciclos de conferencias de Navidad para jóvenes en los que participó en más ocasiones que nadie. David López Aznar Clásicos de la Electricidad Capítulo XI. The Art of the Lecture 136 Las conferencias de Navidad se han seguido celebrando cada año, salvo durante la Segunda Guerra Mundial. Puede consultarse la lista completa de ciclos de conferencias de Navidad de la Royal Institution en el anexo G. En el gráfico anterior podemos comprobar como Faraday con 19 ciclos de conferencias de Navidad es la persona que más veces ha participado en ellas, doblando el número de intervenciones del tercer clasificado. Observar en el gráfico, cómo en la sección «Personas que han participado más de una vez» del anexo G, la mayoría de las personas que han impartido conferencias en más de una ocasión lo hicieron en el siglo XIX. Esto lo achaco a que entonces, no era tanta la gente que accedía a estudios universitarios como en la actualidad. Lo bueno de que actualmente haya distintos conferenciantes cada año, es la variedad temática que permite. Eso no resta importancia a ninguno de los conferenciantes del podio, puesto que si lo hubieran hecho mal alguna vez, no les habrían vuelto a ofrecer la participación. Los dos últimos ciclos de conferencias aparecieron publicados en forma de libro y fueron editados por Sir William Crookes. Dichos ciclos de conferencias son “The various forces of matter and their relations to each other” y “The chemical history of a candle”, su ciclo de conferencias más conocido, que actualmente puede encontrarse en castellano, veáse la opción 12 citada en bibliografía. En el anexo G puede encontrarse el texto de un periódico de la época en el que hay un especial sobre Faraday en el que se puede observar el interés que suscitó su último ciclo de conferencias. También se pueden encontrar unos consejos para el conferenciante bajo el título «Michael Faraday on the Art of the Lecture». Figura 45. Podio de los conferenciantes que más veces han participado en las conferencias de Navidad de la Royal Institution. David López Aznar Clásicos de la Electricidad Capítulo XI. The Art of the Lecture 137 Pág. 14, Introducción de la opción 2 citada en bibliografía. 70 Pág. 67, cap. 5 de la opción 2 citada en bibliografía. 71 Pág. 41, cap. 3 de la opción 2 citada en bibliografía. 72 2. Temas a tener en cuenta para preparar una charla A la hora de preparar un discurso debemos ser conscientes de que no podremos tener todo bajo control, pero que si al menos tratamos de cuidar todos los detalles al máximo, eso redundará en beneficio de nuestra audiencia. Todo lo que se hace repetidamente, se termina aprendiendo, y hablar en público no es ninguna excepción. Los dones de la elocuencia, la oratoria, la dialéctica y la retórica son dones con las que algunas personas nacen, pero en la mayor parte de los casos son cualidades que hemos de entrenar para que estén presentes en nuestras apariciones públicas. Con todas ellas debidamente entrenadas nos expresaremos con facilidad y claridad, informando 70 con precisión, demostrando con rigor y argumentando con eficacia. Con cada nueva oportunidad de hablar en público iremos cubriendo nuestras carencias y mejorando todos estos aspectos. Además de cuidar los aspectos anteriores deberemos cuidar nuestro discurso. Un discurso dignamente preparado –si somos nuevos en este campo– nos llevará varias semanas de trabajo, para hablar en muchos casos tan sólo una hora. Para facilitarnos las cosas podemos seguir el proceso de producción de un discurso de 71 Aristóteles, que se divide en las siguientes fases: 1. Inventio: Encontrar y definir el tema del que se va a hablar. 2. Dispositio: Estructurar y disponer las diversas partes del discurso. 3. Elocutio: Seleccionar las palabras, utilizar los recursos retóricos, imágenes, etc... 4. Memoria: Memorizar el discurso. 5. Actio: Actuar, realizar la acción de emitir el discurso. Durante el actio, podemos presentar nuestro discurso mediante alguna de las siguientes formas : 72 #Improvisación total. #Improvisación preparada. #Memorización de un texto. #Lectura de un texto. Figura 46. Tribuna vacía, a la espera de alguien que pronuncie un discurso.