Desarrollador Front End

El desarrollador Front-End es un especialista encargado de diseñar la interfaz de usuario

de los sitios web. Utiliza las tecnologías de la información y comunicación para plasmar el
contenido de manera que los usuarios lo puedan aprovechar al máximo. Puede convertir
cualquier sitio web en un fenómeno mundial.

Introducción
Como desarrollador Front-End deberás crear interfaces gráficas para los sitios web, de
ti depende su éxito pues la cantidad de visitas es proporcional a la facilidad de uso y al
estilo que hayas decidido. En esta capacitación aprenderás a:

 Tomar los requerimientos del cliente para diseñar el sitio web a medida
 Crear mapas de navegación y wireframes que te ayuden a la codificación
 Codificar en HTML para organizar los elementos del sitio web
 Agregar estilo al sitio web con CSS para que sea más llamativo
 Incluir animaciones utilizando Javascript
 Realizar cambios al desarrollo para agregar nuevas funcionalidades
 Dar mantenimiento al sitio web para que funcione por mucho tiempo

Además podrás optimizar el tiempo de desarrollo utilizando herramientas como:

 Framework. Editores de texto especializados

Finalmente serás capaz de evaluar el éxito o fracaso del sitio web al inicio o al final de
su desarrollo para proponer mejoras en todos los elementos que transformen
positivamente, la experiencia del usuario al navegar por el sitio.

Nivel 01
Lección 01
Diseño Web
Crea propuestas utilizando diseño web.

Desde que se creó la primera página web surgió la necesidad de contar con
profesionistas que las diseñen.

Proceso de diseño web

Crear y mantener un sitio web requiere del uso de una variedad de tareas informáticas,
manejo de bases de datos, manejo de servidores, desarrollo front-end, desarrollo back-end
y diseño gráfico.

Para diseñar un sitio web se sigue 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

Su administració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 un navegador web para visualizar el sitio, sin importar
el sistema operativo que utilice, esto hace del diseño web, la alternativo perfecta, en un
inicio para un desarrollo multiplataforma.

Es importante que diferencies 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 un sitio web es más universal y su diseño más complejo.

Desarrollo web
Conoce los diferentes tipos de caminos involucrados en el desarrollo web.

El desarrollo del diseño web es un proceso muy importante, ya que en este, las ideas y
requerimientos toman la forma final que el usuario experimentará en el sitio web. El
desarrollo se divide en dos grandes procesos:

 Desarrollo Front-End. Este 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,
interpreta los requerimientos del cliente a objetivos de desarrollo, acomoda el
contenido previamente definido, agrega imágenes, audio o video, estructura la
información crea menús de navegación, agrega vínculos entre páginas del mismo
sitio, agrega tipografías, agrega paletas de colores, comunica con la capa de
back-end. Todas estas actividades las logra utilizando lenguajes de
programación, como HTML 5, CSS 3, Javascript, estos lenguajes en conjunto
hacen posible la visualización del sitio web e incluso atractivo a los usuarios.
  Desarrollo Back-End. Se implementan las funcionalidades que el cliente tenga en
el sitio web, por ejemplo, si se trata de un sitio de ventas por internet, que el
usuario tenga que registrarse en el sitio poniendo sus datos personales, clasificar
a los usuarios por región aceptar pagos por internet, tener un registro de lo que
ha comprado cada usuario y más. Todas estas funciones se realizan en otros
lenguajes de programación más poderosos, como C#, Java, Python, PHP y Ruby.
Los desarrolladores back-end generan un código que se conecta a una base de
datos, por ejemplo, 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 entrega los resultados en la capa del front-end para que el
usuario la pueda visualizar desde el mismo sitio web.

Los dos tipos de desarrollo, requieren de habilidades diferentes, uno está más orientado
a la lógica de programación y base de datos y el otro está orientado a la visualización y a
interfaces de usuario.

Lección 02
Diseño de la interfaz de usuario
Toma en cuenta las mejores prácticas para el diseño de la 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, esta 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.

Interfaces de usuario. El diseño de la interfaz se ubica en el desarrollo front-end, que

sigue los modelos:

Modelo del diseñador. Este combina las necesidades e ideas del usuario y de las
herramientas de las que dispone el programador, para diseñar la interactividad 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, sigue estos principios:

 Anticipación. Adelantarse a las necesidades de los usuarios, por ejemplo, reduce

