Creación de página web HTML5 para comercial

COLEGIO DE BACHILLERATO
CARMEN MORA DE ENCALADA

“La patria en nosotros confía”
AMIE: 07H00821
Pasaje – El Oro – Ecuador
PROYECTO DEMOSTRATIVO
FIGURA PROFESIONAL
INFORMÁTICA
TEMA
Creación de una página web con el lenguaje
html5 para brindar ayudar promocional y/o
publicitaria al comercial “angeló”
ESTUDIANTE
Medina Tachón John Efrén
DOCENTE GUÍA
Lcda. Lidia Herrera
AÑ O LECTIVO
2022 – 2023
AÑ O
COLEGIO DE BACHILLERATO EXAMEN LECTIVO
CARMEN MORA DE ENCALADA DE GRADO 2022

BACHILLETATO 2023
Pasaje – El Oro – Ecuador TÉ CNICO
CERTIFICACIÓN
Lcda. Lidia Herrera

TUTOR DE PROYECTO DE GRADO
CERTIFICA:
Que, el presente informe de investigación de Proyecto de Grado, Régimen Costa-Galápagos

2022-2023 titulado: : “Creación de una página web con el lenguaje html5 para brindar
ayudar promocional y/o publicitaria al comercial “angeló” cuyo autor es la Sr Medina
Tachón John Efrén, estudiante de tercer año Técnico, Figura Profesional informática
paralelo “A”, ha sido prolijamente revisado, por consiguiente se considera que está
enmarcado en los procedimientos científicos, técnicos, metodológicos y lineamientos
difundidos por el Ministerio de Educación, motivo por el cual autorizo su presentación.
Lcda.Lidia Herrera
TUTOR DE PROYECTO DE GRADO
1
AÑ O

BACHILLETATO 2023
RESPONSABILIDAD
La/El autor del presente Proyecto de Grado, declara que el tema: “Creación de una página
web con el lenguaje html5 para brindar ayudar promocional y/o publicitaria al
comercial “angeló” es inédito, no ha sido publicado ni desarrollado por terceras personas, el
Proyecto Demostrativo cumple con los lineamientos emitidos por el Ministerio de Educación.
________________________
Medina Tachón John Efrén
CI: 0705676955
2
AÑ O

BACHILLETATO 2023
DEDICATORIA
El presente trabajo está dedicado en primer lugar a nuestros padres, a aquellas
personas que nos han servido de ejemplo y nos han apoyado en todo lo posible para nuestro
desarrollo y crecimiento como persona a hacer todo lo posible por darnos un gran futuro.
A los jóvenes estudiantes a seguir adelante con sus metas y objetivos, a no rendirse ante los
obstáculos que se presentan en su vida y hacer lo que esté a su alcance para poder superarlos.
A nuestros docentes, quienes nos han servido de guía en este largo viaje del aprendizaje, el
cuál todavía no termina, pues, terminar el bachillerato es solo un escalón más para poder
avanzar hacia el éxito.
3
AÑ O

BACHILLETATO 2023
AGRADECIMIENTO
Al finalizar un trabajo tan arduo y lleno de dificultades como el desarrollo de un
informe es inevitable que te asalte un muy humano egocentrismo que te lleva a concentrar la
mayor parte del mérito en el aporte que has hecho. Sin embargo, el análisis objetivo te
muestra inmediatamente que la magnitud de ese aporte hubiese sido imposible sin la
participación de personas e instituciones que han facilitado las cosas para que este trabajo
llegue a un feliz término. Por ello, es para mí un verdadero placer utilizar este espacio para
ser justo y consecuente con ellas, expresándoles mis agradecimientos. Debo agradecer de
manera especial y sincera ala Licenciada Lidia Herrera por aceptarme para realizar este
informe bajo su dirección. Su apoyo y confianza en mi trabajo y su capacidad para guiar mis
ideas ha sido un aporte invaluable, no solamente en el desarrollo de este informe sino también
en mi formación como estudiante. Las ideas propias, siempre enmarcadas en su orientación y
rigurosidad, han sido la clave del buen trabajo que hemos realizado
4
AÑ O

