Download Aplicaciones web

Aplicaciones web - por_CF 15/03/10 8:53 Página 1
Aplicaciones web
Jesús Niño Camazón
01_unidad 01 Aplicaciones web
15/3/10
1
10:52
Página 6
Introducción a las
aplicaciones web
vamos a conocer...
1. Esquema de funcionamiento de un servicio
web
2. Lenguajes de marcas
3. Lenguajes de script de navegador
4. Hojas de estilo
5. Lenguajes de script de servidor
6. Herramientas de diseño web
7. Relación entre páginas web y bases de datos
PRÁCTICA PROFESIONAL
Diseñar la página web de una empresa
MUNDO LABORAL
Los magos del posicionamiento en
buscadores
y al finalizar esta unidad...
Identificarás los elementos de un servicio
web.
Conocerás los lenguajes de marcas.
Crearás páginas web utilizando lenguajes de
marcas.
Conocerás el funcionamiento de los scripts en
los navegadores.
Editarás hojas de estilo.
Conocerás el funcionamiento de los scripts en
los servidores.
Elegirás herramientas de diseño web que se
adapten a tus necesidades.
Relacionarás páginas web y bases de datos.
01_unidad 01 Aplicaciones web
15/3/10
10:52
Página 7
7
CASO PRÁCTICO INICIAL
situación de partida
Antonio le ha pedido a su amigo José el diseño de la página web de su empresa, que se llama Esos4; la empresa está
especializada en programas de gestión y aplicaciones para la
Web 2.0.
El posicionamiento de las páginas se consigue creando páginas
web sin errores y cumpliendo los estándares del W3C (World Wide
Web Consortium). Si se respetan los estándares, los buscadores
pueden recorrer las páginas sin problema.
José tiene algunos conocimientos de marketing y conoce la disciplina SEO (Search Engine Optimization, optimización para
motores de búsqueda). El objetivo de la optimización es mostrar las páginas web en los primeros resultados de las búsquedas que se realizan en los buscadores como Google, Bing,
Yahoo… En este caso, José está interesado en posicionar la página de la empresa de Antonio en el primer puesto de las búsquedas «aplicaciones web 2.0».
Para facilitar la labor a los buscadores también es necesario incluir
una buena descripción en las cabeceras de las páginas que se van
a diseñar.
José creará las páginas en el lenguaje de marcas HTML y serán estáticas 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 estándares?
7. ¿Qué es HTML?
2. ¿Merece la pena hacer caso de las recomendaciones
de los estándares abiertos para facilitar el recorrido a
los buscadores?
8. ¿Qué interesa más, páginas estáticas o dinámicas?
9. ¿Qué es una hoja de estilo? ¿Facilita el recorrido a los
buscadores?
3. ¿Qué es el posicionamiento?
10. ¿Para qué sirve un script?
4. ¿Cómo posicionar mejor las páginas?
11. ¿Qué es JavaScript?
5. ¿Qué es SEO, para qué sirve?
12. ¿Qué herramientas son necesarias para diseñar páginas web?
6. ¿Qué es un lenguaje de marcas?
01_unidad 01 Aplicaciones web
15/3/10
10:52
Página 8
Unidad 1
8
1. Esquema de funcionamiento
de un servicio web
Un servicio web es un conjunto de protocolos y estándares 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 programación; estos son formas de crear aplicaciones software que se
ejecutan en un equipo informático.
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 comunicación entre clientes y
servidores; los clientes son los usuarios que, mediante aplicaciones como los navegadores web, se comunican con otros ordenadores e interactúan con ellos.
caso práctico inicial
Los diseñadores de páginas web
deben cumplir los estándares del
W3C y utilizar las herramientas
del W3C para reconocer, orientar
y ayudar a corregir errores en las
páginas web.
Además de los protocolos, los estándares también forman parte de los servicios
web. Los estándares son especificaciones disponibles públicamente para lograr
una tarea específica. Un ejemplo de estándares son los del W3C (World Wide Web
Consortium); este tipo de organizaciones son comités responsables de la arquitectura y reglamentación de los servicios web, y su objetivo principal es la creación
de estándares web y pautas. Desde 1994, el W3C ha publicado más de ciento diez
estándares, denominados «Recomendaciones del W3C».
Los servicios web comunican diferentes aplicaciones software independientemente de las plataformas sobre las que se instalen, la capacidad para comunicar múltiples sistemas diferentes se realiza por medio de protocolos y estándares abiertos.
saber más
En el esquema de funcionamiento básico de un servicio web intervienen:
Estándar W3C:
http://www.w3.org
• 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
página web (servidor web).
• Aplicaciones de software: mecanismos que utilizan los clientes y los servidores para comunicarse (navegador web).
• Lenguaje de programación: forma de crear las aplicaciones software (C++).
• Red de ordenadores: conjunto de ordenadores y/o dispositivos conectados por
medio de cables, señales, ondas o cualquier otro método de transporte de datos
que comparten información (Internet).
• Protocolos: conjunto de reglas utilizadas en la comunicación entre los clientes
y los servidores HTTP (HyperText Transfer Protocol), diseñado para transferir
páginas HTML.
• Estándares: 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 estándares
más 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 representación de la información.
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.
01_unidad 01 Aplicaciones web
15/3/10
10:52
Página 9
Introducción a las aplicaciones web
9
2. Lenguajes de marcas
Los lenguajes de marcas sirven para codificar documentos. La codificación se realiza incorporando etiquetas o marcas que tienen información adicional acerca de
la estructura del texto. Las marcas son códigos que indican a un programa cómo
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 cómo debe ser mostrado.
El lenguaje de marcas más 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 versión actual del HTML es el HTML 4.01, que es una revisión del HTML 4. Este
tiene mecanismos para utilizar hojas de estilo, ejecución de scripts, marcos, tablas más
ricas y otras ventajas que pueden consultarse en la especificación del HTML 4.01.
HTML es el lenguaje utilizado para construir páginas web. Mediante una estructura se crea contenido en forma de texto; asimismo, se puede incorporar otro tipo
de elementos a ese contenido, como imágenes, sonidos…
HTML se escribe mediante «etiquetas» rodeadas entre los signos de menor que y
mayor que (<,>) y algunas tienen atributos que pueden tomar algún valor. La
mayoría 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 convención, los archivos de formato HTML utilizan la extensión .htm o
.html. La extensión de un archivo es una cadena de caracteres que va unida al
nombre de un archivo y precedida por un punto y cuya función principal es diferenciar el contenido del archivo de modo que el sistema operativo disponga del
procedimiento necesario para ejecutarlo o interpretarlo.
Para crear páginas web con HTML es necesario un editor de textos básico, 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.
a
GNU Emacs.
a
Microsoft Wordpad.
saber más
• XHTML es más esricto y similar a
HTML pero con algunas diferencias.
Más información sobre XHTML:
http://www.w3.org/MarkUp
• Especificación 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
01_unidad 01 Aplicaciones web
15/3/10
10:52
Página 10
Unidad 1
10
recuerda
Las etiquetas que describen la estructura general de un documento son tres:
• Toda etiqueta está encerrada
entre los signos menor que y
mayor que (<, >), y algunas tienen atributos que pueden tomar
un valor concreto.
• <html>: limita el documento e indica que se encuentra escrito en este lenguaje; señala el inicio y el final del documento.
• Se abren y se cierran; por ejemplo:
<strong>negrita</strong>
• Algunas etiquetas no necesitan
cerrarse como <hr>.
vocabulario
Metainformación: datos adicionales que están relacionados con
la página y son transparentes al
usuario.
• <head>: cabecera del documento, especifica el prólogo del resto del archivo.
Define la cabecera del documento HTML, suele contener información sobre el
documento y no se muestra al usuario. Indica el título y permite aportar metainformación al documento, para su mejor identificación e indexación por los
motores de búsqueda.
• <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 página, como color de fondo, del texto y márgenes de la página web, el color de los enlaces visitados...
EJEMPLO
¿Cómo crear una página web con un editor de textos básico?
1. Abrimos un editor de textos básico, por ejemplo el bloc de notas de Windows
Vista (INICIO > PROGRAMAS > ACCESORIOS > BLOC DE NOTAS) y escribimos el siguiente código:
<html>
<!— Mi primer ejemplo —>
<head>
<title>Mi primera página</title>
</head>
<body>
<p>Mi primera página</p>
</body>
</html>
2. Guardamos con extensión .html, el tipo de documento es: TODOS LOS ARCHIVOS (*.*).
3. Abrimos con un navegador, en este caso Mozilla Firefox aunque cualquier navegador puede servir.
01_unidad 01 Aplicaciones web
15/3/10
10:52
Página 11
Introducción a las aplicaciones web
11
Etiquetas básicas
Estas etiquetas son generales y aparecen en cualquier documento HTML.
ETIQUETA
FUNCIÓN
<!DOCTYPE>
Define el tipo de documento
<html>,</html>
Define el inicio y el final de un documento HTML
<head>,</head>
Define información sobre el documento
<body>,</body>
Define el cuerpo del documento
<!— Comentario –>
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 título de la página y la metainformación: la descripción, keywords, autor, hoja de estilos…
ETIQUETA
FUNCIÓN
<title>,</title>
Define el título del documento
<meta name=”description”
content=” ”>
Define una descripción del documento; la descripción se
escribe en «content»
<meta name=”keywords”
content=” ”>
Define las keywords (palabras que identifican un documento)
<meta name=”author”
content=” “>
Define el autor del documento
<link rel=”stylesheet”
href=” “>
Define un recurso; por ejemplo, incluir una hoja de estilo
EJEMPLO
Contenido de la cabecera head.
Para ver el código fuente de una página pulsamos en VER del navegador y a
continuación en CÓDIGO FUENTE.
caso práctico inicial
• José necesita posicionar en los
primeros puestos de los buscadores la página de la empresa
Esos4, por eso debe hacer una
buena metadescripción en la
cabecera head.
• Las etiquetas metadescripción
son relevantes a la hora de aparecer en los resultados de los buscadores.
• Las técnicas que permiten valorar
el posicionamiento en buscadores
para los sitios web se denominan
SEO (Search Engine Optimization,
optimización para motores de
búsqueda).
01_unidad 01 Aplicaciones web
15/3/10
10:52
Página 12
Unidad 1
12
Etiquetas del body
Etiquetas que sirven para mostrar los objetos de la página; por ejemplo, para dar
formato a un texto, crear listas, tablas, insertar imágenes, sonidos, etc.
saber más
ETIQUETA
FUNCIÓN
Etiquetas HTML:
<h1> a <h6>, </h1> a </h6>
Define encabezados
http://www.w3schools.com/
html
<p>,</p>
Define un párrafo
<br>
Inserta una línea en blanco
<hr>
Inserta una línea
<strong>,</strong>
Define un estilo para el texto, negrita
<i>,</i>
Define un estilo para el texto, itálica
recuerda
<big>, </big>
Define un estilo para el texto, grande
Diferencias entre HTML y XHTML:
<small>,</small>
Define un estilo para el texto, pequeño
En HTML la etiqueta es <br> sin
cerrar.
<u>, </u>
Define un estilo para el texto, subrayado
<sub>, </sub>
Define un estilo para el texto, subíndice
<sup>, </sup>
Define un estilo para el texto, superíndice
<center>,</center>
Centra un texto
<blockquote>
</blockquote>
Define márgenes
<a>,</a>
Hipervínculo o enlace. Por ejemplo:
<a href=”http://www.google.com”>Google</a>
<img>
Imagen. Requiere del atributo src, indica la ruta en la
que se encuentra la imagen. Por ejemplo:
<img src=”./imagen/foto.jpg”>
<table>,</table>
Define una tabla
<caption>,</caption>
Define título de una tabla
<tr>,</tr>
Fila de una tabla
<td>,</td>
Celda dentro de una tabla
<ul>,</ul>
Define una lista
<ol>,</ol>
Define una lista ordenada con números
<li>,</li>
Define los elementos de una lista
<form>,</form>
Define un formulario
En XHTML la etiqueta se cierra
<br />.
ACTIVIDADES
1. Crea una página web en la que el título sea «Mi primera página web».
2. Crea una página web que tenga los siguientes elementos:
• Título: Esos4.
• Keywords: desarrollos, esos4, programación, gestión, web, internet.
• Autor: Esos4.
• Descripción: empresa especializada en aplicaciones Web 2.0.
01_unidad 01 Aplicaciones web
15/3/10
10:52
Página 13
Introducción a las aplicaciones web
13
3. Lenguajes de script de navegador
Los lenguajes de script son lenguajes de programación que sirven para crear programas que realizan acciones dentro de una página web, como por ejemplo cambiar dinámicamente el contenido de un documento, modificar el comportamiento normal del navegador, validar formularios, realizar pequeños trucos visuales, etc.
recuerda
JavaScript es el lenguaje de script
de la Web.
Los scripts se ejecutan en el navegador del cliente al cargar la página o cuando
sucede algo especial, como puede ser pulsar sobre un enlace. Conviene recordar
que los scripts no se ejecutan en la máquina donde están alojados, por lo que no
podrán 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 programación del lado del cliente más utilizado y compatible con la mayoría de los navegadores actuales. Es un
lenguaje interpretado, lo que quiere decir que no requiere compilación, son los
navegadores los que se encargan de interpretar el código.
saber más
• Netscape Communications fue
comprada por AOL en 1999.
http://www.aol.com/
• JavaScript:
El código JavaScript se puede indicar en la dirección donde se encuentra el fichero JavaScript mediante la etiqueta:
http://www.w3schools.com
/js
• Google Chrome:
<script src=”[URL]”></script>
http://google.com/chrome
• Apple Safari:
En el parámetro src incluimos la dirección donde está el fichero Javascript.
http:/apple.com/es/safari
La otra opción para utilizar JavaScript es insertar el código en el fichero HTML,
utilizando la etiqueta:
<script language=”JavaScript”></script>
EJEMPLO
Código en JavaScript insertado en un documento HTML.
1. Abrimos un editor de textos y escribimos el código:
<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!».
a
a Mensaje Internet Explorer.
2. Guardamos el fichero con extensión.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.
Mensaje Google Chrome.
01_unidad 01 Aplicaciones web
15/3/10
10:52
Página 14
Unidad 1
14
4. Hojas de estilo
Las hojas de estilo en cascada (Cascading Style Sheets), cuyas siglas son CSS, se utilizan para definir la presentación de un documento escrito en HTML o XML. Las
hojas de estilo describen cómo se va a mostrar un documento en pantalla.
saber más
Hojas de estilo:
http://www.w3schools.com/css
Al crear una página web tenemos que comprobar qué hacen los elementos dentro de la página, como por ejemplo párrafos, tablas, listas, etc. Este funcionamiento lo plasmamos en el documento HTML, mientras que el aspecto de cada
elemento, como el color, el tamaño y tipo de letra, o la posición de los elementos
lo podemos hacer en hojas de estilo CSS.
El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los navegadores. La idea
que se encuentra detrás del desarrollo de las CSS es separar la estructura de un documento de su presentación.
La información sobre los estilos que va a tener la página 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 parámetro type=”text/css”.
recuerda
• Una página puede contener varias
hojas de estilo.
• La última versión 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 más elementos. La regla tiene dos partes: un selector y la declaración. Por ejemplo: h1 {color: red}, donde h1 es el
selector o elemento y {color: red} es la declaración 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 declaración o la propiedad, en este caso el color, indica que
va a cambiar a rojo. Las propiedades también pueden agruparse, separándolas mediante un punto y coma, pero suele ser habitual describir una propiedad por línea.
En caso de que la propiedad conste de más de una palabra, aparecerá: “ “.
EJEMPLO
Vamos a crear dos páginas web utilizando hojas de estilo de distinta forma.
Para poder ver el resultado tenemos que guardar los ficheros con la extensión .html
1. Estilo CSS incluido en un documento HTML. El estilo se añade 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>
01_unidad 01 Aplicaciones web
15/3/10
10:52
Página 15
Introducción a las aplicaciones web
15
EJEMPLO (continuación)
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
Fichero: style.css
<html>
<head>
<link href=”style.css”
rel=”stylesheet”
type=”text/css”>
</head>
<body>
<h1>Cabecera ejemplo</h1>
</body>
</html
Resultado
body
{
backgroundcolor:yellow;
}
Las hojas de estilo pueden tener cualquier estructura, aunque es recomendable
seguir un orden definiendo primero las propiedades generales que afectan a toda
la página web, y en segundo lugar, crear estilos para cada una de las partes de la
página web.
Como hemos visto, las hojas de estilo están 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 código podemos observar el elemento body, en el que definimos
las propiedades que afectan a todo el body de la página HTML.
body
{ font-family: Verdana,Arial,sans-serif; font-size:
0.2em; background-color: #F0F; color: #002266; }
Este código lo podemos llamar desde el documento HTML o utilizando la etiqueta <link>, como se describió en los ejemplos anteriores.
Las propiedades son las características que están disponibles en las hojas de estilo; las más importantes son:
PROPIEDAD
DESCRIPCIÓN
EJEMPLO
background-color
Define el color del fondo
background-color: #FFF;
font-family
Estilo de letra
font-family: Verdana,Arial,
sans-serif;
font-size
Tamaño de letra
font-size: 0.8em;
text-align
Alineación del texto
text-align: center;
width
Ancho de un elemento
width: 700px;
margin
Margen de un elemento
margin: 10px auto;
margin-left
Margen izquierdo
margin-left: 5px;
padding
Relleno de un elemento
padding:10px;
01_unidad 01 Aplicaciones web
15/3/10
10:52
Página 16
Unidad 1
16
Además de definir propiedades para elementos HTML, como por ejemplo el body,
también podemos crear estructuras libres con las propiedades que deseemos. En
el siguiente ejemplo definiremos una estructura libre.
recuerda
EJEMPLO
Para crear páginas con hojas de
estilo es necesario crear dos ficheros:
Vamos a crear una estructura que llamaremos masthead en la cual centraremos un texto:
• 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 extensión .css
#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 página.
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 presentación 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 página. 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 difícil indicar divisiones tan marcadas como con las hojas de estilo.
• Mayor accesibilidad de la Web. En cualquier situación se puede ver el contenido de una página web si se utilizan las hojas de estilo, esto significa que la Web
se hace más accesible gracias a la sencillez en el código.
ACTIVIDADES
4. Crea una hoja de estilo que contenga los siguientes elementos:
• Elemento body (propiedades generales del documento):
– Tipo de letra: Verdana.
– Tamaño letra: 0.8 em.
– Fondo: blanco.
– Color de letra: por defecto azul.
• Elemento masthead (logo):
– El logo centrado.
– Relleno (padding: 5 px).
01_unidad 01 Aplicaciones web
15/3/10
10:52
Página 17
Introducción a las aplicaciones web
17
5. Lenguajes de script de servidor
Los primeros servidores web permitían trabajar con información estática, es decir, la información permanecía invariable hasta que volvíamos a realizar una petición al servidor. La primera solución técnica que se llevó a cabo fue utilizar aplicaciones que estaban instaladas en el propio servidor. Esta tecnología, conocida
como Common Gateway Interface (CGI), permitía lanzar programas escritos en C
o Perl para refrescar la información y que resultara un poco más dinámica.
saber más
Lenguajes de script de servidor:
• PHP: http://www.php.net
• ASP: http://www.asp.net
• JAVA: http://www.java.com
El siguiente paso fue la creación 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 páginas dinámicas, 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 ejecución en PHP bastará con escribir el
código en un editor de textos, guardarlo con la extensión .php en la carpeta del
servidor donde podemos ejecutar PHP y accederemos al fichero escribiendo la dirección de la página en el navegador.
EJEMPLO
¿Cómo crear una página con PHP con un editor de textos básico desde Ubuntu 9.04?
1. Abre un editor de textos básico (gedit) y escribe el código.
3. Copia el fichero en la carpeta que permite ejecutar
PHP. Hay que asegurarse de que nuestro servidor puede ejecutar ficheros PHP.
<?php echo “Hola Mundo”; ?>
2. Guarda con extensión .php
4. Abre con un navegador (Firefox) la dirección en la que
está el fichero PHP.
ACTIVIDADES
5. Crea una página PHP que muestre un mensaje con tu nombre y apellidos.
01_unidad 01 Aplicaciones web
15/3/10
10:52
Página 18
Unidad 1
18
6. Herramientas de diseño web
Para crear páginas 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. También se pueden crear páginas con herramientas de diseño web más complejas
como por ejemplo DreamWeaver, FrontPage, NVU... Con estas herramientas
se crean páginas 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 estás creando
con el editor y es lo que obtienes después de guardar la página; aunque se suele
hacer a la inversa.
Aparte de las herramientas para crear código, es importante disponer de programas de diseño gráfico para crear imágenes, botones… Existen tres grandes grupos de aplicaciones gráficas:
• Las aplicaciones de dibujo vectorial crean dibujos de líneas 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 gráfico mediante fórmulas matemáticas definiendo puntos y líneas, y se puede utilizar para crear logos.
• Herramientas para crear composiciones gráficas; un ejemplo de estas herramientas es Adobe Fireworks. Con este programa se pueden crear rápidamente
prototipos de páginas web y convertirlos a HTML basandose en CSS, gracias a
su funcionalidad de exportación de CSS.
• Y el otro grupo de aplicaciones son las de retoque fotográfico, donde se combinan fotografías reales y efectos visuales. Un ejemplo es Adobe Photoshop,
desde el cual se puede realizar cualquier diseño que se necesite para añadirlo a
una página web.
a
Entorno de trabajo de Adobe Dreamweaver.
a
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, vídeos y otros elementos para las páginas web. En caso de necesitar crear una presentación de inicio en una página web, se puede utilizar
Adobe Flash, y si se quiere crear un vídeo se puede utilizar el programa Adobe
Premiere.
01_unidad 01 Aplicaciones web
15/3/10
10:52
Página 19
Introducción a las aplicaciones web
19
7. Relación entre páginas web
y bases de datos
Hace unos cuantos años la información que había en Internet estaba en páginas
HTML estáticas, esto significa que las páginas web no variaban con frecuencia y
mantenían el mismo contenido hasta que se actualizaban, lo que suponía una limitación importante. La solución a la limitación de las páginas estáticas fueron
los lenguajes de programación script en el lado del servidor y las bases de datos,
que nos permiten crear páginas dinámicas. Estas son generadas desde un servidor
en el momento en que un cliente hace una petición desde su navegador; gracias
a las páginas dinámicas se puede obtener un contenido actualizado cada vez que
se realiza una petición. La mayoría de las páginas que hay en Internet son dinámicas y utilizan bases de datos.
recuerda
Las bases de datos son aplicaciones que permiten almacenar datos, recuperarlos, modificarlos, eliminarlos y consultarlos.
Las bases de datos son aplicaciones informáticas 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 librería en la que
hay muchos libros y cada libro está en una estantería. Podemos decir que la librería es la base de datos y las tablas de las que se compone la base de datos son
las estanterías donde están clasificados los libros, que serían los registros.
Para poder manejar una base de datos es necesario un gestor de base de datos.
Los gestores son programas informáticos 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 gestión de bases de datos más extendidos en Internet; la empresa Sun Microsystems se encarga de desarrollar este gestor.
• PostgreSQL: este sistema de gestión 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 código fue liberado en el año 2000.
• SQLite: sistema de gestión de bases de datos cuya característica principal es su
reducido tamaño.
• Microsoft SQL Server: sistema de gestión de bases de datos de Microsoft.
Las bases de datos son un elemento fundamental para crear páginas dinámicas, el
contenido que se publica en las páginas 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 páginas generadas
ocupando espacio en carpetas del disco duro sino que está almacenado en las tablas
mediante los sistemas de compresión de que disponen los gestores de contenido.
ACTIVIDADES
6. Busca información sobre los gestores de bases de datos. Cada alumno tiene que buscar información sobre un
gestor para comentar con el resto de la clase las ventajas del gestor que ha escogido.
01_unidad 01 Aplicaciones web
15/3/10
10:52
Página 20
Unidad 1
20
PRÁCTICA PROFESIONAL
Diseñar la página web de una empresa
OBJETIVO
Crear una página web para la empresa Esos4 utilizando el lenguaje de marcas HTML.
DESARROLLO
El primer paso es diseñar un logo para la empresa; podemos utilizar Adobe Photoshop CS o cualquier otra herramienta de diseño gráfico. 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 parámetros que van en este sitio porque son los elementos que afectarán al posicionamiento y serán tenidos en cuenta a la
hora de hacer la valoración SEO (Search Engine Optimization).
Los parámetros que tenemos que añadir son:
• Título: Esos4.
• Keywords (palabras que identifican la página): desarrollos, esos4, programación, gestión, web, internet.
• Autor: Esos4.
• Descripción: empresa especializada en aplicaciones
Web 2.0.
• Link del CSS que hemos llamado layout.css
• Doctype (forma de indicar al navegador qué versión
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).
01_unidad 01 Aplicaciones web
15/3/10
10:52
Página 21
Introducción a las aplicaciones web
21
Este es el código:
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,programación,gestión, 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>
Sería conveniente subir la página 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 página. Todas las partes en que vamos a dividir la página están comprendidas
en un contenedor principal llamado container y que tiene los siguientes elementos:
ELEMENTO
DESCRIPCIÓN
masthead
Cabecera, donde va el logo que hemos
creado
navigation
Menú de navegación, el usuario podrá
navegar en las distintas paginas (principal,
sobre nosotros, proyectos, enlaces)
content
Contenido principal de cada página
footer
Pie, en este apartado va información sobre
copyright, fecha de actualización, etc.
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 características para cada elemento de la estructura: el tipo de letra de la página, el
fondo del documento, etc.
• Todas las unidades que se utilizan en las estructuras están en píxeles, 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 > TAMAÑO DEL TEXTO).
• Cada elemento irá precedido del carácter #, excepto el
elemento body.
Características de cada elemento en la hoja de estilos:
• Elemento body (propiedades generales del documento):
– Tipo de letra: Verdana.
– Tamaño 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 navegación, enlaces a las diferentes páginas 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 páginas que hemos creado; tiene que colocarse con esta etiqueta. Por ejemplo, en la
página de about.html tenemos que hablar sobre
quiénes somos).
– Texto: justificado.
– Tamaño del texto: en ancho de 680 px.
– Fondo: blanco.
01_unidad 01 Aplicaciones web
15/3/10
10:52
Página 22
Unidad 1
22
PRÁCTICA PROFESIONAL
• Elemento footer (pie de página):
– Color de la letra: verde.
– Borde superior e inferior de color: verde.
– Fondo: blanco.
Este es el código: 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 añadimos unas características más:
• 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 ratón por encima de un apartado, el menú cambia el color a blanco y el fondo a
naranja.
• Quitamos el subrayado de todos los hipervínculos.
Este es el código: 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 ratón 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
hipervínculos*/
{
color: #5f8ea9;
text-decoration: underline;
}
01_unidad 01 Aplicaciones web
15/3/10
10:52
Página 23
Introducción a las aplicaciones web
23
El cuarto paso es crear el código HTML utilizando la estructura que hemos creado en el CSS:
• Creamos una etiqueta container, están incluidas el
resto de etiquetas que hemos definido en el CSS.
• Creamos la etiqueta navigation, el apartado donde
ponemos enlaces de las distintas partes de la página.
• Creamos la etiqueta masthead que es donde aparecerá el logo de la empresa, enlazamos con la página principal (index.html) y escribimos una descripción.
• Creamos la etiqueta content, donde se encuentra el
contenido de cada página.
• Creamos la etiqueta footer, donde se incluye información sobre la página.
Este es el código: 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”>Quiénes 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 gestión 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 más páginas con esta estructura, solo tenemos
que sustituir el código 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 página index.html y las partes primera y segunda de la página layout.css en el mismo directorio, y abrir con un navegador la página index.html.
Este es el resultado final de la página para la empresa
Esos4:
Es recomendable utilizar algún validador de HTML. Existen servicios de validación de código HTML:
http://validator.w3.org, y de validación de CSS:
http://jigsaw.w3.org/css-validator/. Estos
servicios son un software libre creado por el W3C para
ayudar a los diseñadores y desarrolladores web a validar
sus documentos web.
01_unidad 01 Aplicaciones web
15/3/10
10:52
Página 24
Unidad 1
24
MUNDO LABORAL
Los magos del posicionamiento en buscadores
Aparecer en los primeros puestos de Google es vital para incrementar el tráfico de un sitio web. Estos son algunos de los expertos españoles que han
desentrañado las claves para estar lo más arriba posible en el universo de Internet.
Conocen las tripas de los buscadores. Se pasan horas al día desentrañando
cómo conseguir que un sitio web sea más relevante que su competidor cuando las arañas, 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 más tráfico y más ventas. Y sin necesidad de pagar por un enlace patrocinado.
En España hay grandes expertos en posicionamiento, lo que en inglés se conoce como SEO (Search Engine Optimization), que no tienen nada que desmerecer a los gurús del sector como Rand Fishkin o Danny Sullivan, profesionales con un perfil técnico o de marketing que acumulan años 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 más que otra a Google.
(…)
La demanda de estos servicios se está incrementando en los últimos tiempos.
«Con la crisis, las empresas miran más hacia estrategias SEO porque es la primera fuente de tráfico en Internet, una manera barata de conseguir visitas»,
explica El-Qudsi.
Sin embargo, no estamos al nivel de otros países. «Hay un retraso en España
respecto a otros países debido a la menor inversión 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, cómo 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 páginas web en los buscadores?
3. Busca información sobre los expertos en SEO.
01_unidad 01 Aplicaciones web
15/3/10
10:52
Página 25
Introducción 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
información adicional acerca de la estructura del texto o su presentación.
El lenguaje de marcas más 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 presentación de
un documento escrito en HTML o XML; las hojas de estilo describen cómo se va mostrar un documento en pantalla.
Lenguajes de script de navegador
Los lenguajes de script son lenguajes de programación que sirven para crear programas que realizan acciones
dentro de una página web, como por ejemplo cambiar dinámicamente el contenido de un documento, modificar el comportamiento normal del navegador, validar formularios, realizar pequeños 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
páginas dinámicas, facilitando el acceso a las bases de datos.
Herramientas de diseño web
Para crear páginas web es necesario un software apropiado. Aunque podemos crear páginas web sencillas con
editores de texto, existen herramientas de diseño 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, vídeos y otros elementos para las páginas web.
Relación entre páginas 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 páginas dinámicas.
EVALÚA TUS CONOCIMIENTOS
1. Un lenguaje de marcas es el:
a) XHTLM
b) RFT
5. Completa las siguientes frases:
c) RTF
2. RSS 2.0 significa:
a) Really Simple Syndication.
b) Really Simple Summary.
c) Real Site Summary.
3. ¿Cómo se cierran las etiquetas en HTML?
a) (<\, >)
b) (</, >)
c) (<, >)
4. ¿Dónde 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.
a) El lenguaje de programación _________________ se
utiliza para crear pequeños programas encargados de
realizar acciones dentro del ámbito de una página
web.
b) Los lenguajes de script permiten variar _____________
una página 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.