Diseños de páginas Web con HTML

UNIVERSIDAD PERUANA UNIÓN

FACULTAD DE INGENIERÍA Y ARQUITECTURAEAP Ingeniería de Sistemas

MONOGRAFÍA

Diseños de páginas Web con HTML

Monografía presentada en cumplimiento parcial de la asignatura de Técnicas de Estudio e Investigación

AutoresAlumnos: Eliacer Fernandez Guevara

Jhony Vidarte MontezaKevin Ticlavilca Tapia

Elar Shime Becerra Martinez

ProfesoraLic. Rosa Linda Mamani Morales

Morales, Noviembre de 2013

Índice de contenido

Resumen.................................................................................................................................................4

Palabras clave..........................................................................................................................................4

Abreviaturas y/o símbolos usados........................................................................................................4

1. Introducción...................................................................................................................................5

2. Marco teórico.................................................................................................................................6

2.1 Definiciones..................................................................................................................................6

2.1.2 ¿Qué es HTML?...................................................................................................................6

2.1.1 Estructura Básica de un documento HTML......................................................................6

2.1.2 Lenguaje de etiquetas...........................................................................................................7

2.1.3 Parámetros de la etiqueta <BODY>....................................................................................7

2.2 Formatos del texto......................................................................................................................7

2.2.1 Atributos del cuerpo del texto..............................................................................................7

2.2.2 Etiquetas de texto.................................................................................................................8

2.2.3 Enlaces...................................................................................................................................8

2.2.3.1 Enlaces específicos.........................................................................................................8

2.3 Formato de encabezados.............................................................................................................8

2.3.1 Etiquetas del encabezado.....................................................................................................8

2.4 Formato de párrafo....................................................................................................................9

2.5 Atributos de la imagen:...............................................................................................................9

2.5.1 Código de colores................................................................................................................10

2.5.2 Elementos gráficos..............................................................................................................10

2.6 Tablas.........................................................................................................................................10

2.6.1 Atributos de la tabla:..........................................................................................................11

2.6.1.1 Atributos de celda:.......................................................................................................11

2.7. Páginas dinámicas y estáticas......................................................................................................12

2.7.1 Paginas estáticas.................................................................................................................12

2.7.1.2 ¿Cuáles son las ventajas del diseño de una página estática?....................................12

2.7.2 Páginas dinámicas..............................................................................................................13

2.7.2.1 ¿Qué son las páginas dinámicas?.................................................................................13

1

2.7.2.2 ¿Cuáles son las ventajas de las páginas dinámicas?..................................................13

2.7.2.3 ¿ Y cuáles son sus desventajas?..................................................................................13

2.7.3 Importancia de ambas y contraste....................................................................................14

2.7.3.1 ¿Qué me interesa más web dinámica o web estática?................................................14

2.7.3.2 ¿Si tengo una empresa que vende productos y servicios, necesito web dinámica o estática?....................................................................................................................................15

2.7.3.3 ¿Mi organización desea tener presencia en Internet que necesito?.........................15

2.7.3.4 ¿Por qué me cuesta más una web dinámica que una web estática?.........................15

2.7.3.5 ¿Tengo una web estática lo puedo convertir a dinámica?........................................15

2.7.3.6 ¿Quién tiene más vida útil la web dinámica o la web estática?................................15

2.8 Evolución de la web...................................................................................................................16

2.8.1 Web 1.0...............................................................................................................................16

2.8.1.1 Características de la Web 1.0:....................................................................................16

2.8.2 Web 2.0................................................................................................................................17

2.8.2.1 Características.............................................................................................................17

2.8.2.2 ¿Cuáles son las ventajas de la Web 2.0?.....................................................................17

2.8.2.3 ¿Cuáles son las desventajas de la Web 2.0?...............................................................18

2.8.3.1 Web semántica.........................................................................................................18

2.8.3.2 Características de la Web 3.0.....................................................................................19

2.8.3.3 ¿Cuáles son las ventajas de la web 3.0?.....................................................................20

2.8.3.4 ¿Cuáles son las desventajas de la web 3.0?................................................................20

2.8.4 Web 4.0................................................................................................................................20

2.8.4.1 ¿Cuáles son las ventajas de la Web 4.0?.....................................................................21

2.8.4.2 ¿Cuáles son las desventajas de la Web 4.0?...............................................................21

2.9 HTML 5..................................................................................................................................21

2.9.1 Ventajas de HTML5...........................................................................................................21

2.9.1.1 Páginas más comprensibles y mejor estructuradas...................................................21

2.9.1.2 Vídeo nativo sin instalaciones adicionales..................................................................22

2.9.1.3 Geolocalización............................................................................................................22

2.9.1.5 Aplicaciones offline......................................................................................................22

2.9.1.6 Dibujos, animaciones y videojuegos...........................................................................22

