INSTITUTO POLITÉCNICO NACIONAL

ESCUELA SUPERIOR DE INGENIERÍA MECÁNICA Y ELÉCTRICA (ESIME)

UNIDAD CULHUACAN

INGENIERÍA EN COMPUTACIÓN

ASIGNATURA: COMPILADORES

PROFESORA: RESENDIZ COLIN PILAR

“Resumen: Desarrollador Front-end”

ALUMNA:

FRANCO GONZÁLEZ MONSERRAT DESIREH

GRUPO: 5CV34
 Nivel 1
Lección 1
Diseño web
Crear y mantener un sitio web requiere del uso de una variedad de tareas informáticas como el
manejo de base de datos, manejo de servidores desarrollo front end, desarrollo back end. Para
diseñar el sitio web el siguiente proceso obtención de los requerimientos del cliente, diseño de la
apariencia de cada una de las páginas que lo compondrán programación de su interfaz en el
navegador web diseño de su base de datos programación de sus funcionalidades renta o compra
del servidor que lo alojará junto con la base de datos pruebas al desarrollo gestión de cambios al
desarrollo suministra situación en productivo

Dispositivos finales de usuario

El sitio web debe ser adaptable a todos los dispositivos computadoras, celulares, tablets cada
dispositivo cuenta con al menos 1 navegador web para visualizar el sitio sin importar el sistema
operativo que utilice esto hace del diseño web la alternativa perfecta en un inicio para un
desarrollo multiplataforma es importante que diferencias entre sitio web y aplicación móvil ya que
el primero se puede ejecutar en todos los dispositivos vía un navegador de internet y la segunda
requiere para su visualización un desarrollo específico para cada sistema operativo en general en
su web sitio es más universal y su diseño o más complejo

Desarrollo web
El desarrollo del diseño web es un proceso muy importante ya que en éste las ideas y
requerimientos toman la forma final que el usuario experimentará en el sitio web el desarrollo se
divide en 2 grandes procesos desarrollo front end y desarrollo back end

front end: traduce el diseño de la apariencia del sitio web al código que interpretará el dispositivo
con el que va a interactuar el usuario final interventores del cliente a Objetivos de Desarrollo
acomoda el código previamente definido agrega imágenes audio o video tutorial, formación de
navegación agrega páginas, agrega paleta de colores, las actividades logra utilizando lenguajes de
programación como HTML 5, CSS estos lenguajes en conjunto hace que este sitio web e incluso
atractivo a los usuarios

back end: Las funcionalidades que el cliente quiere que tenga el sitio web por ejemplo ventas por
internet que el usuario tenga que registrarse en el sitio poniendo sus datos personales, clasificar
los sueños por guion hacerlo por internet tener un registro de lo que ha comprado cada usuario
todas las funciones se realizan en otros lenguajes de programación más poderosos como ficha los
desarrolladores va a quedar un código que se contrae datos porque cuando estás en una tienda en
internet y realizas una búsqueda de productos el código back end revisa en la base de datos los
productos buscados y entregan los resultados a la capa de front end para que el usuario la pueda
visualizar desde el mismo sitio web los 2 tipos de desarrollo requieren de habilidades diferentes
uno está más orientado a la lógica acción y bases de datos y el otro está orientado a la
visualización y a interfaces de usuario

Medidas de seguridad y salud laboral

En tu trabajo puedes estar expuesto a riesgos que provocan lesiones accidentes o enfermedades
ya que pasarás mucho tiempo sentado frente a una computadora por lo tanto considera las
siguientes medidas para cuidar tu equipo de trabajo, conserva limpio tu lugar, establece tus
horarios de comida respétalos y asigna las zonas destinadas, para realizar esta actividad mantén tu
espacio de trabajo ventilado y con iluminación adecuada, ten a la mano un botiquín de primeros
auxilios revisa que las conexiones y cables eléctricos de tus equipos que estén bien conectados y
no estén dañados ubica las salidas de emergencia e infórmate sobre qué hacer en caso de
incendios sismos o cualquier emergencia conecta tus equipos a un regulador para protegerlos de
variaciones en el voltaje

Hábitos laborales
Cuida tu postura cuando trabajes frente a la computadora mantén la cabeza en alto, relaja tus
hombros, recarga tu espalda en la silla, vigila que la flexión de tu brazo y antebrazo sea de 90°,
apoya firmemente los pies al piso utiliza, correctamente al ratón para evitar lesiones en la muñeca,
alinea tu mano con el antebrazo y conserva esta posición cuando muevas el ratón coloca tus
manos correctamente al usar el teclado de la computadora mantén tu mano suspendida sobre él
con la muñeca recta relaja los hombros y mueve los dedos suavemente al escribir ajusta el
monitor de la computadora a la altura de tu vista conserva un brazo de distancia del monitor evita
trabajar con un alto nivel de brillo en tu monitor y usa lentes especiales para proteger tu vista para
identificar riesgos y prevenirlos es importante que inviertas en las medidas de seguridad que te
permitirán cuidar tu salud

Lección 2
Diseño de interfaz de usuario
Como desarrollador front end deberás diseñar la interfaz de usuario ya sea para un ambiente web
o una aplicación ésta debe estar enfocada en la experiencia e interacción del usuario que se logra
con gráficos pictogramas combinación de colores y simbologías llamativas de esta manera se
garantiza el éxito del sitio web el diseño de la interfaz se ubica en el desarrollo front end que sigue
los siguientes modelos

Modelo del diseñador: Esta combina las necesidades e ideas del usuario y de las herramientas del
programa de actividad de la plataforma

Modelo del usuario: Se enfoca en el comportamiento del sitio realizando pruebas de usabilidad

A partir de ambos modelos el arquitecto decide qué funcionalidades se pueden realizar con los
recursos de programación disponibles
Principios para el desarrollo de interfaces
Para lograr una interfaz de usuario exitosa siguen estos principios

