SlideShare una empresa de Scribd logo
UNIVERSIDAD PERUANA UNIÓN
FACULTAD DE INGENIERÍA Y ARQUITECTURA
EAP 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

Autores
Alumnos: Eliacer Fernandez Guevara
Jhony Vidarte Monteza
Kevin Ticlavilca Tapia
Elar Shime Becerra Martinez

Profesora
Lic. 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? ..................................................................... 18
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 consiguientehacer una publicidad en televisiónes 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,solose 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.1Etiquetas 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.1Caracterí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/13

2.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.4Web 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-Oct2013].

[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-Oct2013].

[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-Oct2013].

[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-laweb-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.0y-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: 01Nov-2013].

26

Más contenido relacionado

Similar a Diseños de páginas Web con HTML

Informática y tics
Informática y ticsInformática y tics
Informática y tics
stanyPR
 
Enseñanza mesclada
Enseñanza mescladaEnseñanza mesclada
Enseñanza mesclada
luciano05zapata
 
Wikilibro informatica
Wikilibro informaticaWikilibro informatica
Wikilibro informatica
AntoInformatica
 
Algoritmosy estructurasdedatos2015 1
Algoritmosy estructurasdedatos2015 1Algoritmosy estructurasdedatos2015 1
Algoritmosy estructurasdedatos2015 1
Natalia G Peñuela
 
Informática 2015
Informática 2015 Informática 2015
Informática 2015
Diego Castiglioni
 
Software libre.
Software libre.Software libre.
Software libre.
mauricionetto
 
Software libre.
Software libre.Software libre.
Software libre.
anadeboramoran
 
Conceptos informáticos generales
Conceptos informáticos generalesConceptos informáticos generales
Conceptos informáticos generales
Leonel Sartori
 
Flash as3 components_help
Flash as3 components_helpFlash as3 components_help
Flash as3 components_help
Ricardo Paucara
 
Seminario del Operador
Seminario del Operador Seminario del Operador
Seminario del Operador
xpcmarkos
 
Doc curso-html
Doc curso-htmlDoc curso-html
Doc curso-html
isma8
 
Curso Completo De Html [447 Paginas En EspañOl]
Curso Completo De Html [447 Paginas   En EspañOl]Curso Completo De Html [447 Paginas   En EspañOl]
Curso Completo De Html [447 Paginas En EspañOl]
Paola González Diaz
 
Curso html
Curso htmlCurso html
Curso html
Mapis Mora
 
Curso completo de html
Curso completo de htmlCurso completo de html
Curso completo de html
Pablo_Bonilla
 
Doc curso html completo
Doc curso html completoDoc curso html completo
Doc curso html completo
Anonimo Goncen
 
Curso html
Curso htmlCurso html
Curso html
William Gonzalez
 
Doc curso-html
Doc curso-htmlDoc curso-html
Doc curso-html
Boss Valle
 
Curso de html
Curso de htmlCurso de html
Curso de html
catalan21
 
Doc curso-html
Doc curso-htmlDoc curso-html
Doc curso-html
Yurek Defret
 
Tutorial de html
Tutorial de htmlTutorial de html
Tutorial de html
Dario Pantoja
 

Similar a Diseños de páginas Web con HTML (20)

Informática y tics
Informática y ticsInformática y tics
Informática y tics
 
Enseñanza mesclada
Enseñanza mescladaEnseñanza mesclada
Enseñanza mesclada
 
Wikilibro informatica
Wikilibro informaticaWikilibro informatica
Wikilibro informatica
 
Algoritmosy estructurasdedatos2015 1
Algoritmosy estructurasdedatos2015 1Algoritmosy estructurasdedatos2015 1
Algoritmosy estructurasdedatos2015 1
 
Informática 2015
Informática 2015 Informática 2015
Informática 2015
 
Software libre.
Software libre.Software libre.
Software libre.
 
Software libre.
Software libre.Software libre.
Software libre.
 
Conceptos informáticos generales
Conceptos informáticos generalesConceptos informáticos generales
Conceptos informáticos generales
 
Flash as3 components_help
Flash as3 components_helpFlash as3 components_help
Flash as3 components_help
 
Seminario del Operador
Seminario del Operador Seminario del Operador
Seminario del Operador
 
Doc curso-html
Doc curso-htmlDoc curso-html
Doc curso-html
 