2.9.2 Desventajas de HTML 5.....................................................................................................22

2

3. Conclusiones.....................................................................................................................................23

Agradecimiento...................................................................................................................................24

Referencias...........................................................................................................................................25

3

Resumen

HTML es un lenguaje marcado de hipertexto que pueden contener texto, videos,

gráficos, fotografías; ya que destaca por ser sencilla, rápida, cómoda y, sobre todo, más

económica.

Hoy en día los sitios WEB se han convertido en una de las opciones de mayor consulta

y divulgación para la sociedad actual, como también uno de los medios de comunicación

rápidos y entretenidos. Por consiguiente hacer una publicidad en televisión es bien costoso,

ocasionando que muchos no operen en el ámbito de la competitividad. En su gran mayoría se

desconoce de los beneficios que genera el publicitar algo en un sitio web. Empecemos por

una página estática por lo que representan sencillas formas de poder publicitar su negocio en

internet.

Es asimismo una excelente opción para aquellas empresas donde solo desean mostrar

información acerca de su perfil comercial, como lo son: quiénes somos, dónde estamos, a qué

nos dedicamos, nuestros servicios, etcétera; posteriormente utilizar las páginas Web

dinámicas.

Palabras clave

El HTML (Hyper Text Markup Language)

LINK: Es un hiperenlace

NOTEPAD: Es un editor de texto

SGC: Sistema de gestión de contenidos

DREAMWEAVER es un software fácil de usar que permite crear páginas web profesionales.

WEB MASTER: Persona encargada del mantenimiento y programación de la web.

Abreviaturas y/o símbolos usados

< Menor que indica el inicio o abertura de entrada.

> Mayor que indica el final o abertura de finalizada.

4

= Indica el resultado que deseo que sea.

“” Permite que en medio de ambas se escriba lo deseado.

/ Indica cerradura

1. Introducción

Esta monografía “Diseños web con HTML” (Lenguaje marcado de Hipertextos), tiene

como finalidad describir las ventajas del diseño de páginas Web con HTML, como una forma

de poder publicitar su negocio en internet. Introducirse en HTML es una forma sencilla y

didáctica de aprender a diseñar en web obteniendo resultados visibles de manera práctica para

crear tanto sitios básicos como muy avanzados. Hoy en día los sitios WEB se han convertido

en una de las opciones de mayor consulta y divulgación para la sociedad actual, como también

uno de los medios de comunicación rápidos y entretenidos. La mayoría de negociantes

desconocen de los beneficios que genera la publicidad de productos en la Web. Para ello

empecemos primero por una página Web estática ya que destaca por su sencillez, rapidez,

comodidad y, sobre todo, por ser la forma más económica. Los diseños web estáticos son una

excelente opción para aquellas empresas donde solo desean mostrar información acerca de su

perfil comercial, como lo son: quiénes somos, dónde estamos, a qué nos dedicamos, nuestros

servicios, etcétera. Las páginas de este estilo representan sencillas formas de poder publicitar

su negocio en internet. No se requiere de mucha inversión, solo se necesitaría que usted diseñe

su propia página o mejor aún, reciba la ayuda de un especialista para asegurar la eficacia y la

actividad llamativa a los clientes potenciales. Desde un inicio usted conocerá las etiquetas más

usadas; es necesario aprender a conocer al menos la función que cumple cada etiqueta o

comandos. Asimismo es necesario que usted tenga conocimientos básicos del inglés. A

continuación damos a conocer lo siguiente: la estructura de una página web y las etiquetas más

usadas, páginas dinámicas, páginas estáticas, la evolución de la web: 1.0, 2.0, 3.0, 4.0, y

HTML 5. Mostramos información básica y necesaria de cada una de ellas tales como ventajas,

desventajas y sus aplicaciones. Que esta investigación motive tu forma de ver las cosas de

manera más amplia y que nos integremos a las estrategias de negocios en la web.

5

2. Marco teórico

2.1 Definiciones

HTML (HyperText Markup Language) es el primer lenguaje que una persona debe

conocer si desea comenzar a realizar páginas web. HTML no es un lenguaje de programación,

sino un lenguaje descriptivo, una serie de etiquetas que el navegador interpretará de una u otra

forma para mostrar distintos contenidos por pantalla.[1]

HTML, es un lenguaje de marcación que está diseñado para estructurar textos y

presentarlos en forma de hipertexto, que es el formato estándar de las páginas Web. Una de

las ventajas del lenguaje HTML es que puedes ser creado y editado en cualquier editor de

textos básico, block de notas de Windows.[2]

El HTML es un lenguaje que basa su sintaxis en un elemento de base al que llamamos

etiqueta. Estas dos etiquetas (<HTML> y </HTML>) siempre aparecerán en los ficheros

programados en HTML para indicarle al navegador que lo que está interpretando es lenguaje

