Está en la página 1de 21

Aplicaciones web

Jess Nio Camazn

1
vamos a conocer...
2. Lenguajes de marcas 4. Hojas de estilo 5. Lenguajes de script de servidor 6. Herramientas de diseo web

Introduccin a las aplicaciones web

1. Esquema de funcionamiento de un servicio web 3. Lenguajes de script de navegador

7. Relacin entre pginas web y bases de datos PRCTICA PROFESIONAL Disear la pgina web de una empresa MUNDO LABORAL Los magos del posicionamiento en buscadores

y al finalizar esta unidad...


Identificars los elementos de un servicio web. Conocers los lenguajes de marcas. Crears pginas web utilizando lenguajes de marcas. Conocers el funcionamiento de los scripts en los navegadores. Editars hojas de estilo. Conocers el funcionamiento de los scripts en los servidores. Elegirs herramientas de diseo web que se adapten a tus necesidades. Relacionars pginas web y bases de datos.

CASO PRCTICO INICIAL situacin de partida


Antonio le ha pedido a su amigo Jos el diseo de la pgina web de su empresa, que se llama Esos4; la empresa est especializada en programas de gestin y aplicaciones para la Web 2.0. Jos tiene algunos conocimientos de marketing y conoce la disciplina SEO (Search Engine Optimization, optimizacin para motores de bsqueda). El objetivo de la optimizacin es mostrar las pginas web en los primeros resultados de las bsquedas que se realizan en los buscadores como Google, Bing, Yahoo En este caso, Jos est interesado en posicionar la pgina de la empresa de Antonio en el primer puesto de las bsquedas aplicaciones web 2.0. El posicionamiento de las pginas se consigue creando pginas web sin errores y cumpliendo los estndares del W3C (World Wide Web Consortium). Si se respetan los estndares, los buscadores pueden recorrer las pginas sin problema. Para facilitar la labor a los buscadores tambin es necesario incluir una buena descripcin en las cabeceras de las pginas que se van a disear. Jos crear las pginas en el lenguaje de marcas HTML y sern estticas y sin JavaScript. Por otro lado, Esos4 le ha informado de que en un par de meses quieren incorporar un apartado de noticias. Jos se est planteando incluir un gestor de contenidos en el desarrollo web.

estudio del caso


1. Qu son los estndares? 2. Merece la pena hacer caso de las recomendaciones de los estndares abiertos para facilitar el recorrido a los buscadores? 3. Qu es el posicionamiento? 4. Cmo posicionar mejor las pginas? 5. Qu es SEO, para qu sirve? 6. Qu es un lenguaje de marcas? 7. Qu es HTML? 8. Qu interesa ms, pginas estticas o dinmicas? 9. Qu es una hoja de estilo? Facilita el recorrido a los buscadores? 10. Para qu sirve un script? 11. Qu es JavaScript? 12. Qu herramientas son necesarias para disear pginas web?

Unidad 1

1. Esquema de funcionamiento de un servicio web


Un servicio web es un conjunto de protocolos y estndares con capacidad para intercambiar datos entre aplicaciones. Las aplicaciones de software son mecanismos que utilizan los usuarios para comunicarse y son desarrolladas en diferentes lenguajes de programacin; estos son formas de crear aplicaciones software que se ejecutan en un equipo informtico. Las aplicaciones intercambian datos en redes de ordenadores. Por ejemplo, en Internet, la forma de intercambiar datos entre aplicaciones se realiza por medio de reglas denominadas protocolos que establecen la comunicacin entre clientes y servidores; los clientes son los usuarios que, mediante aplicaciones como los navegadores web, se comunican con otros ordenadores e interactan con ellos.

caso prctico inicial


Los diseadores de pginas web deben cumplir los estndares del W3C y utilizar las herramientas del W3C para reconocer, orientar y ayudar a corregir errores en las pginas web.

Adems de los protocolos, los estndares tambin forman parte de los servicios web. Los estndares son especificaciones disponibles pblicamente para lograr una tarea especfica. Un ejemplo de estndares son los del W3C (World Wide Web Consortium); este tipo de organizaciones son comits responsables de la arquitectura y reglamentacin de los servicios web, y su objetivo principal es la creacin de estndares web y pautas. Desde 1994, el W3C ha publicado ms de ciento diez estndares, denominados Recomendaciones del W3C. Los servicios web comunican diferentes aplicaciones software independientemente de las plataformas sobre las que se instalen, la capacidad para comunicar mltiples sistemas diferentes se realiza por medio de protocolos y estndares abiertos.

saber ms
Estndar W3C: http://www.w3.org

En el esquema de funcionamiento bsico de un servicio web intervienen: Clientes: son quienes hacen las peticiones (navegador web). Servidores: programas que se ejecutan continuamente en un ordenador, a la espera de que les lleguen las solicitudes de los clientes y responden mediante una pgina web (servidor web). Aplicaciones de software: mecanismos que utilizan los clientes y los servidores para comunicarse (navegador web). Lenguaje de programacin: forma de crear las aplicaciones software (C++). Red de ordenadores: conjunto de ordenadores y/o dispositivos conectados por medio de cables, seales, ondas o cualquier otro mtodo de transporte de datos que comparten informacin (Internet). Protocolos: conjunto de reglas utilizadas en la comunicacin entre los clientes y los servidores HTTP (HyperText Transfer Protocol), diseado para transferir pginas HTML. Estndares: conjunto de reglas normalizadas que describen los requisitos que deben ser cumplidos por un producto, proceso o servicio, con el objetivo de establecer un mecanismo base para permitir que distintos elementos hardware o software que lo utilicen sean compatibles entre s. Uno de los estndares ms conocidos es el HTML (HyperText Markup Language), un lenguaje de marcas utilizado para definir la estructura de los documentos; de esta forma todos comparten el mismo lenguaje para la representacin de la informacin. Al usar el mismo formato para el desarrollo se consigue que cualquier usuario que interprete dicho lenguaje represente el documento de la web de la misma forma.

