Desarrollo de Ejercicios Basado en La Implementación de Programas en Frontend Tarea

TRABAJO DE INVESTIGACIÓN
DISEÑO WEB II
Nombre: Carlos Acosta Santos
TARIJA-BOLIVIA
Desarrollo de ejercicios basado en la
implementación de programas en
FrontendTarea
Cuándo quieres iniciarte en el desarrollo web te enfrentas a una

infinidad de conceptos, definiciones, metodologías, herramientas, y
mucho más. Todo esto puede resultar confuso al principio y es
probable que no sepas por dónde comenzar, por esto voy a recopilar
todo esto, utilizando como guía la imagen de arriba que es
propiedad del blog withinsight1.
¿Qué es Front-end, Back-end y Full-stack?
Los software se dividen en dos grandes áreas, el front-end, que es

lo que ve el usuario al utilizar un sistema, y cómo interactúa con el.
El back-end es el motor de las acciones, la programación, la parte
que accede a los datos y los gestiona.
Un front-end developer sería una desarrollador de interfaces, se

dedica a hacer la parte visual, y que la interacción y usabilidad sea
óptima, también recolecta los datos del usuario y los prepara para
ser manipulados por el back-end. Es actualmente uno de los perfiles
más demandados de la industria y el que detallaremos en este post.
Un back-end developer trastea con los datos del usuario, accede a
servidores, bases de datos, información sensible, y por lo tanto,
debe poder hacerlo de forma segura.
Ambos perfiles van de la mano, siendo igual de importantes,

simbióticos.
Un full-stack developer es aquel que maneja ambos perfiles,

aunque se recomienda especializarse en uno, el perfil full-stack es
algo cada vez más requerido y, como podrás imaginar, requiere
mucho esfuerzo.
1 — Básico
Siguiendo los pasos del front-end, lo primero que deberías conocer
es la tecnología básica que se usa para escribir cualquier web hoy
en día:
 HTML: La estructura del contenido, actualmente en su

versión 5, es la forma de decirle al navegador donde van
los textos, las imágenes, etc.
 CSS: La parte visual. Si HTML era el esqueleto, CSS es

la piel. Es lo que le da forma y estética al documento.
Actualmente en su versión 3 (es importante conocer la
última versión de cada tecnología, pues es donde se
implementan todas las mejoras y cambios).
 Javascript: Es la parte programática, siguiendo con la

analogía del cuerpo humano, JS serian los músculos.
Comenzó como un lenguaje para realizar interacciones
básicas con el navegador, pero ha evolucionado para
convertirse en un lenguaje todoterreno, utilizado para
front-end, back-end, realidad virtual, desarrollo de
aplicaciones multiplataforma, etc. Muy requerido
actualmente. Se encuentra en su versión ES6.
 Web components: es la nueva forma de desarrollar y

está tomando cada vez más fuerza. Se explica mejor con
un ejemplo:
Integrar un mapa de manera tradicional:

Integrar un mapa con web components:
En el web component, todo se reduce a un bloque reutilizable en

diferentes proyectos, creado por el desarrollador. Posee muchas
características más que realmente vale la pena chequear.
2 — Editores de Texto
Los editores de texto plano son la herramienta con la que
escribiremos el código, existen multitud de editores, con diferencias
mínimas, que dependen del gusto del programador. Los más
conocidos son Atom, Sublime text, Brackets o el que yo utilizo: VS
code.
Una vez instalado el editor de texto es prudente ver cuales son las
extensiones más populares para ese editor, éstas facilitarán tu
desarrollo dotando al editor de súper poderes. Existen infinidad de
extensiones.
3 — Frameworks frontend
Un framework es como una caja de herramientas, que busca facilitar
el desarrollo resolviendo muchas cosas sin que nos preocupemos
por ello.
Por ejemplo, al utilizar un framework, definimos un botón con la

clase success y este automáticamente adquiere un color verde, sin
escribir una sola línea de CSS. Aunque no soy muy partidario de
utilizar frameworks de este estilo, es cierto que en buenas manos
pueden ser una herramienta potente.
Algunos de los más conocidos son Bootstrap, Foundation

