Creacion y publicacion de paginas Web

Uso de las NNTT en la Búsqueda de Empleo UNIVERSEM TALLER 'Uso de las NNTT en la Búsqueda de Empleo' Creación y publicación de Páginas Web: HTML, CSS, NVU/Kompozer, Hosting Elaborado por Elaborado por Digital Learning

Uso de las NNTT en la Búsqueda de Empleo HTML Introducción al lenguaje HTML Elaborado por Digital Learning 2

Uso de las NNTT en la Búsqueda de Empleo HTML y CSS: analogía texto sin formato Las economías emergentes plantan cara al FMI. El G-24 exige mayor vigilancia sobre los paises ricos y más cuota de poder. Sandro Pozzi. Washington. Las economías emergentes han salido reforzadas de la crisis................... .................................................................................. estructura <noticia> <titular>Las economías emergentes plantan cara al FMI<fin titular> <subtítulo>El G24 exige mayor vigilancia sobre los países ricos y más cuota de poder<fin subtítulo> <fuente>Sandro Pozzi. Washington <fin fuente> presentación <párrafo>Las economías emergentes han salido.................................<fin párrafo> <párrafo>Oscar Tangelson, presidente de turno de..................................<fin párrafo> ............. <fin noticia> Tipografía: tipo, 'layaout' (diseño) tamaño, color, - titulares: 1 columna, alineación interlineado,... izquierda, márgenes..... - texto: 2 columnas, justificado,.... Elaborado por Digital Learning 3

Uso de las NNTT en la Búsqueda de Empleo HTML/CSS: estructura y presentación texto sin formato Las economías emergentes plantan cara al FMI. El G-24 exige mayor vigilancia sobre los paises ricos y más cuota de poder. Sandro Pozzi. Washington. Las economías emergentes han salido reforzadas de la crisis................... .................................................................................. estructura : HTML <html> <head> <title>Exigencias del G-24 al FMI</title> </head> <body> <div id=”titulares”> <h1>Las economías emergentes ... al FMI</h1> <h2>El G24 exige mayor vigilancia....pode.r</h2> presentación </div> <div id=”columna_izquierda> CSS (Estilos) <h3>Sandro Pozzi</h3> <h4>Washington</h4> <p>Las economías emergentes........ </p> <p>Oscar Tangelson.... </p> </div> <div id=”columna_derecha”> .................. </body> Podemos definir el estilo </html> de cada elemento (body, Podemos posicionar y dar estilos a p, hx, ...): p.ej: tipo de letra, las 3 secciones (div) de la página color y tamaño, márgenes,.. Elaborado por Digital Learning 4

Uso de las NNTT en la Búsqueda de Empleo HTML: definición HTML: Lenguaje de Marcado (o Anotación) de <html> <head> Hipertexto ('HyperText Markup Language') <title>Título de la página</title> </head> • No es propiamente un lenguaje de programación, <body> sino de marcación, diseñado para estructurar <h1>Cabecera principal</h1> documentos mediante etiquetas. <h2>Cabecera 2º nivel</h2> <p>Esto es un párrafo.</p> • Estas etiquetas no se visualizan, pero indican al <p>Aquí, se muestra navegador que tipo de contenido es, para que <strong>esta parte destacada pueda tratarlo/mostrarlo adecuadamente (p.ej: si </strong>del resto<p> es una cabecera, un párrafo ó una tabla). </body> </html> • Además, pueden hacer a un documento interactivo a través de los enlaces de hipertexto, permitiendo conectarlo con otros documentos/ páginas. • Aunque originalmente el HTML permitía también indicar el formato de presentación, a partir de la versión 4, esa función se encomienda (*) a un lenguaje de presentación específico: CSS, al que se conoce como 'Hojas de Estilo'. (*)según especificaciones del W3C ('Consorcio de la WWW' organismo encargado de los estándares en Internet) Elaborado por Digital Learning 5

Uso de las NNTT en la Búsqueda de Empleo HTML: elementos ● Las páginas HTML se construyen con elementos que son identificados mediante etiquetas. ● Estos elementos pueden definir: 1) Los 'contenedores' principales de la propia página (algo así como el armazón) Toda página html debe tener al menos esta estructura (*): <html> <html>: el contenedor más externo de la página. <head> </head> <head>: (cabecera) contiene información sobre la página, que no se visualiza (salvo el título, que es obligatorio y se <body> incluye con la etiqueta <title>). </body> </html> <body>: (cuerpo de la página) incluye el contenido de la página que se va a visualizar en el navegador. 2) Las distintas partes del contenido de la página: un encabezamiento un párrafo, una lista, una tabla, una imágen, un enlace,... (veremos más adelante las más comunes) 3) Información sobre la página (las meta-etiquetas ó 'metatags') que no se muestra por el navegador (p.ej.: el autor, descripción, conjunto de caracteres empleados,...) Nota (*): también deberá incluirse antes de <html> el DOCTYPE de la página. Lo veremos más adelante. Elaborado por Digital Learning 6

