Download Aplicaciones web
Document related concepts
Transcript
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.