Anticipación: Adelantarse a las necesidades de los usuarios por ejemplo reduce clics para llegar al
contenido relevante

Autonomía: Se debe dar al usuario un ambiente flexible para que aprenda rápidamente a utilizar
la aplicación por ejemplo genera varios caminos para llegar al mismo contenido

Valores por defecto: la configuración predeterminada debe permitir al usuario explorar fácilmente
la interfaz por ejemplo dejar ejemplos de llenado en formularios web

Modularidad: permite el crecimiento de la plataforma de manera sencilla por ejemplo crea una
plantilla general del sitio de la que puedes basarte a la hora de codificar todas las páginas web

tome en cuenta que diseñar tu interfaz siguiendo estos principios reducirá la aparición de errores
en las siguientes fases del proceso

Experiencia de usuario
Como desarrollador front end una de tus tareas es apoyar el diseño de interfaces que cumplan con
las necesidades del usuario haciendo agradable su experiencia de navegación y con ello visite el
sitio web en más ocasiones e incluso que lo recomiende a otros usuarios

Importancia de la experiencia del usuario

La interfaz de usuario debe estar diseñada tomando en cuenta la experiencia de usuario y la
interactividad pues entre más visitas recibe del sitio mayor es la probabilidad de que los usuarios
adquieran los productos o servicios que éste ofrece al tener muchas visitas otras empresas ven la
oportunidad de difundir sus servicios y pueden contratar un espacio publicitario en el sitio
generándose así otra fuente de ingresos

Uso de botones
En un sitio web los botones son la principal interacción con el usuario estos permiten acciones de
confirmación por ello debes cuidar 3 aspectos:

 La forma del botón debe ser la misma en todo el sitio

 La palabra que contiene el botón debe ser característica de la acción que realizará
 Animación de cambio de estado cuando el usuario pasa el puntero por el botón

Estos aspectos deben permitir al usuario manejar la página de manera intuitiva, aunque sea la
primera vez que la visita los enlaces son esenciales en un sitio web porque permiten la navegación
entre sus páginas pueden estar en el texto en una imagen anclados a un botón entre otros.

Deben tener las siguientes características: diferenciados de texto, el estado de un enlace debe
estar anclado al color de este deben llevar un texto explicativo
Uso de otros elementos interactivos
Existen otros elementos interactivos con los que el usuario puede ingresar información a un sitio
web los más conocidos son:

 Textarea: El usuario puede ingresar texto para que opine acerca de la página o tema
frecuente
 check Button: marcar múltiples opciones según el gusto del usuario
 radio button: marcar una opción más adecuada para cada usuario

Los formularios de un sitio web utilizan estos elementos para que los usuarios se registren en tu
página es una buena manera para conocer el tipo de usuarios que visitan tu página y de esta
manera realicen cambios en tu sitio que mejoren la experiencia del usuario

Aseguramiento de la usabilidad
Uno de los objetivos más importantes en el desarrollo front end es que el usuario utilice y
adquiera los servicios del sitio web para ello debes facilitar la usabilidad del sitio es decir que el
usuario entienda y utilice sus funcionalidades de manera casi intuitiva no vaya la usabilidad va muy
ligada a la experiencia de usuario y al diseño de interfaces por ejemplo un sitio web de ventas no
podría ser exitosos y su procedimiento de compra no es fácil de seguir en este proceso intervienen
mecanismos de programación bastante complejos que el diseñador front end debe simplificar
para el usuario

Factores de la usabilidad
Para que la usabilidad sea efectiva tome en cuenta los siguientes factores clave el tiempo que
tarda un usuario en aprender a usar una interfaz la rapidez con la que el usuario recuerda a los
procedimientos particulares de cada función el reconocimiento de las características clave para
utilizar el sistema en un futuro la asistencia al usuario en caso de problemas el grado de
satisfacción de los usuarios cuando han usado el sistema para poder medir estos factores se
realizan pruebas de usabilidad si la interfaz no pasa estas pruebas debe ser rediseñada u
optimizada

Mejoras de la usabilidad
Para mejorar la usabilidad del sitio web el usuario debe saber qué hace el sitio web desde la
primera visita a este la información debe estar organizada agrupada en menús de navegación y
dando énfasis en mensajes principales los contenidos deben estar desarrollados de manera clara y
sin confusiones el diseño gráfico debe apoyar el contenido del sitio una interfaz pensada en
usabilidad y en cómo piensa el usuario es necesaria para que éste vuelva a consultarla la
jerarquización de la información tal vez es uno de los aspectos más importantes sabiendo que la
mayoría de los usuarios no lee todos los textos sino que salta el contenido hasta encontrar lo que
busca
 Nivel 2
Lección 1
Proceso de desarrollo front end
Como desarrollador front end puedes participar en 2 vertientes de trabajo complementarias para
crear un sitio web si te involucras desde la planeación del sitio deberás considerar los siguientes
puntos

 Toma de requerimientos del cliente traduce las necesidades del cliente en objetivos de
diseño
 Diseño del mapa de navegación modela la cantidad de páginas web que requerirá el sitio y
su jerarquía
 Diseño de Wire frames determina cómo se mostrará el contenido de cada página paleta
de colores animaciones imágenes entre otros

En esta etapa apoyadas en el diseño del sitio a diseñadores gráficos consultores y expertos web si
el mapa de navegación ya está diseñado con los Wire frames de cada página tu trabajo se centrará
en la codificación del sitio

Codificar en HTML 5 el contenido de cada una de las páginas siguiendo el wireframe