Introduccin a las aplicaciones web

2. Lenguajes de marcas
Los lenguajes de marcas sirven para codificar documentos. La codificacin se realiza incorporando etiquetas o marcas que tienen informacin adicional acerca de la estructura del texto. Las marcas son cdigos que indican a un programa cmo debe tratar su contenido; si se desea que un texto aparezca con un determinado formato, dicho texto debe ir delimitado por la correspondiente marca que indique cmo debe ser mostrado. El lenguaje de marcas ms popular es el HTML, siglas de HyperText Markup Language (Lenguaje para el Formato de Documentos de Hipertexto), el lenguaje usado por la World Wide Web. Otros ejemplos de lenguajes de marcas son XHTML (Extensible HyperText Markup Language), RSS 2.0 (Really Simple Syndication), RTF (Rich Text Format), etc. La versin actual del HTML es el HTML 4.01, que es una revisin del HTML 4. Este tiene mecanismos para utilizar hojas de estilo, ejecucin de scripts, marcos, tablas ms ricas y otras ventajas que pueden consultarse en la especificacin del HTML 4.01. HTML es el lenguaje utilizado para construir pginas web. Mediante una estructura se crea contenido en forma de texto; asimismo, se puede incorporar otro tipo de elementos a ese contenido, como imgenes, sonidos HTML se escribe mediante etiquetas rodeadas entre los signos de menor que y mayor que (<,>) y algunas tienen atributos que pueden tomar algn valor. La mayora de las etiquetas deben cerrarse de igual modo que se abren. Para cerrar una etiqueta se utilizan los signos de mayor que y menor que y la barra(</,>). Por ejemplo, si tenemos la etiqueta <html> que indica el inicio de un documento HTML, el cierre ser </html>. Por convencin, los archivos de formato HTML utilizan la extensin .htm o .html. La extensin de un archivo es una cadena de caracteres que va unida al nombre de un archivo y precedida por un punto y cuya funcin principal es diferenciar el contenido del archivo de modo que el sistema operativo disponga del procedimiento necesario para ejecutarlo o interpretarlo. Para crear pginas web con HTML es necesario un editor de textos bsico, como puede ser el bloc de notas de Windows o cualquier otro editor que admita texto sin formato, como por ejemplo GNU Emacs, Microsoft Wordpad, TextPad, Vim, etc. Como hemos dicho anteriormente, HTML se escribe en forma de etiquetas.

saber ms
XHTML es ms esricto y similar a HTML pero con algunas diferencias. Ms informacin sobre XHTML: http://www.w3.org/MarkUp Especificacin de HTML: http://www.w3.org/TR/1999 /REC-html401-19991224 Existe un boceto de HTML 5: http://dev.w3.org/html5/ spec/Overview.html#intro duction

GNU Emacs.

Microsoft Wordpad.

10

Unidad 1

recuerda
Toda etiqueta est encerrada entre los signos menor que y mayor que (<, >), y algunas tienen atributos que pueden tomar un valor concreto. Se abren y se cierran; por ejemplo: <strong>negrita</strong> Algunas etiquetas no necesitan cerrarse como <hr>.

Las etiquetas que describen la estructura general de un documento son tres: <html>: limita el documento e indica que se encuentra escrito en este lenguaje; seala el inicio y el final del documento. <head>: cabecera del documento, especifica el prlogo del resto del archivo. Define la cabecera del documento HTML, suele contener informacin sobre el documento y no se muestra al usuario. Indica el ttulo y permite aportar metainformacin al documento, para su mejor identificacin e indexacin por los motores de bsqueda. <body>: encierra el contenido del documento. Define el contenido principal o cuerpo del documento. Esta es la parte del documento HTML que se muestra en el navegador; dentro de esta etiqueta pueden definirse propiedades comunes a toda la pgina, como color de fondo, del texto y mrgenes de la pgina web, el color de los enlaces visitados...

vocabulario
Metainformacin: datos adicionales que estn relacionados con la pgina y son transparentes al usuario.

EJEMPLO
Cmo crear una pgina web con un editor de textos bsico? 1. Abrimos un editor de textos bsico, por ejemplo el bloc de notas de Windows Vista (INICIO > PROGRAMAS > ACCESORIOS > BLOC DE NOTAS) y escribimos el siguiente cdigo:
<html> <! Mi primer ejemplo > <head> <title>Mi primera pgina</title> </head> <body> <p>Mi primera pgina</p> </body> </html>

2. Guardamos con extensin .html, el tipo de documento es: TODOS LOS ARCHIVOS (*.*). 3. Abrimos con un navegador, en este caso Mozilla Firefox aunque cualquier navegador puede servir.

Introduccin a las aplicaciones web

11

Etiquetas bsicas Estas etiquetas son generales y aparecen en cualquier documento HTML.
ETIQUETA <!DOCTYPE> <html>,</html> <head>,</head> <body>,</body> <! Comentario > FUNCIN Define el tipo de documento Define el inicio y el final de un documento HTML Define informacin sobre el documento Define el cuerpo del documento Define un comentario

