viernes, 16 de febrero de 2018

¿Que es Front End y Back End?

¿Que es Front End y Back End?

Front End y Back End son dos conceptos muy usados en desarrollo web. Pero exceden este ámbito. Podría decirse que en programación es la separación que existe entre dos capas: la capa de presentación o visualización , que es con la que interactua el usuario, y la capa de acceso a datos.
En un sistema de escritorio desarrollado en un lenguaje visual podríamos decir que Front End es el conjunto de pantallas y programación que responde a las acciones del usuario (eventos como hacer click en un botón) El Front End nos sirve para interactuar con el usuario y recopilar datos. El Back End viene siendo la lógica de negocio que nos permite procesar esos datos, suele estar relacionada con el almacenamiento de los mismos. Por ejemplo, independientemente del lenguaje que usemos, siempre terminaremos usando una Base de Datos que manejamos con lenguaje SQL. El proceso de los datos, su inserción, recopilación y mantenimiento se relaciona con el Back End.

Pero en programación Web la división es mucho mas obvia:

Front End

Es el conjunto de tecnologías que presentan la información y operan con el usuario del lado del cliente en su navegador web. Suele incluir el clásico HTML y CSS para la presentación, y JavaScript para la programación interactiva. Se preocupa sobre todo de la presentación de la información y de que se pueda interactuar correctamente con el usuarios. En el desarrollo Web, la manera de comunicarse con el Back End puede ser mediante peticiones REST (POST y GET) o mejor aun de forma interactiva usando AJAX, enviando mensajes en XML y JSON.



Back End

Es el conjunto de tecnologías que funcionan en el servidor. Una de las más usadas suele ser PHP que se integra de forma natural con el servidor Apache, pero también se puede usar JAVA, APEX Node.JS o incluso .NET. Estos programas se encargan de mantener la base de datos, guardando la información y enviándola al cliente 
Generalmente la Base de Datos es mySQL pero de igual manera puede ser Oracle o en mucho menor medida SQL-SERVER.
Digamos que el Back End es el CORE de la información y donde se realizan todas las operaciones, y finalmente si es necesario se entrega una respuesta al Front End.
No importa que información obtenga debe presentarla en un formato legible para el navegador, generalmente HTMl y JavaScript. Es por eso que los lenguajes de Back End suelen usarse como constructores de código, por ejemplo PHP.

Con estos dos conceptos básicos, ya te puedes dar una idea de como se presentara tu información web



martes, 6 de febrero de 2018

¿Que es HTTP Request y Response?

HTTP REQUEST y RESPONSE son dos conceptos básicos en el desarrollo web, pero no siempre le quedan claros a los programadores. Hoy quiero definirlos, para que veamos que es mucho más sencillo de lo que pensamos:

HTTP singifica  HyperText Transfer Protocol. Esta es la forma de comunicación de datos básica en Internet. La comunicación de datos empieza con un request enviado del cliente, y termina con la respuesta del servidor web.
Por ejemplo, si fuera un ejemplo clásico con un ser humano visitando una página Web:

·         Un sitio web que empieza con la URL http:// es entrado en un navegador web de la computadora del cliente. El navegador puede ser Chrome, Firefox, o Internet explorer, no importa.

·        El navegador envía un request al servidor web que esta hospedado en el website.

·         El servidor web regresa una respuesta como un página de HTML, o algún otro formato de documento al navegador (puede ser un mp4, mp3, pdf, doc, entre otros soportados por el navegador)


·         El navegador despliega el response del servidor al usuario. Por supuesto esto dependerá de los formatos que soporte el navegador.

Por supuesto lo bello de esto, es que no es siempre este mismo proceso tradicional el que se ejecuta. Mucha de la comunicación vía web, ya no se hace directamente entre humano-maquina, cada vez más son aplicaciones automatizadas de ambos lados, las que se envían datos. Es decir por ejemplo yo tengo un programa en PHP, APEX, o algún otro lenguaje que utilizo para enviar request y recibir respond, de manera que la comunicación es de máquina a máquina

Ahora bien, ¿Qué contienen el request y el response?

HTTP Request Structure from Client
Un simple mensaje de request de un cliente tiene los siguientes componentes:
  • Una línea de request para obtener el recurso, por ejemplo un request con el método GET /content/page1.html está requiriendo el recurso llamado /content/page1.html del servidor
  • Encabezados. Indican cosas como el lenguaje, codificación, tipo de datos (XML,JSON, etc). (Por ejemplo– Accept-Language: EN).
  • Una línea vacía.
  • Un cuerpo del mensaje que es opcional. Entre aplicaciones esta es la parte mas importante. Por ejemplo, yo puedo enviar un XML o un JSON  a otra máquina, y el servidor web interpretara la información que yo le mando.
Todas las líneas terminan con un retorno de carro y nueva línea. La línea vacía solo contiene el retorno de carro y la nueva línea sin espacios.
HTTP Response Structure from Web Server
Un simple response del servidor web contiene lo siguiente:
  • HTTP Status Code (Por ejemplo HTTP/1.1 301 Movido Permanentemente, significa que el recurso requerido fue movido permanentemente y redirigido a otro recurso).
  • Encabezados. Igual que en el request, describen el contenido del response (Example – Content-Type: html)
  • Una línea vacía.
  • Un cuerpo de mensaje, que es opcional. Cuando trabajamos con aplicaciones, aquí puede venir la respuesta en XML u otro formato. Cuando es una página del navegador, contiene el código HTML que forma nuestra página.