correspondiente codifiquen CSS el estilo de las páginas web usando tipo de fuentes colores
Marcos y más codifica en javascript para sumar interactividad a cada una de las páginas usando
animaciones y funcionalidades como comunicación con bases de datos consulta de información
generación de gráficas y tablas aplicar técnicas de seo para que los buscadores web más usados
encuentran en el sitio web fácilmente y de esta manera se incrementen las visitas gestiona
cambios de funcionalidades páginas y contenido terminando estos 5 pasos el sitio web quedará
listo en cada paso debes pedir la aprobación del cliente para evitar de trabajar su
retroalimentación es invaluable

Requerimientos del cliente

La identificación y el análisis de los requerimientos del cliente requiere que evalúes previamente la
problemática así podrás formular recomendaciones y decidir qué hacer para atenderlos y
resolverlos en medida de los recursos disponibles y las condiciones existentes

Definición del proyecto

Los requerimientos del cliente siempre serán la pauta para definir la dimensión del sitio web por lo
general se deben delimitar los siguientes aspectos será complementario a otro sitio web o se
desarrollará desde cero a qué área geográfica va dirigido distritos Estados a nivel nacional o
mundial, será privado público o abierto, qué institución lo administrará por ejemplo universidades
del Estado empresas u otros independientemente de estos requerimientos del cliente también
debe estar involucrado en el diseño gráfico del sitio además tendrá que validar el contenido y la
forma en que será transmitido

Solución para sitio web de ventas online

Un sitio web de ventas online debe tener los siguientes requerimientos a nivel mundial abierto su
control operacional lo puede llevar a empresas privadas es totalmente en línea en general este
tipo de sitios tienen ligeras variaciones de estos requerimientos y dependen totalmente de la
tecnología que el cliente piensa o pueda utilizar en el desarrollo del mismo el cliente al estar
inmiscuido en el diseño es esencial mostrarle el trabajo gráfico y de contenido del sitio para de
esta manera cumplir con todos los requerimientos en caso de que el cliente proponga un cambio
pertinente o posible este se incluye en el diseño no se puede pasar a la parte de desarrollo si no se
tienen los requerimientos bien claros y aprobados

Mapas de navegación y wireframes

La arquitectura de información en un sitio web debe estar necesariamente orientada a los
usuarios ya sea una página web o una aplicación ésta debe tener una estructura entendible menos
simples y una navegación eficiente sigue estos pasos para comenzar con el proceso de
arquitectura de información del sitio web clasifica la información en categorías con el fin de crear
un índice de contenidos este será el inicio de un mapa de navegación jerarquizar el contenido en
un esquema global de tal forma que se ordene el contenido de mayor a menor relevancia
utilizando el índice previamente creado ya sea que el sitio sea dinámico o estático diseña
elementos que comuniquen el esquema global a cada unidad de contenidos de la página web de
tal forma que los elementos sean estructurados y funcionales por último se modelan las diversas
acciones que el usuario realizará en el sitio web en general es un esquema que relaciona al usuario
con la interfaz del sistema de este proceso se obtienen 3 entregables mapa de navegación
Wireframes partituras de interacción

El mapa de navegación es la representación gráfica de la organización de los contenidos en una

plataforma su creación engloba el diseño de espacios y planos para comunicar información de tal
forma que el usuario tome caminos de forma virtual al visitar el sitio basados en la información se
estructuran caminos que serán de interés para el usuario un buen mapa graficará todas las
relaciones de jerarquía y secuencia y permitirá al equipo elaborar los escenarios de
comportamiento de los usuarios

Los wireframes son la diagramación de objetos utilizando bocetos de cada una de las pantallas de
la página web su objetivo es definir el contenido y la posición de los diversos objetos que
conforman el sitio de esta manera se definen los sistemas de navegación para usuarios cada área
profesional de tu equipo de trabajo buscará en wireframes la siguiente información desarrollo

 esta área brinda una aproximación a las funcionalidades a programar en el sitio web
  diseño le da el estilo visual y la interfaz de usuario que debe tener la plataforma
 gestión de proyectos estima tiempos de trabajo y presupuestos
 contenidos define dónde irá cada elemento qué relevancia tendrá y el formato apropiado

Partituras de interacción
El diseño de la interacción en un sitio web o aplicación puede levantar un proyecto o tirarlo si no
es capaz de responder a las necesidades de quienes están en él una gran herramienta para el
diseño de la interacción es la creación de modelos con lenguaje visual estos modelos se llaman
partituras de interacción toma en cuenta de estas capas:

 Acciones del usuario objetivo último del usuario que accederá al sitio
 Contacto directo elementos concretos de la interfaz con los que el usuario interactúa
 Proceso funciones y comportamiento del sistema para responder al usuario

Las partituras ayudan a cada profesional a unificar sus ideas y a tener una referencia visual sobre
cómo quedará la plataforma con base en las partituras el cliente puede dar su punto de vista

Lección 2
Lenguaje de la web
Para poder desempeñar tu trabajo debes saber cómo funciona internet y cómo se puede acceder a
una página web desde cualquier computadora o dispositivo móvil todo sistema de cómputo debe
ser único en la web para poder acceder a Internet por ello las compañías que ofrecen el servicio de
internet asignan direcciones únicas e irrepetibles a las computadoras estas direcciones son
llamadas protocolo de internet para acceder a Internet los navegadores usan el servicio de World
Wide web junto con el protocolo de transferencia de hipertextos internet funciona bajo el modelo
cliente servidor en el que todos los dispositivos móviles o computadoras son los clientes y los
servidores son computadoras con mayor capacidad de almacenamiento y procesamiento que
alojan a las páginas web cuando una computadora solicita al servidor ver una página web este
responde mandando en la página web a la dirección IP de dicha computadora mediante el
protocolo de comunicación http en este punto la máquina sólo tiene la página web como un
archivo de hypertext entonces lo que el navegador realiza es una traducción de este archivo dando
como resultado lo que ves en la pantalla del navegador este archivo es de extensión HTML qué
significa lenguaje de etiquetado de hipertexto tomando en cuenta lo anterior es necesario crear
un archivo en HTML para que al subirlo a un servidor los usuarios puedan visualizarlo como fue
diseñado