HTML. [3]

2.1.2 ¿Qué es HTML?

Lenguaje de Marcación de Hipertexto.

No es un Lenguaje de Programación.

Es un sistema de etiquetas.

Define la forma de presentar información.

No presenta ningún compilador.

Es Interpretado por un Browser (Internet Explorer, Netscape, etc.). [4]

2.1.1 Estructura Básica de un documento HTML

<HTML>

<HEAD>

<TITLE>Titulo de la página</TITLE>

</HEAD>

<BODY parámetros> Contenido de la Página </BODY>

</HTML> [4]

6

2.1.2 Lenguaje de etiquetas.

1. <HTML></HTML> Define la pág. Web.

2. <HEAD></HEAD> Define la cabecera de la Pág. Web.

3. <BODY></BODY> Define el cuerpo de la pág. Web.

4. <TITLE></TITLE> Define el título para la pág. [4]

2.1.3 Parámetros de la etiqueta <BODY>

1. Bgcolor=“Red” o “#FF0000” Define el color de fondo de la Pág. Web.

2. Background=“ima01.jpg” Define una imagen de fondo para la Pág. Web.

3. Text=“White” Define el color del Texto.

4. Link=“Blue” Define el color del enlace no visitado.

5. Vlink=“Red” Define el color del enlace visitado.[4]

2.2 Formatos del texto

1. <B></B> Negrita.

2. <I> </I> Cursiva.

3. <U></U> Subrayado.

4. <TT></TT> Tamaño fijo (tipo máquina de escribir)

5. <STRONG> </STRONG> gran énfasis

6. <SUP></SUP> Superíndice

7. <SUB></SUB> Subíndice. [4]

2.2.1 Atributos del cuerpo del texto

1. <BODY BGCOLOR=“color”> Determina el color del fondo, mediante un nombre o

un valor hexadecimal.

2. <BODY TEXT=“color”> Determina el color del texto

3. <BODY LINK=“color”> Determina el color de los enlaces,

4. <BODY VLINK=“color”> Determina el color de los enlaces visitados,

5. <BODY ALINK=“color”> Determina el color de los enlaces activos. [4]

7

2.2.2 Etiquetas de texto

<FONT></FONT>

Los atributos básicos de la etiqueta FONT son tres:

1. SIZE: determina el tamaño de la fuente, de 1 a 7.

2. FACE: indica la fuente que se desea utilizar. Puede escoger cualquier tipo de fuente

que desee que aparezca en su página.

3. COLOR: determina el color de la fuente, mediante un nombre o un código

hexadecimal.

2.2.3 Enlaces

<a href="URL"></a> Crea un hipervínculo.

2.2.3.1 Enlaces específicos

<a href="#NAME"></a> Enlaza con el destino deseado desde cualquier otro punto del

documento.

<a name="NAME"></a> Crea un punto de destino dentro de un mismo documento.

Por ejemplo: <a href= “#norte”>Desde el norte</a> <I><a name=”norte”></a>Desde el

norte:</I>

<a href="FILENAME.htm#NAME"></a> Enlaza con el punto de destino desde un punto

cualquiera de un documento distinto.

<a name="NAME"></a> Crea un punto de destino dentro de un mismo documento.

2.3 Formato de encabezados

<h1></h1> Crea encabezados. Hay seis niveles de encabezados, de H1 (el más grande) a H6

(el más pequeño).[4]

2.3.1 Etiquetas del encabezado

<TITLE></TITLE> Sitúa el nombre del documento en la barra de título[4].

8

2.4 Formato de párrafo

Existen distintas posibilidades para alinear el texto en un párrafo:

1. <p></p> Crea un nuevo párrafo.

2. JUSTIFY (justificado)

3. LEFT (a la derecha)

4. RIGHT (a la izquierda)

5. CENTER (centrado)

6. <hr> Inserta una barra horizontal.[4]

7. <br> Inserta un salto de línea. No hace falta cerrar la etiqueta.

8. <BLOCKQUOTE> </BLOCKQUOTE> Indenta el texto por ambos lados.

2.4.1 Listas

1. <ol></ol> Crea una lista numerada (ordenada).

2. <ul></ul> Crea una lista con símbolos (simple o no ordenada).

3. <li></li> Precede a cada elemento de la lista y añade un número.

4. <dl></dl> Crea una lista de definiciones.

5. <dt> Precede a cada elemento de la definición.

6. <dd> Precede a cada definición.

2.5 Atributos de la imagen:

1. WIDTH (ancho) - HEIGHT (alto)

2. ALT (texto alternativo)

La alineación de la imagen puede producirse de las siguientes maneras:

3. LEFT (izquierda)

4. RIGHT (derecha)

5. CENTER (centro)

6. BOTTOM (inferior)

7. TOP (superior)

8. MIDDLE (media)

9