BACHILLETATO 2023
INDICE GENERAL
Certificación…………………………………………………………………….1
Responsabilidad………………………………………………………………………………………………………….2
Dedicatoria……………………………………………………………………..3
Agradecimiento………………………………………………………………..4
Resumen……………………………………………………………………….5
Análisis de la situación planteada……………………………………………6
Justificación……………………………………………………………………9
Objetivo general y específicos ……………………………………………….10
Capítulo 2…………………………………………………………………….11
Planeación del trabajo……………………………………………………….12
Capitulo 3…………………………………………………………………….13
Capitulo 4……………………………………………………………………………………………………………………16
Capitulo5……………………………………………………………………….21
5
AÑ O

BACHILLETATO 2023
Resumen
En el presente trabajo se expone la elaboración de un sitio web destinado a la promoción de

un pequeño establecimiento comercial. Se describen las disciplinas que comprenden esta
labor y se explican sus diferencias. Se hace una introducción al desarrollo que ha seguido la
Web hasta el momento actual, con el objetivo de situar en contexto al lector y estudiar las
tendencias actuales. Narra al detalle la metodología utilizada, el estudio de diseño y el
proceso de desarrollo necesarios para la elaboración de una Pagina web. Incluye un pequeño
estudio, realizado con Google Analytics, sobre los navegadores y sistemas operativos de los
usuarios que visitaron el sitio web. Dispone de bibliografía específica sobre diseño de
websites, formada por documentos, libros y páginas web
SUMMARY
In the present work the elaboration of a website destined to the promotion of a small
commercial establishment is exposed. The disciplines that comprise this work are described
and their differences are explained. An introduction is made to the development that the Web
has followed up to the present moment, with the aim of placing the reader in context and
studying current trends. It narrates in detail the methodology used, the design study and the
development process necessary for the elaboration of a web page. It includes a small study,
carried out with Google Analytics, on the browsers and operating systems of the users who
visited the website. It has a specific bibliography on website design, made up of documents,
books and web pages.
6
AÑ O

BACHILLETATO 2023
CAPÍTULO I
ANÁLISIS DE LA SITUACIÓN PLANTEADA
1.1 IDENTIFICACIÓN DE LOS CONTENIDOS O COMPETENCIAS A APLICAR
Como en todo proyecto de diseño web, se partió de una necesidad, la de promocionar a un
pequeño establecimiento comercial. Las nuevas tecnologías e internet ponen al alcance de
toda la posibilidad de hacer visible nuestro trabajo, algo que anteriormente suponía un gran
esfuerzo y un coste que muchos no se podían permitir.
Para este proyecto, se decidió desarrollar una página web personalizada con el
lenguaje html5, donde no solo mostrara su trabajo de mayor calidad, sino también a sí mismo,
con una identidad propia. El sitio web debe servir como carta de presentación a empresas y
posibles clientes. El trabajo trata pues, de un proyecto multidisciplinar, que comprende los
campos de la ilustración digital y el diseño y desarrollo web.
Se centró sobre todo en el diseño y desarrollo de web adaptativas, que mantienen un
diseño y estructura similares en los diferentes dispositivos y tamaños de pantalla. El trabajo
comenzó con una primera etapa de planteamiento e investigación, poniendo sobre contexto
las bases del mismo. Se desarrolló un briefing con la propuesta del proyecto, sus objetivos y
el proceso de elaboración. Se investigó la evolución que ha seguido la Web hasta la fecha,
finalizando con un pequeño análisis de las tendencias en la Web.
7
AÑ O

BACHILLETATO 2023
En la etapa de desarrollo del proyecto se estudió la experiencia de usuario y se
planteó la estructura del contenido y la interacción del sitio. Además, se diseñó la parte visual
de la web, elaborando los gráficos necesarios. A partir del diseño, se desarrolló la web,
maquetando el contenido y programando las funciones según la estrategia prevista. La última
etapa fue la de evaluación, donde se realizaron una serie de pruebas en diferentes pantallas y
dispositivos con diferentes navegadores, observando la adaptación y el correcto
funcionamiento de la web. Por último, se publicó la web y se difundió en las redes sociales
para estudiar el comportamiento de los usuarios y extraer conclusiones
8
AÑ O

BACHILLETATO 2023
JUSTIFICACIÓN
Una de las principales motivaciones para crear este proyecto fue la interacción que hay
con lo medios digitales donde se fundo una idea de realizar una pagina web interactiva,
promocional y/o publicitaria donde se expone los diferentes tipos de productos con los cual
mayor mente frecuenta el comercial angeló, buscando como resultado un mayor incremento
en ventas al público. Además de interactuar con un medio digital donde se podrá conocer mas
sobre el comercial Ángelo
9
AÑ O