Los archivos en HTML tienen 3 partes principales que se diferencian con 3 etiquetas

HTML lenguaje que se va a utilizar en todo el archivo head se deja lo que esté a su etiquetas no se
visualizará en la web por general contienen configuraciones y archivos que se utilizarán en el
código body y cierre de body todo lo que vaya aquí se mostrará en la página web aquí va el
contenido dentro del body se utiliza en la mayoría de las etiquetas para acomodar el contenido
HTML es un lenguaje de etiquetas definidas previamente y tienen diferentes funciones para
acomodar el text ó en el sitio web

Uso de links e imágenes en HTML

Cuando se crea un sitio web las páginas que lo conforman están desagregadas por lo que debes
unirlas por medio de links

Direcciones de archivos
Para poder hacer links entre páginas web de un sitio debes saber exactamente la dirección en el
servidor que las aloja Por ejemplo tú sitio web se ubica en una carpeta en un servidor si las páginas
que quieres unir se encuentran en el mismo nivel que tu página principal sólo tienes que
referenciar el nombre del archivo por lo general las páginas del sitio web se dividen en
clasificaciones según el tema cuya ubicación será en otras carpetas dentro de tu carpeta principal
para crear un link a una página que esté dentro de una carpeta sigue esta sintaxis si el link se
encuentra en una carpeta que está dentro de la carpeta de clasificación y ésta a su vez está en una
carpeta principal sigue esta sintaxis

Generación de links en páginas web

Para crear un link en una página web tienes que usar la siguiente etiqueta usar la siguiente
etiqueta dirección ese lugar en el servidor donde se encuentra el archivo HTML de la otra página
web y el text es al que va anclado el link por ejemplo en la carpeta de un sitio de música debe
haber un link de géneros dentro de la página principal del sitio la página de géneros se encuentra
en la carpeta de clasificación por lo tanto la dirección que debe ponerse en la etiqueta es la
siguiente todos los links deben estar en la sección body de cualquier página web cabe la
posibilidad de que en la página web hagas un link a una página que está en una carpeta superior
por ejemplo quieres hacer un link que te regrese a la página principal desde la página de género
para este caso sigue esta sintaxis los: escalan en la jerarquía de carpetas por lo que si tu archivo
está muy arriba puedes hacer uso de

Insertar imagen en páginas web

para insertar imágenes en cualquier página web el procedimiento es el mismo al de los links lo
único que cambia es la etiqueta como te podrás dar cuenta esta etiqueta no tiene cierre esto es
porque la imagen no engloba ningún tipo de texto, sino que el sistema solo inserta la imagen
donde tú lo indicas el tratamiento con las direcciones es el mismo que con los links solo que el tipo
de archivo será uno de imagen .bpm .jpg .png etcétera prueba los links para comprobar que
funcionen y sean los correctos darle clic a tu página que se abra dentro del navegador y de ahí
realicen las pruebas pertinentes
Insertar listas y tablas en HTML
Agregar listas y tablas es de lo más común cuando se crea una página web además son los
elementos más utilizados al extraer información del back end en HTML existen 3 tipos de etiquetas
para insertar listas

 Lista ordenada
 Lista desordenada
 Elemento de lista

Este siempre va dentro de una etiqueta de lista ordenada o desordenada cada tipo de lista debe
estar en el body y por lo general dentro de una etiqueta por ejemplo en el escribe y el título del
álbum después cierra escribe e indica que será una lista ordenada con agrega cada canción con un
nombre de canción y cierra con un después de agregar todas las canciones cierra la lista con un y
después si a real párrafo cierra el contenido con ejecuta el HTML en el navegador para ver los
resultados las siguientes etiquetas se utilizan para crear tablas dentro de una página web se inicia
una tabla se nombra a la tabla se agrega una línea en la tabla si indica el nombre de cada columna
de la tabla se agrega a cada uno de los datos de la tabla las tablas siempre deben estar dentro del
body y no necesariamente en un párrafo

los sitios web recurren a listas y tablas para organizar su información visualmente

Estructura en HTML
Estructura en HTML es importante que comprenda la estructura de los archivos HTML con el fin de
facilitar al navegador la traducción del código a elementos visuales en HTML existen diferentes
versiones y un navegador debe poder identificar en qué versión de HTML debe trabajar la primera
etiqueta lo indica por ejemplo para trabajar bajar con un archivo de HTML 5 la primera etiqueta
debe decir si no dice la palabra doc tip significa que estás trabajando con la versión 4.01 después
de la primera etiqueta se coloca la etiqueta Head que integra la configuración de la página aquí
siempre se tiene que indicar la codificación que tiene el archivo por esta razón utiliza la etiqueta
meta de la siguiente manera esto se refiere a la codificación que elegiste al crear el archivo HTML
después está el body donde se integra toda la información o contenido que quieras mostrar en la
página pero generalmente el body también se divide en diferentes secciones

Secciones del body

Si el body es el contenedor de toda la información visible se debe clasificar para que en un futuro
el estilo gráfico sea más fácil de aplicar estas nuevas secciones son la cabecera de la página que
puede llevar el logotipo del negocio el título o el nombre, el menú de navegación en el sitio la
columna de contenido al lado derecho de la página, pie de página que puede llevar ayudas
contactos política de privacidad y más, grupo temático en el que puedes construir tus propias
secciones y a una de ellas brindarle diferente diseño visual

Todas estas etiquetas se usan en las páginas web cada una de estas deben ser visualizadas como
cajas algunas paradas en otras cajas por ejemplo la caja de body contienen las cajas de Twitter y
sexan la de Heather contiene otra caja de sexan esto se representa en HTML una caja no puede
contra medias por lo que quedan prohibidas este tipo de colecciones ahora sabes lo básico para
codificar HTML y ordenar el contenido de tu página web y así empezar a construir el sitio

