Professional Documents
Culture Documents
1
vamos a conocer...
2. Lenguajes de marcas 4. Hojas de estilo 5. Lenguajes de script de servidor 6. Herramientas de diseo web
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
Unidad 1
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.
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.
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.
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>
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.
13
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!.
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>
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
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;}
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).
17
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.
ACTIVIDADES
5. Crea una pgina PHP que muestre un mensaje con tu nombre y apellidos.
18
Unidad 1
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.
19
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.
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).
21
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.
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.
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.
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.
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.