INSTITUTO SUPERIOR

TECNOLÓGICO
ISMAEL PEREZ PAZMIÑO
CARRERA:
INFRAESTRUCTURA DE
REDES Y CYBERSEGURIDAD
PORTAFOLIO:
DESARROLLO WEB
INTEGRANTES:
• Dayana Quimi
• Ángel Hidalgo
• José Sandoval
• German Sizalima
5TO SEMESTRE
MAYO – SEPTIEMBRE
Contenido
Diario #1 .................................................................................................................... 4
Fecha: ......................................................................... ¡Error! Marcador no definido.
Tema: Introducción Asignatura ................................................................................. 4
Objetivo: Desarrollar una página web sencilla mediante la aplicación de etiquetas
HTML para la compresión de su funcionamiento. ....................................................... 4
Diario #2 .................................................................................................................... 5
Fecha: ......................................................................... ¡Error! Marcador no definido.
Tema: Sitios web vs. aplicaciones web...................................................................... 5
Objetivo: Diferenciar conceptualmente los sitios web y aplicaciones web mediante el
análisis de sus conceptos, características, ventajas y desventajas para la
determinación de criterios formados con honestidad. ................................................ 5
Diario #3 .................................................................................................................... 7
Fecha: ......................................................................... ¡Error! Marcador no definido.
Tema: Sitios web vs. aplicaciones web...................................................................... 7
Objetivo: Desarrollar una página web sencilla mediante la aplicación de etiquetas
HTML para la compresión de su funcionamiento. ....................................................... 7
Diario #4 .................................................................................................................... 8
Fecha: ......................................................................... ¡Error! Marcador no definido.
Tema: CSS .............................................................................................................. 8
Objetivo: Aplicar pseudocódigos de CSS a través del uso de una página en HTML para
el diseño de interfaces de usuarios web. ................................................................... 8
Diario #5 .................................................................................................................... 9
Fecha: ......................................................................... ¡Error! Marcador no definido.
Tema: JAVASCRIPT .................................................................................................. 9
Objetivo: Aplicar los conceptos de comunicación síncrona y asíncrona en el desarrollo
front-end, utilizando JavaScript para mejorar la interactividad y eficiencia de las
aplicaciones web ..................................................................................................... 9
Diario #6 .................................................................................................................. 10
Fecha: ......................................................................... ¡Error! Marcador no definido.
Tema: ................................................................................................................... 10
Objetivo: .............................................................................................................. 10
Diario #7 .................................................................................................................. 12
Fecha: ......................................................................... ¡Error! Marcador no definido.
Tema: ................................................................................................................... 12
Objetivo: .............................................................................................................. 12
Diario #8 .................................................................................................................. 15
Fecha: ......................................................................... ¡Error! Marcador no definido.
Tema: Vue js - Framework ...................................................................................... 15
Objetivo: Instalar y configurar el framework Vue.js mediante las recomendaciones de
su página oficial para desarrollar aplicaciones web en vista de cliente ...................... 15
 Diario #1
Tema: Introducción Asignatura
Objetivo: Desarrollar una página web sencilla mediante la aplicación
de etiquetas HTML para la compresión de su funcionamiento.
RESUMEN
Indicaciones dentro del aula de clases.
Se reviso la documentación académica asignado a cada estudiante.
Documentación:

• Syllabus. - Contenido de la asignatura.

• Plan Calendario. - Distribución de temas a lo largo del tiempo.
• Guía de estudio. - Material de ayuda, en donde constan todas las tareas.
o Se realizo el encuadre de la asignatura firmada con el acta de
compromiso por parte de los estudiantes / Sistema de calificación.
o Se evalúo los conocimientos previos sobre la materia mediante una
evaluación sin puntaje.
 Diario #2
Tema: Sitios web vs. aplicaciones web
Objetivo: Diferenciar conceptualmente los sitios web y aplicaciones
web mediante el análisis de sus conceptos, características, ventajas y
desventajas para la determinación de criterios formados con
honestidad.
RESUMEN
Tipo de Sitio Características Ejemplo
Web

Sitios web Muestran siempre el mismo

estáticos contenido. No cambian con
frecuencia y son principalmente
informativos.

Sitios web Utilizan herramientas modernas de

dinámicos
diseño web. Muestran contenido
diferente según las acciones del
usuario o el tiempo que permiten la
administración de información.

Aplicación Características Ejemplo

Web
Aplicaciones
No requieren ningún tipo de
estáticas
procesamiento por parte del servidor.
Están enfocadas netamente al nivel de
usuario y se entregan información
siempre de la misma forma.
Aplicaciones Requieren procesamiento de información
dinámicas por parte del servidor. Y están enfocadas