Vídeo y audio en HTML

En muchas ocasiones usarás vídeos para darle más interactividad a la página web la etiqueta de
video es muy parecida a la de imágenes porque esta sí tiene etiqueta de cierre

Atributos
Esta etiqueta tiene muchos atributos como define si el cuadro de vídeo tendrán los botones de
play pausa comentarios radio vídeo automáticamente después de cargar la página web pero la
imagen cuando el vídeo aún no se reproduzcan define los lados de pixeles del rectángulo que
contendrá el vídeo determina la dirección del vídeo define si el vídeo se reiniciará cuando acabe
después de los atributos para mejora del vídeo así puede quedar la etiqueta este suma
importancia el giro con la extensión compatible con el navegador que planeas usar ya que no
todos soportan cualquier formato por ejemplo los formatos más comunes para HTML son MP4,
WEBM y OGG para estar por terminar con cualquier navegador crea los 3 formatos en la carpeta
del sitio generalmente en una carpeta dedicada a vídeos abre la etiqueta de vídeo con las
atributos que desees abre la etiqueta Source y agrega un atributo S escribe tip para indicar la
extinción vete a la de 3 horas por cada tipo de formato cierra la etiqueta de vídeo con de esta
manera el navegador usa el video en el formato que les compatible es muy difícil que en un
navegador no sea compatible con ninguno de estos 3 formatos por lo que el vídeo siempre se
desplegará agregar vídeos en tus páginas web es una gran idea ya que incrementan el número de
visitas a la página por lo llamativo es que son todo depende del tipo de sitio web que estés
construyendo

Lección 3
Generar estilo visual al sitio web
Para presentar el sitio web al usuario no basta estructurar la información sino darle un estilo visual
definido por el equipo de diseño gráfico para desarrollar el aspecto del sitio web debes usar el
lenguaje CSS o Cascade Style Sheet en este puedes configurar colores background tipo y tamaño
de letra la configuración de estilo debe estar en el archivo HTML dentro de la etiqueta Head
escribe la sintaxis correctamente para agregar estilo a cada etiqueta las etiquetas que tengan esta
configuración de estilo tendrán un aspecto diferente cuando las veas en el navegador por ejemplo
para cambiar los párrafos de una página web en el get de un archivo HTML escribe Style después
escribe PY abre una llave escribe background color red y cierra la llave por último cierra la etiqueta
con el cierre de Style observen el navegador como se ve en los párrafos de la página web existen
muchas reglas de estilo que puedes introducir en la parte de configuración para separar las usa; en
páginas muy complejas la sección hasta el podrá ser muy extensa haciendo difícil de entender el
código HTML por ello es mejor separar la parte de CSS del archivo en HTML creando un archivo
CSS

Contorno bordes y márgenes

Las etiquetas que se comportan como cajas deben colocarse correctamente en la página web para
ello existen ciertas configuraciones utiliza los siguientes parámetros para posicionar una caja

 padding la distancia de la información al border

 border la línea que rodea la información y depende de la distancia del padding
 margin la distancia del borde hacia un margen de caja o los límites de la pantalla

Este tipo de parámetros generalmente se introducen en píxeles la pantalla dependiendo de su

resolución está dividida en píxeles estos generan un color característico en RGB por lo que cada
Píxel es capaz de entregar 16,581,375 colores si tú pantalla es Full HD tiene una resolución de
1920 por 1080 píxeles lo que significa que tiene 2,073,600 pixeles

Uso de seudo clases

Para la interactividad del sitio web debes desarrollar seudo clases esto vuelve más atractivo el
contenido y genera más posibilidades de que el usuario visite con frecuencia el sitio

Cambio de etiquetas o elementos

Para lograr un efecto interactivo en ciertos aspectos definidos por el código CSS es necesario
cambiar el estilo de los elementos en la página web por ejemplo tienes un botón definido en la
página web anclado a una clase cuando el puntero pase por el botón este debe cambiar de color a
esto se le llama hover y para realizar este efecto debes anclar la seudo clase a la que está anclada
la etiqueta haslo de la siguiente manera escribe el identificador de la clase después pon: y el
nombre de la acción abre corchete si escribe la regla cierra corchetes ahora siempre que pases el
mouse por el botón este cambiará de color

Pseudo-clases frecuentes
Existen acciones frecuentes en seudo clases por ejemplo seleccionar los elementos sobre los que
pasa el puntero el elemento de entrada al que le has dado clic con el mouse un link previamente
visitado los links que no han sido visitados un link activo

La pseudo clases se anclan a clases o etiquetas, pero si no existe etiqueta en la sección a la que
quieres anclar la seudo clase tienes que crear la <div> para ello haz lo siguiente escribe <DIV> en el
body escribe la clase a la que han claras a esta etiqueta con Class nombre clase agrega a los
elementos a los que le quieres anclar la clase y la pseudo-clase cierra la etiqueta en el CSS se crea
la seudo clase ahora ya puedes agregar secciones y crear el estilo de cada una de ellas

Lección 4
Cómo incorporar javascript al sitio web
Javascript es un lenguaje de programación ligero e interpretado por el motor del navegador cuya
función es brindar dinamismo y funcionalidad al contenido de una página web un archivo de
javascript tiene la extensión .js para importarlo al HTML debes agregar la siguiente línea al body se
recomienda hacerlo en la parte final del código para que no se confunda con el contenido además
el archivo .js debe estar dentro de la misma carpeta donde se aloja la página web en una carpeta
propia para brindar practicidad y orden hay librerías o framework de javascript que facilitan la
programación en este lenguaje estos existen gracias a la programación orientada a objetos se
componen de conjuntos de funciones y animaciones que son fácilmente reutilizables el ejemplo
más conocido es el framework JQuery para usarlo debes descargar el archivo .js desde sus páginas
web e importarlo en el HTML como cualquier otro archivo de javascript otra forma de importar un
archivo es usar la dirección web donde se aloja el archivo .js eso te permite tener la versión más
actualizada del framework sin embargo está sujeta a su disponibilidad y existencia en el sitio web
en caso de usar JQuery y otros frameworks de javascript juntos la línea para importar JQuery debe
ir primero ya que comúnmente los demás frameworks dependen de JQuery y por ser uno de los
primeros en desarrollarse

