(HTML5, CSS3, JS, BOOSTRAP)

1
 FRONT END

¿ Qué es un Front End ?

“Es la parte de un sitio web que interactúa con los usuarios, por eso
decimos que está del lado del cliente. “

“Es la parte de un programa o dispositivo a la que un usuario puede

acceder directamente. Son todas las tecnologías de diseño y
desarrollo web que corren en el navegador y que se encargan de la
interactividad con los usuarios.”

“HTML, CSS y JavaScript son los lenguajes principales del Frontend,

de los que se desprenden una cantidad de frameworks y librerías
que expanden sus capacidades para crear cualquier tipo de
interfaces de usuarios. React, Redux, Angular, Bootstrap,
Foundation, LESS, Sass, Stylus y PostCSS son algunos de ellos”
2
 FRONT END

¿ Qué es un Back End ?

Es la capa de acceso a datos de un software o cualquier dispositivo,

que no es directamente accesible por los usuarios, además contiene
la lógica de la aplicación que maneja dichos datos. El Backend
también accede al servidor, que es una aplicación especializada que
entiende la forma como el navegador solicita cosas.

Algunos de los lenguajes de programación de Backend son Python,

PHP, Ruby, C# y Java, y así como en Frontend, cada uno de los
anteriores tiene diferentes frameworks que te permiten trabajar
mejor según el proyecto que estás desarrollando.

3
 FRONT END

Diferencias entre Front End y Back End

Front end :

 Se enfoca en el usuario, en todo con lo que podemos interactuar

y lo que vemos mientras navegamos
 busca causar una buena impresión y agradar al usuario
 Buena experiencia de usuario, inmersión y usabilidad
 La creatividad es el recurso más valioso, ya que tendrá que tomar
fuentes, colores, imágenes y todos lo recursos de los cuales
disponga para crear sitios agradables que se vean bien en todos
los dispositivos y resoluciones.

4
 FRONT END

Diferencias entre Front End y Back End

Back end :

 Enfocado en hacer que todo lo que está detrás de un sitio web

funcione correctamente
 Toma los datos, los procesa y los envía al usuario
 Además de encargarse de las consultas o peticiones a la Base de
Datos, la conexión con el servidor, entre otras tareas que debe
realizar en su día a día.
 Como la información se encuentra en constante cambio o
actualización, una buena capacidad de respuesta y una velocidad
óptima del sitio son responsabilidades que un backend debe de
afrontar.

5
 FRONT END

FTP
Es un protocolo de transferencia de archivos entre un ordenador
que actúa como servidor y otro que actúa como cliente.

Ejemplo, el servidor es el asignado por la empresa de hosting que es

contratada, y el cliente es el ordenador que se usa para conectarte a
ese servidor.

Las siglas FTP vienen de File Transfer Protocol, que si se traduce al

español quiere decir Protocolo de Transferencia de Ficheros.

FTP permite transferir fácilmente todo tipo de archivos al hosting

que se contrate para alojar tu sitio web.

6
 FRONT END

Web Hosting

Es el servicio que provee a los usuarios de Internet un sistema para

poder almacenar información, imágenes, vídeo, o cualquier
contenido accesible vía web
7
 FRONT END

Dominio Web
Es una dirección o nombre
alfanumérico único que se
caracteriza por ser fácil de
recordar, utilizado para identificar
un sitio en internet, ya sea
servidor de correo electrónico o
un servidor web

Ejemplo: Facebook.com

Nombre del sitio: Facebook

Extensión del dominio: .com
8
 FRONT END

Servidor Web
Es un programa que utiliza el
protocolo de transferencia de
hiper texto, HTTP (Hypertext
Transfer Protocol), para servir los
archivos que forman páginas
Web a los usuarios, en respuesta a
sus solicitudes, que son
reenviados por los clientes HTTP
de sus computadoras.

Ejemplo: Apache, IIS, NGINX,

GWS, NetWare
9
 FRONT END

¿Que son mapas de navegación, como

se crean y como se usan?
Son una representación esquemática de la estructura del
hipertexto, indicando los principales conceptos incluidos en el
espacio de la información y las interrelaciones que existen entre
ellos.
Por ejemplo, una representación completa (o resumida) del sitio
web para orientar al lector/usuario durante el recorrido o para
facilitarle un acceso directo al lugar que le interese.

Reflejará la estructura del web por medio de enlaces a los nodos

principales, y éstos también pueden desarrollarse para mostrar los
subnodos.

El mapa de navegación puede representarse bien en forma textual,

bien en forma gráfica, o una combinación de ambas 10
 FRONT END

¿Qué son mapas de navegación, como

se crean y como se usan?

11
 FRONT END

¿Qué es un Prototipo Web?

Es un boceto, navegable o no, que permiten crear una referencia
visual de la estructura de una página web, definiendo al detalle el
contenido y su distribución visual, organizando así la información a
nivel de página.
Comienza con la definición de los objetivos que se quieren conseguir
en la web, y con ellos crear una nueva estructura web, en forma de
árbol, en la que se dará nombre a todas las categorías del menú de
navegación
Luego se realiza el diseño de bocetos, para determinar el lugar
donde situar los elementos principales de la web.
Finalmente, se realizará el prototipo navegable de toda la web,
donde se verá toda la estructura de navegación, así como el diseño
completo

12
 FRONT END

¿Qué es un Prototipo Web?

13
 FRONT END

¿Qué es Diseño Web?

Es una de las disciplinas del diseño, entre las que se encuentra
también el diseño gráfico, que constituye una de las funciones
creativas más elementales del marketing por Internet y que tiene
por objetivo la producción de sitios web.

El propósito del diseño web no sólo es lograr un efecto visual

agradable y armonía entre los distintos elementos que integran un
sitio web, sino también alcanzar un óptimo desempeño en su
operación y el máximo nivel de exposición posible para cumplir
satisfactoriamente con la función de promoción para la que son
creados los sitios.

Las página web se han convertido sin duda en una potente arma de
comunicación y en un canal de ventas indispensable para toda
empresa. 14
 FRONT END

¿Qué es Diseño gráfico?

El diseño gráfico es un tipo de comunicación visual que se basa en el
uso una combinación de imágenes y de texto para llega a una
audiencia. En otras palabras, el diseño gráfico se comunica
mediante una descripción visual, utilizando imágenes,
informaciones o textos que distinguen a una marca de sus
competidores.

Hoy en día, el diseño gráfico utiliza herramientas de software de

diseño gráfico. Algunos ejemplos incluyen Photoshop, Adobe
Creative Cloud, y Serif. Hay ejemplos de diseño gráfico por todas
partes: logotipos, sitios web, carteles, revistas y periódicos.

15
 FRONT END

¿Qué es Desarrollo Web?

Es la programación de servicios de fondo y no el rostro de un sitio
web. Funciones previstas en el desarrollo web incluyen el registro,
los sistemas de gestión de contenidos, comercio electrónico y las
aplicaciones de base de datos, además de permitir a los visitantes
interactuar en un sitio web.

Es un término que define la creación de sitios web para Internet o

una intranet. Para conseguirlo se hace uso de tecnologías de
software del lado del servidor y del cliente que involucran una
combinación de procesos de base de datos con el uso de un
navegador web a fin de realizar determinadas tareas o mostrar
información.

16
 FRONT END

Elementos componen una página web

17