Uso de las NNTT en la Búsqueda de Empleo HTML: estructura de las etiquetas ● Salvo algunas pocas excepciones, la parte de contenido que define una etiqueta se delimita mediante una etiqueta de apertura y otra de cierre: <nombre_etiqueta>texto o parte de la página</nombre_etiqueta> ejemplo: <h1>Esto es un encabezamiento de nivel 1</h1> ● Las etiquetas pueden incluir información adicional mediante los atributos, que permiten: ➔ Que un mismo elemento sea tratado de forma diferente. P.ej: <h1 style=”font-family: Arial”> indica un tipo de fuente particular para h1 ➔ Especificar algún valor necesario para ese elemento P.ej: <a href=”http://www.ugr.es”>UGR</a> indica a que página enlaza ese vínculo ● La estructura general de una etiqueta con atributos sería: Elaborado por Digital Learning 7

Uso de las NNTT en la Búsqueda de Empleo HTML: etiquetas más comunes <title></title>: título de la página que se muestra en el navegador <hx></hx>: encabezamientos de orden x=1, 2, 3, 4, 5 ó 6 <p></p>: párrafo <br> (ó <br/>): salto de línea (no tiene etiqueta de cierre) <hr> (ó <hr/>): línea horizontal <div></div>: división (o capa) de la página (define un área/sección como contenedor) <span></span>: selecciona / delimita una porción de contenido <table></table>: tabla • <tr></tr>: fila de la tabla • <td></td>: celda de la tabla <ul></ul> / <ol></ol>: lista no numerada / numerada • <li></li>: cada elemento de la lista <img> (ó <img />): imagen (para indicar que imagen es: <img src”...” />) <a></a>: enlace (para indicar a donde se enlaza: <a href=”...”></a> <em></em> y <strong></strong>: texto enfatizado : comentario del autor de la página (no se muestra en pantalla) Nota (*): existen numerosas páginas web y manuales on-line que listan todas las etiquetas HTML y los posible atributos que pueden tener. Consultar los enlaces recomendados en 'del.icio.us' para este Curso. Elaborado por Digital Learning 8

Uso de las NNTT en la Búsqueda de Empleo HTML: versiones • Algunas etiquetas, principalmente relacionadas con la presentación del contenido, se descartaron en la versión HTML 4 en favor de un lenguaje específico para definir los estilos: CSS. Aunque son 'obsoletas', normalmente los navegadores las visualizan bien y se siguen utilizando en muchos webs (cada vez menos). • Ejemplo destacado: la etiqueta <font> que define las características de la fuente. • A título informativo, mencionamos brevemente las distintas versiones de HTML: • HTML 1.0 y 2.0 (1989, 1991) - HTML 3 (1995): estructura + presentación • HTML 4 (1998) HTML 4.01 (1999): estructura + CSS 2 (1998): presentación • XHTML 1.0 (2000): adaptación del HTML a las normas del XML (otro lenguaje de marcaje): etiquetas deben ir en minúscula y cerrarse, los atributos deben tener un valor e ir entre comillas,... Muy similar en sintaxis al HTML 4.01, aunque con características adicionales propias del XML. • Al inicio de la página, antes de la etiqueta <html> incluiremos una declaración indicando que norma HTML ó XHTML seguimos y si lo hacemos de forma estricta o no, para que el navegador la interprete adecuadamente. Aunque 'farragoso', solo hemos de elegir una versión (*) e ir copiandola en cada página que creemos. Un ej.: • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Nota (*): p.ej. en http://es.wikipedia.org/wiki/DOCTYPE podemos ver las diferentes versiones y su explicación. Elaborado por Digital Learning 9

Uso de las NNTT en la Búsqueda de Empleo HTML: ejemplo de creación de páginas ● Para crear una página HTML simplemente debemos generar un documento de texto sin formato que incluya el contenido de la página, estructurado con las etiquetas adecuadas, y guardándolo con la extensión '.html' ● Aunque existen editores de HTML, programas especializados en la creación de páginas web, vamos a empezar utilizando un sencillo editor de textos, el 'Bloc de Notas' (ó Notepad), que viene instalado por defecto en Windows. Podemos acceder a él en: ➔ Inicio/Programas/Accesorios/Bloc de Notas ● Comenzamos con una página muy sencilla (prueba.html): <html> visualización en el navegador fichero: prueba.html <head> <title>Página de prueba</title> </head> <body> <h1>Nuestra primera página</h1> <p>Esta es nuestra primera página HTML</p> <p>Incluimos un segundo párrafo</p> <p>Acabamos aquí</p> </body> <html> Elaborado por Digital Learning 10

Uso de las NNTT en la Búsqueda de Empleo HTML:ejemplo creación páginas • En el ejemplo de la página siguiente veremos una página HTML conteniendo, además de encabezamientos y párrafos, algunos de los elementos más usuales: • Listas (en este caso no numerada) • Imagen • Enlace • Tabla • Asimismo, se han incluido algunos caracteres especiales como 'espacios en blanco' 'símbolo &', 'vocales acentuadas',... y que se denominan Entidades de Caracteres HTML. En el propio texto de la página se explican sus características y como incluirlos con la expresión &código; (si bien, es algo de los editores HTML hacen automáticamente sin necesidad de conocer dichos códigos) • Para completar la página ejemplo deberíamos incluir las meta-etiquetas en la sección <head>, con información acerca de la página. Por ejemplo: Doctype (norma HTML que cumple la página) Codificación: UTF-8 Autor Descripción de la página Elaborado por Digital Learning 11

Uso de las NNTT en la Búsqueda de Empleo HTML: ejemplo de página (II) enlace imagen caracteres lista especiales tabla Elaborado por Digital Learning 12

Uso de las NNTT en la Búsqueda de Empleo HTML: ejemplo de página (II) Elaborado por Digital Learning 13

Uso de las NNTT en la Búsqueda de Empleo CSS: Hojas de Estilo • Una vez creada la estructura del documento y definido sus contenidos con HTML/XHTML, podemos definir su estilo de presentación mediante la utilización de CSS (Hojas de Estilo en Cascada / 'Cascade Style Sheets' ). • Con CSS podemos indicar el aspecto de cada elemento de la página, p.ej., el tipo de fuente o el interlineado de un párrafo o una lista. • También podemos posicionar cada elemento en la página, p.ej. definiendo márgenes, alineaciones o la ubicación exacta o relativa en la pantalla. • Solo haremos una breve introducción para ver los conceptos básicos de CSS que nos ayuden a entender mejor el diseño y la construcción de Sitios Web. + CSS HTML Elaborado por Digital Learning 14

Uso de las NNTT en la Búsqueda de Empleo CSS: modos de incluir estilos • Las Hojas de Estilo (ó Estilos) se pueden incluir de 3 formas diferentes: 1.Estilo en línea: definido dentro de las propias etiquetas HTML 2.Hoja de estilo interna: en la sección <head> del mismo documento HTML 3.Hoja de estilo externa: en un archivo diferente al documento HTML • Estas 3 formas de incluir estilos no son excluyentes y pueden combinarse (p.ej.: utilizar una hoja de estilos externa e incluir estilos en algunas etiquetas del documento). En caso de conflicto, prevalece el estilo más 'interno'. La prioridad es: • 1. estilo en linea --> 2. hoja estilo interna --> 3. hoja estilo externa Ejemplos: 1. Estilo en línea: <p style=”color: blue; font-family: Tahoma;”>Texto con fuente Tahoma azul</p> • En este ejemplo incluimos en una etiqueta párrafo <p>, el atributo 'style', cuyo valor son dos características de estilo de la fuente a mostrar: color azul y tipo Tahoma. Elaborado por Digital Learning 15

Uso de las NNTT en la Búsqueda de Empleo CSS: hoja de estilo interna 1. Incluimos las reglas de estilo entre las 2. Hoja de estilo interna: etiquetas: <style type=”text/css”>...</style> 2. Elegimos el elemento (selector) al que queremos dar un determinado estilo de presentación (en este caso 'p': los párrafos) e incluimos entre llaves “{}” las características que vamos a aplicarle: p {font-family:.......; (acabadas en ';') .....................; (podemos agrupar varios } selectores (p,h1 {....}) y/o declaraciones) 3. Cada característica (declaración), se compone de una propiedad (p.ej. color) y un valor (en este caso:'blue'). p { color : blue ; } Elaborado por Digital Learning 16

Uso de las NNTT en la Búsqueda de Empleo CSS: hoja de estilo externa 3. Hoja de estilo externa: ➢ Creamos un fichero de texto sin formato donde incluiremos las reglas de estilo que se aplicarán a ese documento HTML. ➢ El nombre del archivo (y su dirección) debe coincidir con el incluido en el atributo 'href' de la etiqueta <link>. Debe guardarse con la extensión '.css' Incluimos la etiqueta <link> (enlace) en la cabecera del documento HTML. En ella se describe:  rel: tipo de relación; “stylesheet”: hoja de estilo  href: la dirección URL donde se encuentra la hoja  type: tipo de archivo (una CSS) Elaborado por Digital Learning 17

Uso de las NNTT en la Búsqueda de Empleo CSS: propiedades • La utilización de CSS respecto a las antiguas etiquetas de estilo de HTML confiere importantes ventajas, además de cumplir con los estándares y estructurar mejor los documentos. Dos de ellas son: la posibilidad de reutilizar las hojas para distintas páginas y facilitar el mantenimiento de un sitio web. • P.ej, cambiar el tamaño del texto de todos los párrafos no obliga cambiar en cada etiqueta <p> de la página web, si no solo en el selector 'p' de la hoja de estilo • Existen numerosas propiedades que pueden controlarse con CSS. Vemos algunos ejemplos (*): Fuentes Texto Listas Fondo font-family: tipos color: color list-style-type: tipo de background-color: color (arial,verdana,...). Se text-decoration: efectos viñeta (círculo, cuadrado, background-image: puede especificar una (subrayado,...) número,letra...) poner una imagen lista de opciones. text-align: alineación list-style-image: utilizar background-repeat: font-weight: grosor line-height: interlineado imágenes en las viñetas como se repite la imagen de font-size: tamaño text-indent: tabulación list-style-position: fondo (vertical,horizontal,..) font-style: estilo letter-spacing:espaciado alineación texto con viñeta background-position: (itálica,..) entre letras posición imagen de fondo Nota (*): aunque se mostrarán algunas propiedades más en las siguientes páginas, no es una lista completa. Hay numerosas listas/manuales on-line de CSS en Internet que pueden consultarse como referencia. Indicamos algunas en los enlaces del curso en 'del.icio.us' Elaborado por Digital Learning 18

Uso de las NNTT en la Búsqueda de Empleo CSS: propiedades • Otra función muy importante es aplicar dimensiones y posición a los elementos HTML, lo que se denomina 'Modelo de cajas'. • Cada elemento en la página HTML es una caja rectangular, dividiendose en dos grupos: • Elementos de 'bloque': empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea. • P.ej.: encabezamientos, párrafos, listas, tablas, divisiones,.. • Elementos 'en línea': ocupan el espacio necesario para mostrar su contenido • P.ej.: enlaces, imágenes, énfasis,... Elaborado por Digital Learning 19

Uso de las NNTT en la Búsqueda de Empleo CSS: propiedades • Podemos configurar las propiedades de los elementos (de bloque, principalmente) según este modelo de cajas. Vemos algunos ejemplos: Contenido Borde width: anchura border-width: anchura height: altura border-style: tipo line-height: distancia (linea, puntos,guiones...) entre líneas border-color: color overflow:mayor que el espacio asignado (scroll, ocultar,mostrarl..) Padding y Márgenes padding: anchura de la zona de relleno margin: anchura de los márgenes Pueden aplicarse valores distintos a cada lado: arriba (top), derecha (right), abajo (bottom), izquierda (left) Ejemplos: margin-top padding-right border-width-bottom Nota: este esquema de caja (contenido, padding, borde y border-style-left margen) es tridimensional. Para completarlo, habría que añadir: 'imagen de fondo' y 'color de fondo'. Ver, p.ej: Elaborado por Digital Learning 20

Uso de las NNTT en la Búsqueda de Empleo CSS: valores de dimensión • Los valores para propiedades que tienen dimensión (p.ej.,tamaño de letra, anchura de márgenes/padding, grosor bordes,...), pueden definirse de forma muy diversa: valores absolutos valores relativos pixels (px) (relativa respecto resolución pantalla) porcentajes (%) milímetros (mm) factor escala (em) puntos (pt) (1 pulgada = 72 puntos) (% y em, respecto al tamaño de fuente del elemento padre. Ej: body: 14px --> pulgadas (in) h1: 1.2 em = 17px; h1: 150% = 21px) expresiones (small, medium, large,...) expresiones (smaller/larger, bolder...) • Por la extensión de este Taller, no podemos ver en detalle todos los posibles valores que pueden tomar las diferentes propiedades. • En cualquier caso, al trabajar con editores de html veremos que no es imprescindible (al igual que sucede con la sintaxis de las propiedades) conocer todas estas abreviaturas/expresiones, ya que podemos seleccionar los valores mediante menús. • No obstante, es de gran ayuda estar familiarizados con ellos. Podemos consultarlos en cualquiera de las listas y manuales on-line en Internet. Ver los enlaces del curso en 'del.icio.us' Elaborado por Digital Learning 21

Uso de las NNTT en la Búsqueda de Empleo CSS: valores de color • Los colores en HTML/CSS se definen por una combinación (suma) de los tres colores primarios: rojo, verde y azul (modelo RGB: red-green-blue). • Los colores que podemos aplicar resultan de la combinación de un valor (entre 0- 255) de cada uno de estos 3 colores. Estas combinaciones pueden especificarse de formas distintas en CSS: – Notación en porcentaje: rgb(x%, y%, z%) (x,y,z entre 0-100): Ej: rgb(90%, 27%, 32%) – Notación absoluta decimal: rgb(x, y, z) (x,y,z entre 0-255). Ej: rgb(203, 0, 15) – Notación absoluta hexadecimal: #xxyyzz (xx,yy,zz entre 00 y ff): Ej.:#23a73f – Con un nombre en inglés (ver tabla con palabras clave). Ej: red, blue.... Colores definidos en CSS Imagen de la especificación de W3C Modelo RGB Imagen de Wikipedia Nota: hay numerosas herramientas que permiten seleccionar visualmente los colores y convertir entre notaciones, sin necesidad de conocer estos códigos. Los editores de HTML suelen tener esta utilidad incluida. Elaborado por Digital Learning 22

Uso de las NNTT en la Búsqueda de Empleo HTML/CSS: estilos avanzados Mencionamos dos elementos HTML que nos permiten delimitar contenidos y áreas en la página: • span: permite delimitar un contenido interior mediante las etiquetas <span></span> y darle un estilo particular distinto al elemento en que se encuentra. Por ejemplo, escoger solo una parte de texto en un párrafo y darle otro formato: <p>Este párrafo <span style=”color:blue”;>tiene esta parte de texto en rojo</span> y esta no.</p> Mostraría en el navegador: Este párrafo tiene esta parte de texto en rojo y esta no. • div: permiten delimitar contenedores (denominadas divisiones o capas) mediante las etiquetas <div></div>, pudiendo englobar múltiples elementos. • Utilizando los elementos <div> con los atributos de identificación 'id' (ver página siguiente), podemos estructurar lógicamente nuestro documento, diferenciando distintas secciones dentro del mismo: cabecera, menú, multicolumnas, pie... • Con CSS, podemos aplicar a estas secciones, estilos de presentación, dimensiones y/o posicionarlas en la página, lo que nos permite diseñar ('maquetar') el aspecto final de nuestro web. • Aunque los conceptos para emplear esta técnica no son complejos, si es algo laborioso dominar su empleo, excediendo la extensión de este Taller. En este pequeño ejemplo, hemos definido la cabecera de la página, englobado el título principal y un subtítulo con la etiqueta div. Con CSS podremos darle la apariencia, y posición adecuada, utilizando el selector #cabecera. Elaborado por Digital Learning 23

Uso de las NNTT en la Búsqueda de Empleo HTML/CSS: estilos avanzados • Podemos aplicar estilos a un conjunto particular de selectores utilizando los atributos 'class' e 'id' en las etiquetas HTML, permitiéndonos identificar elementos concretos en la página. • class: incluyendo este atributo con un nombre (<selector class = ”nombre”>) podemos aplicar estilos diferenciados a esos selectores, refiriéndonos a ellos en la hoja de estilo con: selector.nombre • id: misma función que 'class' pero se utiliza para un único elemento (<selector id=”nombre”>). En la hoja de estilo los identificamos con la expresión: selector#nombre • El atributo 'class' puede aplicarse de forma genérica. Podemos definir una clase “resaltado” en la hoja de estilos: .resaltado {............; } y aplicarla posteriormente a cualquier selector: <h1 class=”resaltado”>....</h1> <p class=”resaltado>......</p> • También podemos aplicar varias clases a un mismo atributo: <p class=”resaltado, fundamental”>...</p> Elaborado por Digital Learning 24

Uso de las NNTT en la Búsqueda de Empleo Proyecto Sitio Web Personal ● Una vez que hemos visto los fundamentos de la creación de páginas web con HTML y CSS, vamos a comenzar nuestro proyecto de creación de un Sitio Web personal. ● Este proyecto constará de las siguientes fases: ➢ Diseño: planificación del Web ➢ Desarrollo: creación de las páginas web ➢ Publicación: hacerlo accesible en Internet ➔ Podemos ver un web ejemplo en: http://dlearning.atwebpages.com Elaborado por Digital Learning 25

Uso de las NNTT en la Búsqueda de Empleo Diseño Sitio Web Personal Diseño ● Esta fase la haremos básicamente en papel. Lo primero que debemos definir es el contenido que va a tener nuestra web: ✔ qué información queremos transmitir ✔ en qué 'estilo' (profesional, coloquial,..) ✔ en qué formatos (textos, imágenes, enlaces a otros web's, ...) • Diseñaremos la arquitectura de nuestro web, su estructura general: qué páginas contiene y cómo se enlazan (mapa del web: “plano de la casa”). ✔ Decidir criterio(s) para dividir la información en páginas. Los más comunes: Jerárquico (importancia/nivel de detalle) - Temático: (contenido) ➔ Evitar páginas muy extensas: dividir en 2 ó más enlazadas entre sí. ✔ Cómo se navegará en nuestro sitio web: Menús y enlaces que existirán entre las páginas. ➔ Facilidad de acceso a la información más relevante ! ➔ Evitar las 'páginas huérfanas' que no permiten ir a ningún sitio !! Elaborado por Digital Learning 26

Uso de las NNTT en la Búsqueda de Empleo Diseño Sitio Web personal • Con ese esquema general, podemos ir esbozando el formato de presentación, teniendo en cuenta las 'normas' y características propias de Internet como medio de comunciación. En todo el proceso de diseño debemos tratar de optimizar la 'usabilidad' de nuestro Web. ➢ Usabilidad:facilidad con que el visitante de un sitio web interactúa y visualiza su contenido. ● Algunos elementos importantes que debemos considerar: a) Estandarización: aunque no hay reglas estrictas, el usuario está habituado a unas convenciones en el diseño de las páginas web para su consulta y navegación: ✔ apariencia de los elementos gráficos (botones, scroll, ...) ✔ Identificación de elementos que son enlaces (dónde se puede pinchar) ✔ ubicación de la información (menús, contacto,...) Elaborado por Digital Learning 27

Uso de las NNTT en la Búsqueda de Empleo Diseño Sitio web personal b) Visualización: los usuarios tendrán distintos navegadores y pantallas (o configurados de forma diferente): resolución, niveles de seguridad, colores, tamaño fuentes,... por lo que no ven igual las páginas. ✔ Probar las páginas con navegadores más extendidos (al menos, IE y Firefox) y distintas configuraciones. ✔ Evitar elementos que suelen perjudicar la visualización de la información: fuentes pequeñas, imágenes de fondo, mal contraste de color fondo-fuente... c) Tamaño de páginas: hay usuarios con baja velocidad de acceso a Internet. ✔ Evitar páginas de tamaño muy grande (imágenes, videos,..) que puedan suponer mucho tiempo de descarga para el visitante. d) Actualización: el usuario espera encontrar información reciente. ✔ Mantener la información actualizada ✔ Indicar la fecha en que fue incorporada (si es relevante) e) Interactividad: el usuario espera poder establecer comunicación con el autor de la información por el mismo medio (Internet). ✔ Como mínimo, incluir email y/o formulario de contacto. Elaborado por Digital Learning 28

