Frontend & Backend

  Frontend Frameworks •    Christensson, P. (2014, August 8). JavaScript Definition. Retrieved 2019, Apr 28, from https://techterms.com •    Christensson, P. (2013, March 7). Framework Definition. Retrieved 2019, Apr 28, from https://techterms.com •    (2019, March 11). AngularJS Definition. Retrieved 2019, Apr 28, from https://angularjs.org •    (2019, March 5). React Definition. Retrieved 2019, Apr 28, from https://reactjs.org •    Christensson, P. (2013, March 1). jQuery Definition. Retrieved 2019, Apr 28, from https://techterms.com •    (2019, March 11). Angular Definition. Retrieved 2019, Apr 28, from https://angular.io/docs •    Ing. Condor Tinoco Enrique E., Ing. Soria Solís Iván, (2014) Programación Web con CSS, JavaScript, PHP y AJAX. •    Durango Alicia, (2015) Diseño Web con CSS: 2ª Edición. •    Goodman Danny, (2002) HTML dinámico: la referencia definitiva.   HTML, (2017) Platzi obtenido de: https://platzi.com/clases/1050-programacion-basica/5104-que-es-htmlcssjs/

  Las etiquetas o tags, son el concepto con el que está basado todo HTML y que me ayudan a comunicarme con el navegador, que será el que el interpretará el documento. Las etiquetas son los comandos con los que estructuro mi información, fragmentos de texto con unas funciones específicas, como título, subtítulo y párrafos. No solo me sirven para organizar la información, también son la forma en la que los navegadores encuentran la misma. La característica principal de las etiquetas es que van dentro de los caracteres menor que, y mayor que (<>), para las etiquetas de cierre, solo debe agregarse una barra inclinada y después la información de la misma (</>). Es importante saber que toda etiqueta que se abre también deber ser cerrada. tomada de:  https://fernandoarciniega.com/tipos-de-capas-de-html-5/ Las etiquetas también tienen atributos que se usan para definir el color de algún texto o fondo, la forma, la ubicación de una imagen, entre otras. Las etiquetas son

Las tablas, son la forma en la que organizamos una información por celdas y columnas. HTML también tiene la opción de crear tablas y son de los elementos más potentes que tiene. Las tablas en HTML son un grupo de filas donde cada una contiene un grupo de celdas, esto implica que haya una diferencia en su comportamiento y composición. Durante un largo tiempo las tablas se han usado para maquetar las paginas web. Las tablas en HTML ofrecen una serie de atributos con los que se puede modificar la tabla como, agregarle color, poner visible o invisible las líneas, entre otras. Las tablas también requieren de unas características principales, que son, (<TABLE>, </TABLE>) la cual representa el contenedor principal. (<TR>, </TR>) Con estas represento las filas que contendrán las celdas. (<TD>, </TD>) y estas etiquetas representan las celdas. Cada una de las anteriores etiquetas, son las piezas principales para hacer una tabla en HTML. tomada de: 

DIV o divisiones es una etiqueta especial de HTML que sirve para agrupar contenidos o crear secciones. Se usan como (<div>) para cuando se abre, y (</div>) para cuando se cierra, ambas son necesarias. Sirve para crear una caja en bloque que puede contener texto en línea o en bloque. Unos de sus atributos son (id) y (class) mecanismos para añadirle estructura al documento y que me identifica si va en línea o en bloque. DIV puede usarse con hojas de estilo para adaptar HTML al gusto y necesidad de cada persona. El DIV se maneje como contenedor genérico, lo que significa que no tiene mayor significado. tomada de: https://disenowebakus.net/html-preparado-para-javascript.php

¿Qué es Frontend? Es la sección de desarrollo que se encarga del diseño visual de la página de cara al usuario, su objetivo es entregar una buena experiencia. Usan varios lenguajes con el fin de que la pagina sea dinámica y agradable gráficamente. Esta imagen se recupero de: https://ibermega.com/wp-content/uploads/2017/08/frontend-en-el-dise%C3%B1o-web.jpg ¿Qué es Backend? Backend es la sección en programación que se encarga de los procesos lógicos estructurados y acceso a datos; es la capa con la lógica de negocio de una aplicación. Esta sección es trasparente para el usuario y su funcionamiento será inherente siempre y cuando cumpla con las funcionalidades exigidas. Existen lenguajes de programación cómo Ruby, Java, C#, Python y PHP. Algunas de las funciones básicas de un desarrollador de backend son: -Empalmar bases de datos con la página. -Desarrollo de procesos y simplificación del código. -Uso de librerías y servidores. Referencias:

Este término es utilizado para nombrar la forma de distribución de los elementos de un diseño. En HTML el layout o maquetación se usa para pasar el diseño de un producto web en un conjunto de archivos (HTML, CCS y JavaScript) para que sean capaces de ser corridos por los navegadores. La maquetación web, puede hacerse fácilmente con los editores gráficos de HTML, esta herramienta nos permite hacer una maquetación web sin escribir ni una sola línea de código En la maquetación se usa el prototipo grafico de un producto, para luego ser pasado a código HTML donde se le incluirá el diseño CSS y la interactividad con JavaScript de ser necesario. Esto con el fin de ser corrido en un navegador correctamente. tomada de:  https://www.pensandoenweb.es/pasar-de-psd-a-html-y-css-maquetando-una-web-desde-cero/