9. <img src="name" border=”?”> Determina el tamaño del borde alrededor de una

imagen.

2.5.1 Código de colores

Blanco = #FFFFFF Azul Cielo = #3299CC

Amarillo = #FFFF00 Gris Oscuro= #2F4F4F

Rojo = #FF0000 Verde Oscuro = #2F4F2F

Azul = #0000FF Turquesa = #7093DB

Verde = #00FF00 Purpura = #871F78

Negro = #000000 Naranja = #7F7F00

Cyan =#00FFFF Magenta = #FF00FF

Gris = #C0C0C0 Marrón = #A62A2A

2.5.2 Elementos gráficos

<img src="filename.extension"> Inserta una imagen.

2.5.3 La etiqueta tiene dos atributos básicos:

1. SIZE: determina el tamaño (alto) de la barra.

2. WIDTH: determina el ancho de la barra, a modo de porcentaje de un valor absoluto.

3. <hr noshade> Crea una barra sin sombreado.

2.6 Tablas

1. <table></table> Crea una tabla.

2. <tr></tr> Determina las filas de una tabla.

3. <td></td> Determina las celdas de una fila.

4. <th></th> Determina el encabezado de una tabla (una celda normal con texto centrado

y en negrita).

10

2.6.1 Atributos de la tabla:

1. BORDER: determina la anchura del borde alrededor de las celdas de una tabla.

2. CELLSPACING: determina la cantidad de espacio entre las celdas.

3. CELLPADDING: determina la cantidad de espacio entre el borde de una celda y los

contenidos de la misma.

4. WIDTH: determina el ancho de una tabla (en píxeles o como porcentaje del ancho del

texto).

Por ejemplo: <table width="85%" border="1">

2.6.1.1 Atributos de celda:

1. ALIGN: determina el tipo de alineación para la(s) celda(s) (izquierda, centrada o

derecha).

2. VALIGN: determina la alineación vertical para la(s) celda(s) (superior, centrada,

inferior).

3. Por ejemplo: <tr align=”center” valign=”top”>

4. Atributos de columna:

5. COLSPAN: determina el número de columnas que se extenderá una celda.

6. ROWSPAN: determina el número de filas que se extenderá una celda (valor por

defecto=1)

7. NOWRAP: evita que las líneas de una celda se rompan en su proceso de ajuste.[4]

11

2.7. Páginas dinámicas y estáticas

2.7.1 Paginas estáticas

2.7.1.1 ¿Qué son páginas web estáticas?

Fue el principio del inicio del desarrollo de las telecomunicaciones, con la web 1.0 el

usuario era restringido a leer la misma información ya que no se podía actualizar

continuamente. Los diseños web estáticos son una excelente opción para aquellas empresas

donde solo desean mostrar información acerca de su perfil comercial, como lo son: quiénes

somos, dónde estamos, a qué nos dedicamos, nuestros servicios, etcétera.[5]

Este tipo de páginas contienen información que el cliente no puede manipular, es decir,

si el cliente de este tipo de páginas web desea modificar cualquier tipo de contenido mostrado

en su web estática, deberá de ponerse en contacto con la empresa que la desarrollo para poder

realizar dichas modificaciones. Las páginas de este estilo representan sencillas formas de

poder publicitar su negocio en internet. No requieren bases de datos ni lenguajes de

programación y constan de dos niveles y cuatro páginas estáticas.

2.7.1.2 ¿Cuáles son las ventajas del diseño de una página estática?

a. Estas páginas son muy sencillas de crear, aunque ofrecen pocas ventajas tanto a los

desarrolladores como a los visitantes, ya que sólo se pueden presentar textos planos

acompañados de imágenes y a lo sumo contenidos multimedia como pueden ser videos

o sonidos. [5]

b. Destaca por su sencillez, rapidez, comodidad y, sobre todo, por ser la forma más

económica de tener una página web profesional. [5]

2.7.1.3 ¿Y cuáles son sus desventajas?

a. Las páginas web estáticas son difíciles de editar - para poder modificar el texto de una

página web estática habría que descargar la página en HTML del servidor, modificar

su contenido y guardarla de nuevo en el servidor web. [5]

b. Este tipo de diseños web son incapaces de soportar aplicaciones web como gestores de

base de datos, foros, chats on-line, etc.

12

2.7.2 Páginas dinámicas

2.7.2.1 ¿Qué son las páginas dinámicas?

Una página es dinámica cuando se incluye cualquier efecto especial o funcionalidad y

para ello es necesario utilizar otros lenguajes de programación, aparte del simple HTML. Un

sitio web dinámico es uno que puede tener cambios frecuentes en la información. Cuando el

servidor web recibe una petición para una determinada página de un sitio web, la página se

genera automáticamente por el software como respuesta directa a la petición de la página.[6]

2.7.2.2 ¿Cuáles son las ventajas de las páginas dinámicas?