4 — Diseño responsivo
Este es un método de desarrollo que permite que el contenido se

adapte a cualquier tamaño de pantalla, ya que no todos acceden a
un sitio web desde una pc, sino también desde smartphones,
tablets, smart tvs, y un extenso listado de dispositivos con diferentes
resoluciones, por lo tanto debes tener en cuenta que el contenido se
vea bien en todos ellos.
Aquí no solo se tratan temas estéticos (visibilidad del contenido) sino

también asuntos de usabilidad y eficiencia, por ejemplo, un
smartphone tendrá menos capacidad a la hora de cargar cierto
contenido, por lo tanto hay que utilizar métodos para optimizar la
experiencia del usuario, como la compresión de imágenes.
5 — Plantillas de desarrollo
Cuando llevas un tiempo desarrollando web te das cuenta que
muchos de los elementos como el header, footer, etc. se repiten una
y otra vez. A esta altura te interesará utilizar una herramienta que
genere estos módulos al comienzo de cada proyecto para
automatizar un poco más el trabajo. Algunos ejemplos son Jade/Pug
o Handlebars.
6 — Recarga del navegador automática

A la hora de desarrollar necesitamos ver los cambios generados en
el navegador, existen herramientas como LiveReload que muestran
los cambios en tiempo real cuando se guarda el archivo, sin tener
que refrescar la página.
7 — Preprocesadores CSS
Los preprocesadores nos solucionan muchos problemas a la hora
de escribir CSS, por ejemplo, evitar reescribir una y otra vez la
misma etiqueta section una y otra vez:
A la izquierda el preprocesador Sass y a la derecha CSS clásico.
También podemos crear variables reutilizables, por ejemplo, en vez

de escribir siempre el color en su valor hexadecimal, teniendo que
recordarlo, podemos guardar este valor en una variable tipo $blue).
Se pueden hacer muchas más cosas, como cálculos matemáticos
para fuentes tipográficas responsivas, etc.
Actualmente el preprocesador más utilizado es Sass (66%), seguido

por CSS clásico (13.5%) y Less (13.4%).
8 — Guías de estilo
Las guías de estilo CSS buscan instruirnos en buenas prácticas a la
hora de escribirlo para mantener un archivo más legible, escalable y
óptimo. Existen varías guías de estilo como BEM, Atomic Design,
OOCSS. Más sobre esto aquí:
9 — Controlador de versiones
Ya comenté este tema en un post anterior, un controlador de
versiones nos permite manipular el código de forma segura, tal que,
si rompemos el código en su edición, podemos volver atrás y
recuperar el código anterior, también nos facilita la gestión de código
en equipos distribuidos, la generación de features sin afectar al
proyecto principal, y muchas cosas más, muy dignas de tener en
cuenta. Si quieres saber más aquí tienes mi post anterior:
10 — Manejadores de paquetes
En esta categoría entran herramientas como npm y bower. Lo que
nos permiten es instalar y manipular las librerías que utilicemos en el
proyecto de manera muy sencilla.
11 — Optimización
En los tiempos que corren cada segundo cuenta. De nada sirve
tener una página web atractiva visualmente si luego tarda diez
segundos en cargar el home. Para esto es necesario conocer
herramientas y técnicas de optimización, lo cual le genera una mejor
experiencia al usuario y nos ayuda a posicionar nuestra web en los
buscadores como Google.
Para esto es necesario conocer técnicas y herramientas como

CriticalCSS, etc.
12 — Frameworks Javascript
Javascript ha evolucionado al punto de ser uno de los lenguajes más
versátiles y utilizados en cualquier proyecto. Comenzó como un
lenguaje para interacciones en páginas web y hoy ya se pueden
escribir aplicaciones enteras que funcionan de manera nativa en
cualquier plataforma. Esto es muy potente y han salido frameworks
de todo tipo que nos facilitan el desarrollo en JS.
Tenemos tecnologías como Angular, Vue, React, Ember, Polymer.
13 — Preprocesadores Javascript
Ya vimos en el punto 7 para qué sirven los preprocesadores. En JS
tenemos algunos como Babel. Supongamos que estamos
desarrollando JS en la última versión, actualmente la ES6, y
queremos que nuestro código también funcione en navegadores
antiguos que no soportan esta versión. Entonces Babel traducirá
nuestro código automáticamente para que funcione en cualquier
navegador.
Otros preprocesadores como TypeScript nos permiten desarrollar