Manejador de eventos
Javascript usa manejadores de eventos para crear formas amigables de interacción con las páginas
web un manejador de eventos es una función que utiliza un atributo especial de etiquetas HTML
su particularidad está en que puede llamar funciones que estén en los archivos. JS qué programes
Los cuatro tipos de atributos de eventos más importantes dependen de la interacción que se
quiere implementar mouse teclado enfoque carga de página

Eventos del mouse

Dependiendo de la acción del usuario podrás programar una función para estas acciones clic doble
clic colocar el cursor sobre un elemento quitar el cursor de un elemento mover el cursor sobre un
elemento dejar de presionar un botón estos atributos se usan a menudo para dar instrucciones al
usuario o avisos de advertencia para confirmar una acción

Eventos del teclado

para programar la interacción con el teclado usa los siguientes atributos presionar una tecla y
soltarla presionar una tecla dejar de presionar una tecla estos atributos se usan en su mayoría
para dar instrucciones o captar la atención del usuario

Eventos de enfoque
Estos eventos dirigen la atención del usuario a ciertos elementos enfoca un elemento quita el
enfoque de un elemento se usan para dar instrucciones y facilitar las actividades del usuario

Eventos de carga de página

Para realizar una acción cuando la página se cargue o la abandone usas esos atributos en las
etiquetas <body> e <img> al cargar al abandonar normalmente se usan para cargar elementos que
son pesados para la página como galerías videos o animaciones una buena práctica que te ayudará
a conservar el orden y estructura es separar las etiquetas HTML y las funciones en javascript y sólo
llamar las con los atributos observe el ejemplo mejorado de los atributos on loud y on loud usando
una combinación de estos atributos y manteniendo buenas prácticas de programación web podrás
implementar mejoras en la usabilidad del sitio web que lo volverán más atractivo por su facilidad
de uso.

Uso de API
Una API es una interfaz de programación de una aplicación ésta facilita la creación de
funcionalidades más complejas a partir de otras ya existentes sin la necesidad de comenzar de
cero las apis sirven como puente de comunicación entre aplicaciones y sistemas operativos bases
de datos protocolos de comunicación plataformas online

API de geolocalización
Al elegir una API investiga en su página de internet los permisos y requisitos para usar sus métodos
y funciones posiblemente necesites Keys, tokens, registro como desarrollador una vez que
cumplas con estos requisitos al identificar estas características podrás adaptarte a cualquier API ya
que están basadas en el paradigma orientado a objetos úsalas para destacar tu página web y
mejorar la experiencia de tus usuarios

Creación de formularios
Cuando usas javascript para verificar un formulario lo primero que debes tomar en cuenta son los
manejadores de eventos y las etiquetas de HTML 5

Tipos de campos de formularios

HTML tiene etiquetas especiales para los campos de un formulario que dependen del tipo de
información que se desea ingresar para utilizarlas elige el atributo correspondiente al tipo de
información y colócalo después del= del atributo Type observar los tipos de información que se
pueden desplegar text, contraseñas, selección de varias opciones selección de una sola opción
subir un archivo en el caso de opciones múltiples añade las como valores dentro de los atributos
value

Procesamiento de la información con Javascript

Javascript usa una estructura de arreglos para procesar la información de los elementos HTML que
ya dispone de una función que automáticamente guarda estos elementos dentro de un arreglo
para eso define una variable que guardará el arreglo asigna a la variable el resultado de la
siguiente función el primer elemento del arreglo es el primer campo del formulario cada campo
tiene una estructura de arreglo donde se guardan sus estilos los valores de los datos que posee e
incluso funciones esta estructura jerárquica facilita obtener la información que ingrese el usuario
para procesarlos por ejemplo realiza lo siguiente identifique el elemento de mayor jerarquía form
colocó un punto para escribir el nombre del elemento que deseas acceder a sus atributos ejemplo
uno coloca otro punto y escribe el nombre del atributo que deseas obtener valió para obtener el
valor de los datos que se han ingresado imprímelos con la instrucción con sol. Log para observar la
información ingresada realiza esto con cada elemento y así obtendrás la información que el
usuario escribe en tu formulario

Proceso de verificación de datos

Las etiquetas de HTML 5 te ayudan a identificar cada elemento del formulario para capturar la
información que ingrese el usuario para validar elige el tipo de etiqueta según la información que
se ingrese usa el manejador de eventos on soft para llamar a una función que verificará que los
datos ingresados sean correctos cuando se envíen En este caso será la función de javascript
verificar procesar los datos del formulario guardándolos en una variable de arreglo para eso usa la
correspondiente define la estructura de la función verificar como una sucesión de condiciones en
las que verificaras los datos ingresados por cada campo del formulario finaliza la función de una
variable de retorno True o verdadera para indicar que todos los campos están correctos usa la
variable de retorno como indicador para la función que subir a la información a la base de datos la
ventaja de usar javascript es su funcionalidad asíncrona esto permite que cada función se ejecute
en paralelo acelerando la verificación de los datos y por consiguiente en su almacenamiento de la
base de datos

Nivel 3
Lección 1
Cambios al desarrollo front end
Al implementar el desarrollo del sitio web este puede tener algunos cambios por lo que tendrás
que documentarlo si aprobarlos o desaprobarlos cuando éstos impacten en el desarrollo de forma
significativa