a. Cuenta con gran número de posibilidades en su diseño y desarrollo.

b. En su realización se utilizan diversos lenguajes y técnicas de programación.

c. Presentación de contenidos en diversos dispositivos y formatos.

d. Mayor dinamismo y renovación constante de la imagen del sitio.

e. Permite un gran número de funcionalidades tales como base de datos, foros, contenido dinámico, etc.[7]

El contenido de la página modificada es almacenado en la base de datos del servidor y

generado en la página en tiempo real una vez requerido por el usuario. Las páginas web

dinámicas posibilitan el desarrollo de páginas que necesiten de actualizaciones frecuentes. Son

fáciles de editar ya que la mayoría de los servicios están automatizados. [7]

2.7.2.3 ¿ Y cuáles son sus desventajas?

Necesidad de php y mysql funcionando en el servidor (cualquier problema con ellos

supondrá que nuestra web dejará de funcionar).

Dificultad de migración de servidor (normalmente necesitaremos que alguien con

experiencia nos ayude, aunque alguien con experiencia en servidores no tendrá mucha

dificultad en hacer el traspaso de server.…)

Posibilidad de agujeros de seguridad que pueden comprometer nuestro sitio, sobre todo

si no estamos actualizados con últimas versiones, etc…[8]

13

Figura 1. Esquema de páginas Web dinámicas- 15/10/13

2.7.3 Importancia de ambas y contraste

2.7.3.1 ¿Qué me interesa más web dinámica o web estática?

Como siempre, depende de nuestras necesidades. Si periódicamente necesitas

actualizar tu web, es recomendable usar una página web dinámica. En caso que únicamente

disponga de una web para presentar su empresa en internet como una imagen corporativa

simple y poco más le recomendamos que elija una página web estática.[8]

El caso más claro de página web dinámica sería una tienda online, donde debe

actualizar sus productos, sus precios, etc… Otro ejemplo claro de página dinámica sería un

foro en internet donde los usuarios hacen sus consultas y otros usuarios postean respuestas.

También sería un claro ejemplo un Blog donde se pueden poner artículos y la gente puede

hacer sus comentarios.

14

2.7.3.2 ¿Si tengo una empresa que vende productos y servicios, necesito web dinámica o

estática?

Web dinámica por supuesto, donde usted podrá colocar los beneficios, ventajas y

ofertas de sus productos y servicios variándolo constantemente de acuerdo a sus

requerimientos o promociones que quiera realizar por temporadas, todo ello con una total

flexibilidad y rapidez. [8]

2.7.3.3 ¿Mi organización desea tener presencia en Internet que necesito?

Si sólo desea tener una presencia en Internet de su organización lo que usted necesita es

una página web estática, donde muestre información como visión, misión, reseña histórica,

giro de la organización, staff con el que cuenta, gestiones que realizan la organización, etc.

Información que desea hacer meramente pública. [8]

2.7.3.4 ¿Por qué me cuesta más una web dinámica que una web estática?

Porque, en la web dinámica se realiza un trabajo con mayor planificación con miras

hacia el futuro crecimiento de su empresa y con un staff de profesionales multidisciplinarios

que generarán un diseño muy intuitivo para que sus clientes interactúen con su web con total

sencillez y sin complicaciones. [8]

2.7.3.5 ¿Tengo una web estática lo puedo convertir a dinámica?

No directamente: de su web estática sólo tomaríamos la información más relevante pues

se tiene que realizar un diseño totalmente nuevo incluyendo funciones para que sus clientes

interactúen con total simplicidad y comodidad por su nueva web. Todo ello manteniendo lo

más relevante para usted (diseño, contenidos, etc…)[8]

2.7.3.6 ¿Quién tiene más vida útil la web dinámica o la web estática?

La web dinámica, por su contenido variable a través del tiempo y que se ajustará a sus

requerimientos por temporadas o estaciones del año, ésta le permitirá ir actualizando su web

constantemente, mejorando áreas específicas o ampliado con módulos de mayor magnitud o

15

robustez, por el contrario la web estática se creará por única vez con todo su contenido y será

permanente a través del tiempo. [8]

2.8 Evolución de la web

2.8.1 Web 1.0

El término Web hace referencia a World Wide Web (www) que fue creado por el

centro de investigación Europeo con la finalidad de publicar información en la red y a su vez

para que las personas puedan acceder a buscar información de su interés, se apoya en

multimedia que se refiere a un programa con diversos medios de expresión para presentar

información; también en hipertexto que es un documento que contiene imágenes, textos,

sonidos, videos etc.[4]

Es considerado como el acceso más sencillo y comprensible al universo de la

información disponible en internet. Sistema basado en hipertexto, que permite clasificar

información de diversos tipos, conocido como el gran telaraña mundial.[9]

