Scribd Logo
Unggah

Selamat datang di Scribd!

  • Trabajo de Convergencia de Contenidos Y Servicios de Comunicación de Valor Agregado

    Diunggah oleh

    Germán de la Cruz-Blanca
    17 tayangan7 halaman

    Judul Asli

    Trabajo de Convergencia De Contenidos Y Servicios De Comunicación De Valor Agregado.docx

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    17 tayangan7 halaman

    Trabajo de Convergencia de Contenidos Y Servicios de Comunicación de Valor Agregado

    Diunggah oleh

    Germán de la Cruz-Blanca

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 7

    Trabajo de Convergencia De Contenidos Y Servicios De

    Comunicación De Valor Agregado

    Germán de la Cruz Blanca

    Máster Comunicación Audiovisual de Servicio Público

    Universidad Nacional de Educación a Distancia

    Curso 2018/2019
    1. Definición de HTML

    El HTML o HyperText Markup Language es el idioma oficial de la World Wide Web y


    es utilizado para crear documentos, definir la estructura y el diseño de una página web.

    El lenguaje HTML basa su filosofía de desarrollo en la diferenciación. Es decir que,


    para añadir un elemento externo a la página, bien sea imagen, vídeo, script, por ejemplo,
    este no se incrusta directamente en el código de la página, sino que se hace una
    referencia a la ubicación de dicho elemento mediante texto. Al ser un estándar, HTML
    permite que cualquier página web sea escrita en una determinada versión y pueda ser
    interpretada de la misma forma por cualquier navegador web actualizado.

    A lo largo de sus diferentes versiones, se han ido incorporando y suprimiendo diversas


    características, con el fin de hacerlo más eficiente y facilitar el desarrollo de páginas
    web compatibles con distintos navegadores y plataformas. Sin embargo, para interpretar
    correctamente una nueva versión de HTML, los desarrolladores de navegadores web
    deben incorporar estos cambios y el usuario tiene que, además, usar la nueva versión del
    navegador con los cambios añadidos. Normalmente, estos, son aplicados mediante
    parches de actualización automática (Firefox, Chrome) u ofreciendo una nueva versión
    del navegador, en un sitio web de descarga oficial como por ejemplo Internet Explorer.

    1.1. Nociones básicas de HTML

    El lenguaje HTML puede ser creado y editado con cualquier editor de textos básico,
    como el Bloc de notas de Windows, o cualquier otro editor que admita texto sin formato
    como Microsoft Wordpad, TextPad, Vim, Notepad++, entre otros.

    HTML utiliza etiquetas o marcas, que consisten en breves instrucciones de comienzo y


    final, mediante las cuales se determina la forma en la que debe aparecer en su navegador
    el texto, así como también las imágenes y los demás elementos en la pantalla del
    ordenador.

    Toda etiqueta se identifica porque está encerrada entre los signos menor que y mayor
    que (<>) y algunas tienen atributos que pueden tomar algún valor. En general las
    etiquetas se aplicarán de dos formas especiales:

     Se abren y se cierran, como, por ejemplo: <b>negrita</b>, que se vería en el


    navegador web como negrita.
     No pueden abrirse y cerrarse, como <hr />, que se vería en el navegador web
    como una línea horizontal.

     Otras que pueden abrirse y cerrarse, como por ejemplo <p>.

     Las etiquetas básicas o mínimas son:

    <!DOCTYPE HTML>
    2 <html>
    3   <head
    4     <meta charset="utf-8" />
    5     <title>Ejemplo1</title>
    6   </head>
    7   <body>
    8     <p>Párrafo de ejemplo</p>
    9   </body>
    10 </html>

    La versión HTML más reciente es el HTML5, que ha agregado una gran cantidad de
    funciones adicionales al HTML original, que incluye un nuevo conjunto de etiquetas de
    marca, además de que es compatible con dispositivos móviles.

    2. Definición de HTML5

    El HTML5 es el siguiente nivel del HTML que combina los componentes HTML, CSS
    y JavaScript para crear una arquitectura más ágil. Añade etiquetas para manejar la Web
    3.0: header, footer, article, nav, time (fecha del contenido), link rel=‘’ (tipo de contenido
    que se enlaza).

    Estas etiquetas permiten describir cuál es el significado del contenido. Por ejemplo, su
    importancia, su finalidad y las relaciones que existen. No tienen especial impacto en la
    visualización, se orientan a buscadores.

    Los buscadores podrán indexar e interpretar esta meta información para no buscar
    simplemente apariciones de palabras en el texto de la página. Asimismo, permite
    incorporar a las páginas ficheros RDF / OWL (con meta información) para describir
    relaciones entre los términos utilizados. Ofrece, también, versatilidad en el manejo y
    animación de objetos simples, imágenes etc.
    3. Diferencias entre HTML y HTML5

    La principal diferencia entre las versiones anteriores de HTML y HTML5 es que la


    última tiene soporte de audio y video de alto nivel integrado en las especificaciones del
    idioma. Le permite incrustar elementos de audio y video directamente en una página
    web usando las etiquetas <audio> y <video> respectivamente. El contenido de audio y
    video se puede controlar con HTML o JavaScript y se puede diseñar con CSS. Sin
    embargo, no especifica qué formatos de audio y video deben admitir los navegadores.

    HTML5 amplía la funcionalidad y la utilidad de HTML al permitir que los


    navegadores funcionen como plataformas de aplicaciones. Una de las razones
    principales por las que HTML5 es considerado el mejor y también lo que lo hace tan
    diferente de sus predecesores es que todos los principales navegadores web son
    compatibles con HTML5, como Google Chrome, Mozilla Firefox, Safari, IE, Opera,
    etc.

    Otra de las diferencias entre los dos es que HTML5 es muy fácil de usar en dispositivos
    móviles, lo que significa que tiene un soporte excepcional para el desarrollo móvil, que
    se aplica bien con un diseño receptivo y es comprendido por los principales
    navegadores web móvil, como Opera Mobile, Safari, Chrome y más.

    HTML5 facilita a los desarrolladores la creación de una versión móvil de un sitio web.
    HTML no permite que JavaScript se ejecute en el navegador, mientras que HTML5
    permite que JavaScript se ejecute en segundo plano.

    4. Creación de página HTML5

    Para la actividad de esta asignatura, se pide la realización de una página HTML5 que
    contenga texto, video, audio con enlace a tres o cuatro páginas. Para ello comienzo con
    la elección de un editor de texto. En mi caso, utilizaré Sublime Text y una vez abierto el
    programa copio y pego lo siguiente:

    <html>
    <head>
     <title>My first website</title>
    </head>
    <body>
    </body>
    <html>
    Una vez copiado, guardo el archivo con la extensión “.html”. En mi Macintosh, Sublime
    Tex facilita la opción de guardar como “página web” y no es necesario cambiar
    manualmente la extensión del archivo de texto.

    Una vez realizado este proceso, he comprobado cómo se visualizaría el primer boceto,
    por lo que pincho en el archivo y lo abro con Google Chrome. Observo que no se
    muestra todo lo que he escrito en Sublime Text. Asimismo, compruebo que todo lo que
    aparece entre los signos < y > no se muestra. Esos signos marcan una etiqueta de
    HTML, y todas las que he utilizado siguen el formato <etiqueta>contenido</etiqueta>.

    Para la estructura de mi página he añadido al principio la etiqueta <!doctype html> que


    actuaría como declaración o instrucción del documento que se trata y que va dirigida al
    navegador web para que pueda interpretar mejor el resto del documento HTML. Este
    parámetro varía según la versión de HTML que esté usando.

    Todo el contenido de mi página web debe estar incluido dentro de la etiqueta <html>
    </html>. No obstante, es conveniente especificar un atributo que indique el lenguaje o
    idioma con el que está escrita la página web. Ya que el contenido está en inglés, añadiré
    lang=“en”.

    Dentro de mi página diferencio dos partes: la cabecera, marcada con <head> </head>
    y el cuerpo <body></body>. En la cabecera, pueden ir muchas etiquetas necesarias,
    pero que no forman parte del contenido y estas se llaman etiquetas auxiliares. He
    añadido la etiqueta y el atributo <meta charset="utf-8"> que indica el sistema de
    codificación con el que está escrita la página. En la cabecera también se incluirán los
    enlaces a los archivos con hojas de estilo CSS. Para crear un link a mi página de CSS,
    he añadido <link rel="stylesheet" type="tex/css" href=estilos.css /> que hace referencia
    a la hoja de estilo que he creado. Del mismo modo, la cabecera también contiene el
    título de la página que aparecerá en la solapa del navegador.

    En la etiqueta <body></body> se incluye todo el contenido de la página. La página


    tiene varios elementos textuales, auditivos y visuales. Se observa una página de inicio
    (web.html) que se compone de cuatro subpáginas: “Poems” (poems.html), “Neither with
    nor without you” (video.html), “Freedom” (freedom.html) y “Echoes” (playlist.html).
    Para enlazar las páginas he usado la etiqueta <ul> que enumera una lista desordenada de
    cosas, junto con el atributo “class” seguido de “="navbar">”. Ejemplo:
    <ul class="navbar">

    <li><a href="poems.html">Phases</a></li>.

    La etiqueta <ul> viene de la mano de <li>, etiqueta que la define y que he usado en esta
    parte. A continuación, he añadido la etiqueta <a>, que define un hipervínculo y que se
    utiliza para enlazar de una página a otra. El atributo más importante del elemento <a> es
    el atributo href, que indica el destino del enlace. Yo he abierto cuatro, para los cuatro
    apartados. Asimismo, he creado previamente esas subpáginas añadiéndole un nombre,
    una extensión html y las he guardado en una misma carpeta, por lo que al abrir la página
    de inicio en cualquier explorador se accede a las misma fácilmente. Por otro lado, he
    añadido a cada una de las subpáginas un link para acceder a la siguiente en el orden
    elegido, de la misma manera en la que he enlazado las otras páginas; usando la etiqueta
    a href=. Ejemplo: <a href="video.html" class="button">Neither with nor without
    you</a>

    Para la estructura de mi página, he querido seguir la misma línea y hacerla


    minimalista. Para he abierto la etiqueta <body> y añadido el título de de poems.html
    <h1> phases </h1> así como un apartado a modo de explicación que va entre las
    etiquetas <h2> </h2>. Por otro lado, como he utilizado una serie de poemas que tratan
    acerca de las relaciones, es decir, de un mismo tema, los he agrupado entre
    <article></article>.

    He agrupado mis poemas en un sistema de rejillas y para ello he usado etiquetas divs,
    que define un bloque donde se incluye la información dentro de la página. En concreto,
    para el sistema de rejillas he usado class=“master-grid” y dentro estarán los poemas
    entre las etiquetas <div class='container'>. El título del poema está colocado entre las
    etiquetas <h3>, ya que previamente he utilizado <h1></h1> y <h2></h2> para marcar
    la importancia de cada texto. Los versos han sido estructurados entre la etiqueta
    <p></p>, que indica párrafo y <br> para el salto de línea en el texto. Las siguientes
    páginas de audio y video han sido estructuradas de la misma forma. En concreto en el
    vídeo, he añadido dos posibles versiones (mp4 y ogv) por si alguno de los navegadores
    no lee uno u otro. Por lo demás, no he experimentado ningún problema en cuanto a la
    lectura de mi página web en otros navegadores, únicamente en Safari, donde el audio no
    se reproduce.
    En la página de estilos he definido el color del fondo, la letra, los márgenes de cada
    una de las etiquetas y atributos que he utilizado. Como he creado más de una página, el
    objetivo de la página CSS es tener centralizado en un solo espacio todo el formato de mi
    página web. De esta forma, puedo cambiar el contenido de muchas páginas webs desde
    un solo lugar. En el archivo adjuntado se encontrarán el archivo HTML y la hoja de
    estilo y los archivos de audio y vídeo más las actividades.

    Anda mungkin juga menyukai