Gestión de cambios
Las modificaciones que sufre el sitio web debes identificar las organizarlas y llevar su registro hay
cuatro fuentes fundamentales de cambios a un desarrollo nuevos negocios o condiciones
comerciales nuevas necesidades del cliente reorganización del sitio web restricciones de
presupuesto todo cambio debe pasar por el comité de control de cambios que está conformado
por el director el arquitecto y el administrador del proyecto web ellos deben aceptar o rechazar el
cambio tomando en cuenta la posibilidad de ejecución del nuevo requerimiento si rechazan el
cambio deben proponer alguna alternativa de solución o indicar en qué circunstancias es posible
dicho cambio para ejecutar una modificación el comité de control de cambios evalúa el impacto
busca alternativas aprueba los cambios ajusta el plan del proyecto notifica el cambio a los
interesados gestiona el proyecto de acuerdo al nuevo plan cada cambio debe estar sujeto a las
normas empresariales de comunicación siempre debe haber una solicitud de cambio impresa o en
archivo electrónico firmado la por el responsable para que el desarrollador realice las
modificaciones correspondientes esta solicitud debe tener fecha de aceptación proyecto al que
pertenece módulo afectado desarrollador responsable descripción del cambio justificación del
cambio prioridad del cambio

Acciones del desarrollador

Una vez que llega la solicitud de cambio debes realizarlo dentro del código del programa se
recomienda avisar sobre el ajuste en los comentarios dentro del código marca el inicio del cambio
poniendo un comentario inicio de cambio fecha de aceptación proyecto al que pertenece módulo
afectado programador responsable al término de toda modificación escribe proyecto al que
pertenece módulo afectado programado responsable fin de cambio de esta manera se lleva
control de las modificaciones al proyecto en términos de software y desarrollo

Métodos de análisis de riesgo

Debes de realizar el análisis de los riesgos que puede sufrir esto permite evaluar las posibilidades y
las consecuencias de cada uno de los cambios exist en 2 métodos para determinar el nivel de
riesgo del sitio web

Método cualitativo: en este la toma de decisiones se basa completamente en tu juicio

experiencial o intuición Generalmente se utiliza cuando el riesgo es bajo y no se justifica un
análisis completo las metodologías cualitativas son brainstorm ing cuestionario o entrevistas
reuniones de grupo juicio de especialistas

Método cuantitativo: permite asignar valores de ocurrencia a los diferentes riesgos identificados
mediante un modelo matemático de riesgos todo método cuantitativo realiza un análisis de
probabilidad

Modelo de riesgos
Con una estructura de cálculos puedes hacer una representación de la realidad en la cual se
detectan variables significativas de riesgos que se miden con base en las variables económicas
para desarrollar este modelo

pasos para desarrollar este modelo matemático:

 Selecciona las funciones de probabilidad

 Identifica las variables económicas
 Selección de funciones de probabilidad

Cada uno de los riesgos que se hayan identificado tienen una función que define la probabilidad de
que ocurra. Existen estas funciones

Triangular se conocen valores máximos y mínimos de la probabilidad por ejemplo esta función
considera la probabilidad de que las ventas bajen uniforme se conoce el valor máximo de la
probabilidad por ejemplo riesgos como la probabilidad de renuncia de profesionales discreta se
conocen diferentes valores posibles de probabilidad por ejemplo el valor de alguna divisa como el
peso frente al dólar estas funciones grafican en el eje x el tiempo de desarrollo del sitio web y en el
eje llegue la probabilidad en porcentaje de que ocurra el riesgo
Software de análisis de riesgos
muchas empresas tienen software de análisis de riesgos muy precisos que se alimentan de la
información que se captura en ellos la consideración de este software debe estar dentro del
presupuesto en caso de requerirse un análisis de riesgos más profundo para que los objetivos del
sitio web no se vean afectados entre más nivel tenga un riesgo más observación y medidas
preventivas deben realizarse

Mantenimiento del sitio web

Una vez hecho el desarrollo del sitio web y entregado a un profesional tendrás que darle
mantenimiento periódico ya sea para corregir errores o agregar nuevas funcionalidades

Objetivos del mantenimiento del sitio web

El mantenimiento está enfocado a asegurar el buen funcionamiento del sitio para ello debes
contemplar

 Corrección de errores que surjan en las versiones de producción

 Incorporación de nuevas funcionalidades con el fin de alargar el ciclo de vida del sitio web
 Eliminación de funciones obsoletas es decir versiones viejas de algunos objetos del sitio
web que sólo ocupan espacio en memoria
 Optimización del sitio usando objetos más eficientes estos deben implementarse en todos
los desarrollos de este

Todo desarrollo front end debe basarse en la adaptabilidad de lo contrario un cambio puede
ocasionarle graves daños

Mantenimiento preventivo de los sitios web

Muchos de los problemas encontrados en un desarrollo no derivan del software en sí sino del
hardware que lo contiene por esta razón y para no agregar problemas al desarrollo no descargue
esto fuerte internet música vídeos o juegos mantén actualizado el antivirus del servidor limpia y
escanea el servidor cada 6 meses en busca de virus no habrás ni descargues archivos adjuntos de
correos cuyo remitente desconozcas verifica que todas tus herramientas de software estén
actualizadas el mantenimiento del sitio web es esencial para asegurar su ciclo de vida además las
correcciones o adaptaciones que realices servirán para preparar nuevas versiones del sitio web