Uso de las NNTT en la Búsqueda de Empleo Creación de las páginas web Desarrollo ● En esta fase crearemos las páginas web que ya hemos diseñado sobre papel. ● Existen editores html que nos facilitan esta labor, con un interfaz gráfico similar al de los procesadores de texto y que funcionan bajo el principio WYSIWYG ('what you see is what you get'), es decir, visualizando la forma en que se mostrará la página al tiempo que se crea. ● En el mercado existen muchos editores. El más popular es Dreamweaver, aunque tiene un coste de licencia. Igual ocurre con FrontPage de Microsoft. ● Nosotros escogeremos el editor NVU, ya que es un editor potente, fácil de utilizar y gratuito (código abierto) http://www.nvu.com ● Se puede descargar la versión en español de Nvu en: http://www.proyectonave.es/productos/descargas.php Hay una versión 'no oficial' actualizada de NVU: Kompozer. Corrige algunos fallos y ofrece algunas mejoras. Puede aplicarse casi todo lo que vamos a explicar de NVU a este programa (lo recomendamos): http://www.kompozer.net/download.php Elaborado por Digital Learning 29

Uso de las NNTT en la Búsqueda de Empleo Características NVU • No es necesario conocer HTML (aunque sí recomendable) ya que la mayoría de las funciones básicas del HTML se encuentran disponibles como órdenes en la barra de herramientas y en los menús: añadir listas, tablas, imágenes, enlaces, colores y tipos de letra... ● Nvu también permite la edición del código fuente HTML. Mediante unas pestañas situadas en la parte inferior de la ventana, podemos pasar del modo de edición normal ('visual') a ver y/o editar el código fuente HTML. diseño con barra de herramientas para ver/editar código HTML Elaborado por Digital Learning 30

