TECNOLOGÍA FRONTEND

Son aquellas que se utilizan en el lado Cliente, las que se utilizan en los diferentes dispositivos que utilizamos para conectarnos con el servidor a través de internet. Normalmente estas tecnologías y lenguajes vienen implementados en los diferentes Navegadores que existen, aunque no todos las implementan al 100%. Las tecnologías más utilizadas en el FrontEnd son HTML, CSS, JavaScript, jQuery, Ajax, BootStrap, Angular, etc

LENGUAJES 

JavaScript

javaScript es el lenguaje de programación que debes usar para añadir características interactivas a tu Sitio Web, (por ejemplo, juegos, eventos que ocurren cuando los botones son presionados o los datos son introducidos en los formularios, efectos de estilo dinámicos, animación, y mucho más). Este artículo te ayudará a comenzar con este lenguaje extraordinario y te dará una idea de qué es posible hacer con el.

JavaScript es un robusto lenguaje de programación que puede ser aplicado a un documento HTML y usado para crear interactividad dinámica en los sitios web. Fue inventado por Brendan Eich, co-fundador del proyecto Mozilla, Mozilla Foundation y la Corporación Mozilla .

Puedes hacer casi cualquier cosa con JavaScript. Puedes empezar con pequeñas cosas como carruseles, galerías de imágenes, diseños fluctuantes, y respuestas a las pulsaciones de botones. Con más experiencia, serás capaz de crear juegos, animaciones 2D y gráficos 3D, aplicaciones integradas basadas en bases de datos, ¡y mucho más!.

JavaScript por si solo es bastante compacto aunque muy flexible, y los desarrolladores han escrito gran cantidad de herramientas encima del núcleo del lenguaje JavaScript, desbloqueando una gran cantidad de funcionalidad adicional con un mínimo esfuerzo. Esto incluye:

• Interfaces de Programación de Aplicaciones del Navegador (APIs) — APIs construidas dentro de los  navegadores que ofrecen funcionalidades como crear dinámicamente contenido HTML y establecer estilos CSS, hasta capturar y manipular un vídeo desde la cámara web del usuario, o generar gráficos 3D y muestras de sonido.
• APIs de Terceros, que permiten a los desarrolladores incorporar funcionalidades en sus sitios de otros proveedores de contenidos como Twitter o Facebook.
• Marcos de trabajo y librerías de terceros que puedes aplicar a tu HTML para que puedas construir y publicar rápidamente sitios y aplicaciones.

Ya que se supone que este artículo es sólo una introducción ligera a JavaScript, no vamos a confundirte en esta etapa hablando en detalle sobre cuál es la diferencia entre el núcleo del lenguaje JavaScript y las diferentes herramientas listadas arriba. Puedes aprender todo eso en detalle más tarde, en nuestra Área de Aprendizaje en MDN, y en el resto del MDN.

Debajo te presentaremos algunos aspectos del núcleo del lenguaje, y también jugarás con unas pocas características del API del navegador.

HTML

Todos nosotros a lo largo de nuestra vida hemos interactuado con diferentes sitios o aplicaciones web, ya sea para buscar información, para conversar con nuestros amigos, entre muchas otras cosas más. Incluso, ahora mismo lo estás haciendo mientras lees este artículo. Si has llegado hasta aquí, es porque te interesa saber la definición de HTML y para ello será necesario comprender cómo está relacionado el término HTML con lo que ves en tu navegador web (Ej. Google Chrome, Mozilla Firefox, Safari, etc).

HTML no es un lenguaje de programación, esto debes tenerlo muy en claro desde el principio, HTML es un lenguaje de marcado de hipertexto o “HyperText Markup Language” por el desarrollo de sus iniciales en inglés, básicamente este lenguaje se escribe en su totalidad con elementos, estos elementos están constituidos por etiquetas, contenido y atributos, que explicaremos de una manera más detallada en algunas líneas más abajo.

HTML es un lenguaje que interpreta el navegador web para mostrar los sitios o aplicaciones web tal y como estamos acostumbrados. En la Imagen 1 verás cómo el navegador nos muestra un sitio web y en la Imagen 2 verás cómo se ve en lenguaje HTML.

FRAMEWORK

Es una estructura conceptual y tecnológica de soporte definido, normalmente con artefactos o módulos de software concretos, que puede servir de base para la organización y desarrollo de software. Vamos, una manera de hacernos más fácil la programación.

ANGULAR 

Angular es un framework para la creación de páginas web SPA mantenido por Google. SPA es el acrónimo de ‘Single Page Application’ o lo que es lo mismo, cuando un usuario entra en una web SPA, se carga todo a la vez en una misma página y Angular lo que hace pòr debajo es cambiar la vista al navegar por la página para que de la apariencia de una web normal. ¿Qué ventajas tiene?

• Velocidad de carga lenta la primera vez que se abre la web, pero luego navegar por la web es instantáneo debido a que se carga toda la web de golpe.
• Cómo SPA es una página solo hay una ruta que tiene que enviar el servidor.
• Aplicaciones modulares y escalares.

Ventajas de Angular

• Lenguaje Typescript, tiene una sintaxis muy parecida a Java, con tipado estático.
• Sigue el patrón MVC, con la vista separada de los controladores.
• Basado en componentes, es decir, podemos escribir componentes web con vista y lógica para después reutilizarlos en otras páginas.
• Comunidad muy grande con multitud de tutoriales y librerías.
• Inyección de dependencias, un patrón de diseño que se basa en pasar las dependencias directamente a los objetos en lugar de crearlas localmente.
• Programación reactiva, la vista se actualiza automáticamente a los cambios.
• Dispone de asistente por línea de comandos para crear proyectos base (Angular cli).
• Se integra bien con herramientas de testing.
• Se integra bien con Ionic, para adaptar aplicaciones web a dispositivos móviles.

-

BOOTSTRAP

Bootstrap es un framework popular gratuito de HTML, CSS y JavaScript que se usa para desarrollar sitios web interactivos principalmente para dispositivos móviles. El framework incluye plantillas interactivas para CSS y HTML de botones, tablas, navegación, carruseles de imágenes (carousel) y otros elementos que puede usar en su página web. Además, incorpora varios plug-in de JavaScript que facilitan el desarrollo de sitios web interactivos increíbles incluso a los desarrolladores con conocimientos básicos de programación.

Dreamweaver permite crear documentos de Bootstrap, así como modificar páginas web ya existentes que se crearon con Bootstrap. 

Tanto si se trata de archivos diseñados completamente en Bootstrap como de trabajos en curso, podrá modificarlos en Dreamweaver; no solo para editar el código, sino también para realizar cambios de diseño con las inmejorables funciones de edición visual como, por ejemplo, la Vista en vivo, el Diseñador de CSS, las consultas de medios visuales y Extract.

LIBRERIAS

Drift

Drift es una librería Javascript open source para añadir un hover de zoom y dotar de un aspecto más cool a las imágenes de tu web. Es soportado por múltiples navegadores, no depende de proyectos de terceros y es, relativamente, fácil de implementar.

Progress.js

Con esta librería puedes añadir barras de progreso a cualquier elemento HTML que quieras, incluyendo algunos tan difíciles como los campos inputs, las imágenes o los vídeos. Puedes modificar cualquier aspecto de las barras mediante las opciones que te otorga la librería, o bien a través de los estilos de CSS.