en diferentes niveles de administración.

Que se Aplican métodos y formas
específicos para cada análisis,
procesamiento estadístico y demás tareas
específicas.

Conclusión La elección entre un sitio web estático y una aplicación web dinámica depende de las
necesidades del proyecto. Los sitios estáticos son ideales para contenido fijo y
seguridad, mientras que las aplicaciones dinámicas son esenciales para interactividad
y actualización constante del contenido.
 Diario #3
Tema: Sitios web vs. aplicaciones web
Objetivo: Desarrollar una página web sencilla mediante la aplicación
de etiquetas HTML para la compresión de su funcionamiento.
RESUMEN
HTML
HTML (Lenguaje de Marcas de Hipertexto, del inglés HyperText Markup Language)
es el componente más básico de la Web. Define el significado y la estructura del
contenido web.
"Hipertexto" hace referencia a los enlaces que conectan páginas web entre sí, ya
sea dentro de un único sitio web o entre sitios web.

Anatomía del elemento

ELEMENTO
• La etiqueta de apertura: consiste en el nombre del elemento (en este
caso, p), encerrado por paréntesis angulares (< >) de apertura y cierre.
Establece dónde comienza o empieza a tener efecto el elemento.
• La etiqueta de cierre: es igual que la etiqueta de apertura, excepto que
incluye una barra de cierre (/) antes del nombre de la etiqueta.
• El contenido: este es el contenido del elemento, que en este caso es
sólo texto.
• El elemento: la etiqueta de apertura, más la etiqueta de cierre, más el
contenido equivale al elemento.

Anatomía del elemento

 Diario #4
Tema: CSS
Objetivo: Aplicar pseudocódigos de CSS a través del uso de una página
en HTML para el diseño de interfaces de usuarios web.
RESUMEN
Como integrar CSS
• Existe tres formas de integrar las hojas de estilo a una página web
Hoja externa
Se definen los estilos en archivos externos, con la extensión .ccs y se integran al
archivo HTML, mediante un tag link. De esta forma se tiene de mejor forma
organizado el código y separado los estilos del contenido.

Hoja interna
Se definen los estilos en bloque de código interno, para ello se utiliza la etiqueta
<style> y debe ir ubicado en el head del documento

Inline
Se define el estilo interno, y solo dentro del elemento que se quiere afectar con el
estilo deseado.
 Diario #5
Tema: JAVASCRIPT
Objetivo: Aplicar los conceptos de comunicación síncrona y asíncrona
en el desarrollo front-end, utilizando JavaScript para mejorar la
interactividad y eficiencia de las aplicaciones web
RESUMEN
Javascript - Características
• Interpretado. - se ejecuta directamente en el navegador web sin
necesidad de compilar el código antes de su ejecución
• Dinámico. - significa que las variables no necesitan tener un tipo fijo y
pueden cambiar durante la ejecución del programa
• Débilmente tipeado. - Las variables en JavaScript no están
estrictamente tipeadas. Puedes asignar un valor de cualquier tipo a una
variable sin restricciones
• Orientado a objetos. - soporta la programación orientada a objetos,
aunque con un modelo basado en prototipos en lugar de la clásica
herencia basada en clases
• Multiplataforma. - Puede ejecutarse en cualquier plataforma que tenga
un navegador compatible, lo que incluye la mayoría de los sistemas
operativos modernos
• Basado en eventos
• Compatible con muchos navegadores
• Extensible
• Asíncrono
• Interoperabilidad
• Gran número de librerías y frameworks
Javascript - Usos más comunes
• Interactividad en páginas web: Manejo de eventos, validación de
formularios, animaciones, etc.
• Desarrollo de aplicaciones web: Uso de frameworks y bibliotecas
como React, Angular, Vue.js.
• Desarrollo del lado del servidor: Node.js permite utilizar JavaScript
para desarrollar aplicaciones del lado del servidor.
• Aplicaciones móviles y de escritorio: Con tecnologías como React
Native y Electron, es posible desarrollar aplicaciones móviles y de
escritorio utilizando JavaScript.
• Desarrollo de videojuegos: JavaScript se utiliza también en el
desarrollo de videojuegos, especialmente para juegos basados en
navegador.
 Diario #6