BACHILLETATO 2023
 OBJETIVO GENERAL
Elaboración de un diseño web original y profesional adaptado para la propuesta del
proyecto, con desarrollo de un sitio web adaptativo y dinámico en el cual se pueda
acceder en los diferentes dispositivos móviles
 OBJETIVOS ESPECÍFICOS
 Realización de una página web con leguaje html5 interactiva y dinámica
 Diseño de modelos estructurados con una complejidad de nivel 2 semi profesional el
cual se adaptará a todo tipo de pantallas y/o dispositivos móviles
 Creación de la pagina web en la aplicación Visual estudio code aplicando todos los
aprendizajes y conocimientos adquiridos sobre el tema referente al lenguaje html5
10
AÑ O

BACHILLETATO 2023
CAPÍTULO II
Proceso de trabajo
El trabajo se enfocó como un reto de diseño web, en el que se partía de un briefing como
propuesta del proyecto. En él se detallaron aspectos importantes como el perfil del cliente y el
target o usuarios destinados. Se realizó una búsqueda de referentes, basada en lo que se había
hecho y lo que se estaba haciendo entorno al diseño web.
Todo se enfocó en búsqueda de páginas personales de otros creativos y de promoción de

artículos. La intención fue estudiar las tendencias, observar las similitudes y extraer
conclusiones. Previo al diseño de los contenidos gráficos, se estudió la experiencia de
usuario. Se determinó el esquema de la web, cuantas páginas dispondría el sitio y de que
manera se comunicarían unas con otras.
También se planteó un recorrido que el usuario debía seguir a la hora de navegar por la web.
Los diseños se realizaron teniendo en cuenta los diferentes tamaños de pantalla. La interfaz
de usuario se diseñó de manera similar a la de las aplicaciones móviles, funcionando como
una plantilla que se repite en las páginas de la web y adaptando los elementos al tamaño de la
pantalla.
Para el desarrollo de la web se comenzó por construir la estructura con HTML5, definiendo el
orden de los contenidos y su jerarquía. Posteriormente se dio el estilo deseado con CSS,
ajustando el diseño a los diferentes tamaños de pantalla mediante los Media Queries. Se
trabajó con CSS y JavaScript para animar tanto los elementos de la interfaz, como los
contenidos gráficos.
Por otro lado, la interacción de botones, menús y otras funciones se realizó con html5. Por
último, se programó la galería con PHP y AJAX, que permitiría la solicitud de datos al
servidor sin la necesidad de recargar la página. A lo largo del proceso de desarrollo se realizó
una serie de pruebas que permitieron solucionar errores y advertir limitaciones en el diseño,
sobre todo en el caso de dispositivos móviles y navegadores desactualizados
11
2.1 PLANIFICACIÓN DEL TRABAJO
Enero
No. ETAPAS TAREAS ESPECIFICAS RESPONSABLES
1 2 3 4 7 8 9 10 11 14 15 16 17 18 21 22
1.1.- Identificación de los
contenidos o
competencias a aplicar
1.2.-Reconocimiento de
Estudiante
CAPITULO I temas a revisar o
ANÁLISIS Y reforzar.
1
PLANIFICACIÓN 1.3.- Planificación del
REDACCIÓN trabajo
Docente-
Entrega del CAPITULO I
Estudiante
Corrección del CAPITULO Docente-
I Estudiante
2.1.- Resolución de las
tareas del caso planteado Docente-
2.2.- Respuesta teórica, Estudiante
CAPITULO II opción múltiple
2
DESARROLLO Docente-
Entrega del CAPITULO II
Estudiante
Corrección del CAPITULO Docente-
II Estudiante
3.1.- Importancia y
aplicabilidad de la figura
Docente-
profesional
CAPITULO III Estudiante
3 3.2.-
REFLEXIÓN Bibliografía/referencias
Entrega y corrección del Docente-
CAPITULO III Estudiante
12
CAPÍTULO III
CONTEXTO DEL PROYECTO

3.1 Diseño y desarrollo web
Es común confundir los campos de diseño y desarrollo web, Referirse a ambos al mismo
tiempo y nombrarlos indistintamente en el proceso de creación de un sitio web, pero cada
parte del proyecto, aunque no completamente separados, es importante ser sinérgico y
mantener una comunicación directa entre sí. con el otro.
“idesweb.es” tiene una breve explicación de la diferencia entre: La temática y la importancia