Curso Completo De Html [447 Paginas En EspañOl]
Curso Completo De Html [447 Paginas   En EspañOl]Curso Completo De Html [447 Paginas   En EspañOl]
Curso Completo De Html [447 Paginas En EspañOl]
 
Curso html
Curso htmlCurso html
Curso html
 
Curso completo de html
Curso completo de htmlCurso completo de html
Curso completo de html
 
Doc curso html completo
Doc curso html completoDoc curso html completo
Doc curso html completo
 
Curso html
Curso htmlCurso html
Curso html
 
Doc curso-html
Doc curso-htmlDoc curso-html
Doc curso-html
 
Curso de html
Curso de htmlCurso de html
Curso de html
 
Doc curso-html
Doc curso-htmlDoc curso-html
Doc curso-html
 
Tutorial de html
Tutorial de htmlTutorial de html
Tutorial de html
 

Más de lobi7o

placas tectonicas
placas tectonicas placas tectonicas
placas tectonicas
lobi7o
 
MONOGRAFÍA SOBRE EL METAMORFISMO FASES, FACTORES Y LAS ROCAS METAMORFICAS
MONOGRAFÍA SOBRE EL METAMORFISMO  FASES, FACTORES Y LAS ROCAS METAMORFICAS MONOGRAFÍA SOBRE EL METAMORFISMO  FASES, FACTORES Y LAS ROCAS METAMORFICAS
MONOGRAFÍA SOBRE EL METAMORFISMO FASES, FACTORES Y LAS ROCAS METAMORFICAS
lobi7o
 
Rocas igneas
Rocas igneasRocas igneas
Rocas igneas
lobi7o
 
Pts
PtsPts
Pts
lobi7o
 
Pm10
Pm10Pm10
Pm10
lobi7o
 
Monografia huella ecologica
Monografia huella ecologicaMonografia huella ecologica
Monografia huella ecologica
lobi7o
 
Monografia geologia
Monografia geologiaMonografia geologia
Monografia geologia
lobi7o
 
Monografia de geologia
Monografia de geologiaMonografia de geologia
Monografia de geologia
lobi7o
 
Mono de estratigra
Mono de estratigraMono de estratigra
Mono de estratigra
lobi7o
 
Mineralogia(ambiental 2 a)
Mineralogia(ambiental 2 a)Mineralogia(ambiental 2 a)
Mineralogia(ambiental 2 a)
lobi7o
 
Geología histórica monografia presentar
Geología histórica monografia presentarGeología histórica monografia presentar
Geología histórica monografia presentar
lobi7o
 
Análisis Bajo la Metodología simplex para la solución factible de la Universi...
Análisis Bajo la Metodología simplex para la solución factible de la Universi...Análisis Bajo la Metodología simplex para la solución factible de la Universi...
Análisis Bajo la Metodología simplex para la solución factible de la Universi...
lobi7o
 
Método Gráfico Restaurant’ J&D Modelo del Transporte Álicorp S.A.A. Asi...
 	Método Gráfico Restaurant’ J&D  	Modelo del Transporte Álicorp S.A.A.  	Asi... 	Método Gráfico Restaurant’ J&D  	Modelo del Transporte Álicorp S.A.A.  	Asi...
Método Gráfico Restaurant’ J&D Modelo del Transporte Álicorp S.A.A. Asi...
lobi7o
 
Planteamiento de un problema de programación lineal “Granja Guerrero”
Planteamiento de un problema de programación lineal  “Granja Guerrero”Planteamiento de un problema de programación lineal  “Granja Guerrero”
Planteamiento de un problema de programación lineal “Granja Guerrero”
lobi7o
 
Máximos y Mínimos de una función de varias variables
Máximos y Mínimos de una función de varias variablesMáximos y Mínimos de una función de varias variables
Máximos y Mínimos de una función de varias variables
lobi7o
 
Modelamiento de Casos de Uso RUP
Modelamiento  de Casos de Uso  RUPModelamiento  de Casos de Uso  RUP
Modelamiento de Casos de Uso RUP
lobi7o
 
Base de datos
Base  de datosBase  de datos
Base de datos
lobi7o
 
Aplicación de la BPM en el diseño del proceso del negocio
Aplicación de la BPM en el diseño del proceso del negocioAplicación de la BPM en el diseño del proceso del negocio
Aplicación de la BPM en el diseño del proceso del negocio
lobi7o
 