Tema: Front-End Development
Objetivo: Los estudiantes comprenderán los conceptos
fundamentales del desarrollo front-end, y serán capaces de aplicar
estos conocimientos básicos para crear una página web simple y
responsiva, mejorando así la experiencia del usuario
RESUMEN
Front-End Development
El front-end developer se encarga de construir la parte visible y la experiencia de
usuario de un sitio web, una aplicación, un sistema digital. Por lo tanto, trabaja en
la interfaz pero no se limita a concebir la parte gráfica de un objeto digital.
También estudia la mejor manera para que, por ejemplo, todo sea comprensible e
intuitivo para el usuario en su experiencia en una web de eCommerce, desde el
acceso a la pasarela de pago.
Una de las habilidades imprescindibles para conseguir una entrevista de trabajo
en este sector es demostrar conocimientos de varios lenguajes de programación.
Para un front-end developer generalmente los lenguajes básicos son HTML y CSS,
pero muy a menudo para conseguir un trabajo también se requiere el
conocimiento de sistemas concebidos con JavaScript, MVC frameworks, como
Angular, React, Vue, o en entornos Python, GIT, ES6, Typescript 3+, CRA/Next.js.
Otras competencias importantes para un front-end developer son:

• diseño mobile y responsive

• desarrollo cross-browser
• sistemas de versioning (por ejemplo, Git)
• test y debugging - es decir, saber analizar un código para verificar su
correcto funcionamiento, identificar errores (bugs) y corregirlos.
Al fin y al cabo, su trabajo está estrechamente ligado al de los diseñadores UX y al
de los desarrolladores back-end. ¿La diferencia con estos últimos? Podemos
decir que el back-end es la ‘cara oculta’, ya que es desarrollo desde el servidor, la
creación de código que permite el funcionamiento de una web; mientras que el
front-end (desarrollo frontal) trabaja desde el lado del cliente, interpretando y
adaptando lenguajes de desarrollo web para crear la experiencia final de ese
cliente/usuario: es la forma en la que el diseño se implementa realmente en la
web.
Un desarrollador front-end, además de definir la estructura de la web, debe
facilitar la navegación del usuario, teniendo en cuenta la usabilidad y legibilidad
de la web o app. Así, es clave la conexión y buena comunicación del front-end
web developer con sus aliados: el diseñador UX y el desarrollador backend.
Funciones del front-end developer
Por lo tanto, las funciones del front-end se podrían resumir en:

• Traducir diseños a lenguaje de programación.

• Desarrollar la parte visual y estructura de un site o app web, además de
mantener y optimizar sitios y apps web e interfaces de usuario.
• Facilitar la navegación del usuario y mejorar la usabilidad e interacción con
el sitio en cualquier dispositivo o explorador (revisar tiempo de carga de la
web, hacer diseños responsivos, escribir código mantenible, asegurar la
accesibilidad de la web…).
• Ocuparse de los componentes externos del site o app web y gestionar el
flujo de trabajo del software.
• Implementar prácticas de SEO on page.
Las principales tecnologías front-end que debe dominar

• HTML, CSS y JavaScript: porque estas son las bases del desarrollo web.
HTML es el lenguaje de programación por excelencia y el componente que
estructura la web, el CSS nos ayuda a definir los estilos de la web o app y
JavaScript transforma lo estático en interactivo.
• Frameworks front-end: son paquetes que contienen código prescrito,
estandarizado en archivos y carpetas. Algunos de los frameworks para
front-end más populares son Angular, React, Vue o Qooxdoo. Cabe
destacar la importancia de los frameworks que hacen posible el responsive
web design.
• Biblioteca jQuery: aunque hay muchas bibliotecas, esta es una de las más
utilizadas. Es clave en el día a día del front-end, ya que te ahorrará mucho
tiempo y esfuerzo (permite a los desarrolladores reutilizar una y otra vez
códigos o funciones, sin tener que empezar de cero).
• Herramientas para la creación de interfaces: herramientas como Adobe XD
(Adobe Experience Design CC), Sketch, Invision o Figma nos permitirán
hacer tareas de diseño y prototipado de aplicaciones web.
 Diario #7