https://www.w3schools.com/whatis/img_js.png Es un lenguaje de programación comúnmente utilizado en desarrollo web. Se desarrolló originalmente por Netscape como una forma de agregar elementos dinámicos e interactivos a los sitios web. Aunque JavaScript es influenciado por Java, la sintaxis es similar a C y se basa en ECMAScript, un lenguaje de scripting desarrollado por Sun Microsystems. JavaScript es un lenguaje de scripting client-side, es decir que el código fuente se procesa por el explorador web del cliente en vez de procesarse en el servidor web. Esto significa que las funciones de JavaScript pueden correr después de que se ha cargado una página web sin comunicarse con el servidor. Por ejemplo, una función de JavaScript puede revisar un formulario web antes de ser enviado para asegurarse de que todos los campos requeridos se han llenado. El código de JavaScript puede producir un mensaje de error antes de que cualquier información sea transferida al servidor. Christe

Java es uno de los lenguajes de programación orientado a objetos de propósito general y es el más utilizado en el mercado actualmente, fue desarrollado por la empresa “Sun Microsystems” que fue comprado tiempo después por la empresa Oracle. El propósito de Java fue crear un lenguaje con el que el internauta pudiese interactuar en interactuar gracias a   su característica multi-plataforma. Casi siempre los navegadores deben de tener el su configuración predeterminada un complemento de java lo cual permitiría ejecutar programas a través de los distintos navegadores. Su sintaxis deriva en gran medida C y C++ pero con menos utilidades de bajo nivel que cualquiera de ellos. Java revoluciono el mundo de la programación al hacerlo más práctico, de ahí su lema WORA (“Write once run anywhere”) y gracias a su característica de máquina virtual JVM (Java virtual Machine) hace posible que el programador escriba una única vez el código y este pueda ser ejecutado automáticamente en los dif

Casade Style Sheet, por sus siglas CSS, es un lenguaje que permite crear diseños a elementos HTML. Una de sus funciones es la separación del diseño y el contenido del sitio web, para lo anterior se utilizan hojas de estilo externas, en su contenido no puede haber elementos HTML, solo definiciones CSS. Las hojas de texto son archivos de texto escritos secuencialmente de arriba a abajo. Otorga características que permiten dar flexibilidad al sitio web, aplicar estilos a los elementos del sitio web y su sintaxis es muy simple. CSS es el encargado de proveer al sitio web el entorno gráfico y HTML fue diseñado para definir el contenido. Recuperada de  https://medium.com/level-up-web/the-ultimate-guide-to-css-103b0f883de3

https://envisionitagency.com/uploads/2018/04/ frameworks-750x422.png Un software framework es una plataforma para desarrollo de aplicaciones. Provee una base respecto a cuáles desarrolladores de software pueden construir programas para una plataforma específica. Por ejemplo, un framework puede incluir clases predefinidas y funciones que se pueden utilizar para procesar entradas, gestionar dispositivos de hardware, e interactuar con software del sistema. Esto simplifica el proceso de desarrollo puesto que los programadores no necesitan reinventar cada vez que desarrollan una nueva aplicación. Un framework es similar a un API (Application Programming Interface), aunque técnicamente un framework incluye API. Como lo sugiere su nombre, un framework sirve como una base para la programación, mientras un API provee acceso a los elementos apoyados por el framework. Un framework también puede incluir librerías, un compilador, y otros programas usados en el proceso de desarrollo de s

Los estilos al ser aplicados en el código HTML son independientes, de ser necesaria una modificación debe hacerse sobre cada etiqueta de formato del código y cada página. Las hojas de estilo CSS, al ser externas, permiten la modificación sobre estás y que el cambio sea instantáneo sobre todo el sitio. Su sintaxis, al ser en forma de cascada, permite agrupar porciones de código en estilos y reducir la duplicidad. Su aplicación en el sitio web da dinamismo e homogeneidad. Recuperada de https://blog.frogslayer.com/flexible-css-with-bem-methodology/

https://cdn.auth0.com/blog/react-js/react.png React hace posible la creación de interfaces de usuario interactivas. Se utiliza para diseñar vistas simples para cada estado en una aplicación, además de actualizar y renderizar eficientemente los componentes correctos cuando los datos cambian. Vistas declarativas hacen el código más predecible y fácil de depurar. React sirve para construir componentes encapsulados que gestionan su propio estado, componiéndolos para hacer interfaces de usuarios complejas. Dado que la lógica de sus componentes es escrita en JavaScript en vez de plantillas, se puede pasar rich data por medio de la aplicación y mantener estado fuera del DOM. (2019, March 5). React Definition. Retrieved 2019, Apr 28, from https://reactjs.org