Identificar el cumplimiento de una de las normas establecidas por la Universi...
Identificar el cumplimiento de una de las normas establecidas por la Universi...Identificar el cumplimiento de una de las normas establecidas por la Universi...
Identificar el cumplimiento de una de las normas establecidas por la Universi...
lobi7o
 
Identificar el cumplimiento de una de las normas establecidas por la Universi...
Identificar el cumplimiento de una de las normas establecidas por la Universi...Identificar el cumplimiento de una de las normas establecidas por la Universi...
Identificar el cumplimiento de una de las normas establecidas por la Universi...
lobi7o
 

Más de lobi7o (20)

placas tectonicas
placas tectonicas placas tectonicas
placas tectonicas
 
MONOGRAFÍA SOBRE EL METAMORFISMO FASES, FACTORES Y LAS ROCAS METAMORFICAS
MONOGRAFÍA SOBRE EL METAMORFISMO  FASES, FACTORES Y LAS ROCAS METAMORFICAS MONOGRAFÍA SOBRE EL METAMORFISMO  FASES, FACTORES Y LAS ROCAS METAMORFICAS
MONOGRAFÍA SOBRE EL METAMORFISMO FASES, FACTORES Y LAS ROCAS METAMORFICAS
 
Rocas igneas
Rocas igneasRocas igneas
Rocas igneas
 
Pts
PtsPts
Pts
 
Pm10
Pm10Pm10
Pm10
 
Monografia huella ecologica
Monografia huella ecologicaMonografia huella ecologica
Monografia huella ecologica
 
Monografia geologia
Monografia geologiaMonografia geologia
Monografia geologia
 
Monografia de geologia
Monografia de geologiaMonografia de geologia
Monografia de geologia
 
Mono de estratigra
Mono de estratigraMono de estratigra
Mono de estratigra
 
Mineralogia(ambiental 2 a)
Mineralogia(ambiental 2 a)Mineralogia(ambiental 2 a)
Mineralogia(ambiental 2 a)
 
Geología histórica monografia presentar
Geología histórica monografia presentarGeología histórica monografia presentar
Geología histórica monografia presentar
 
Análisis Bajo la Metodología simplex para la solución factible de la Universi...
Análisis Bajo la Metodología simplex para la solución factible de la Universi...Análisis Bajo la Metodología simplex para la solución factible de la Universi...
Análisis Bajo la Metodología simplex para la solución factible de la Universi...
 
Método Gráfico Restaurant’ J&D Modelo del Transporte Álicorp S.A.A. Asi...
 	Método Gráfico Restaurant’ J&D  	Modelo del Transporte Álicorp S.A.A.  	Asi... 	Método Gráfico Restaurant’ J&D  	Modelo del Transporte Álicorp S.A.A.  	Asi...
Método Gráfico Restaurant’ J&D Modelo del Transporte Álicorp S.A.A. Asi...
 
Planteamiento de un problema de programación lineal “Granja Guerrero”
Planteamiento de un problema de programación lineal  “Granja Guerrero”Planteamiento de un problema de programación lineal  “Granja Guerrero”
Planteamiento de un problema de programación lineal “Granja Guerrero”
 
Máximos y Mínimos de una función de varias variables
Máximos y Mínimos de una función de varias variablesMáximos y Mínimos de una función de varias variables
Máximos y Mínimos de una función de varias variables
 
Modelamiento de Casos de Uso RUP
Modelamiento  de Casos de Uso  RUPModelamiento  de Casos de Uso  RUP
Modelamiento de Casos de Uso RUP
 
Base de datos
Base  de datosBase  de datos
Base de datos
 
Aplicación de la BPM en el diseño del proceso del negocio
Aplicación de la BPM en el diseño del proceso del negocioAplicación de la BPM en el diseño del proceso del negocio
Aplicación de la BPM en el diseño del proceso del negocio
 
Identificar el cumplimiento de una de las normas establecidas por la Universi...
Identificar el cumplimiento de una de las normas establecidas por la Universi...Identificar el cumplimiento de una de las normas establecidas por la Universi...
Identificar el cumplimiento de una de las normas establecidas por la Universi...
 
Identificar el cumplimiento de una de las normas establecidas por la Universi...
Identificar el cumplimiento de una de las normas establecidas por la Universi...Identificar el cumplimiento de una de las normas establecidas por la Universi...
Identificar el cumplimiento de una de las normas establecidas por la Universi...
 

Último

computacion global 3.pdf pARA TERCER GRADO
computacion global 3.pdf pARA TERCER GRADOcomputacion global 3.pdf pARA TERCER GRADO
computacion global 3.pdf pARA TERCER GRADO
YaniEscobar2
 