Etiquetas del head Son las etiquetas que describen la cabecera del documento. El uso de estas etiquetas es transparente al usuario; sirven para poner el ttulo de la pgina y la metainformacin: la descripcin, keywords, autor, hoja de estilos
ETIQUETA <title>,</title> <meta name=description content= > <meta name=keywords content= > <meta name=author content= > <link rel=stylesheet href= > FUNCIN Define el ttulo del documento Define una descripcin del documento; la descripcin se escribe en content Define las keywords (palabras que identifican un documento) Define el autor del documento Define un recurso; por ejemplo, incluir una hoja de estilo

EJEMPLO
Contenido de la cabecera head. Para ver el cdigo fuente de una pgina pulsamos en VER del navegador y a continuacin en CDIGO FUENTE.

caso prctico inicial


Jos necesita posicionar en los primeros puestos de los buscadores la pgina de la empresa Esos4, por eso debe hacer una buena metadescripcin en la cabecera head. Las etiquetas metadescripcin son relevantes a la hora de aparecer en los resultados de los buscadores. Las tcnicas que permiten valorar el posicionamiento en buscadores para los sitios web se denominan SEO (Search Engine Optimization, optimizacin para motores de bsqueda).

12

Unidad 1

Etiquetas del body Etiquetas que sirven para mostrar los objetos de la pgina; por ejemplo, para dar formato a un texto, crear listas, tablas, insertar imgenes, sonidos, etc.

saber ms
Etiquetas HTML: http://www.w3schools.com/ html

ETIQUETA <h1> a <h6>, </h1> a </h6> <p>,</p> <br> <hr> <strong>,</strong> <i>,</i>

FUNCIN Define encabezados Define un prrafo Inserta una lnea en blanco Inserta una lnea Define un estilo para el texto, negrita Define un estilo para el texto, itlica Define un estilo para el texto, grande Define un estilo para el texto, pequeo Define un estilo para el texto, subrayado Define un estilo para el texto, subndice Define un estilo para el texto, superndice Centra un texto Define mrgenes Hipervnculo o enlace. Por ejemplo: <a href=http://www.google.com>Google</a> Imagen. Requiere del atributo src, indica la ruta en la que se encuentra la imagen. Por ejemplo: <img src=./imagen/foto.jpg> Define una tabla Define ttulo de una tabla Fila de una tabla Celda dentro de una tabla Define una lista Define una lista ordenada con nmeros Define los elementos de una lista Define un formulario

recuerda
Diferencias entre HTML y XHTML: En HTML la etiqueta es <br> sin cerrar. En XHTML la etiqueta se cierra <br />.

<big>, </big> <small>,</small> <u>, </u> <sub>, </sub> <sup>, </sup> <center>,</center> <blockquote> </blockquote> <a>,</a> <img>

<table>,</table> <caption>,</caption> <tr>,</tr> <td>,</td> <ul>,</ul> <ol>,</ol> <li>,</li> <form>,</form>

ACTIVIDADES
1. Crea una pgina web en la que el ttulo sea Mi primera pgina web. 2. Crea una pgina web que tenga los siguientes elementos: Ttulo: Esos4. Keywords: desarrollos, esos4, programacin, gestin, web, internet. Autor: Esos4. Descripcin: empresa especializada en aplicaciones Web 2.0.

Introduccin a las aplicaciones web

13

3. Lenguajes de script de navegador


Los lenguajes de script son lenguajes de programacin que sirven para crear programas que realizan acciones dentro de una pgina web, como por ejemplo cambiar dinmicamente el contenido de un documento, modificar el comportamiento normal del navegador, validar formularios, realizar pequeos trucos visuales, etc. Los scripts se ejecutan en el navegador del cliente al cargar la pgina o cuando sucede algo especial, como puede ser pulsar sobre un enlace. Conviene recordar que los scripts no se ejecutan en la mquina donde estn alojados, por lo que no podrn realizar algunas operaciones como manejar bases de datos en el servidor. El lenguaje de script que se utiliza en HTML es JavaScript. Fue desarrollado por Netscape Communications, y es el lenguaje de programacin del lado del cliente ms utilizado y compatible con la mayora de los navegadores actuales. Es un lenguaje interpretado, lo que quiere decir que no requiere compilacin, son los navegadores los que se encargan de interpretar el cdigo. El cdigo JavaScript se puede indicar en la direccin donde se encuentra el fichero JavaScript mediante la etiqueta:
<script src=[URL]></script>

recuerda
JavaScript es el lenguaje de script de la Web.

saber ms
Netscape Communications fue comprada por AOL en 1999. http://www.aol.com/ JavaScript: http://www.w3schools.com /js Google Chrome: http://google.com/chrome Apple Safari: http:/apple.com/es/safari

En el parmetro src incluimos la direccin donde est el fichero Javascript. La otra opcin para utilizar JavaScript es insertar el cdigo en el fichero HTML, utilizando la etiqueta:
<script language=JavaScript></script>

EJEMPLO
Cdigo en JavaScript insertado en un documento HTML. 1. Abrimos un editor de textos y escribimos el cdigo:
<html> <head> <script language=JavaScript> alert(Hola, mundo!); </script> </head> <body> </body> </html>

aparece es similar en todos los navegadores, una caja de texto con el mensaje Hola, mundo!.

Mensaje Google Chrome.

a Mensaje Internet Explorer.

2. Guardamos el fichero con extensin.html 3. Abrimos el fichero con un navegador, el mensaje que
a Mensaje Apple Safari.

ACTIVIDADES
3. Crea un script que muestre una alerta con tu nombre y apellidos.

14

Unidad 1

