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.

BACKEND

Backend es un término que se usa para referirse a un ámbito de la programación de aplicaciones, la parte que se encarga del acceso a los datos y la seguridad de la información. Aunque se usa mucho para referirnos a la programación web que se realiza del lado del servidor, es válido hablar de backend para el desarrollo de todo tipo de aplicaciones.

Dependiendo de la fuente, podemos ver este término escrito como backend, Back end, o Back-end.

Para explicar lo que es backend debemos acudir al término frontend, ya que en la división de tareas es donde ganan su significado ambos términos. Mientras que en frontend nos ocupamos de la capa de presentación, en el backend nos ocupamos del acceso a los datos.

En el desarrollo de aplicaciones modernas generalmente se desea un aislamiento de lo que es el código backend del código frontend, pues facilita el mantenimiento y la escalabilidad de los proyectos. Esta separación de responsabilidades, entre el código backend y el código frontend es la que produce que haya profesionales especializados en una u otra área.

En el mundo del desarrollo web o de aplicaciones para móviles, el backend es el código que se ejecuta del lado del servidor, mediante el que se tiene acceso a bases de datos, sistema de archivos del servidor, y a recursos en general donde debamos garantizar la seguridad de la información

LENGUAJES BACKEND

En el ámbito backend podemos usar lenguajes muy variados, siendo los más populares PHP, Python, NodeJS, Java, C#, Ruby, etc. 

La elección de la tecnología de backend suele ser bastante arbitraria, no existiendo un mejor lenguaje para la realización de todo tipo de tareas. Pueden existir lenguajes más apropiados para determinados proyectos, pero generalmente todos permiten acceder a los mismos recursos, por lo que la elección final depende muchas veces de intereses o experiencia del equipo de desarrollo con una alternativa particular.

FRONTEND

Frontend es un concepto usado para referirnos a la capa de presentación de las aplicaciones, que se encarga de definir cómo se verán las cosas y cómo se responderá a la interacción con el usuario.
El término frontend se puede ver escrito como front-end o front end. 

En español también se suele usar la palabra "frontal" para hacer referencia a la parte de la aplicación que se desarrolla del lado frontend.

Frontend cobra sentido junto con el término backend, y se refieren a la separación de responsabilidades en el código de las aplicaciones. Mientras que el backend se responsabiliza por el acceso a los datos, frontend se dedica a la capa de presentación.

LENGUAJES FRONTEND

Entendemos como lenguajes frontend aquellos con los que se realiza toda la capa de presentación. Dependiendo del foco de ejecución de las aplicaciones se debe usar lenguajes frontend determinados.

Lo más habitual al usar el término frontend es referirse al desarrollo para la web. En este caso, los lenguajes frontend son HTML, CSS y Javascript, que son los lenguajes estándar que entienden los navegadores. HTML se encarga de la definición del contenido, CSS de la presentación (cómo debe verse ese contenido) y Javascript para la parte de la funcionalidad y la interacción.

Dentro de la clasificación de profesionales frontend los encontramos con perfiles de programación y perfiles creativos. Hay profesionales frontend cuyo foco es trabajar con HTML y CSS, que no son lenguajes de programación, mientras que otros están más enfocados en Javascript. Sin embargo, siempre será muy útil contar con un conocimiento más o menos avanzado de estos tres lenguajes.

Fuente: https://escuela.it/materias/frontend

DESARROLLO WEB

Por desarrollo web entendemos todas las disciplinas involucradas en la creación de sitios web, o aplicaciones que se ejecutan en la web y a las que se accede mediante el navegador. 

Aunque desarrollo web puede ser un ámbito muy específico del desarrollo en general, el ecosistema de tecnologías, lenguajes y herramientas disponibles para la creación web es enorme. Para poder clasificar o dividir las áreas del desarrollo web se han acuñado un par de términos:

Front-end: Es el desarrollo web en el ámbito del cliente, es decir, en el navegador web. Las tecnologías y lenguajes principales son HTML, CSS y Javascript.

Back-end: Es el desarrollo web en el ámbito del servidor, donde las tecnologías y lenguajes son directamente relacionadas con el sistema operativo del servidor de la página web. Lenguajes y tecnologías habituales para Back-end son PHP, NodeJS, Python, .NET, e incluye también las bases de datos, como MySQL, PostgreSQL, SQL Server...

Fuente: https://escuela.it/materias/desarrollo-web

Plan de Evaluación 

• Cada Unidad Tiene Una Ponderación de 25 %

• Las Actividades o Evaluaciones se harán por grupo conformado por los grupos de proyecto.

• Sobre cada unidad se hará una investigación documental del Internet, tomando en cuenta que las referencias sea fiables.
• Cada grupo debe crear un BLOG y allí colocar el resultado de la investigación, es decir cada integrante del grupo aportara explicitamente a la investigación y argumentara.
• Cada grupo debe visitar los demás blogs, Revisar su contenido y dar su Opinión (Todos los integrantes del grupo deben cumplir con esta actividad).
• Sobre cada unidad elegir: 2 lenguajes, 2 framework y 2 librerías en excepción de la Unidad I.
• Tomar en cuenta las ventajas y desventajas, tendencia de uso y si usted considera algo mas valido dar su opinión al respecto. 

CONTENIDO

UNIDAD 1: Backend: Definir y Ejemplificar - Frontend: Definir y Ejemplificar.

UNIDAD 2: Tecnología Frontend:    lenguajes,  framework y  librerías.

UNIDAD 3: Tecnología Backend:    lenguajes,  framework y  librerías.