Taller de Uso de las nuevas tecnologías en la búsqueda de empleo
Esta documentación corresponde a los Talleres presenciales que impartimos durante varios años a diversos colectivos de alumna/os de la Universidad de Granada, con el objetivo de familiarizarlos y darles a conocer las posibilidades que ofrece Internet en la búsqueda activa de empleo.
Varios de los temas que aquí se ven, se tratan de forma totalmente actualizada y en mayor extensión en varios de nuestros cursos online:
- Community Manager, Gestión de Medios Sociales
- SEO, Posicionamiento de Páginas Web en Buscadores
- Diseño y Programación de Páginas Web
- Publicación en Internet: Alojamiento de Sitios Web
Creación y publicación de páginas web – Transcripción de la presentación en formato texto
- Uso de las NNTT en la Búsqueda de EmpleoUNIVERSEM
TALLER ‘Uso de las NNTT en la Búsqueda de Empleo’Creación y publicación de Páginas Web:
HTML, CSS, NVU/Kompozer, HostingElaborado por
Elaborado por Digital Learning
- Uso de las NNTT en la Búsqueda de EmpleoHTMLIntroducción al lenguaje HTML
Elaborado por Digital Learning 2
- Uso de las NNTT en la Búsqueda de Empleo HTML y CSS: analogíatexto 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,
‘layout’ (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óntexto 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ónHTML: 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 especialestablaElaborado 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
HTMLElaborado 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 externaEjemplos:
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 externa3. 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 Fondofont-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 fondoNota (*): 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 Bordewidth: 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
Continuará…