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


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,....

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,..

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)


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.


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:


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.

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.


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>


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


Uso de las NNTT en la Búsqueda de Empleo HTML: ejemplo de página (II)

enlace
imagen
caracteres
lista especiales

tabla


Uso de las NNTT en la Búsqueda de Empleo HTML: ejemplo de página (II)


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


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.


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 ; }


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)


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'


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,...


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:


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'


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.


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.


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>


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


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 !!


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,...)


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.


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


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


NVU: Ayuda

• 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:


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


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.


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.


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


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'


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>


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


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


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'


Hojas de Estilo

✔
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:


Editor CSS

✔
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'


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,...


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


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.



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.


Hosting

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,...


Publicar la página

●
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)


Publicar la página

✔
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


Publicación: FTP

●
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


Publicación: FTP

●
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'


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).


Creacion y publicacion de paginas Web

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Similar a Creacion y publicacion de paginas Web

Similar a Creacion y publicacion de paginas Web (20)

Más de Digital Learning SL

Más de Digital Learning SL (12)

Último

Último (11)

Creacion y publicacion de paginas Web