de sus enlaces a lo largo del proyecto web1. El encargado de la parte visual de la web era el
mismo programador de antes, Los diseñadores gráficos se sienten cómodos trabajando con
formatos de impresión. Debido a esto, la página carecía de movimiento e interacción. Era
importante El responsable de la parte gráfica también entiende la capacidad
Los límites del sitio web, era solo cuestión de tiempo antes de que los diseñadores se
adaptaran a este problema y al aspecto que tendría un diseñador web. Además de la parte
gráfica, el diseño web se ocupa de la experiencia del usuario. nombre de usuario. Determinar
los objetivos del proyecto y las necesidades del usuario. Define la arquitectura web, el
número de páginas y los bloques de contenido que tendrá tu sitio.
Investigación de la interacción del usuario, Funcionalidad y navegación que se realiza en la

web. Estructura tu contenido En varias páginas de su sitio, a través de composiciones o
plantillas, Con el propósito de desarrollar prototipos o wireframes. Como se explica en el
libro Diseño web: una introducción completa de Nigel Jenny Chapman: "... el diseño web
abarca todos los aspectos de la creación de sitios web. Estructura de la página con secuencias
de comandos y el marcado que la controla Agregue interactividad y genere dinámicamente
páginas para resolver problemas de accesibilidad, usabilidad y comunicación visual. En
definitiva, el diseño web cubre las fases de tu proyecto. Navegación, Usabilidad, Interacción,
Arquitectura de la Información Y la parte gráfica de la web.
13
AÑ O

BACHILLETATO 2023
Por otra parte, el desarrollo web es la programación necesaria para la construcción del sitio
web. Se divide en dos partes que pueden estar o no conectadas, la parte del cliente y la parte
del servidor. En la parte del cliente estaríamos hablando de HTML y CSS, código básico para
creación de páginas web, y JavaScript y DOM, para la interacción con el usuario. En la parte
del servidor se trabaja con código más complejo, como es PHP, ASP.NET, JSP, etc. Con este
código se construye el back-end, la parte de la web que el usuario no ve. Su objetivo es el
diseño de bases de datos y asegurar la seguridad de la web. Cuando ambas partes se
comunican, se habla de programación cliente-servidor. Esta comunicación permite la
interacción del usuario con los contenidos alojados en bases de datos, el registro de nuevo
contenido y de cuentas de usuario.
“La distinción entre “diseño” y “programación” o incluso la terminología aún más

perturbadora de “técnico” y “creativo”, es artificial. Están tan entrelazadas como el arte y la
ciencia del propio diseño web.”3 En resumen, es necesaria la existencia de estos dos perfiles
en un equipo web y una buena comunicación entre ambos. “Esta comunicación, y finalmente
la conversión entre disciplinas, es de máxima importancia”4 . Pensar como un equipo de
desarrollo, incluso cuando el equipo está integrado por una sola persona, es un buen punto de
partida
AÑ O

BACHILLETATO 2023
3.2 RESPUESTA A LA PREGUNTA TEÓRICA, OPCIÓN MÚLTIPLE

14
¿Qué etiqueta es correcta para indicar un salto de línea?
a) </br>
b) <br/>
c) <breakLine>
d) <hr>
Respuesta teórica El elemento HTML line break <br> produce un salto de línea en el texto
(retorno de carro). Es útil para escribir un poema o una dirección, donde la división de las
líneas es significante
Word: Al Guardar un documento deberemos tener en cuenta...

a) El nombre que le vamos a dar, para encontrarlo posteriormente.
b) La carpeta en que lo vamos a guardar, para encontrarlo posteriormente.
c) El tipo en que se guarda, que deberá ser de tipo Word para poder editarlo posteriormente
con el mismo programa.
d) Todas las respuestas son ciertas.
Respuesta teórica ¿Cuáles son los pasos para guardar y cerrar un documento en Word?
Bueno, pues hay una forma muy sencilla. Agregando a la barra de Acceso rápido un botón
llamado Guardar todo y un botón llamado Cerrar todo. Te voy a explicar cómo. La barra de
Acceso rápido es la que se encuentra justo encima de la cinta de Opciones y se puede
personalizar.
AÑ O

BACHILLETATO 2023
CAPÍTULO IV
15
EXPLICACIÓN ESCRITA DEL DESARROLLO
1. Conoce los conceptos básicos de las páginas HTML

