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
Top Related