código más legible, y otorga propiedades de lenguaje orientado a
objetos.
14 — Automatización de procesos
Las herramientas de automatización de tareas son algo que
recomiendo mucho aprender a utilizar porque nos ahorran un
montón de tiempo, haciendo esas tareas que se repiten
constantemente de manera automática, como por ejemplo la
minificación de código. Aquí tenemos herramientas como Gulp,
Grunt y Broccoli.
15 — Calidad del código

Aquí entran los llamados linters, programas que se encargan de
revisar nuestro código, revisando errores de tipado, sintaxis y
posibles bugs. Nos ayuda a mejorar la calidad de escritura para
facilitar su posterior lectura y comprensión. Uno de los más
utilizados es ESLint.
16 — Build Tools
En caso de desarrollar páginas tipo Single Page Application
trabajamos con pequeños módulos que nos facilitan el
mantenimiento y testeo de nuestro proyecto. La forma de trabajar
con estos módulos es utilizar herramientas como Webpack,
Browserify o RequiereJS las cuales gestionan estos módulos para
que todo funcione de manera correcta.
17 — Testing
Para evitar que el código se rompa al incluir una nueva funcionalidad
o reparar un bug anterior debemos implementar testeos unitarios
(unit test): pruebas unitarias que comprueban que un pequeño
módulo de código (generalmente un método) funciona
correctamente. Para esto podemos utilizar herramientas como
Mocha, Protractor, Karma o Jasmine.
18 — Back-end
Por que todo desarrollador front-end debe conocer un poco de back-
end y viceversa.
Gracias a javascript la línea divisoria entre front-end y back-end se

difumina cada vez más. Antiguamente las comunicaciones cliente-
servidor siempre eran iniciadas por el primero. Hoy en día con
tecnologías como Node.js las comunicaciones se convirtieron en bi-
direccional, generando web apps en tiempo real. Esto funciona, por
ejemplo, en páginas web con ventanas de chat en tiempo real.

Desarrollo de Ejercicios Basado en La Implementación de Programas en Frontend Tarea

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Desarrollo de Ejercicios Basado en La Implementación de Programas en Frontend Tarea

Cargado por

Copyright:

Formatos disponibles

TRABAJO DE INVESTIGACIÓN

Nombre: Carlos Acosta Santos

Cuándo quieres iniciarte en el desarrollo web te enfrentas a una

¿Qué es Front-end, Back-end y Full-stack?

Los software se dividen en dos grandes áreas, el front-end, que es

Un front-end developer sería una desarrollador de interfaces, se

Ambos perfiles van de la mano, siendo igual de importantes,

Un full-stack developer es aquel que maneja ambos perfiles,

 HTML: La estructura del contenido, actualmente en su

 CSS: La parte visual. Si HTML era el esqueleto, CSS es

 Javascript: Es la parte programática, siguiendo con la

 Web components: es la nueva forma de desarrollar y

Integrar un mapa de manera tradicional:

En el web component, todo se reduce a un bloque reutilizable en

Por ejemplo, al utilizar un framework, definimos un botón con la

Algunos de los más conocidos son Bootstrap, Foundation

Este es un método de desarrollo que permite que el contenido se

Aquí no solo se tratan temas estéticos (visibilidad del contenido) sino

6 — Recarga del navegador automática

A la izquierda el preprocesador Sass y a la derecha CSS clásico.

También podemos crear variables reutilizables, por ejemplo, en vez

Actualmente el preprocesador más utilizado es Sass (66%), seguido

Para esto es necesario conocer técnicas y herramientas como

Tenemos tecnologías como Angular, Vue, React, Ember, Polymer.

Otros preprocesadores como TypeScript nos permiten desarrollar

15 — Calidad del código

Gracias a javascript la línea divisoria entre front-end y back-end se

También podría gustarte