Antes de realizar tu página con códigos HTML, veamos algunos conceptos fundamentales,
pues seguramente los aplicarás. No te preocupes, en este enlace encontrarás esos elementos
explicados a detalle, para que los utilices durante todo tu proceso de programación.
Lo más relevante que debes conocer para comprender la estructura del HTML es lo
siguiente:
Las etiquetas deben tener apertura y cierre (<h1> texto </h1>). De lo contrario, el código no
será reconocido por el sitio y los cambios que realices no se visualizarán. Siempre es
importante revisar este aspecto, antes de poner un nuevo código, para evitar una posterior
revisión exhaustiva en busca de un error.
La estructura básica de una página web se compone por las etiquetas <html>, <head> y
<body>. La primera indica el comienzo de la página; la segunda es la cabecera y contiene
información descriptiva del sitio; y la tercera es la que abarca todos los elementos visibles
dentro de la página.
Los niveles de títulos pueden variar desde la etiqueta h1 hasta la h6.
La etiqueta <p> corresponde a los párrafos.
La etiqueta <a> representa los enlaces.
AÑ O

BACHILLETATO 2023
Los metadatos contienen información sobre la página, como: estilos, buscadores, scripts, por
mencionar algunos. Estos se conforman por las etiquetas <base>, <head>, <link>, <meta>,
<style> y <title>.
Se calcula que hay alrededor de 142 etiquetas HTML; sin embargo, muchas de ellas ya han
caído en desuso, sobre todo con la aparición de HTML5, la versión más reciente del código
que incluye valiosas funciones nuevas.
2. Abre el editor de texto y comienza con una estructura básica 16
Si tienes una computadora Windows, podrás encontrar el editor de texto como «Bloc de
notas»; en una computadora Mac puedes utilizar «TextEdit». Después de abrirlo, escribe una
estructura base de HTML como la que te mostramos en la siguiente imagen:
Puedes utilizar esta estructura para personalizar el título principal de tu página, la descripción
del contenido y codificar de una manera sencilla todo el sitio.
Como principiante, también puedes usar los editores WYSIWYG, del inglés «what you see is
what you get», los cuales sirven para visualizar directamente cómo se muestra la página
conforme se va escribiendo el código HTML. Entre algunos programas de este tipo están:
Sublime Text: este editor de texto web está habilitado tanto para código HTML como CSS
personalizado. Es fácil de usar y resalta las líneas de código en la sintaxis.
AÑ O

BACHILLETATO 2023
Notepad ++: un programa gratuito para redactar varios lenguajes como el HTML, CSS,
JavaScript o PHP. Es nativo de Microsoft y es el básico de los programadores.
Visual Studio Code: disponible para todos los sistemas operativos, ofrece una versión gratuita
y funciones de desarrollo personalizado.
Atom: un editor de código abierto para HTML, JavaScript, CSS y Node.js. Cuenta con
autocompletado inteligente y permite la instalación de paquetes.
Coda: exclusivo del sistema macOS, soporta múltiples lenguajes de programación; es sencillo
de manejar y su sistema te permite guardar fragmentos de código.
3. Trabaja el texto en HTML 17
Trabajar el texto en HTML es uno de los pasos más sencillos. Aquí podrás utilizar las
etiquetas de título que te mencionamos anteriormente (h1, h2, h3, h4, h5, h6). Su uso
dependerá de la jerarquización que desees darle a cada título o subtítulo.
La etiqueta <p> marca los párrafos. Con ambos elementos ya puedes comenzar a codificar el
texto de tu página.
4. Cambia el color del texto

Para cambiar el color del texto, escribe la etiqueta correspondiente escribiendo el color que
prefieras entre comillas. Por ejemplo:
AÑ O

BACHILLETATO 2023
También con el código HTML puedes indicar los colores de fondo de tu sitio web; existen
más de 16 millones de opciones con los sistemas RGB y HEX.
5. Da formato al texto
Para dar formato solo escribe el código como en el siguiente ejemplo:
Texto en negrita usa la etiqueta <b>texto</b>
Texto subrayado <u>texto</u>
Texto en cursivas o itálicas <i>texto</i>
6. Incluye un enlace a otra página

Si en el texto quieres incluir un enlace a otra página, debes utilizar la etiqueta:
Aquí debes añadir el URL que deseas enlazar. El atributo «blank» se utiliza para que el
enlace que agregues se pueda abrir en una nueva pestaña o página. En caso de que quieras
18
que la liga se abra en la misma página, escribe «self».
7. Agrega contenido multimedia