https://s3.amazonaws.com/media.skillcrush.com/ uploads/2013/12/22180923/jquery-logo-blue-300x142.png Es una librería de JavaScript que permite a los desarrolladores web agregar funcionalidad extra a sus sitios web. Es open source y provisto gratuitamente bajo la licencia MIT. En años recientes, jQuery se ha convertido en la librería JavaScript más popular utilizada en desarrollo web. Para implementar jQuery, un desarrollador web necesita simplemente referenciar el archivo JavaScript de jQuery dentro de el HTML de una página web. Algunos sitios web mantienen su propia copia local de jQuery, mientras otros simplemente referencian la librería alojada por Google o el servidor de jQuery. Por ejemplo, una página web puede cargar la librería de jQuery usando la siguiente línea dentro de la sección <head> del HTML: <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> Christensson, P. (2

CSS al ser un lenguaje legitimo en el desarrollo de sitios web, también creo la necesidad de estandarizar su forma de desarrollo. La homologación de conceptos, buenas prácticas y criterios en la etapa de desarrollo es fundamental para un proyecto. Los framework más utilizados en CSS son Bootstrap, Tailwind CSS, Bulma, Semantic UI, entre otros. Cada uno de ellos ofrece una solución para cada tipo de problema con conjunto de herramientas para facilitar su desarrollo. Recuperada de  https://shivaywebsolution.com/blog/frameworks/top-css-framework-in-2018-for-website-design/

El desarrollo de formularios con CSS permite aplicar estilos homogéneos a cada elemento que compone un formulario. Existen propiedades que se aplican globalmente como tamaño-absoluto y tamaño-relativo. Otras propiedades orientadas al manejo de componentes específicos como tipo de letra, texto, bordes, margen exterior e interior, fondos, listas, tablas, posicionamiento, interfaces de usuario, pseudo-elementos, entre otros. En el desarrollo gráfico del sitio web se debe ser muy cuidadoso en el orden en el que las propiedades son configuradas, puesto que si el navegador no puede procesarlas no las aplicará al sitio web. Recuperada de  http://facturacionweb.site/blog/formularios-contacto-html5-gratis/

CSS posee propiedades importantes en el manejo del posicionamiento de los elementos en el sitio web. Propiedades como “position” para declarar el modo posicionamiento y “float” para declarar el modo de posicionamiento flotante. En direccionamiento se utilizan las propiedades top, right, bottom y left las cuales dan un posicionamiento con eje a los bordes. Recuperada de  https://uniwebsidad.com/libros/css/capitulo-5/posicionamiento-absoluto

En el manejo de texto se utilizan propiedades como “color” para elegir el color, “direction” en la configuración de la dirección del texto y letter-spacing para configurar el espacio entre líneas. Otras propiedades: text-align, text-indent, text-shadow. Para el manejo del tipo de letra hay propiedades como “Font” la cual permite establecer configuraciones relacionadas al tipo de letra; adicional hay otras propiedades para el diseño como: “Font-family” tipo de letra, “Font-size” tamaño, “Font-weight” grosor del trazo, “Font-style” cursiva, entre otros. Recuperada de  https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/CSS_basics

https://s3.amazonaws.com/images.seroundtable.com/ t-angularjs-logo-1439428428.png AngularJS es un conjunto de herramientas para construcción de frameworks adecuados para el desarrollo de aplicaciones personalizado. Es completamente extensible y trabaja bien con otras librerías. Cada característica puede ser modificada o reemplazada para acomodarse a un flujo de trabajo y desarrollo único, así como necesidades o características específicas. AngularJs permite extender el vocabulario HTML para una aplicación. El resultado es extraordinariamente expresivo, legible, y rápido para desarrollarse. (2019, March 11). AngularJS Definition. Retrieved 2019, Apr 28, from https://angularjs.org

https://angular.io/assets/images/logos/angular/ angular.svg Angular es una plataforma que facilita la construcción de aplicaciones con la web. Combinando plantillas declarativas, inyección de dependencia, end to end tooling, y mejores practicas integradas para resolver retos de desarrollo. Angular les posibilita a los desarrolladores el construir aplicaciones que viven en la web, móvil, o el escritorio. (2019, March 11). Angular Definition. Retrieved 2019, Apr 28, from https://angular.io/docs

NodeJS es un código abierto de JavaScript que esta diseñada para generar aplicaciones web de forma optima. Tenemos entendido que JavaScript es un lenguaje del lado del cliente al interactuar con el navegador, por ende NodeJS es un entorno de JavaScript construido con el motor V8 de Chrome , pero en este caso esta del lado del servidor basado en eventos. Gracias al motor V8 es posible que NODE proporcione un entorno de ejecución del lado del servidor el cual compila ejecuta JavaScritp a altas velocidades. Lo cierto es que esta muy de moda aunque no es algo nuevo ya que existen ya otras librerías que hacen exactamente lo mismo, sin embargo es la primera basada en JavaScript el cual tiene un gran rendimiento y reconocimiento en el negocio. Su arquitectura se basa en eventos y gracias a ello es posible generar un procesamiento asíncrono de operaciones de entrada y salida. Imagen: Cecilio A.(2014) Imagen recuperada de:  https://www.genbeta.com/desarrollo/como-funcion