Taller de Uso de las nuevas tecnologías en la búsqueda de empleo

Esta documentación corresponde a los Talleres presenciales que hemos impartido en los últimos años en la Universidad de Granada con el objetivo de familiarizar a los alumnos y darles a conocer las posibilidades que ofrece Internet en la búsqueda activa de empleo.

Hay una versión del Taller disponible para los usuarios registrados en nuestra plataforma de cursos online, con todas las presentaciones aquí publicadas y material adicional, que puede consultarse y descargarse gratuitamente.

Si deseas obtener más información sobre el Taller, puedes acceder a su ficha descriptiva:

Más Información sobre el Taller


Creación y publicación de páginas web – Transcripción de la presentación en formato texto

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

    Elaborado por

    Elaborado por Digital Learning

  2. Uso de las NNTT en la Búsqueda de EmpleoHTML

    Introducción al lenguaje HTML

    Elaborado por Digital Learning 2

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

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

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

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

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

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

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

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

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

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

  13. Uso de las NNTT en la Búsqueda de Empleo HTML: ejemplo de página (II)Elaborado por Digital Learning 13
  14. 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

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

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

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

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

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

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

    Continuará…


Navegación

INICIO TUTORIALES Diseño Web Búsqueda de Empleo Sistemas de Gestión de la Empresa Diseño Gráfico Administración Linux y Apache Programación Web Posicionamiento en Buscadores Android Publicación de Páginas Web (Hosting)

Búsqueda en nuestra web