2.8.1.1 Características de la Web 1.0:

Su periodo de utilización y con su mayor frecuencia es de 1994-1997 y su tecnología está

asociada a HTML Y GIF. Aquí el usuario tenía un rol muy pasivo, todas sus prácticas dentro

de los portales Web eran limitadas y sus características son (Figura 2):

Posee páginas estáticas que no se cambian ni modifican, son difíciles de editar. Y tal

vez uno de los puntos por los cuales no se modifican es por el costo de los cambios.

Está Web se caracteriza por el uso de Frames o Marcos que se utilizaban con

frecuencia, en este primer sitio Web, era utilizado para optimizar los tiempos de las

conexiones que tardaban en cargar.

Usa HTML para describir la estructura de la página y contenido como un texto

estructurado a su vez el adjuntarle imágenes. [4]

16

Figura 2. La web 1.0- 18/10/132.8.2 Web 2.0

El termino Web 2.0 es la representación de la evolución de las páginas web

tradicionales hacia las aplicaciones web enfocadas a los usuarios.

El término Web 2.0 fue utilizado por primera vez por la empresa editorial

estadounidense O’Reilly Media (2004) para referirse a una segunda generación de Web basada

en las comunidades de usuarios. Abarca un amplio catálogo de sitios y servicios web que

incluyen las redes sociales, los blogs, los wikis, la sindicación de noticias RSS, etc. Nace con

el claro objetivo de conectar a las personas. Recibe el nombre de la Web Social, y

efectivamente genera la convergencia de herramientas antiguas como el correo electrónico con

herramientas recientes para publicación por parte de todos los navegantes. Su propósito

fundamental es fomentar la colaboración y el intercambio ágil de información entre los

usuarios.[5]

2.8.2.1 Características

Además, cabe destacar que la principal característica que posee la web 2.0, es la

sustitución del concepto de web de lectura, por el de lectura-escritura, dónde una serie de

herramientas ayudan a que, los procesos de la información que deambulan en torno a la red,

puedan utilizarse sin casi ningún tipo de conocimiento técnico y derroche de tiempo. [4]

El usuario solo necesita un navegador web para conectarse desde cualquier equipo o

lugar e interactuar con los sitios o aplicaciones donde publicar contenidos, recopilar

información, comunicarse con otros usuarios, etcétera. [4]

17

2.8.2.2 ¿Cuáles son las ventajas de la Web 2.0?

a. Seguridad: Esto elimina el coste de acceso de las pymes a la tecnología más moderna,

anulando las barreras de entrada a competir en los mercados por esa vía. [5]

b. Las innovaciones son constantes, sin necesidad de actualizaciones ni cambios.

c. Ubicuidad. Esto va a permitir tener la información en todo momento y desde cualquier

terminal con conexión a Internet. [5]

d. Cooperación. Las necesidades de la sociedad y empresa red radican principalmente en

la cooperación entre los diferentes actores.

2.8.2.3 ¿Cuáles son las desventajas de la Web 2.0?

a) La seguridad de datos confidenciales, como la contabilidad, facturación, etc. Es uno

de los aspectos que más se debaten, al estar almacenados en servidores ajenos. [5]

b) La conexión a Internet. La dependencia del sistema a la conexión de Internet sigue

siendo una barrera a su adopción. [5]

2.8.3 Web 3.0

El termino se acuño en 2001 en un artículo científico escrito por American Boauthored

Berners-Lee en el que se describía el término como lugar en el cual las máquinas pueden leer

páginas Web con la misma facilidad con la que los humanos lo hacemos.[10]

Se fundamentan en el colectivo de la Web Semántica, búsquedas de lenguaje natural,

data-mining, aprendizaje automático y asistencia de agentes, todo ello conocido como técnicas

de la Inteligencia Artificial o Inteligencia Web. [10]

2.8.3.1 Web semántica

Web Semántica: trata de convertir la información en conocimiento, clasificando (por

etiquetas estandarizadas para todos los dispositivos...) y ordenado los contenidos en Internet

para que los programas informáticos puedan tomar decisiones con ellos.[11]

18

2.8.3.2 Características de la Web 3.0

A continuación pasamos a analizar las características:

a) Inteligencia artificial, base de datos, personalización, movilidad, Web 3D y Web

semántica (véase la Figura 4)

b) Grandes anchos de banda.

c) Conexiones ilimitadas al ordenador, móviles… a precios asequibles.

d) Cada ciudadano recibirá con el DNI, un email y un teléfono.

e) Interoperabilidad entre plataformas y redes (redes sociales, buzón unificado de

Microsoft...)

f) Más transparencia per una menor privacidad ( siempre conectados, siempre

localizados, vamos dejando rastros en Internet)

g) Se van confundiendo el tiempo laboral y el ocio (podemos llevarnos el trabajo a

cualquier lugar).