Todas las líneas terminan con un retorno de carro y nueva línea. La línea vacía solo contiene el retorno de carro y la nueva línea sin espacios.
No hay mayor ciencia en la comunicación bajo el protocolo HTTP. Pero es poderoso y flexible por que permite desde visualizar páginas web , hasta intercambiar datos entre aplicaciones.




lunes, 31 de octubre de 2016

Determinar las resolucion de pantalla en Javascript y CSS y ajustar los objetos en pantalla

Diseñar una página web es un proceso complejo. Mas por que debemos tener en cuenta, que la WEB ahora es accesada desde diversos dispositivos.

Simplemente al acceder desde una PC se usan una gran variedad de resoluciones de pantalla. Ahora si sumamos tablets y smartphones, se vuelve un proceso dificil ajustar el contenido a la pantalla.

En ocaciones determinamos el tamaño o la posicion de un objeto de forma fija en pantalla. Además le damos cierto margen, entre otras propiedades.

Pero al trabajar con resoluciones de pantalla diferentes, vamos a tener que los objetos no se acomodaran correctamente en la pantalla.

¿Que podemos hacer?

Una opcion es redimensionarlos y reacomodarlos dinámicamente, dependiendo del tamaño de la pantalla del dispostivo de salida.

Para eso claro, necesitamos conocer el alto y el ancho de la pantalla del dispositivo de salida. ¿Como podemos hacerlo? Bueno usando 2 lenguajes que se ejecutan del lado de la maquina cliente. Ya hemos visto que tanto JavaScript como CSS tienen poder de modificar los objetos que vemos en pantalla. Asi que veamos como hacerlo con ambos.


1.-JavaScript


Mira el siguiente codigo:

        if( screen.height == 768 ||screen.height == 720 )
         $("#Menu").css( { top:120 });
     
     if( screen.width == 1024)
           $("#Menu").css( { left:636});

¿Sencillo no?

Si te fijas la clave son las instrucciones screen.heigh y screen.width. Estas nos devuelven el ancho y el alto de la pantalla.

En la primera condicion le indico que si el alto de la pantalla es 768 o 720 pixeles, al elemento Menu, le modifique la propiedad top (que indica en que posicion de la pantalla estará la parte superior del objeto) con el metodo css.

El método css permite modifica dinámicamente las propiedades css de un objeto.

En la segunda condición pregunto por el ancho de la pantalla. Si es de 1024 pixeles, esta vez modifico la propiedad left, que me indica la posicion izquierda de la pantalla donde comienzael objeto.

Ambos valores se los doy en pixeles.

De esta manera , con diferentes resoluciones de pantalla, estaría ubicando mi objeto en una posición diferente.


2.-CSS

Veamos ahora un ejemplo de como ajustar contenido con CSS:

@media screen and (max-width: 800px){
 #content_header
   font-size: 12px !important;
   width:800px; height:100%; display:table; margin:0 auto; 
   }
}

@media screen and (max-device-width: 800px){
 #content_header
   font-size: 12px !important;
   width:800px; height:100%; display:table; margin:0 auto; 
   }
}

Como pueden ver la clave esta en la etiqueta @media screen con la condicion  max-width max-device-width.

Podemos usar esta etiqueta como un if, y dentro de ella definir todas las propiedades de CSS que deseemos para los objetos. Esta opción es mas completa, podemos definir tamaño de fuenete, ancho del objeto, alto del objeto, el padding , el marging, y un sin fin de propiedades. Prácticamente todo lo que deseemos y podemos construir un objeto diferente para resolución de pantalla.

No hay que olvidar, que si definimos mas propiedades fuera de esa etiqueta, serán ignoradas, es decir tenemos que poner la defición completa de las propiedades del objeto, pues no se heredan.

Si yo hubiera definido #content_header antes, y quisiera cambiar solo una propiedad como el tamaño de fuente, no me es posible. Debo volver a copiar todas las propiedades del objeto, que solo aplicaran cuando el ancho sea 800 px.

En todos los caso default, donde el ancho no sea 800 px, tomara mis propiedades genericas.

De esa manera podemos empezar a jugar un poco, con la construcción de páginas webs para diferentes resoluciones de pantalla.

Para la altura seria algo similar

@media screen and (max-height: 768px){
 #MiCuenta {
    padding:60px;
    padding-bottom: 10px;
    cursor:pointer;
    font-weight:bold; color:#fafafa; border-right:1px solid #c3c3c3;
   }
}
@media screen and (max-device-height: 768px){
 #MiCuenta  {
    padding:60px;
    padding-bottom: 10px;
    cursor:pointer;
    font-weight:bold; color:#fafafa; border-right:1px solid #c3c3c3;
   }
}

Y ya con esto podemos irnos adaptarnos a las diferentes resoluciones de pantalla. !A programar!