Esta presentación es realizada por Lourdes Villegas.

1. La importancia del
Frontend y Backend al
realizar un proyecto
web

2. Hola!
Mi nombre es Lourdes Villegas
Me desempeño como full stack y gestora de
proyectos en Atom Devs :)
2
/atomdevs
/lourdesvillegas29

3. 1.
Proyectos en los
que participe
Bajo mi gestión se ha desarrollado los siguientes
proyectos:
3

4. 4
Lulipa
Tienda virtual de lencería
fina desarrollado en Yii
Framework desde 0, se
utilizó este frame porque
el proyecto apuntó a tener
un gran cantidad de
visitantes, es robusto y
ligero. Utilizamos culqi
como pasarela de pago
www.lulipa.com

5. Pareja de ases
Blog empresarial desarrollado desde 0 en
Codeigniter, bootstrap, javascript y jquery
5
www.parejadeases.com

6. Gourmetics
Aplicación móvil basado en React Native
desarrollado para Android e IOs
6

7. 2.
¿Cómo funciona
una página web?
7

8. Las computadoras conectadas a la Web se llaman
clientes y servidores.
Un diagrama simplificado de cómo interactúan se
vería así:
8

9. Clientes
son dispositivos de los usuarios conectados a Internet (por
ejemplo, tu ordenador conectado a la red Wi-Fi o el teléfono
conectado a la red de telefonía móvil) y el software que se
encuentra disponible y permite acceder a Internet en dichos
dispositivos (normalmente, un navegador web como Firefox
o Chrome).
Servidores
son computadoras que almacenan páginas web, sitios o
aplicaciones. Cuando un dispositivo cliente quiere acceder a
una página web, una copia de la página web se descarga
desde el servidor en el equipo cliente y se mostrará en el
navegador web del usuario.
9

10. Además...
El cliente y servidor no hacen todo el proceso
también participan los siguientes elementos:
10

11. Tu conexióna Internet: Permite enviar y recibir datos en la Web.
Básicamente es el recorrido entre tu casa y la tienda.
TCP/IP: Protocolo de Control de Transmisión y Protocolo de Internet,
son los protocolos de comunicación que definen cómo deben viajar los
datos a través de la Web. Esto es, los medios de transporte que te
permiten hacer un pedido, ir a la tienda y comprar los productos.
DNS: Los servidores del Sistema de Nombres de Dominio, son como una
libreta de direcciones de sitios web. Cuando escribes una dirección web
en el navegador, el navegador busca los DNS antes de recuperar el sitio
web.
HTTP: El Protocolo de Transferencia de Hipertexto es un protocolo de
aplicación que define un idioma para que los clientes y servidores se
puedan comunicar. Esto es como el idioma que utilizas para ordenar tus
compras.
11

12. Archivos componentes: Un sitio web se compone de muchos archivos
diferentes, que son como las diferentes partes de los productos que
comprarás en la tienda. Estos archivos se dividen en dos tipos
principales:
Archivos de código: los sitios web se construyen principalmente con
HTML, CSS y JavaScript, aunque te encontrarás con otras tecnologías
más adelante.
Recursos: Este es un nombre colectivo para el resto de materiales que
conforman un sitio web, como imágenes, música, video, documentos de
Word, archivos PDF, etc.
12

13. 3.
¿Qué es Front End?
13

14. 14
Son todas aquellas tecnologías que corren del lado del
cliente, es decir, del lado del navegador web, más que
nada en tres “lenguajes”, Html , CSS Y JavaScript.
FrontEnd se encarga de estilizar la página de tal manera
que la página pueda quedar cómoda para la persona que
la ve, debe de conocer técnicas de User Experience para
dar una experiencia de usuario cómoda, así mismo debe
de saber de diseño de Interacción para que sepa colocar
las cosas de tal manera que el usuario las pueda ubicar de
manera rápida y cómoda

15. 4.
Tecnologías que se
usa
15

16. Existen muchas tecnologías
relacionadas a estos tres lenguajes que
se utilizan en el FrontEnd, por ejemplo,
para JavaScript tenemos angular.js y
backbone.js, que son tecnologías
avanzadas que utiliza el frontend, este
se puede apoyar en librerías de
JavaScript como animate.css y JQuery
para poder dar una solución amena y
cómoda, debe de conocer lenguajes de
transferencia de información como XML
y JSON, y Ajax para hacer solicitudes sin
necesidad de refrescar la página, en
pocas palabras, el FrontEnd, es el que se
encargará de dejar bonita la página, en
ver que los datos se muestran de
manera cómoda y flexible para el
usuario, de que la interacción que
realice sea llamativa y en la estética del
sitio.
16

17. 17
Tendencia
s