Imágenes
Un elemento vital en una página web son las imágenes. Para añadirlas en HTML debes usar
la etiqueta <img>:
El atributo «src» es para abrir un URL para la imagen que quieres mostrar. El apartado «alt»
permite visualizar un texto alterno descriptivo, en caso de que, por error de carga del sitio, la
imagen no pueda verse. El texto en la imagen también sirve como posicionamiento en
buscadores, como Google.
Los atributos «height» y «width» corresponden a las dimensiones que desees que tenga cada
imagen, a lo alto y ancho.
AÑ O

BACHILLETATO 2023
<< Guía básica sobre HTML y CSS para marketers [Descargar gratis] >>
Video
Hoy en día los videos son uno de los contenidos más cotizados de las páginas web. Para
insertarlos en tu sitio coloca este código:
<video width="320" height=240" controls>
<source src="animación.mp4" type="video/mp4">
Tu navegador no soporta este formato de video
</video>
Donde «height» y «width» establecen el tamaño del video, «source» es la clave del video,
«src» indica la URL del video o la ubicación del archivo y «type» sirve para señalar el
formato de video. En caso de no poder reproducirlo, aparecerá la leyenda «Tu navegador no
soporta este formato de video». También puedes insertar un video de YouTube con el código
de inserción que ya te ofrece la plataforma.
Audio
Respecto a los audios o canciones, puedes agregar este código:
19
<audio controls>
<source src="cancion.mp3" type="audio/mp3">
Tu navegador no soporta este formato de audio
</audio>
En este caso «src» describe el nombre o ubicación del archivo y «type» sirve para indicar el
formato del audio. Si no es posible reproducirlo aparecerá la frase «Tu navegador no soporta
este formato de audio».
8. Cerciórate de que todas las etiquetas estén cerradas

Antes de guardar el documento y ver los resultados, es muy importante que cierres todas las
etiquetas en la parte inferior del documento para que puedan visualizarse correctamente todos
los códigos que utilizaste. Estos se cierran de la siguiente forma:
Verifica que las etiquetas de todos los códigos estén abiertas y cerradas y que todo esté
escrito correctamente.
AÑ O

BACHILLETATO 2023
9. Guarda tu documento HTML

Para guardar el texto que creaste, recuerda cambiar el formato «.txt» por «.html». Para abrirlo
y ver los resultados, da clic derecho sobre el archivo y selecciona el navegador de tu
preferencia. Si percibes errores en el diseño de la página, deberás regresar al editor de texto o
bloc de notas para revisar a detalle en dónde está el error.
¡Listo! Ahora ya sabes cómo crear una página web en HTML. Si utilizas esto, en conjunto
con el código CSS, puedes optimizar la parte visual y con el lenguaje JavaScript puedes
agregar elementos dinámicos para crear páginas interactivas para tus visitantes.
4 20
CAPÍTULO V
BIBLIOGRAFÍA Y REFERENCIAS
La disciplina del diseño y desarrollo web sufre un cambio constante, lo que hace difícil
encontrar libros actualizados en nuestras bibliotecas. Esto determinó como principal fuente de
información la web, buscando en páginas dedicadas a la enseñanza de esta disciplina, como
idesweb.es o desarrolloweb.com; blogs profesionales como webdesignerdepot.com,
alistapart. com, graffica.info o smashingmagazine.com; y foros de diseñadores y
desarrolladores web como stackoverflow.com. Los libros y artículos especializados son de
autores expertos en diseño y desarrollo web, experiencia de usuario y arquitectura de la
información: Jeffrey Veen, Aaron Gustafson, Ethan Marcotte, Jesse James Garrett, Luke
Wroblewski, Jakob Nielsen, Daluca Budiu, Jenifer Tidwell, Jeffrey Zeldman. Para la
búsqueda de ejemplos e inspiración se recurrió a redes sociales para creativos, como Behance
AÑ O

BACHILLETATO 2023
y Dribbble, y a los premios Awwwards, una página donde se puede encontrar lo más actual
de la Web. https://blog.hubspot.es/website/como-hacer-una-pagina-web-en-html
Anexos
21
AÑ O

BACHILLETATO 2023
22
AÑ O

BACHILLETATO 2023
23
AÑ O

BACHILLETATO 2023
25
AÑ O

BACHILLETATO 2023
AÑ O

BACHILLETATO 2023
27
AÑ O

BACHILLETATO 2023
28