NVU: Ayuda Uso de las NNTT en la Búsqueda de Empleo • Aunque el manejo de este editor es muy intuitivo, con una interfaz similar a los procesadores de texto,es conveniente acceder a la ayuda del programa que nos resolverá las dudas en cuanto a funcionalidades y modo de trabajar con él: Elaborado por Digital Learning 31

Uso de las NNTT en la Búsqueda de Empleo NVU: Interfaz de usuario Elementos de la pantalla del editor Nvu: Menús desplegables: acceso a todas la operaciones principales Barra de Redacción: operaciones más utilizadas Barra de Formato: para dar formato al texto y posicionar los elementos (texto/imagen) de la página Barra de Pestañas: permite trabajar con varias páginas a la vez, en una sola ventana Panel de trabajo: ventana donde crearemos la página web (con pestaña 'Normal' seleccionada) Barra Modo de Edición: Sitios Web: modo de vista activo en Barra de Estado: administración de el documento con el que posición del cursor nuestros sitios web estamos trabajando respecto etiquetas HTML Elaborado por Digital Learning 32

Uso de las NNTT en la Búsqueda de Empleo Configuración de NVU Antes de empezar a trabajar, vamos a ver algunas de las opciones de configuración que tiene el programa NVU: • Definición del Doctype: ➔ Menú Herramientas – Preferencias – Avanzado - Marcado: elegimos la norma que vamos a seguir (HTML 4/XHTML 1, transicional/estricto) para que el programa genere el Doctype. • Información sobre la página (meta-etiquetas en sección <head>): ➔ Menú Formato – Título y propiedades de la página: incluimos título, autor, descripción y elegimos lenguaje y codificación de caracteres (ISO-8859-1 ó Unicode (UTF-8)) • Formato de presentación con etiquetas html ó estilos CSS: ➔ Menú Herramientas – Preferencias - General: marcar “Usar estilos CSS en lugar de elementos y atributos HTML” • Fondos y colores en la página ➔ Menú Formato – Colores y Fondos de la página: seleccionamos la configuración que más nos guste. Elaborado por Digital Learning 33