18. Javascript
Angular.js
No necesita presentación
al ser el framework MVW (
Model View WhatEver) de
Google que se ha
encargado de traer orden a
las aplicaciones JavaScript
y potenciar las
Arquitecturas.
React.js
La librería de Facebook
orientada a la gestión del
UI. Usa los conceptos de
DataFlows y programación
Reactiva para simplificar el
proceso de actualización
de la vista
Moment.js
La librería de Javascript
orientada a la gestión de
fechas , con ella el manejo
de variables temporales se
ha convertido en algo
mucho más sencillo
18

19. 19
jQuery.js
Un clásico, han pasado
muchos años desde que
apareció en el mercado y
se convirtió en el standard
a la hora de manipular el
DOM.
Modernizr.js
Esta librería que se
encarga de validar si
nuestro navegador
soporta características de
HTML 5, permitiendo a los
desarrolladores actuar en
consecuencia.
Video.js
Probablemente el
framework de referencia
para la gestión de Videos a
través de JavaScript.

20. CSS (hojas de estilo en cascada)
Bootstrap
Es quizás el más usado y
más demandado en las
ofertas de empleo para
diseñadores y
maquetadores web.
Foundation
Lleva desde 2011 en la
web, ha ido mejorando y
añadiendo nuevos
elementos versión a
versión. La versión actual,
al igual que Bootstrap, ya
es posible usar Flexbox en
su grid. Es una apuesta
segura
PureCSS
Para los que buscan algo
ligero en peso para que la
web cargue rápido, Pure
CSS es su opción. Es el
framework perfecto para
montar un proyecto
rápido, sin complicaciones
Comprimido ocupa menos
de 4kb, una maravilla.
20

21. 21
Milligram
Flat design y minimalista.
Resuelve los problemas
que más se critica a los
grandes Frameworks, la
posibilidad de cambiar
entre grid de 12 columnas
a 10 columnas, e incluso
combinar ambas.
Materialize
Si tu proyecto se basa en
un estilo muy concreto
como el material design,
entonces deberías usar
este framework, viene con
todo lo necesario para
maquetar tu web o app
usando los estilos
recomendados por Google.
Skeleton
Se ha reinventado y
cambiado parte de su
contenido original. El grid
sigue siendo de 960px,
pero ya ha incorporado
Mobile first y pulido
muchos de sus elementos,
tales como tipografías,
tablas, form

22. 5.
¿Qué es Back End?
22

23. 23
El programador backend es aquel que se encuentra del lado del
servidor, esta persona se encarga de lenguajes como PHP, Python,
.Net, Java, etc, interactua con bases de datos, verificar manejo de
sesiones de usuarios, montar la página en un servidor, para “servir”
todas las vistas que el FrontEnd

24. 24
El programador de Backend normalmente debe de conocer Bases de
datos, Frameworks y Librerías que le permitan desenvolverse mejor,
debe de conocer un poco de seguridad informática, para mantener los
datos cuidados y tratar de protegerse de todo tipo de inyecciones que
se puedan tratar de hacer al servidor, se encarga de crear API’s para
que sus datos puedan consumirse de manera cómoda para el frontend.

25. 25
Tendencia
s

26. es la principal manera de ejecutar JS fuera del navegador. Ha
tenido varias actualizaciones este año, que aumentaron su
rendimiento y ampliaron su soporte. Node cuenta con
frameworks para la creación rápida de APIs, servidores,
aplicaciones de escritorio e incluso bots, y una vasta
comunidad que crea todo tipo de módulos imaginables.
Puedes ver estos frameworks:
Express, Koa, Next, Nodal.
26
Node.js

27. Lenguaje web y cuenta con un gran número de frameworks donde
elegir.
Codeigniter: implementa el proceso de desarrollo llamado Model View
Controller (MVC), que es un estándar de programación de aplicaciones,
utilizado tanto para hacer sitios web como programas tradicionales
Gracias a su excelente documentación y características, Laravel es una
excelente opción.
Yii Framework: un framework orientado a objetos, software libre, de
alto rendimiento, basado en componentes para aplicaciones web. Yii se
pronuncia en español como se escribe y es un acrónimo para "Yes It Is!"
(en español: ¡Sí lo es!)
Zend Framework lanzó la versión 3, que supuso una gran actualización
para este marco orientado a los negocios.
27
PHP

28. Python
28
definitivamente debes echar un vistazo a Django y a Flask.
Django 1.10 se lanzó en agosto introduciendo la búsqueda
por texto completo en Postgres y muchas más características

29. También cuenta con frameworks populares donde elegir. Play y Spark
son dos opciones sólidas, y como bonus, decir que también pueden
utilizarse con Scala.
29
Java

30. Thanks!
Any questions?
You can find me at:
@username
user@mail.me
30