Catalogo Refrigeracion Miele Distribuidor Oficial Amado Salvador Valencia
Catalogo Refrigeracion Miele Distribuidor Oficial Amado Salvador ValenciaCatalogo Refrigeracion Miele Distribuidor Oficial Amado Salvador Valencia
Catalogo Refrigeracion Miele Distribuidor Oficial Amado Salvador Valencia
AMADO SALVADOR
 
Nuevos tiempos, nuevos espacios.docxdsdsad
Nuevos tiempos, nuevos espacios.docxdsdsadNuevos tiempos, nuevos espacios.docxdsdsad
Nuevos tiempos, nuevos espacios.docxdsdsad
larapalaciosmonzon28
 
Catalogo Buzones BTV Amado Salvador Distribuidor Oficial Valencia
Catalogo Buzones BTV Amado Salvador Distribuidor Oficial ValenciaCatalogo Buzones BTV Amado Salvador Distribuidor Oficial Valencia
Catalogo Buzones BTV Amado Salvador Distribuidor Oficial Valencia
AMADO SALVADOR
 
REVISTA TECNOLOGICA PARA EL DESARROLLO HUMANO
REVISTA TECNOLOGICA PARA EL DESARROLLO HUMANOREVISTA TECNOLOGICA PARA EL DESARROLLO HUMANO
REVISTA TECNOLOGICA PARA EL DESARROLLO HUMANO
gisellearanguren1
 
Catalogo Cajas Fuertes BTV Amado Salvador Distribuidor Oficial
Catalogo Cajas Fuertes BTV Amado Salvador Distribuidor OficialCatalogo Cajas Fuertes BTV Amado Salvador Distribuidor Oficial
Catalogo Cajas Fuertes BTV Amado Salvador Distribuidor Oficial
AMADO SALVADOR
 
Computacion cuántica y sus ventajas y desventajas
Computacion cuántica y sus ventajas y desventajasComputacion cuántica y sus ventajas y desventajas
Computacion cuántica y sus ventajas y desventajas
sofiahuarancabellido
 
Presentación de Tic en educación y sobre blogger
Presentación de Tic en educación y sobre bloggerPresentación de Tic en educación y sobre blogger
Presentación de Tic en educación y sobre blogger
larapalaciosmonzon28
 
IA en entornos rurales aplicada a la viticultura
IA en entornos rurales aplicada a la viticulturaIA en entornos rurales aplicada a la viticultura
IA en entornos rurales aplicada a la viticultura
Miguel Rebollo
 
SISTESIS RETO4 Grupo4 co-creadores .ppsx
SISTESIS RETO4 Grupo4 co-creadores .ppsxSISTESIS RETO4 Grupo4 co-creadores .ppsx
SISTESIS RETO4 Grupo4 co-creadores .ppsx
tamarita881
 
Manual de soporte y mantenimiento de equipo de cómputo
Manual de soporte y mantenimiento de equipo de cómputoManual de soporte y mantenimiento de equipo de cómputo
Manual de soporte y mantenimiento de equipo de cómputo
doctorsoluciones34
 
edublogs info.docx asdasfasfsawqrdqwfqwfqwfq
edublogs info.docx asdasfasfsawqrdqwfqwfqwfqedublogs info.docx asdasfasfsawqrdqwfqwfqwfq
edublogs info.docx asdasfasfsawqrdqwfqwfqwfq
larapalaciosmonzon28
 
mantenimiento de chasis y carroceria1.pptx
mantenimiento de chasis y carroceria1.pptxmantenimiento de chasis y carroceria1.pptx
mantenimiento de chasis y carroceria1.pptx
MiguelAtencio10
 
Refrigeradores Samsung Modo Test y Forzado
Refrigeradores Samsung Modo Test y ForzadoRefrigeradores Samsung Modo Test y Forzado
Refrigeradores Samsung Modo Test y Forzado
NicandroMartinez2
 
TODO SOBRE LA INFORMÁTICA, HISTORIA, ¿QUE ES?, IMPORTANCIA Y CARACTERISTICAS....
TODO SOBRE LA INFORMÁTICA, HISTORIA, ¿QUE ES?, IMPORTANCIA Y CARACTERISTICAS....TODO SOBRE LA INFORMÁTICA, HISTORIA, ¿QUE ES?, IMPORTANCIA Y CARACTERISTICAS....
TODO SOBRE LA INFORMÁTICA, HISTORIA, ¿QUE ES?, IMPORTANCIA Y CARACTERISTICAS....
bendezuperezjimena
 