Uso de las NNTT en la Búsqueda de Empleo Creación de una página Vamos a ver los pasos para la creación de una página web sencilla, utilizando solo el interfaz gráfico del editor Nvu. ✔ Trabajaremos a partir del diseño hecho en papel, con los diferentes elementos (textos/imagenes) que vamos a incluir y sus posiciones en la página y a continuación lo enmarcaremos en una tabla, identificando las filas y columnas (*) Nota (*): aunque no se deberían usar tablas para posicionar elementos en las páginas web (no es su finalidad), las empleamos por ser elementos que suelen ser conocidos y 'fáciles' de utilizar. La alternativa más adecuada, basada en posicionamiento de capas (divisiones), requiere un tiempo para dominar su uso que excede del disponible en este Taller. Daremos una introducción a esa técnica para las que quieran profundizar más adelante. Elaborado por Digital Learning 34

Uso de las NNTT en la Búsqueda de Empleo Creación web local • Comenzaremos generando nuestro sitio web localmente, es decir, creando la estructura de directorios (carpetas) en nuestro disco duro, donde guardaremos las páginas y las imágenes que insertemos en las mismas. • Si trabajamos con un PC con Windows, podemos utilizar el directorio ya creado denominado 'Mis Webs' que se encuentra en la carpeta 'Mis Documentos'. • Dentro de esa carpeta 'Mis Webs' almacenaremos nuestras páginas HTML. Es usual crear un subdirectorio 'Img' para almacenar las imágenes. • podemos crear más subdirectorios para organizar las páginas y sus elementos, pero una estructura compleja de carpetas puede propiciar errores al enlazar las páginas en el web o insertar elementos ya que hay que especificar el 'path' (camino) donde se encuentran Elaborado por Digital Learning 35