h) Búsquedas inteligentes (ya no aparecerán miles de entradas al buscar); la red conocerá

a cada persona y se adaptará a ella (como un secretario personal).[11]

Figura 4. La Web 3.0- 22/10/13

19

2.8.3.3 ¿Cuáles son las ventajas de la web 3.0?

a. El código es mucho más sencillo de desarrollar y mantener.

b. Los buscadores encuentran información relevante más fácilmente.

c. Es mucho más sencillo hacer modificaciones al diseño o compartir información.

d. No se depende de un solo servicio para obtener información, sino que ésta puede estar

distribuida en varios sitios y juntarla en un tercero.[11]

2.8.3.4 ¿Cuáles son las desventajas de la web 3.0?

a. Hay que tener más cuidado con la seguridad de la información del sitio.

b. Restauración laboriosa.

c. Altos costos.

d. Complejidad de codificación.[12]

2.8.4 Web 4.0

Este término motiva a pensar qué será ese tipo de Web, por ahora algunos señalan que

el resultado de Web 3D+ Web 3.0 (web semántica) + Inteligencia Artificial + Voz como

vehículo de intercomunicación= Web 4.0 (web total) es decir, que una vez se establezca esta

web semántica (entre el año 2010 y el 2020) será el turno de avanzar hacia la web 4.0 una

Web Ubicua, donde el objetivo primordial será el de unir las inteligencias donde tanto las

personas como las cosas se comuniquen entre sí para generar la toma de decisiones ( véase en

la Figura 5) [12]

Figura 5. La Web 4.0- 24/10/13

20

2.8.4.1 ¿Cuáles son las ventajas de la Web 4.0?

a) Accesibilidad.

b) Acceso de información, imágenes, audios, videos, juegos, etc.

c) Interactividad.

d) Captura la atención.

e) Se pueden realizar pagos, trámites y en algunas escuelas existe el servicio de tareas y

notas

2.8.4.2 ¿Cuáles son las desventajas de la Web 4.0?

a) En el caso de las empresas u otras instituciones es peligroso colgar datos

confidenciales.

b) Ciertos ordenadores normalmente son mucho más vulnerables a ataques de virus,

troyanos, espías, etc.

c) La dependencia del sistema a la conexión de Internet.

2.9 HTML 5

HTML5 es la actualización de HTML, el lenguaje en el que es creada la web. HTML5

también es un término de marketing para agrupar las nuevas tecnologías de desarrollo de

aplicaciones web: HTML5, CSS3 y nuevas capacidades de Javascript.[13]

2.9.1 Ventajas de HTML5

2.9.1.1 Páginas más comprensibles y mejor estructuradas

Hasta la llegada de HTML5, los desarrolladores hacían un uso intensivo de las

etiquetas <div> dentro del código HTML para delimitar las diferentes secciones o partes de

nuestro sitio web. Con la inclusión de nuevas etiquetas dentro de HTML5, como section,

article, header, footer, nav, hgroup, aside, article, etc., da un valor semántico añadido a la

distribución del contenido para que sea fácilmente localizable desde los diferentes buscadores

y pueda ser mejor entendida por los navegadores y aplicaciones que accedan a ella. [14]

21

2.9.1.2 Vídeo nativo sin instalaciones adicionales

La reproducción de vídeos en la web iba ligada hasta hace bien poco a la instalación de

Flash en nuestro navegador. HTML5 proporciona un estándar común que permitirá la

reproducción de vídeos unificando así formatos y codificaciones sin tener que instalar

elementos adicionales para disfrutar de cualquier media. [14]

2.9.1.3 Geolocalización

Cada vez más presente en las redes sociales y aplicaciones móviles, la geolocalización

también ha sido contemplada por el estándar HTML5. A través de esta característica, las

aplicaciones web pueden tener acceso a la latitud y longitud donde se encuentre el usuario que

accede a un site, independientemente del sistema de georeferenciación utilizado por nuestro

navegador (GPS, WiFi, 3G, etcétera.) [14]

2.9.1.5 Aplicaciones offline

El uso de aplicaciones web se ha enfrentado desde sus comienzos con una importante

desventaja en comparación con las aplicaciones de escritorio, y era la posibilidad de estas

últimas de trabajar en entornos desconectados. HTML5 aporta una importante mejora en este

aspecto para permitir la utilización de todas las funcionalidades de las aplicaciones web “sin

conexión” a través de APIs, que sincronizan sus datos cuando la conexión entre el dispositivo

y la red se restablece. [14]

2.9.1.6 Dibujos, animaciones y videojuegos

Con la incorporación de la etiqueta <canvas>, HTML5 abre por fin la posibilidad de

representación y dibujado de formas sobre un lienzo o canvas. Esta nueva funcionalidad

aparentemente complementaria abre la web al mercado del videojuego, diseño y la animación