Creación de página web HTML5 para comercial

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Creación de página web HTML5 para comercial

Cargado por

Copyright:

Formatos disponibles

COLEGIO DE BACHILLERATO

CARMEN MORA DE ENCALADA

CARMEN MORA DE ENCALADA DE GRADO 2022

Lcda. Lidia Herrera

Que, el presente informe de investigación de Proyecto de Grado, Régimen Costa-Galápagos

CARMEN MORA DE ENCALADA DE GRADO 2022

CARMEN MORA DE ENCALADA DE GRADO 2022

El presente trabajo está dedicado en primer lugar a nuestros padres, a aquellas

avanzar hacia el éxito.

CARMEN MORA DE ENCALADA DE GRADO 2022

Al finalizar un trabajo tan arduo y lleno de dificultades como el desarrollo de un

en mi formación como estudiante. Las ideas propias, siempre enmarcadas en su orientación y

CARMEN MORA DE ENCALADA DE GRADO 2022

Análisis de la situación planteada……………………………………………6

Objetivo general y específicos ……………………………………………….10

Planeación del trabajo……………………………………………………….12

CARMEN MORA DE ENCALADA DE GRADO 2022

En el presente trabajo se expone la elaboración de un sitio web destinado a la promoción de

CARMEN MORA DE ENCALADA DE GRADO 2022

ANÁLISIS DE LA SITUACIÓN PLANTEADA

1.1 IDENTIFICACIÓN DE LOS CONTENIDOS O COMPETENCIAS A APLICAR

Como en todo proyecto de diseño web, se partió de una necesidad, la de promocionar a un

pequeño establecimiento comercial. Las nuevas tecnologías e internet ponen al alcance de

esfuerzo y un coste que muchos no se podían permitir.

campos de la ilustración digital y el diseño y desarrollo web.

Se centró sobre todo en el diseño y desarrollo de web adaptativas, que mantienen un

diseño y estructura similares en los diferentes dispositivos y tamaños de pantalla. El trabajo

el proceso de elaboración. Se investigó la evolución que ha seguido la Web hasta la fecha,

finalizando con un pequeño análisis de las tendencias en la Web.

CARMEN MORA DE ENCALADA DE GRADO 2022

En la etapa de desarrollo del proyecto se estudió la experiencia de usuario y se

maquetando el contenido y programando las funciones según la estrategia prevista. La última

dispositivos con diferentes navegadores, observando la adaptación y el correcto

para estudiar el comportamiento de los usuarios y extraer conclusiones

CARMEN MORA DE ENCALADA DE GRADO 2022

sobre el comercial Ángelo

CARMEN MORA DE ENCALADA DE GRADO 2022

Elaboración de un diseño web original y profesional adaptado para la propuesta del

proyecto, con desarrollo de un sitio web adaptativo y dinámico en el cual se pueda

acceder en los diferentes dispositivos móviles

 Realización de una página web con leguaje html5 interactiva y dinámica

 Diseño de modelos estructurados con una complejidad de nivel 2 semi profesional el

cual se adaptará a todo tipo de pantallas y/o dispositivos móviles

aprendizajes y conocimientos adquiridos sobre el tema referente al lenguaje html5

CARMEN MORA DE ENCALADA DE GRADO 2022

Todo se enfocó en búsqueda de páginas personales de otros creativos y de promoción de

CONTEXTO DEL PROYECTO

“idesweb.es” tiene una breve explicación de la diferencia entre: La temática y la importancia

Investigación de la interacción del usuario, Funcionalidad y navegación que se realiza en la

CARMEN MORA DE ENCALADA DE GRADO 2022

“La distinción entre “diseño” y “programación” o incluso la terminología aún más

CARMEN MORA DE ENCALADA DE GRADO 2022

3.2 RESPUESTA A LA PREGUNTA TEÓRICA, OPCIÓN MÚLTIPLE

Word: Al Guardar un documento deberemos tener en cuenta...

CARMEN MORA DE ENCALADA DE GRADO 2022

1. Conoce los conceptos básicos de las páginas HTML

CARMEN MORA DE ENCALADA DE GRADO 2022

2. Abre el editor de texto y comienza con una estructura básica 16

CARMEN MORA DE ENCALADA DE GRADO 2022

3. Trabaja el texto en HTML 17

4. Cambia el color del texto

CARMEN MORA DE ENCALADA DE GRADO 2022

6. Incluye un enlace a otra página