Uso de las NNTT en la Búsqueda de Empleo Inserción de tablas ✔ Abrimos el editor Nvu y escribimos la cabecera: 'Web Personal de....', eligiendo del menu que identifica el tipo de texto la opción 'Título1'. ✔ Insertamos una tabla de 4 filas x 2 columnas, y en sus celdas podremos incluir el texto y las imagenes que teníamos pensadas. Seleccionar en este menu: 'Titulo1' Elaborado por Digital Learning 36

Uso de las NNTT en la Búsqueda de Empleo Tablas ✔ Las tablas, aunque su función sea estructurar datos tabulados, permiten también dividir la página en sus secciones principales (p.ej, botones de menú, contenido, imagenes..) y alinear texto o imagenes en ese esquema de diseño. ✔ Hay varios parámetros ajustables a nivel de tabla, fila/columna y celdas: ➔ Border: anchura del borde exterior de la tabla (no visible: valor=0. Por defecto, 1 pixel) ➔ Cellspacing (espaciado): espacio entre celdas (por defecto: 2 pixels) ➔ Cellpadding (relleno):espacio entre el contenido de la celda y y su borde (defecto: 1 pixel) ➔ anchura/altura: en pixels ó en % respecto a la página o la tabla ➔ Imagen o color de fondo ➔ Alineación: de la tabla respecto a la página o del texto/imagen respecto a las celdas ✔ Podemos hacer operaciones parecidas a las que realizamos con las tablas en los procesadores de texto: insertar filas/columnas, unir/dividir celdas, .... ✔ A nivel de código HTML, la tabla se 'visualizaría' de la forma: <TABLE> <TR> <TD>celda</TD> <TD>celda</TD> </TR> (fila) <TR> <TD>celda</TD> <TD>celda</TD> </TR> (fila) </TABLE> Elaborado por Digital Learning 37