clicks 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 rellenados de
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.

Toma 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
Genera una interfaz basada en la experiencia del 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 reciba el sitio, mayor es la probabilidad de que los
usuarios adquieran los productos o servicios que este 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 tres 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 del texto

  El estado de un enlace debe estar anclado al color del mismo
 Deben llevar a 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:

 Text área. 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 la 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 realices cambios en tu sitio, que mejoren la experiencia del
usuario.

Aseguramiento de la usabilidad
Fomenta en todos los proyectos web el 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, 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 exitoso si 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 toma 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 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 02
Lección 01
Proceso de Desarrollo Front-End
Como desarrollador front-end puedes participar en dos vertientes de trabajo
complementarias para crear un sitio web.

Diseño

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 Wireframes. Determina como se mostrará el contenido de cada
página, paleta de colores, animaciones, imágenes entre otros.

En esta etapa apoyarás 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 wireframes de cada
página, tu trabajo se centrará en la codificación del sitio.

Codificación

 Codifica en HTML5 el contenido de cada una de las páginas siguiendo el

wireframe correspondiente.
 Codifica en CSS el estilo de las páginas web, usando tipos 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.
  Aplica técnicas de SEO para que los buscadores web más usados encuentren el
sitio web fácilmente y de esta manera se incrementen las visitas.
 Gestiona cambios de funcionalidades, páginas y contenido.

Terminando estos cinco pasos, el sitio web quedará listo, en cada paso debes pedir la
aprobación del cliente para evitarle trabajar, su retroalimentación es invaluable.

Requerimientos del cliente

Obtiene los objetivos del proyecto basado en los 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, el estado, empresas
u otros.

Independientemente de estos requerimientos, el 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 pueden llevar empresas privadas
 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

Apoya en la creación de 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, esta debe tener una estructura
entendible, menús simples y una navegación eficiente.

Diseño de interfaz

Sigue estos pasos para comenzar con el proceso de arquitectura de información del sitio
web:

1. 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.
2. Jerarquiza el contenido en un esquema global, de tal forma que se ordene el
contenido de mayor a menor relevancia, utilizando el índice previamente creado.
3. 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.
4. 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 tres entregables:

Mapas 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.

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 esquemas 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
navegan en él. Una gran herramienta para el diseño de la interacción es la creación de
modelos con lenguaje visual, estos modelos es llaman partituras de interacción. Cada
partitura funciona teniendo en cuenta 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 02
Lenguaje de la web
Comprende el desarrollo front-end utilizando el 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 (TCP IP), para acceder
a internet los navegadores usan el servicio de World Wide Web (WWW), junto con el
Protocolo de Transferencia de Hipertexto (HTTP).

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, éste responde mandado 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 solo tiene la página web como archivo de hipertexto, 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 que 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.

Para crear un archivo HTML

 Abre un blog de notas en tu computadora y da click en Archivo, da click en Guardar como
y selecciona todos los archivos, en Codificación (Debajo de la ventana) da click en UTF-8,
dando nombre al archivo con extensión punto HTML, guarda el archivo en donde tú desees.

Ya que tienes un archivo HTML en blanco, agrégale información que quieras que
aparezca en el navegador, para ello escribe lo siguiente:

<html>

<head>

<Title>

Prueba

</title>

</head>

<body>

</h1>

Hola mundo

</h1>

</body>

Guarda el archivo, después cierra el archivo y da doble click sobre él, aparecerá una
ventana del navegador que tienes definido por default con la página web que acabas de
crear.

Los archivos HTML tienen tres partes principales que se diferencian con tres etiquetas:

<html> Indica el lenguaje que se va a utilizar en todo el archivo.

<head>…</head> Todo lo que esté entre estas dos etiquetas no se visualizará en la

página web, por lo general contiene configuraciones y archivos que se utilizarán en el
código.

<body>…</body> Todo lo que vaya aquí se mostrará en la página web, aquí va el

contenido. Dentro de <body> se utiliza la mayoría de las etiquetas para acomodar el
contenido, por ejemplo, insertar un párrafo de texto (<P>…</P>), encabezado principal
(<H1>…</H1> va disminuyendo hasta <H6>…</H6>, es una etiqueta que se utiliza para
ingresar títulos, entre menor sea el número, menor será la importancia del título). Es
importante que notes que casi todas las etiquetas de HTML llevan un cierre marcado por
una diagonal como / y este cierre delimita la etiqueta.