Cronograma de mantenimiento
Para tener mejor control de tus actividades elabora un cronograma este es un plan de las tareas
que vas a realizar durante el proyecto en del cual determinas un tiempo específico para cada
actividad en una hoja de cálculo abre un archivo en blanco escribe en las celdas de manera vertical
los objetivos que quieres conseguir con la estrategia y los pasos o actividades que llevarás a cabo
para conseguirlos hazlo de manera resumida ya que sólo es una guía para ti en las celdas
horizontales escriben los meses con las semanas que los conforman esto indicará los periodos de
tiempo para cada actividad por último darle formato a tu tabla y colorea las celdas de acuerdo a la
duración tentativa que te tomará cada actividad puedes detallar tus actividades tanto como
quieras lo importante es que tengas claro el orden de los procesos de esta manera no olvidarás
nada podrás definir tus prioridades y distribuir tus tiempos al elaborar tu cronograma puedes
ajustarte a los tiempos que decida el cliente corto mediano o largo plazo o ajustarlos a tu criterio
toma en cuenta que si el cliente te solicita un trabajo urgente deberás presupuestar la
contratación de un mayor número de profesionales si es así debes tener entera comunicación con
tu equipo de trabajo para determinar los tiempos de cada profesional y mandar la propuesta del
tiempo que tomará realizar el proyecto es conveniente realizar un presupuesto para diferentes
lapsos de tiempo.

Nivel 4
Lección 1
SEO on-page
el SEO on-page depende de la construcción del sitio web es decir del desarrollador front end

Keywords
Los motores de búsqueda necesitan el desarrollador para encontrar la página más fácilmente por
ello en HTML estén los keywords que son palabras o frases que le facilitan al motor su búsqueda
esto se agregan en el del HTML de la siguiente manera NG escribe meta y agrega el atributo de
neem con el nombre comillas agrega el atributo de Kant junto con las frases o palabras que
quieras como keywords separa cada una de las frases con una coma es importante que los
keywords hagan referencia al tema de tu página y que uses no más de 6 ya que los algoritmos de
búsqueda también penalizan y le restan calificación a tu página si detectan que utilizaste keywords
que no se relacionan directamente con el tema del sitio ten presente que estos deben cambiar
para cada página web que tenga tu sitio esto es porque cada página web debe ofrecer diferente
contenido aunque sea del mismo sitio

Calidad del contenido

El contenido y su profundidad es lo que más evalúan los motores de búsqueda para que este sea
un buen contenido debe cumplir con 3 elementos coherencia el contenido debe cumplir con lo
que promete el sitio si tu página es de ventas tu contenido debe tener productos descripciones de
productos ofertas entre otros emoción el contenido debe producir un sentimiento en los usuarios
y debe estar acorde al contenido de tu página por ejemplo si el contenido trata de películas de
terror el sentimiento que debe producir en el usuario es miedo profundidad tu página debe contar
al menos con etiquetas 3 sino los motores de búsqueda la consideran irrelevante además de estos
elementos tu página debe estar organizada de forma pertinente bajo el triángulo de oro toda la
información relevante o más importante debe estar dentro de ese triángulo por lo que a la hora de
codificar el contenido oriental o de izquierda a derecha y de arriba hacia abajo

Editor de texto especializado

Para facilitar la codificación del sitio deberás utilizar un editor de texto especializado estos editores
de texto se usan por la cantidad de funcionalidades que aportan a la hora de codificar en HTML
CSS y javascript las funcionalidades más importantes son descarga de paquetes o herramientas de
ayuda más de 2 archivos en la misma pantalla eficiente para archivos HTML y CSS es al mismo
tiempo código de colores configurable a las necesidades del desarrollador o atajos para acciones
comunes en la codificación debo gimp del código para detectar errores de todas estas sin duda la
más importante es la capacidad de descargar paquetes que te ayuden a agregarle más
funcionalidades al editor de texto por ejemplo hay paquetes como autocompletado de comandos
este te ayuda a escribir más rápido el código pues sólo tienes que escribir una inicial para que el
sistema te pregunte qué etiqueta usar previsualización de HTML con este puedes ver en tiempo
real lo que estás programando paleta de colores el sistema agrega el color que desees en código
hexadecimal en el archivo HTML highlights se muestra el background del color del código
hexadecimal estos paquetes te ayudarán a tener mejor organizado tu código además de ser más
comprensible para los demás desarrolladores del proyecto para guardar archivos en el editor de
texto procura que todos los archivos del sitio web estén en una sola carpeta abre el editor de texto
B archivo y crea un archivo nuevo ahora guarda el archivo con la extensión HTML en la carpeta del
sitio ponle nombre de esta misma forma puedes generar todas las páginas del sitio además de
crear los archivos de estilo CSS

Uso de frameworks
Existen diversos frameworks o entornos de trabajo que facilitan la codificación por la versatilidad
de sus funcionalidades los frameworks son archivos previamente programados y que ayudan en el
desarrollo del sitio web lo único que tienes que hacer es incluirlos en el archivo HTML y usar sus
funciones y clases los frameworks generalmente incluyen 3 tipos de archivos CSS los estilos
predefinidos que puedes escoger al utilizar el framework fuente de letras archivos de las
diferentes fuentes que puedes usar con el framework javascript funcionalidades o animaciones
que hacen más interactiva la página web y que fueron programadas para facilitar su
implementación en la página con el framework por lo general los frameworks pueden estar
enfocados a la apariencia del sitio web OA sus funcionalidades por esto sólo se pueden encontrar
con archivos javascript o combinados con este y CSS hay 2 maneras muy sencillas de agregar los
frameworks a tu archivo HTML por descarga dirígete a la página oficial del framework y descárgalo
en tu archivo HTML en la etiqueta G escribe el link después escribe el tipo de archivo y su
referencia por último escribe la dirección del archivo por referencia dirígete a la página oficial del
framework y copia el enlace en tu archivo HTML en la etiqueta G escribe el link después escribe el
tipo de archivo y su referencia por último escribe la dirección web que copiaste en la página oficial
sin duda la primera manera es más segura ya que tienes todos los archivos en tu PC o servidor la
segunda es buena también pero en caso de que cierre el servidor que provee la url de los archivos
la página que hayas creado no podrá ser visualizada