nativa, que anteriormente dependía de otras plataformas propietarias como Flash.[14]

2.9.2 Desventajas de HTML 5

A pesar de los avances con HTML5, en el sector de los juegos Flash sigue a la

cabeza.HTML5 se ve penalizado en buena medida por la todavía escasa compatibilidad en los

navegadores actuales.[15]

22

3. Conclusiones

Analizando la mayoría de las carreras profesionales nos llevan al negocio. Para ello

necesitaremos ser reconocidos en la sociedad como un ente que brinda servicios referentes a la

especialidad. Utilicemos pues la Web como una herramienta de hacer público nuestros ideales

y los servicios a prestar.

Que esta investigación nos cree en nosotros la curiosidad de experimentar haciéndolo

uso y reconocer que en la actualidad el negocio ha evolucionado a tal punto que debamos

actualizarnos con los avances científicos, para así operar en el ámbito de la competitividad a

nivel de las demás empresas.

23

Agradecimiento

Es propicia la oportunidad de manifestar nuestro sincero agradecimiento al Magister

Esteban Tocto, que nos brindó las pautas necesarias y adecuadas para la realización de esta

monografía.

Asimismo también a la profesora: Rosalinda Mamani Morales, quien nos superviso

minuciosamente desde un inicio la presente monografía para que lo realicemos de la mejor

manera y respetando los estilos de redacción científica.

24

Referencias

[1] A. Gómez, “Curso de HTML,” HazUnaweb.com. [Online]. Available: http://html.hazunaweb.com/101.php. [Accessed: 26-Oct-2013].

[2] P. BAEZA, “Diseño de sitio web accesible para personas con discapacidad visual , auditiva , físicas y de hardware .,” Tesis U. Chile, 2006. [Online]. Available: http://www.tesis.uchile.cl/tesis/uchile/2006/ibarra_p/html/index-frames.html. [Accessed: 20-Sep-2013].

[3] J. De la Cruz, Diseño Web, Megabyte. 2009, p. 960.

[4] “HTML,” 2012. [Online]. Available: http://www.usmp.edu.pe. [Accessed: 08-Oct-2013].

[5] “LA WEB 1.0, 2.0, 3.0, 4.0,” 2009. [Online]. Available: http://jinnmagalyfernandez.blogspot.com/. [Accessed: 24-Oct-2013].

[6] “Servicios de desarrollo de paginas web,” Simplificar web, 2012. [Online]. Available: http://www.simplificarweb.com.ar/paginas-web-estaticas.php. [Accessed: 05-Oct-2013].

[7] “Páginas estáticas Vs. dinámicas,” 2002. [Online]. Available: http://www.desarrolloweb.com/articulos/712.php. [Accessed: 12-Sep-2013].

[8] “Páginas web Dinámicas,” 2010. [Online]. Available: http://blog.mandanwebs.com/diseno-web/paginas-web-dinamicas/. [Accessed: 28-Oct-2013].

[9] P. Lozada, “Evolución de la web,” 2009. [Online]. Available: http://profesores.elo.utfsm.cl/~tarredondo/info/networks/Evolucion_Web.pdf. [Accessed: 24-Oct-2012].

[10] “¿Qué es la Web 3.0?,” 2010. [Online]. Available: http://web30websemantica.comuf.com/web30.htm. [Accessed: 24-Oct-2013].

[11] Gonzalo, “Mas características sobre la Web 3,” Educación y nuevas tecnologías, 2009. [Online]. Available: http://blogs.ua.es/gonzalo/2009/04/16/mas-caracteristicas-sobre-la-web-30/. [Accessed: 28-Oct-2013].

[12] R. D. Hoyos and R. Moncada, “Web 3.0 y web 4.0,” 2011. [Online]. Available: http://inhouselabs.org/barcamp/2011/b1rc1mp2011filesd4wnl41d/files/shared/Web-3.0-y-Web-4.0-inHouseLabs-Barcamp2011.pdf . [Accessed: 24-Oct-2013].

25

[13] J. F. Vega and C. Van Der Henst, “Curso-HTML5-v1,” Maestros Web, 2011. [Online]. Available: http://www.etnassoft.com/biblioteca/guia-html5-el-presente-de-la-web/. [Accessed: 24-Oct-2013].

[14] “Ventajas del HTML5,” Taller digital, 2012. [Online]. Available: http://blog.eltallerdigital.com/2012/05/5-ventajas-de-html5-para-los-usuarios/ . [Accessed: 01-Nov-2014].

[15] E. Hidalgo, “HTML 5 y sus ventajas para el diseño de páginas web Suite101,” 2010. [Online]. Available: http://web-gdl.com/servicios/ventajas-del-html5/. [Accessed: 01-Nov-2013].

26

Diseños de páginas Web con HTML

Technology

Transcript of Diseños de páginas Web con HTML