HTML es un lenguaje de etiquetas definidas previamente y tienen diferentes funciones

para acomodar el texto en el sitio web.
 Uso de links e imágenes en HTML
Relaciona páginas web mediante el 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, tu 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, solo 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 sintáxis <NombreCarpeta>/<NombreArchivo>. Si el link se encuentra
en una carpeta que está dentro de clasificación y ésta a su vez está en una carpeta principal,
sigue esta sintáxis <NombreCarpeta1>/<NombreCarpeta2>/<NombreArchivo>.

Generación de links en páginas web

Para crear un link en una página web tienes que usar la siguiente etiqueta <a
href=”dirección”> Texto </a>. Dirección es el lugar en el servidor donde se encuentra el
archivo HTML de la otra página web y el Texto es el que va anclado al 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
<NombreCarpeta1>/<NombreCarpeta2>/<NombreArchivo>.

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éneros, para esto sigue esta sintáxis <a href=”../principal.html”>Ver
géneros</a>. Los dos puntos (“..”) escalan en la jerarquía de carpetas por lo que si tu
archivo está muy arriba, puedes hacer uso de ../../../<NombreArchivo>

Insertar imagen en páginas web

El procedimiento es el mismo al de los links lo 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
punto BMP, punto JPG, punto PNG, etc. Prueba los links para comprobar que funcionen y
sean los correctos, da doble click en tú página para que se abra dentro del navegador y de
ahí realiza las pruebas pertinentes.
 Insertar listas y tablas en HTML
Comunica datos ordenados al 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 tres tipos de etiquetas para insertar listas:

Lista ordenada

Lista desordenada

Elemento de lista, este siempre va dentro de la 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:

<body>

<h2> TítuloDelAlbúm </h2>

<P>

<OL>

<LI> Cancion01 </LI>

<LI> Cancion02 </LI>

<LI> Cancion03 </LI>

</OL>

</P>

</body>

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 nombre la tabla
 Se agrega una línea en la tabla
 Se indica el nombre de cada columna de la tabla
 Se agrega cada uno de los datos de la tabla

Las tablas siempre deben estar dentro del Body y no necesariamente en un párrafo, por
ejemplo, para insertar una tabla:

Escribe <table> en el <body>, después escribe <Caption> y nombra la tabla (como

“Datos”), después cierra con </Caption>, agrega una fila con <tr> y después los nombres
de las columnas con <th>Nombre</th>, <th>Apellido</th>, <th>Edad</th> y cuando hayas
terminado cierra la fila con </tr>. Agrega los datos como agregaste los nombres de las
columnas, solo que en vez de utilizar <th> utiliza <td>, <td>Miguel</td>, <td>Mendez</td>,
<td>27</td>, </tr>, cuando hayas terminado de llenar la tabla, cierra la tabla con </table> y
cierra el contenido con </body>.

<body>

<table>

<caption> Datos </caption>

<tr>

<th> Nombre </th>

<th> Apellido </th>

<th> Edad </th>

</tr>

<tr>

<td> Miguel </td>

<td> Mendez </td>

<td> 27 </td>

</tr>

</table>

</body>

Ejecuta el HTML en el navegador para ver los resultados.

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

Estructura en HTML
Conoce la forma de un sitio web manejando la estructura en HTML.

Es importante que comprendas 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
tipos de versiones, y un navegador debe identificar en qué versión de HTML debe trabajar,
la primera etiqueta lo indica, por ejemplo, para trabajar con un archivo de HTML5, la primera
etiqueta debe de decir <!DOCTYPE html>, si no dice la palabra DOCTYPE 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 <META charsat = “UTF-8”>, esto se refiere a la codificación que elegiste al crear el
archivo html, despúes 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. 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 cada una
de ellas, brindarle diferente diseño visual.

<BODY>

<HEADER>… </HEADER>

<NAV>… </NAV>

<ASIDE>… </ASIDE>

<FOOTER>...</FOOTER>

<SECTION>… </SECTION>

</BODY>

Todas estas etiquetas se usan en las páginas web, cada una de estas deben ser
visualizadas como cajas, algunas separadas y otras que contengan otras cajas, por ejemplo
la caja de BODY contiene las cajas de HEADER, FOOTER y SECTION, la de HEADER
contiene otra caja de SECTION, esto se representa en HTML así:

<BODY>

<HEADER>

<SECTION>

</SECTION>

</HEADER>

</BODY>

Una caja no puede contener otra a medias por lo que quedan prohibidas este tipo de
codificaciones.
 Ahora sabes lo básico para codificar HTML y ordenar el contenido de tu página web y
así, empezar a construir el sitio.

Video y audio con HTML

Mejora la interfaz de usuario agregando video y audio con HTML.

En muchas ocasiones, usarás videos para darle más interactividad a la página web.

La etiqueta de video es muy parecida a la de imagen, solo que esta sí tiene etiqueta de
cierre:

Escribe video en body, escribe el ancho del rectángulo que contendrá el video con width,
escribe la altura del rectángulo que contendrá el video con height, después escribe src entre
comillas, agrega la dirección del video, termina la etiqueta con </video>

<BODY>

<VIDEO width=”512” height=”288” src=”direcciónVideo”>

</VIDEO>

</BODY>

Esta etiqueta tiene muchos atributos como:

Controls. Define si el cuadro de video tendrá los botones de Play, Pausa, Volumen, Barra
indicadora, entre otros.

Autoplay. Da inicio al video automáticamente después de cargar la página web.

Poster. Agrega la imagen de tu elección para ponerla cuando el video aún no se

reproduzca.

Width/height. Define los lados de pixeles del rectángulo que contendrá el video.

SRC. Determina la dirección del video.

Loop. Define si el video se reiniciará cuando acabe.

Después de aplicar algunos atributos para mejorar la vista del video, así puede quedar
la etiqueta:

<BODY>

<VIDEO controls autoplay loop

width=”512” height=”288”

src=”direcciónVideo.mp4”>

</VIDEO>
 </BODY>

Es de suma importancia elegir un video con una extensión compatible con el navegador
que deseas usar, ya que no todos soportan cualquier formato, por ejemplo, los formatos
más comunes para HTML, son: MP4, WEBM, OGG. Para evitar problemas de
compatibilidad con cualquier navegador, crea los tres formatos en la carpeta del sitio,
generalmente es una carpeta dedicada a videos.

Abre la etiqueta de video con los atributos que desees, abre la etiqueta source y agrega
un atributo src, escribe type para indicar la extensión, repita la etiqueta source por cada tipo
de formato, cierra la etiqueta de video:

<VIDEO controls autoplay loop

width=”512” height=”288”>

<source src= “movie.mp4”

Type=”video/mp4”>

<source src= “movie.ogg”

Type= “video/ogg”>

<source src= “movie.webm”

Type=”video/webm”>

</VIDEO>

De esta manera el navegador usa el video en el formato que le es compatible, es muy

difícil que un navegador no sea compatible con alguno de estos tres formatos, por lo que el
video siempre se desplegará. Agregar videos en tus páginas web, es una gran idea, ya que
incrementan el número de visitas a la página por lo llamativos que son, todo depende del
sitio web que estás construyendo.

Lección 03
Generar estilo visual al sitio web
Mejora la interfaz de usuario al 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, con este puedes configurar
colores, backgrounds, tipo y tamaño de letra.

La configuración de estilo debe estar en el archivo HTML, dentro de la etiqueta HEAD,

escribe la sintáxis correctamente para agregar estilo a cada etiqueta:

<hmtl>

<head>

<meta charset=”UTF-8”>

<title>Starbuzz Coffee</title>

<style>

Nombreetiqueta {Configuración}

</style>

</head>

Las etiquetas que tengan esta configuración de estilo tendrán un aspecto diferente
cuando las veas en el navegador:

<hmtl>

<head>

<meta charset=”UTF-8”>

<title>Starbuzz Coffee</title>

<style>

Nombreetiqueta1 {Configuración}

Nombreetiqueta2 {Configuración}

</style>

</head>

Por ejemplo, para cambiar los párrafos de una página web, en el HEAD de un archivo
HTML escribe STYLE, después escribe P y abre una llave, escribe BACKGROUND-
COLOR: RED; y cierra la llave, por último cierra la etiqueta con el cierre de STYLE:

hmtl>

<head>

<meta charset=”UTF-8”>

<title>Starbuzz Coffee</title>
 <style>