Sitios web 3.0 funciones ventajas y desventajas
Sitios web 3.0 funciones ventajas y desventajasSitios web 3.0 funciones ventajas y desventajas
Sitios web 3.0 funciones ventajas y desventajas
paulroyal74
 
TECLADO ERGONÓMICO Y PANTALLAS TACTILES - GESTIÓN INTEGRAL EDUCATIVA
TECLADO ERGONÓMICO Y PANTALLAS TACTILES - GESTIÓN INTEGRAL EDUCATIVATECLADO ERGONÓMICO Y PANTALLAS TACTILES - GESTIÓN INTEGRAL EDUCATIVA
TECLADO ERGONÓMICO Y PANTALLAS TACTILES - GESTIÓN INTEGRAL EDUCATIVA
LilibethEstupian
 
Inteligencia Artificial
Inteligencia ArtificialInteligencia Artificial
Inteligencia Artificial
YashiraPaye
 
Actividad Conceptos básicos de programación.pdf
Actividad Conceptos básicos de programación.pdfActividad Conceptos básicos de programación.pdf
Actividad Conceptos básicos de programación.pdf
NajwaNimri1
 
herramientas de sitio web 3.0 2024
herramientas de sitio web 3.0  2024herramientas de sitio web 3.0  2024
herramientas de sitio web 3.0 2024
julio05042006
 

Último (20)

computacion global 3.pdf pARA TERCER GRADO
computacion global 3.pdf pARA TERCER GRADOcomputacion global 3.pdf pARA TERCER GRADO
computacion global 3.pdf pARA TERCER GRADO
 
Catalogo Refrigeracion Miele Distribuidor Oficial Amado Salvador Valencia
Catalogo Refrigeracion Miele Distribuidor Oficial Amado Salvador ValenciaCatalogo Refrigeracion Miele Distribuidor Oficial Amado Salvador Valencia
Catalogo Refrigeracion Miele Distribuidor Oficial Amado Salvador Valencia
 
Nuevos tiempos, nuevos espacios.docxdsdsad
Nuevos tiempos, nuevos espacios.docxdsdsadNuevos tiempos, nuevos espacios.docxdsdsad
Nuevos tiempos, nuevos espacios.docxdsdsad
 
Catalogo Buzones BTV Amado Salvador Distribuidor Oficial Valencia
Catalogo Buzones BTV Amado Salvador Distribuidor Oficial ValenciaCatalogo Buzones BTV Amado Salvador Distribuidor Oficial Valencia
Catalogo Buzones BTV Amado Salvador Distribuidor Oficial Valencia
 
REVISTA TECNOLOGICA PARA EL DESARROLLO HUMANO
REVISTA TECNOLOGICA PARA EL DESARROLLO HUMANOREVISTA TECNOLOGICA PARA EL DESARROLLO HUMANO
REVISTA TECNOLOGICA PARA EL DESARROLLO HUMANO
 
Catalogo Cajas Fuertes BTV Amado Salvador Distribuidor Oficial
Catalogo Cajas Fuertes BTV Amado Salvador Distribuidor OficialCatalogo Cajas Fuertes BTV Amado Salvador Distribuidor Oficial
Catalogo Cajas Fuertes BTV Amado Salvador Distribuidor Oficial
 
Computacion cuántica y sus ventajas y desventajas
Computacion cuántica y sus ventajas y desventajasComputacion cuántica y sus ventajas y desventajas
Computacion cuántica y sus ventajas y desventajas
 
Presentación de Tic en educación y sobre blogger
Presentación de Tic en educación y sobre bloggerPresentación de Tic en educación y sobre blogger
Presentación de Tic en educación y sobre blogger
 
IA en entornos rurales aplicada a la viticultura
IA en entornos rurales aplicada a la viticulturaIA en entornos rurales aplicada a la viticultura
IA en entornos rurales aplicada a la viticultura
 
SISTESIS RETO4 Grupo4 co-creadores .ppsx
SISTESIS RETO4 Grupo4 co-creadores .ppsxSISTESIS RETO4 Grupo4 co-creadores .ppsx
SISTESIS RETO4 Grupo4 co-creadores .ppsx
 