Uso de las NNTT en la Búsqueda de Empleo Dar formato al texto ✔ Podemos dar formato y aplicar efectos a todos los títulos y textos utilizando los botones y menús de la Barra de formatos ó eligiendolos del menú desplegable de la opción “Formato”: tipo de fuente, tamaño, color, negrita/cursiva, alineación, sangrado,.... Tamaño de fuente Alineación del texto Color texto, fondo y resaltados Tipo de letra Elaborado por Digital Learning 38

Uso de las NNTT en la Búsqueda de Empleo Insertar imagen ✔ Para insertar imagenes en la página, debemos guardalas previamente en un fichero (preferible formato GIF ó JPEG) almacenado en nuestra carpeta 'img'. ✔ Seleccionaremos la celda donde queremos incluir la imagen y con el botón 'Imagen' de la barra de redacción podremos escoger el fichero que vamos a incluir pudiendo definir diversos parámetros: – Texto alternativo: texto que se ve en pantalla si el navegador tiene desactivada la carga de imágenes – Dimensiones: real o personalizada – Apariencia: alineación de texto y espacios alrededor de la imagen – Enlace: definir si la imagen es un enlace a otro fichero/elemento Elaborado por Digital Learning 39

Uso de las NNTT en la Búsqueda de Empleo Insertar enlace ✔ Podemos hacer que un texto (o imagen) de la página enlace a otra página de nuestro web o a una página de un web externo, de forma que el visitante 'navegue' por nuestro site. ✔ Seleccionamos el texto que va a ser enlace y pulsamos el botón 'Enlace' de la barra de redacción. Incluiremos la URL a la que queremos que se dirija este vínculo. ➢ Si la página esta en el mismo directorio, basta con poner su nombre e indicar que es una URL relativa a la dirección de la página. Ej: 'cv.html' ➢ Si es externa, indicar la URL completa. Ej: 'http://www.ugr.es/estudios.htm' ➢ Si es una dirección de correo incluir 'mailto'. Ej: 'mailto:nombre@hotmail.com' Elaborado por Digital Learning 40

Hojas de Estilo Uso de las NNTT en la Búsqueda de Empleo ✔ Cuando aplicamos los formatos a los diversos elementos (tabla, texto, ...) desde los botones y/o menús, el programa NVU aplica los estilos en línea, dentro de las etiquetas de los elementos HTML. Podemos consultarlo, viendo el código HTML que ha ido generando. ✔ P.ej., el estilo del título del web ejemplo está dentro de la etiqueta <h1>: <h1 style="font-weight: bold; font-family: Comic Sans MS; color: rgb(51, 102, 255);">WEB PERSONAL DE ISABEL SASTRE RODRIGUEZ</h1> ✔ Si queremos que esos estilos se incluyan en una hoja de estilo, generando un código más claro y fácil de mantener deberemos elegir la opción de menú: Herramientas/Editor CSS: Elaborado por Digital Learning 41

Editor CSS Uso de las NNTT en la Búsqueda de Empleo ✔ Pantalla del menú Editor CSS: Si marcamos 'modo avanzado' se activarán los botones: <link>: para crear hoja estilo externa <style>: crea hoja de estilo interna Si pulsamos 'Regla' se crea directamente una hoja de estilo interna y la pantalla cambia a: Para aplicar estilos, p.ej., a los párrafos seleccionamos el botón de abajo y en la casilla escribimos el normbre de la etiqueta: 'p' y a continuación pulsamos 'Crear regla de estilo' Elaborado por Digital Learning 42

Uso de las NNTT en la Búsqueda de Empleo Editor CSS: configurando propiedades ✔ Ahora ya podemos aplicar los estilos (en este ejemplo a los párrafos) eligiendo las pestañas adecuadas: texto, fondo,... ✔ En esta pantalla, hemos elegido la opción 'TEXTO' y vemos como podemos configurar mediante menús desplegables numerosas propiedades de este elemento. Para el color, disponemos de una herramienta visual para su selección. En este ejemplo, hemos elegido al azar una serie de valores. En el cuadro de abajo, nos aparece una frase de prueba con la apariencia que le estamos dando al texto: fuente, color, efectos,... Elaborado por Digital Learning 43

Uso de las NNTT en la Búsqueda de Empleo CSS: hoja estilo interna ✔ Podemos comprobar en el código HTML de la página, como el programa NVU ha insertado una hoja de estilo interna con las propiedades y valores seleccionados en el ejemplo anterior para el elemento párrafo (p): Hoja de estilo interna Elaborado por Digital Learning 44