Tema: Programación Orientada a Objetos
Objetivo: Aplicar la POO para la comprensión de los conceptos en
ambiente web, mediante el uso de javascript
RESUMEN
El primer y más importante concepto de la POO es la distinción entre clase y objeto.
Una clase es una plantilla. Define de manera genérica cómo van a ser los objetos
de un determinado tipo. Por ejemplo, una clase para representar a animales puede
llamarse ‘animal’ y tener una serie de atributos, como ‘nombre’ o ‘edad’ (que
normalmente son propiedades), y una serie con los comportamientos que estos
pueden tener, como caminar o comer, y que a su vez se implementan como
métodos de la clase (funciones).
Con la clase se pueden crear instancias de un objeto, cada uno de ellos con sus
atributos definidos de forma independiente. Con esto podríamos crear un gato
llamado Paco, con 3 años de edad, y otro animal, este tipo perro y llamado Pancho,
con una de edad de 4 años. Los dos están definidos por la clase animal, pero son
dos instancias distintas. Por lo tanto, llamar a sus métodos puede tener resultados
diferentes. Los dos comparten la lógica, pero cada uno tiene su estado de forma
independiente.
Un ejemplo sencillo de un objeto, como decíamos antes, podría ser un animal. Un
animal tiene una edad, por lo que creamos un nuevo atributo de ‘edad’ y, además,
puede envejecer, por lo que definimos un nuevo método. Datos y lógica. Esto es lo
que se define en muchos programas como la definición de una clase, que es la
definición global y genérica de muchos objetos.
La programación orientada a objetos se basa en el concepto de crear un modelo
del problema de destino en sus programas. La programación orientada a objetos
disminuye los errores y promociona la reutilización del código. Python es un
lenguaje orientado a objetos. Los objetos definidos en Python tienen las
características siguientes:

• Identidad. Cada objeto debe ser distinguido y ello debe poder demostrarse
mediante pruebas. Las pruebas is e is not existen para este fin.
• Estado Cada objeto debe ser capaz de almacenar el estado. Para este fin,
existen atributos, tales como variables de instancias y campos.
• Comportamiento. Cada objeto debe ser capaz de manipular su estado. Para
este fin existen métodos.
Python incluye las características siguientes para dar soporte a la programación
orientada a objetos:
 • Creación de objetos basada en clases. Las clases son plantillas para la
creación de objetos. Los objetos son estructuras de datos con el
comportamiento asociado.
• Herencia con polimorfismo. Python da soporte a la herencia individual y
múltiple. Todos los métodos de instancias de Python son polimórficos y se
pueden alterar temporalmente mediante subclases.
• Encapsulación con ocultación de datos. Python permite ocultar los
atributos. Cuando se ocultan los atributos, se puede acceder a los mismos
desde fuera de la clase únicamente mediante los métodos de la clase. Las
clases implementan métodos para modificar los datos.
Principios de la Programación Orientada a Objetos
La encapsulación
La encapsulación contiene toda la información importante de un objeto dentro del
mismo y solo expone la información seleccionada al mundo exterior.
Esta propiedad permite asegurar que la información de un objeto esté oculta para
el mundo exterior, agrupando en una Clase las características o atributos que
cuentan con un acceso privado, y los comportamientos o métodos que presentan
un acceso público.
La abstracción
La abstracción es cuando el usuario interactúa solo con los atributos y métodos
seleccionados de un objeto, utilizando herramientas simplificadas de alto nivel
para acceder a un objeto complejo.
En la programación orientada a objetos, los programas suelen ser muy grandes y
los objetos se comunican mucho entre sí. El concepto de abstracción facilita el
mantenimiento de un código de gran tamaño, donde a lo largo del tiempo pueden
surgir diferentes cambios.
La herencia
La herencia define relaciones jerárquicas entre clases, de forma que atributos y
métodos comunes puedan ser reutilizados. Las clases principales extienden
atributos y comportamientos a las clases secundarias. A través de la definición en
una clase de los atributos y comportamientos básicos, se pueden crear clases
secundarias, ampliando así la funcionalidad de la clase principal y agregando
atributos y comportamientos adicionales.
El polimorfismo
El polimorfismo consiste en diseñar objetos para compartir comportamientos, lo
que nos permite procesar objetos de diferentes maneras. Es la capacidad de
presentar la misma interfaz para diferentes formas subyacentes o tipos de datos.
Al utilizar la herencia, los objetos pueden anular los comportamientos principales
compartidos, con comportamientos secundarios específicos. El polimorfismo
permite que el mismo método ejecute diferentes comportamientos de dos formas:
anulación de método y sobrecarga de método.
 Diario #8
Tema: Vue js - Framework
Objetivo: Instalar y configurar el framework Vue.js mediante las
recomendaciones de su página oficial para desarrollar aplicaciones
web en vista de cliente
RESUMEN
En la practica de hoy ser realizo la instalación de NODE cual será el principal motor
para poder ejecutar el Vue js y comenzar a realizar actividades a lo largo de las
clases.
Se nos indicó los pasos para descargar e instalar esta aplicación.

Luego de realizar la respectiva instalación se deben ejecutar comandos en el CMD

para poder completar con la ejecución de ese programa