Manual de soporte y mantenimiento de equipo de cómputo
Manual de soporte y mantenimiento de equipo de cómputoManual de soporte y mantenimiento de equipo de cómputo
Manual de soporte y mantenimiento de equipo de cómputo
 
edublogs info.docx asdasfasfsawqrdqwfqwfqwfq
edublogs info.docx asdasfasfsawqrdqwfqwfqwfqedublogs info.docx asdasfasfsawqrdqwfqwfqwfq
edublogs info.docx asdasfasfsawqrdqwfqwfqwfq
 
mantenimiento de chasis y carroceria1.pptx
mantenimiento de chasis y carroceria1.pptxmantenimiento de chasis y carroceria1.pptx
mantenimiento de chasis y carroceria1.pptx
 
Refrigeradores Samsung Modo Test y Forzado
Refrigeradores Samsung Modo Test y ForzadoRefrigeradores Samsung Modo Test y Forzado
Refrigeradores Samsung Modo Test y Forzado
 
TODO SOBRE LA INFORMÁTICA, HISTORIA, ¿QUE ES?, IMPORTANCIA Y CARACTERISTICAS....
TODO SOBRE LA INFORMÁTICA, HISTORIA, ¿QUE ES?, IMPORTANCIA Y CARACTERISTICAS....TODO SOBRE LA INFORMÁTICA, HISTORIA, ¿QUE ES?, IMPORTANCIA Y CARACTERISTICAS....
TODO SOBRE LA INFORMÁTICA, HISTORIA, ¿QUE ES?, IMPORTANCIA Y CARACTERISTICAS....
 
Sitios web 3.0 funciones ventajas y desventajas
Sitios web 3.0 funciones ventajas y desventajasSitios web 3.0 funciones ventajas y desventajas
Sitios web 3.0 funciones ventajas y desventajas
 
TECLADO ERGONÓMICO Y PANTALLAS TACTILES - GESTIÓN INTEGRAL EDUCATIVA
TECLADO ERGONÓMICO Y PANTALLAS TACTILES - GESTIÓN INTEGRAL EDUCATIVATECLADO ERGONÓMICO Y PANTALLAS TACTILES - GESTIÓN INTEGRAL EDUCATIVA
TECLADO ERGONÓMICO Y PANTALLAS TACTILES - GESTIÓN INTEGRAL EDUCATIVA
 
Inteligencia Artificial
Inteligencia ArtificialInteligencia Artificial
Inteligencia Artificial
 
Actividad Conceptos básicos de programación.pdf
Actividad Conceptos básicos de programación.pdfActividad Conceptos básicos de programación.pdf
Actividad Conceptos básicos de programación.pdf
 
herramientas de sitio web 3.0 2024
herramientas de sitio web 3.0  2024herramientas de sitio web 3.0  2024
herramientas de sitio web 3.0 2024
 

Diseños de páginas Web con HTML

  • 1. UNIVERSIDAD PERUANA UNIÓN FACULTAD DE INGENIERÍA Y ARQUITECTURA EAP 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 Autores Alumnos: Eliacer Fernandez Guevara Jhony Vidarte Monteza Kevin Ticlavilca Tapia Elar Shime Becerra Martinez Profesora Lic. Rosa Linda Mamani Morales Morales, Noviembre de 2013
  • 2. Í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
  • 3. 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? ..................................................................... 18 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
  • 4. 3. Conclusiones ...................................................................................................................................... 23 Agradecimiento .................................................................................................................................... 24 Referencias ............................................................................................................................................ 25 3
  • 5. 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 consiguientehacer una publicidad en televisiónes 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
  • 6. = 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,solose 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
  • 7. 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
  • 8. 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
  • 9. 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.1Etiquetas del encabezado <TITLE></TITLE>Sitúa el nombre del documento en la barra de título[4]. 8
  • 10. 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
  • 11. 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
  • 12. 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
  • 13. 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
  • 14. 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
  • 15. 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
  • 16. 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
  • 17. 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.1Caracterí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
  • 18. Figura 2. La web 1.0- 18/10/13 2.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
  • 19. 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
  • 20. 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
  • 21. 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.4Web 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
  • 22. 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
  • 23. 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
  • 24. 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
  • 25. 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
  • 26. 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-Oct2013]. [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-Oct2013]. [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-Oct2013]. [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-laweb-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.0y-Web-4.0-inHouseLabs-Barcamp2011.pdf . [Accessed: 24-Oct-2013]. 25
  • 27. [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: 01Nov-2013]. 26