Uso de las NNTT en la Búsqueda de Empleo Test de la página ✔ Guardaremos la página con extensión 'html' en la carpeta local. ✔ Es conveniente comprobar como se visualiza en los navegadores más utilizados, IExplorer y Firefox, y a diferentes resoluciones de pantalla. Podemos utilizar servicios web gratuitos para hacer esos tests, p.ej: http://www.browsershots.org ✔ Una vez creado nuestro sitio web localmente, pasaremos a la fase de Publicación. Para ello, deberemos subscribirnos a un servicio de hosting para que sea accesible en Internet. Elaborado por Digital Learning 45

Uso de las NNTT en la Búsqueda de Empleo Publicación Sitio Web: Hosting ● El alojamiento web o hosting es el servicio que provee a los usuarios de Internet un sistema para poder almacenar información, imágenes, vídeo, o cualquier contenido accesible vía Web. ● Las compañías de 'Hosting' proporcionan espacio de un servidor (ordenador) a sus clientes y la infraestructura de comunicaciones necesaria para que su sitio web esté disponible en la WWW. Elaborado por Digital Learning 46

Hosting Uso de las NNTT en la Búsqueda de Empleo Existen numerosos webs que ofrecen un servicio de alojamiento gratuito. Podemos encontrar una lista de estos servicios con sus caracterísiticas básicas (en inglés) en la dirección: – http://www.thefreesite.com/Free_Web_Space/index.html Para elegir uno, podemos comparar las prestaciones que ofrecen, fijándonos en características básicas como: - espacio de alojamiento - transferencia máxima permitida. - tipo de dominio - inclusión de publicidad - herramientas (administracion web, estadísticas visitas,...) - otros servicios: cuenta de correo,... Elaborado por Digital Learning 47

Publicar la página Uso de las NNTT en la Búsqueda de Empleo ● Una vez registrados, pasaremos a publicar nuestra Web, es decir, 'subiremos' (copiaremos) las página al servidor (hosting) donde vamos a alojar nuestra web. ● En ese servidor reproduciremos la estructura de directorios (carpetas) y ficheros locales que tenemos en nuestro PC. ● Para copiar los ficheros podemos utilizar: ✔ un programa FTP (transferencia de ficheros) que instalaremos en nuestro PC o que nos proporcione el propio servicio de hosting. ✔ directamente con Nvu, pulsando la tecla 'Publicar' de la barra de redacción, si hemos dado de alta previamente nuestro sitio web externo en el programa (ver siguiente diapositiva) Elaborado por Digital Learning 48

Publicar la página Uso de las NNTT en la Búsqueda de Empleo ✔ Si utilizamos Nvu deberemos dar de alta el sitio web externo. ✔ Elegimos la opción editar sitios / nuevo sitio ✔ Cumplimentamos los datos de nuestro servicio de alojamiento XXXX informacion de nuestro hosting Elaborado por Digital Learning 49

Publicación: FTP Uso de las NNTT en la Búsqueda de Empleo ● Podemos también utilizar un programa cliente de FTP (File Transfer Protocol o Protocolo de Transferencia de Ficheros). Este programa permite la gestión de tu sitio remoto (hosting) y copiar tus ficheros a dicho servidor. ● Existen una gran cantidad de programas FTP. Uno recomendable es FileZilla, muy fácil de utilizar y disponible en Internet en versión española para descargar e instalar en nuestro PC de forma gratuita. Hay numerosos sitios donde puede obtenerse. P.ej: http://filezilla.uptodown.com/ ● Para configurar este programa o cualquier otro FTP, serán necesarios los siguientes datos: ● Host: dirección del servidor donde alojaremos nuestra Web. Tiene la forma siguiente: ftp.sudominio.com ● Usuario ● Contraseña Elaborado por Digital Learning 50

Publicación: FTP Uso de las NNTT en la Búsqueda de Empleo ● Al ejecutar el programa, podremos conectarnos al servidor remoto y tener en una sola ventana tanto los ficheros (páginas html, imagenes...) de nuestro web local, como los que hemos 'subido' al hosting. ● Podemos copiar de un sitio a otro con un simple 'drag-and-drop' Elaborado por Digital Learning 51

Uso de las NNTT en la Búsqueda de Empleo Pasos para crear un Sitio Web • Resumen de pasos para crear y publicar nuestro sitio web en Internet 1) Definir la arquitectura de nuestro web y el diseño de las páginas que tendrá. 2) Crear las páginas con un editor de páginas web (o en HTML directamente) localmente (en nuestro PC). 3) Suscribirnos a un servicio de hosting (alojamiento externo) y obtener una dirección (URL), donde ubicaremos nuestro web. 4) 'Subir' (copiar) nuestro web local en el servidor del hosting mediante un programa FTP (utilizando un programa o funcionalidad de nuestro editor/hosting). Elaborado por Digital Learning 52

http://www.digitallearning.es	200
http://www.slideshare.net	10
https://jujo00obo2o234ungd3t8qjfcjrs3o6k-a-sites-opensocial.googleusercontent.com	6
http://antiamiguez.blogspot.com	2
http://jujo00obo2o234ungd3t8qjfcjrs3o6k-a-sites-opensocial.googleusercontent.com	1

Creacion y publicacion de paginas Web

by Digital Learning SL on Nov 08, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 219

Statistics

Creacion y publicacion de paginas Web — Presentation Transcript