4. Hojas de estilo
Las hojas de estilo en cascada (Cascading Style Sheets), cuyas siglas son CSS, se utilizan para definir la presentacin de un documento escrito en HTML o XML. Las hojas de estilo describen cmo se va a mostrar un documento en pantalla.

saber ms
Hojas de estilo: http://www.w3schools.com/css

Al crear una pgina web tenemos que comprobar qu hacen los elementos dentro de la pgina, como por ejemplo prrafos, tablas, listas, etc. Este funcionamiento lo plasmamos en el documento HTML, mientras que el aspecto de cada elemento, como el color, el tamao y tipo de letra, o la posicin de los elementos lo podemos hacer en hojas de estilo CSS. El W3C (World Wide Web Consortium) es el encargado de formular la especificacin de las hojas de estilo que servirn de estndar para los navegadores. La idea que se encuentra detrs del desarrollo de las CSS es separar la estructura de un documento de su presentacin. La informacin sobre los estilos que va a tener la pgina puede estar incluida en el documento HTML (etiqueta <style>) o utilizando una hoja de estilo externa en un fichero separado (etiqueta <link>); generalmente se definir el estilo en el head del documento HTML. El lenguaje por defecto de las hojas de estilo es text/css y se indica con el parmetro type=text/css.

recuerda
Una pgina puede contener varias hojas de estilo. La ltima versin de hojas de estilo es la CSS3: http://www.css3.info

La sintaxis del estilo se realiza mediante {}. Las hojas de estilo funcionan a base de reglas, declaraciones sobre el estilo de uno o ms elementos. La regla tiene dos partes: un selector y la declaracin. Por ejemplo: h1 {color: red}, donde h1 es el selector o elemento y {color: red} es la declaracin o propiedad. En este caso, el selector h1 le indica al navegador la parte del documento que se ver afectada por esa regla. Los selectores pueden aparecer individualmente o agrupados por comas. Generalmente, la declaracin o la propiedad, en este caso el color, indica que va a cambiar a rojo. Las propiedades tambin pueden agruparse, separndolas mediante un punto y coma, pero suele ser habitual describir una propiedad por lnea. En caso de que la propiedad conste de ms de una palabra, aparecer: .

EJEMPLO
Vamos a crear dos pginas web utilizando hojas de estilo de distinta forma. Para poder ver el resultado tenemos que guardar los ficheros con la extensin .html 1. Estilo CSS incluido en un documento HTML. El estilo se aade en el propio documento HTML mediante la etiqueta dentro del head:
<style type=text/css>Etiquetas CSS</style> Resultado Fichero: ejemplo.html <html> <head> <style type=text/css> body { background-color:yellow; } </style> </head> <body> <h1>Cabecera ejemplo</h1> </body> </html>

Introduccin a las aplicaciones web

15

EJEMPLO (continuacin)
2. Estilo CSS separado del documento HTML. El estilo se edita y se guarda en un fichero diferente al fichero HTM. Se llama a ese fichero desde el documento HTML donde queremos incluir dicho estilo:
<link href=style.css rel=stylesheet type=text/css>

Fichero: ejemplo.html <html> <head> <link href=style.css rel=stylesheet type=text/css> </head> <body> <h1>Cabecera ejemplo</h1> </body> </html

Fichero: style.css body { backgroundcolor:yellow; }

Resultado