P{

Background-color: red;

</style>

</head>

Observa en el navegador como se ven los párrafos de la página web. Existen muchas
reglas de estilo que puedes introducir en la parte de configuración para separarlas usa punto
y coma.

En páginas muy complejas la sección STYLE, podrá ser muy extensa haciendo muy
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, que es referenciado en el HTML.

Para crear un archivo CSS, sigue estos pasos:

 Abre un bloc de notas y escribe todas las reglas de estilo que necesites
 Guarda el bloc de notas con extensión punto CSS
 Guarda el archivo en la misma carpeta que el archivo HTML
 Escribe la sintáxis en el HEAD en el HTML, para diferenciar el archivo CSS

De esta manera se separan los dos archivos, y el desarrollador simplifica la

programación al no tener muchos códigos en un solo archivo HTML.

Siempre debes estar en comunicación con el equipo gráfico y atento a los wireframes,
para que cada página del sitio web tenga el estilo deseado.

Generar clases en CSS

Aumenta la flexibilidad de estilos al generar clases en CSS.

Para agregar diferentes estilos en una sola etiqueta de tu archivo HTML, debes aprender
a clasificarlas. En HTML existen dos tipos de clasificadores y son:

CLASS. Se refiere a clases

ID. Identificadores

La diferencia entre estos es que una clase puede ser referenciada por muchas etiquetas
y un ID solo por una etiqueta por página web, para que el archivo CSS entienda a qué debe
de darle estilo, pon selectores como punto (.) selector de clase, gato (#) selector de
identificador. El archivo CSS quedaría “.Música”, reglas de estilo, “#Clásico”, reglas de
estilo. De esta manera se pueden agregar diferentes estilos en diferentes etiquetas.
 Después de clasificar se puede especificar a qué contenido o etiqueta se debe aplicar el
estilo. Las siguientes formas de referencia a selectores, se utilizan para dar estilo a las
etiquetas que tengan la clase ROCK, las etiquetas P con la clase ROCK, la etiqueta que
tenga el ID ROCK, la etiqueta P que tiene el ID ROCK.

Los clasificadores ID se utilizan en etiquetas únicas como HEADER y FOOTER, al

contrario de los clasificadores de clase, que son comúnmente utilizados para etiquetas
como P, H1. H2 y ARTICLE.

Ahora cada etiqueta aunque se repita en un HTML, puede tener un estilo propio, de esta
manera se tiene la versatilidad de configuración para crear un sitio web.

Contornos bordes y márgenes

Realiza un acomodo de la información con el uso de contornos, 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 pixeles, la pantalla dependiendo

de su resolución, está dividida en pixeles, estos generan un color característico en RGB,
por lo que cada pixel, es capaz de entregar 16, 581, 375 colores si tu pantalla es FullHD,
tiene una resolución de 1920 por 1080 pixeles lo que significa que tiene 2, 073, 600 pixeles.

Por ejemplo, crea una clase con un borde de color negro y con un ancho de 1 pixel,
agrega un contorno de 25 pixeles con un margen de 30 pixeles, junto con un background
de color rojo. Si esta clase se la referencias a cualquier etiqueta, podrás ver los cambios al
contenido en el navegador, ten presente que el background es todo lo que contiene el
border, si debes poner una imagen en el background, escribe correctamente la sintaxis, en
caso de que el contenido deba estar en los extremos, existe la etiqueta ASIDE, que coloca
todo lo que se encuentre dentro de ella a la derecha de la pantalla, por ejemplo una lista. E
un archivo HTML en BODY, escribe una lista de objetos que estén relacionados al tema de
tu página, por último cierra la etiqueta con el cierre de ASIDE. Todo el contenido se
desplegará al costado y podrás darle formato en el archivo CSS, agregándole una clase o
un identificador a la etiqueta ASIDE. Es importante que si notas que un elemento no está
junto a otro elemento, el margin siempre se referenciará a los límites de la ventana del
navegador. Para darle formato al HTML por medio del CSS, debes considerar que se tratan
de etiquetas que contienen otras etiquetas y que pueden tener diferentes configuraciones,
según las necesidades de cada página del sitio web.
 Uso de pseudo-clases
Genera efectos básicos con el uso de pseudo-clases.

Para la interactividad del sitio web, debes desarrollar pseudo-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
pseudo-clase a la que está anclada a la etiqueta, hazlo de la siguiente manera:

Escribe el identificador de la clase, después pon dos puntos y el nombre de la acción,

abre corchetes y 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 pseudo-clases por ejemplo, seleccionar los elementos

por los que pasa el puntero, el elemento de entrada al que le has dado click con el mouse,
un link previamente visitado, los links que no han sido visitados, un link activo.

Las pseudo-clases se anclan a clases o a etiquetas pero si no existe etiqueta en la

sección a la que quieras anclar la pseudo-clase, tienes que crearla con DIV, para ello haz
lo siguiente:

Escribe DIV en el BODY, escribe la clase a la que anclarás a esta etiqueta con CLASS
nombreclase, agrega los elementos a los que les quieras anclar la clase y la pseudo-clase,
cierra la etiqueta con un cierre de DIV, el CSS crea la pseudo-clase.

Ahora ya puedes agregar secciones y crear el estilo de cada una de ellas.

Lección 04
¿Cómo incorporar JavaScript al sitio web?
Conoce como 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: <script type=”text/javascript”
src=”./js/principal.js”></script>, 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 frameworks 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, esto te permitirá 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,
por ser uno de los primeros en desarrollarse.

Manejador de eventos

Crea nuevos efectos utilizando el 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 que 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: click, doble click, 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 una 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, usa estos 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 llamarlas con los atributos. Observa el
ejemplo mejorado de los atributos ONLOAD y ONUNLOAD.

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

Genera nuevas funcionalidades con el uso de API.

Un API es una interface de programación de una aplicación y esta facilita la creación de

funcionalidades más complejas a partir de otras ya existentes, sin la necesidad de
comenzar de cero.

Las API’s 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 realiza lo siguiente:

Crea un archivo JS para realizar tus propias funciones usando la API

Integra a tu archivo HTML, la línea que importa las librerías JS para el uso de la API, en
esta línea deberás asegurarte de que incluyas la Key o Token que necesitas para acceder
remotamente a la API.

Identifica la estructura básica o constructor del llamado de las funciones de la API, por
lo regular esta se compone de una función y de un objeto, que debes configurar con
atributos que dependen de tus necesidades, por ejemplo, el objeto es un mapa y los
atributos las coordenadas, a este objeto se asocia además el elemento HTML que
contendrá el mapa, el DIV con ID “map”, utiliza un objeto de tipo INFOWINDOWS, para
cargar la información que se desplegará en el mapa de las coordenadas de tu computadora,
a partir de su dirección IP.

Analiza mediante una condición, si el objeto NAVIGATOR funciona con tu explorador de

internet, si no es así, mandará un mensaje de error, en la sección ELSE.
 Usa el método GETCURRENTPOSITION, de la sección GEOLOCATION del objeto
NAVIGATOR, para obtener las coordenadas de tu pc, y usa otra función para mandar un
mensaje en caso de error cuando no las encuentre, en este caso como son funciones de
Javascript, no es necesario escribir un ELSE, sino una coma que relacionará las funciones
complementarias.

Guarda las coordenadas en una variable JSON, después crea un objeto MARKER para
dibujar tu posición en el mapa con un marcador, escribe el nombre de las variables que
almacenan tus datos, dentro de las funciones de colocación sobre el mapa.

Visualiza tu geolocalización en el navegador, no olvides aceptar la solicitud de compartir

posición.

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 y mejorar la
experiencia del usuario.

Creación de formularios
Obtiene información de los usuarios a través de la 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 HTML5.

Tipos de campos de formulario

HTML tiene etiquetas 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 signo igual
del atributo TYPE, observa los tipos de información que se pueden desplegar: textos,
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ñádelas 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:

Defina una variable que guardará el arreglo.

Asigna a la variable, el resultado de la siguiente función

El primero 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:

Identifica el elemento de mayor jerarquía FORM

Coloca un punto para escribir el nombre del elemento que deseas acceder a sus
atributos, ejemplo1.

Coloca otro punto y escribe el nombre del atributo que deseas obtener VALUE, para
obtener el valor de los datos que se han ingresado.

Imprímelos con la instrucción CONSOLE.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 HTML5 te ayudan a identificar cada elemento del formulario para
capturar la información que ingrese el usuario, para validarla:

Elige el tipo de etiquetas según la información que se ingrese.

Usa el manejador de eventos ONSUBMIT para llamar 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.

Procesa los datos del formulario guardándolos en una variable de arreglo, para eso usa
la correspondiente, define la estructura de la función de verificar como una sucesión de
condiciones en las que verificarás los datos ingresados por cada campo del formulario.

Finaliza la función de una variable de retorno TRUE o verdadero, para indicar que todos
los campos están correctos.

Usa la variable de retorno RETURN, como indicador para la función que subirá 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, asegurando la verificación de los datos y por consiguiente
en su almacenamiento de la base de datos.

Nivel 03
Lección 01
Cambios al desarrollo front-end
Mejora el sitio web al hacer cambios al desarrollo front-end.
 Al implementar el desarrollo del sitio web, este puede tener algunos cambios, por lo que
tendrás que documentarlos y aprobarlos o desaprobarlos cuando estos impacten el
desarrollo de forma significativa.

Gestión de cambios

Las modificaciones que sufra el sitio web debes identificarlas, 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 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, firmada 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 en comentario:
  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
 Programador responsable
 Fin de cambio

De esta manera se lleva control de las modificaciones al proyecto en términos de

software y desarrollo.

Análisis de impacto
Evalúa los riesgos utilizando un análisis de impacto.

Después de identificar y clasificar los cambios en el sitio web, debes realizar el análisis
de los riesgos que puede sufrir, esto permite evaluar las posibilidades y las consecuencias
de cada uno de los cambios.

Métodos de análisis de riesgos

Existen dos 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,

experiencia e intuición, generalmente se utiliza cuando el riesgo es bajo y no se justifica un
análisis completo, las metodologías cualitativas son: brainstorming, 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 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
del desarrollo del sitio web y en el eje Y la probabilidad de porcentaje de que ocurra el
riesgo.

Software de análisis de riesgos

Muchas empresas tienen softwares 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
profundos, 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 al sitio web

Utiliza las mejores prácticas dando mantenimiento al sitio web.

Una vez hecho el desarrollo del sitio web, y entregado un producto final, tendrás que
darle un 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 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 solo ocupan espacio en memoria.
 Optimización del sitio usando objetos más eficientes, estos deben implementarse
en todos los desarrollos del mismo.

Todo desarrollo front-end debe basarse en la adaptabilidad, de lo contrario un cambio

puede ocasionarle graves daños.

Mantenimiento preventivo de 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 descargues software de internet, música, videos o juegos.

 Mantén actualizado el antivirus del servidor.
 Limpia y escanea el servidor cada seis meses en busca de virus.
 No abras o 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
Elabora un control de las tareas creando un cronograma de actividades.

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 el cual determinas un tiempo específico
para cada actividad. En una hoja de cálculo:

 Abre un archivo en blanco, escribe en la celda 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 solo es una guía para
ti. En las celdas horizontales escribe los meses con las semanas que los
conforman, esto indicará los periodos de tiempo para cada actividad, por último
dale 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 actividades 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, por ejemplo 1

año, 2 años o 6 meses. Si tu cliente te da una fecha límite el cronograma debe ajustarse a
ella, y por lo tanto también el presupuesto.

Nivel 04
 Lección 01
SEO on-page
Mejora el posicionamiento del sitio web utilizando técnicas de 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 del desarrollador para encontrar la página más
fácilmente, por ello, en HTML existen los keywords que son palabras o frases que le facilitan
al motor su búsqueda. Estas se agregan en el HEAD del HTML de la siguiente manera:

En el HEAD escribe META y agrega el atributo de NAME con el nombre de KEYWORD

entre comillas, agrega el atributo de CONTENT 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 a tu página y que uses no más de seis
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 tres 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 H3, sino los motores
de búsqueda la considerarán 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, oriéntalo de izquierda a derecha
y de arriba hacia abajo.

Editor de texto especializado (El video no carga)

Mejora su tiempo de codificación con el uso de un editor de texto especializado.
 Uso de frameworks
Mejora el estilo visual del sitio web con el 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 tres tipos de archivos:

 CSS. Los estilos predefinidos que puedes escoger al utilizar el framework.

 TFF. Fuente de letras, archivos de las diferentes fuentes que puedes usar con el
framework.
 JS. 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 o a
sus funcionalidades, por esto, solo se pueden encontrar con archivos JS o combinados con
este y CSS. Hay dos 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 HEAD, escribe 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 HEAD escribe 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.