Las hojas de estilo pueden tener cualquier estructura, aunque es recomendable seguir un orden definiendo primero las propiedades generales que afectan a toda la pgina web, y en segundo lugar, crear estilos para cada una de las partes de la pgina web. Como hemos visto, las hojas de estilo estn compuestas por partes que llamaremos elementos. Dentro de cada elemento se definen propiedades, como por ejemplo color de fondo, tipos de letra, bordes, etc. En el siguiente cdigo podemos observar el elemento body, en el que definimos las propiedades que afectan a todo el body de la pgina HTML.
body { font-family: Verdana,Arial,sans-serif; font-size: 0.2em; background-color: #F0F; color: #002266; }

Este cdigo lo podemos llamar desde el documento HTML o utilizando la etiqueta <link>, como se describi en los ejemplos anteriores. Las propiedades son las caractersticas que estn disponibles en las hojas de estilo; las ms importantes son:
PROPIEDAD background-color font-family font-size text-align width margin margin-left padding DESCRIPCIN Define el color del fondo Estilo de letra Tamao de letra Alineacin del texto Ancho de un elemento Margen de un elemento Margen izquierdo Relleno de un elemento EJEMPLO background-color: #FFF; font-family: Verdana,Arial, sans-serif; font-size: 0.8em; text-align: center; width: 700px; margin: 10px auto; margin-left: 5px; padding:10px;

16

Unidad 1

Adems de definir propiedades para elementos HTML, como por ejemplo el body, tambin podemos crear estructuras libres con las propiedades que deseemos. En el siguiente ejemplo definiremos una estructura libre.

recuerda
Para crear pginas con hojas de estilo es necesario crear dos ficheros: Fichero HTML que contendr la llamada a la hoja de estilo. Fichero CSS donde incluimos los estilos que se utilizan en el fichero HTML. Este fichero se guardar con la extensin .css

EJEMPLO
Vamos a crear una estructura que llamaremos masthead en la cual centraremos un texto:
#masthead { text-align: center;}

La llamada desde el documento HTML se realiza con la etiqueta:


<div id=masthead> <a href=index.html><img alt=Foto1 src=logo.gif ></a></div>

El resultado ser que la imagen logo.gif aparecer centrada en la pgina.

Con las hojas de estilo se puede controlar el color, la anchura y los estilos de los bordes y, asimismo, se puede definir que los bordes aparezcan o no. Algunas ventajas de utilizar CSS son: Sencillez al realizar cambios en la presentacin del contenido. Por ejemplo, si queremos cambiar el tipo de letra de todo el documento, si utilizamos HTML tenemos que ir cambiando una a una las etiquetas que indican el tipo de letra; en cambio, si utilizamos hojas de estilo solo tenemos que cambiar la propiedad que indique el tipo de letra. Facilidad para dividir el contenido de la pgina. Cuando se utilizan hojas de estilo, el contenido se puede dividir en partes, por ejemplo, cabecera, contenido y final; cada una de las partes est delimitada. En HTML es difcil indicar divisiones tan marcadas como con las hojas de estilo. Mayor accesibilidad de la Web. En cualquier situacin se puede ver el contenido de una pgina web si se utilizan las hojas de estilo, esto significa que la Web se hace ms accesible gracias a la sencillez en el cdigo.

ACTIVIDADES
4. Crea una hoja de estilo que contenga los siguientes elementos: Elemento body (propiedades generales del documento): Tipo de letra: Verdana. Tamao letra: 0.8 em. Fondo: blanco. Color de letra: por defecto azul. Elemento masthead (logo): El logo centrado. Relleno (padding: 5 px).

Introduccin a las aplicaciones web

17

5. Lenguajes de script de servidor


Los primeros servidores web permitan trabajar con informacin esttica, es decir, la informacin permaneca invariable hasta que volvamos a realizar una peticin al servidor. La primera solucin tcnica que se llev a cabo fue utilizar aplicaciones que estaban instaladas en el propio servidor. Esta tecnologa, conocida como Common Gateway Interface (CGI), permita lanzar programas escritos en C o Perl para refrescar la informacin y que resultara un poco ms dinmica. El siguiente paso fue la creacin de lenguajes en el lado del servidor, como PHP (Hypertext Preprocessor) de Software libre, ASP (Active Server Pages) de Microsoft o JSP (JavaServer Pages) de JAVA. Estos lenguajes se utilizan para generar pginas dinmicas, facilitando el acceso a las bases de datos. Para poder ejecutar programas en PHP, ASP o JSP es necesario descargarse aplicaciones que permitan ejecutar las extensiones de dichos lenguajes. Si por ejemplo nuestro servidor soporta ejecucin en PHP bastar con escribir el cdigo en un editor de textos, guardarlo con la extensin .php en la carpeta del servidor donde podemos ejecutar PHP y accederemos al fichero escribiendo la direccin de la pgina en el navegador.

saber ms
Lenguajes de script de servidor: PHP: http://www.php.net ASP: http://www.asp.net JAVA: http://www.java.com

EJEMPLO
Cmo crear una pgina con PHP con un editor de textos bsico desde Ubuntu 9.04? 1. Abre un editor de textos bsico (gedit) y escribe el cdigo.
<?php echo Hola Mundo; ?>

3. Copia el fichero en la carpeta que permite ejecutar PHP. Hay que asegurarse de que nuestro servidor puede ejecutar ficheros PHP.

2. Guarda con extensin .php

4. Abre con un navegador (Firefox) la direccin en la que est el fichero PHP.

ACTIVIDADES
5. Crea una pgina PHP que muestre un mensaje con tu nombre y apellidos.

18

Unidad 1

6. Herramientas de diseo web


Para crear pginas web sencillas se puede utilizar cualquier editor de textos como el bloc de notas de Windows, o cualquier otro editor que admita texto sin formato, como GNU Emacs, Microsoft Wordpad, TextPad, Vim, etc. Tambin se pueden crear pginas con herramientas de diseo web ms complejas como por ejemplo DreamWeaver, FrontPage, NVU... Con estas herramientas se crean pginas en texto plano y luego se pasan al modo WYSIWYG (What You See Is What You Get) que significa que lo que ves es lo que ests creando con el editor y es lo que obtienes despus de guardar la pgina; aunque se suele hacer a la inversa. Aparte de las herramientas para crear cdigo, es importante disponer de programas de diseo grfico para crear imgenes, botones Existen tres grandes grupos de aplicaciones grficas: Las aplicaciones de dibujo vectorial crean dibujos de lneas y curvas con gran calidad; un ejemplo de este tipo de aplicaciones es Adobe Illustrator. Con este programa se pueden crear y editar dibujos vectoriales. Un dibujo vectorial es una forma de representar un grfico mediante frmulas matemticas definiendo puntos y lneas, y se puede utilizar para crear logos. Herramientas para crear composiciones grficas; un ejemplo de estas herramientas es Adobe Fireworks. Con este programa se pueden crear rpidamente prototipos de pginas web y convertirlos a HTML basandose en CSS, gracias a su funcionalidad de exportacin de CSS. Y el otro grupo de aplicaciones son las de retoque fotogrfico, donde se combinan fotografas reales y efectos visuales. Un ejemplo es Adobe Photoshop, desde el cual se puede realizar cualquier diseo que se necesite para aadirlo a una pgina web.

Entorno de trabajo de Adobe Dreamweaver.

Entorno de trabajo de Adobe Photoshop CS.

Otro tipo de herramientas son los programas multimedia, como por ejemplo Adobe Flash, Adobe Premiere Pro Se utilizan para crear animaciones, presentaciones, vdeos y otros elementos para las pginas web. En caso de necesitar crear una presentacin de inicio en una pgina web, se puede utilizar Adobe Flash, y si se quiere crear un vdeo se puede utilizar el programa Adobe Premiere.

Introduccin a las aplicaciones web

19

7. Relacin entre pginas web y bases de datos


Hace unos cuantos aos la informacin que haba en Internet estaba en pginas HTML estticas, esto significa que las pginas web no variaban con frecuencia y mantenan el mismo contenido hasta que se actualizaban, lo que supona una limitacin importante. La solucin a la limitacin de las pginas estticas fueron los lenguajes de programacin script en el lado del servidor y las bases de datos, que nos permiten crear pginas dinmicas. Estas son generadas desde un servidor en el momento en que un cliente hace una peticin desde su navegador; gracias a las pginas dinmicas se puede obtener un contenido actualizado cada vez que se realiza una peticin. La mayora de las pginas que hay en Internet son dinmicas y utilizan bases de datos. Las bases de datos son aplicaciones informticas que almacenan datos, los cuales pueden ser modificados, eliminados y consultados en cualquier momento. Las bases de datos se componen de tablas y cada una de estas tablas posee unos elementos denominados registros. Para entender bien qu es una base de datos pensemos en una librera en la que hay muchos libros y cada libro est en una estantera. Podemos decir que la librera es la base de datos y las tablas de las que se compone la base de datos son las estanteras donde estn clasificados los libros, que seran los registros. Para poder manejar una base de datos es necesario un gestor de base de datos. Los gestores son programas informticos que sirven de interfaz entre la base de datos, el usuario y las aplicaciones que la utilizan. Existen muchos tipos de gestores de bases de datos, algunos ejemplos son: MySQL: uno de los sistemas de gestin de bases de datos ms extendidos en Internet; la empresa Sun Microsystems se encarga de desarrollar este gestor. PostgreSQL: este sistema de gestin tiene la peculiaridad de ser de software libre, puede ser usado, copiado, modificado y distribuido libremente. Este gestor es mantenido por una comunidad de desarrolladores y no por una empresa nicamente. Firebird: sistema de bases de datos cuyo cdigo fue liberado en el ao 2000. SQLite: sistema de gestin de bases de datos cuya caracterstica principal es su reducido tamao. Microsoft SQL Server: sistema de gestin de bases de datos de Microsoft. Las bases de datos son un elemento fundamental para crear pginas dinmicas, el contenido que se publica en las pginas web est previamente almacenado en las bases de datos. La principal ventaja de que el contenido est en una base de datos es que se ahorra mucho espacio en disco, no es necesario tener las pginas generadas ocupando espacio en carpetas del disco duro sino que est almacenado en las tablas mediante los sistemas de compresin de que disponen los gestores de contenido.

recuerda
Las bases de datos son aplicaciones que permiten almacenar datos, recuperarlos, modificarlos, eliminarlos y consultarlos.

ACTIVIDADES
6. Busca informacin sobre los gestores de bases de datos. Cada alumno tiene que buscar informacin sobre un gestor para comentar con el resto de la clase las ventajas del gestor que ha escogido.

20

Unidad 1

PRCTICA PROFESIONAL
Disear la pgina web de una empresa
OBJETIVO
Crear una pgina web para la empresa Esos4 utilizando el lenguaje de marcas HTML.

DESARROLLO
El primer paso es disear un logo para la empresa; podemos utilizar Adobe Photoshop CS o cualquier otra herramienta de diseo grfico. Una vez creada la imagen tenemos que guardarla en formato GIF (Graphics Interchange Format), que sirve para la web. 1. Creamos el logo de la empresa Esos4 con Adobe Photoshop CS. 2. Guardamos el logo como GUARDAR PARA WEB: ARCHIVO > GUARDAR PARA WEB.

3. El logo abierto con un navegador.

El segundo paso es crear el contenido de la cabecera (head). Es importante definir bien todas las etiquetas y parmetros que van en este sitio porque son los elementos que afectarn al posicionamiento y sern tenidos en cuenta a la hora de hacer la valoracin SEO (Search Engine Optimization). Los parmetros que tenemos que aadir son: Ttulo: Esos4. Keywords (palabras que identifican la pgina): desarrollos, esos4, programacin, gestin, web, internet. Autor: Esos4. Descripcin: empresa especializada en aplicaciones Web 2.0. Link del CSS que hemos llamado layout.css Doctype (forma de indicar al navegador qu versin de HTML utilizaremos; en nuestro caso necesitamos utilizar etiquetas HTML 4.01): HTML 4.01 Strict. Las metatags que vamos a utilizar pueden contener acentos (ISO-8859-1).

Introduccin a las aplicaciones web

21

Este es el cdigo: Primera parte del documento index.html


<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd> <html> <head> <meta http-equiv=content-type content=text/html; charset=ISO-8859-1> <title>Esos4</title> <meta name=Keywords content=desarrollos,esos4,programacin,gestin, web,internet> <meta name=Author content=Esos4> <meta name=Copyright content=Copyright 2009 Esos4> <meta name=Description content=Empresa especializada aplicaciones web 2.0.> <link href=layout.css rel=stylesheet type=text/css> </head>

Sera conveniente subir la pgina al servidor y comprobar La etiqueta <meta http-equiv> indica que las metala calidad de las keywords que hemos creado. Por ejem- tags que vamos a utilizar pueden contener acentos (ISOplo, entrando en el apartado de SEO dentro de: 8859-1). http://whois.domaintools.com. El tercer paso es crear la estructura de la pgina. Todas las partes en que vamos a dividir la pgina estn comprendidas en un contenedor principal llamado container y que tiene los siguientes elementos:
ELEMENTO masthead navigation DESCRIPCIN Cabecera, donde va el logo que hemos creado Men de navegacin, el usuario podr navegar en las distintas paginas (principal, sobre nosotros, proyectos, enlaces) Contenido principal de cada pgina Pie, en este apartado va informacin sobre copyright, fecha de actualizacin, etc.

content footer

Una vez que tenemos divida la estructura le daremos forma creando la hoja de estilo (CSS) para cada una de las partes: Necesitamos definir unas caractersticas para cada elemento de la estructura: el tipo de letra de la pgina, el fondo del documento, etc. Todas las unidades que se utilizan en las estructuras estn en pxeles, y en el caso de las letras (fuente) son unidades em. Las unidades em especifican una longitud relativa y podemos agrandar la fuente en nuestro navegador (VER > TAMAO DEL TEXTO). Cada elemento ir precedido del carcter #, excepto el elemento body. Caractersticas de cada elemento en la hoja de estilos: Elemento body (propiedades generales del documento): Tipo de letra: Verdana. Tamao letra: 0.8 em.

Fondo: blanco. Color de la letra: por defecto, azul. Elemento container (contenedor del resto de elementos): Ancho del contenedor: 700 px. Margen a cada lado. Elemento masthead (logo): El logo que hemos creado anteriormente debe ir centrado. Relleno: padding, 5 px. Elemento navigation (elemento de navegacin, enlaces a las diferentes pginas que vamos a crear para la empresa). Texto: centrado. Relleno: padding, 5 px. Borde superior de color naranja. Fondo de color blanco. Elemento content (contiene el texto que queremos poner a cada una de las pginas que hemos creado; tiene que colocarse con esta etiqueta. Por ejemplo, en la pgina de about.html tenemos que hablar sobre quines somos). Texto: justificado. Tamao del texto: en ancho de 680 px. Fondo: blanco.

22

Unidad 1

PRCTICA PROFESIONAL
Elemento footer (pie de pgina): Color de la letra: verde. Borde superior e inferior de color: verde. Fondo: blanco.

Este es el cdigo: primera parte del documento layout.css


body { font-family: Verdana,Arial,sans-serif; font-size: 0.8em; background-color: #FFF; background-repeat: repeat; background-attachment: scroll; color: #003366; } #container { width: 700px; margin: 10px auto; } #masthead { text-align: center; padding:5px; } #navigation { text-align: center; padding:5px; border-top: 1px solid #FAD1A0; border-bottom: 1px solid #FAD1A0; background-color: #ffffff; } #content { width: 680px; padding:10px; background-color: #ffffff; text-align: justify; } #footer { color:#7B9D00; text-align: center; padding:5px; border-top: 1px solid #7B9D00; border-bottom: 1px solid #7B9D00; background-color: #ffffff; }

Para acabar de completar la hoja de estilo aadimos unas caractersticas ms: Quitamos el borde de la imagen para que no parezca que tiene un enlace. Quitamos el subrayado en el men principal y lo ponemos de color naranja (#EF8A0E). Cuando se pasa el ratn por encima de un apartado, el men cambia el color a blanco y el fondo a naranja. Quitamos el subrayado de todos los hipervnculos.

Este es el cdigo: segunda parte del documento layout.css


#masthead img /*Quitamos el borde de la imagen para que no parezca que tiene un enlace*/ { border:0; } #navigation a /* Quitamos el subrayado en el men principal y lo ponemos de color naranja (#EF8A0E)*/ { color:#EF8A0E; text-decoration: none; border: 1px solid #fff; background-color: #fff; } #navigation a:hover /*Cuando se pasa el ratn por encima de un apartado el men cambiamos el color a blanco y el fondo a naranja*/ { color: #fff; text-decoration: none; border: 1px solid #F2911A; background-color: #F2911A; } a /*Quitamos el subrayado de todos los hipervnculos*/ { color: #5f8ea9; text-decoration: underline; }

Introduccin a las aplicaciones web

23

El cuarto paso es crear el cdigo HTML utilizando la estructura que hemos creado en el CSS: Creamos una etiqueta container, estn incluidas el resto de etiquetas que hemos definido en el CSS. Creamos la etiqueta masthead que es donde aparecer el logo de la empresa, enlazamos con la pgina principal (index.html) y escribimos una descripcin. Creamos la etiqueta navigation, el apartado donde ponemos enlaces de las distintas partes de la pgina. Creamos la etiqueta content, donde se encuentra el contenido de cada pgina. Creamos la etiqueta footer, donde se incluye informacin sobre la pgina.

Este es el cdigo: segunda parte del documento index.html


<body> <div id=container> <div id=masthead> <a href=index.html><img alt=Esos4 src=logo.gif ></a> </div> <div id=navigation> <a href=index.html>Principal </a> <a href=nosotros.html>Quines somos </a> <a href=proyectos.html>Proyectos </a> <a href=enlaces.html>Enlaces</a> </div> <div id=content>Empresa especializada en el desarrollo de programas de gestin aplicaciones web 2.0.</div> <div id=footer> Copyright 2009 Esos4 | Actualizado a Julio 2009</div> </div> </body> </html>

Vemos que cada etiqueta <div id=> se identifica con cada uno de los apartados que hemos definido en el CSS.

Para crear ms pginas con esta estructura, solo tenemos que sustituir el cdigo incluido entre cada una de las etiquetas <div id=masthead></div>.

El quinto y ltimo paso consiste en guardar las partes primera y segunda de la pgina index.html y las partes primera y segunda de la pgina layout.css en el mismo directorio, y abrir con un navegador la pgina index.html. Este es el resultado final de la pgina para la empresa Esos4: Es recomendable utilizar algn validador de HTML. Existen servicios de validacin de cdigo HTML: http://validator.w3.org, y de validacin de CSS: http://jigsaw.w3.org/css-validator/. Estos servicios son un software libre creado por el W3C para ayudar a los diseadores y desarrolladores web a validar sus documentos web.

24

Unidad 1

MUNDO LABORAL
Los magos del posicionamiento en buscadores
Aparecer en los primeros puestos de Google es vital para incrementar el trfico de un sitio web. Estos son algunos de los expertos espaoles que han desentraado las claves para estar lo ms arriba posible en el universo de Internet. Conocen las tripas de los buscadores. Se pasan horas al da desentraando cmo conseguir que un sitio web sea ms relevante que su competidor cuando las araas, sobre todo las de Google, buscan en Internet. Son los magos de los buscadores. En sus manos est que cuando alguien pone hotel Madrid en Google, el primer enlace sea el de su agencia de viajes. Gracias a ellos, se consigue ms trfico y ms ventas. Y sin necesidad de pagar por un enlace patrocinado. En Espaa hay grandes expertos en posicionamiento, lo que en ingls se conoce como SEO (Search Engine Optimization), que no tienen nada que desmerecer a los gurs del sector como Rand Fishkin o Danny Sullivan, profesionales con un perfil tcnico o de marketing que acumulan aos de experiencia en Internet. Que se enfrentan a los buscadores como si de un reto intelectual se tratara, intentando descifrar el acertijo de por qu una web le gusta ms que otra a Google. () La demanda de estos servicios se est incrementando en los ltimos tiempos. Con la crisis, las empresas miran ms hacia estrategias SEO porque es la primera fuente de trfico en Internet, una manera barata de conseguir visitas, explica El-Qudsi. Sin embargo, no estamos al nivel de otros pases. Hay un retraso en Espaa respecto a otros pases debido a la menor inversin en Internet y al desconocimiento sobre el posicionamiento en buscadores, algo que vale tanto para una pyme como para una gran empresa, opina Miguel Orense, director SEO y socio fundador de Kanvas Media, y coautor, junto a Octavio Rojas, del libro SEO, cmo triunfar en buscadores.
Prieto, 10 de julio de 2009 http://www.expansion.com/2009/07/09/empresas/tecnologia/1247172930.html

Actividades
1. Crees que es importante estar bien posicionado en los buscadores? 2. Qu ideas se te ocurren para mejorar el posicionamiento de las pginas web en los buscadores? 3. Busca informacin sobre los expertos en SEO.

Introduccin a las aplicaciones web

25

EN RESUMEN
Lenguajes de marcas Los lenguajes de marcas sirven para codificar documentos, incorporando etiquetas o marcas que disponen de informacin adicional acerca de la estructura del texto o su presentacin. El lenguaje de marcas ms popular es el HTML, siglas de HyperText Markup Language (Lenguaje para el Formato de Documentos de Hipertexto); es el lenguaje usado por la World Wide Web. Otros ejemplos de lenguajes de marcas son XHTML (Extensible HyperText Markup Language), RSS 2.0 (Really Simple Syndication), RTF (Rich Text Format), etc. Hojas de estilo Las hojas de estilo en cascada (Cascading Style Sheets), cuyas siglas son CSS, se utilizan para definir la presentacin de un documento escrito en HTML o XML; las hojas de estilo describen cmo se va mostrar un documento en pantalla. Lenguajes de script de navegador Los lenguajes de script son lenguajes de programacin que sirven para crear programas que realizan acciones dentro de una pgina web, como por ejemplo cambiar dinmicamente el contenido de un documento, modificar el comportamiento normal del navegador, validar formularios, realizar pequeos trucos visuales, etc. Lenguajes de script de servidor Lenguajes que se ejecutan en el lado del servidor, como PHP, ASP, etc. Estos lenguajes se utilizan para generar pginas dinmicas, facilitando el acceso a las bases de datos. Herramientas de diseo web Para crear pginas web es necesario un software apropiado. Aunque podemos crear pginas web sencillas con editores de texto, existen herramientas de diseo web, como por ejemplo DreamWeaver, FrontPage, NVU, etc. Otro tipo de herramientas son los programas multimedia: Adobe Flash, Adobe Premiere Pro, etc. Se utilizan para crear animaciones, presentaciones, vdeos y otros elementos para las pginas web. Relacin entre pginas web y bases de datos Las bases de datos son aplicaciones que permiten almacenar datos, recuperarlos, modificarlos, eliminarlos y consultarlos. En ocasiones, las bases de datos se utilizan para generar pginas dinmicas.

EVALA TUS CONOCIMIENTOS


1. Un lenguaje de marcas es el: a) XHTLM b) RFT 2. RSS 2.0 significa: a) Really Simple Syndication. b) Really Simple Summary. c) Real Site Summary. 3. Cmo se cierran las etiquetas en HTML? a) (<\, >) b) (</, >) c) (<, >) 4. Dnde se ejecuta el lenguaje PHP? a) En el lado del cliente. b) En el lado del servidor. c) En el lado del cliente y del servidor. 5. Completa las siguientes frases: c) RTF a) El lenguaje de programacin _________________ se utiliza para crear pequeos programas encargados de realizar acciones dentro del mbito de una pgina web. b) Los lenguajes de script permiten variar _____________ una pgina web. c) El lenguaje de script que se utiliza en ______________ es _________________. 6. Para qu sirve la propiedad padding en CSS? a) Para poner borde a un elemento. b) Para poner relleno a un elemento. c) Para poner margen a un elemento.