Curso de Javascript: Introducción

20 octubre 2013
Categories: curso javascript, curso js, html, http, introducción javascript, javascript, js, navegador web, servidor web

Introducción al Protocolo Web

Una de las cuestiones principales cuando empezamos a hacer web es entender exactamente cuales son las tecnologías y programas que intervienen en el proceso de generación de un sitio o una página web.
Para ello tenemos esta introducción que nos servirá para 

Glosario de términos

A continuación se detallan un glosario de términos que permiten entender mejor la arquitectura Web:
  • HTML: Hyper Text Markup Language. Lenguaje que permite definir el contenido y su presentación para que el cliente web permita visualizar la información que contiene. Dicho lenguaje permite la inclusión de medios (gráficos, sonidos, vídeos, etc.).
  • Etiqueta o TAG: Unidad mínima de representación en el Lenguaje HTML. Permite definir: párrafos, tablas, enlaces, imágenes, etc…
  • CSS: (Cascading Style Sheets) Hojas de Estilo en Cascada . Permiten generar clases de estilo que se pueden aplicar a etiquetas HTML. Dichas hojas de estilo se pueden definir dentro de los ficheros HTML o incluso referenciarlos. Los TAG permiten agrupar cambios en las propiedades de un determinando TAG.
  • Java Script (JS): Lenguaje de programación que permite en la parte cliente procesar y realizar cambios en la presentación. Dichos Scripts suelen estar referenciados desde el fichero HTML.
  • Página Web: Unidad de contenido de un servidor web. Normalmente está compuesta de un fichero formateado en HTML y sus referencias.
  • Sitio Web: Conjunto de reglas del Servidor Web y las páginas Web que lo componen.
  • Servicio DNS: Servidor que entre otras funciones permite traducir nombres de máquinas en Internet a direcciones IP.
  • Navegador Web: Cliente que permite consultar a Servidores Web y presentar la información HTML. Ejemplos: Firefox, Konqueror, Opera, Internet Explorer, etc.
  • Plugin Web: Extensión de un navegador web que permite añadir una funcionalidad a un navegador web, por ejemplo la visualización de elementos no estándar. Ejemplos: Flash Player, JVM, etc.
  • Apache: Servidor Web Libre. Dicho servidor es altamente flexible y actualmente el 60% de los sitios web funcionan con Apache.
  • Módulo de Apache: Conjunto de funcionalidades agrupadas que permiten extender el tratamiento de la información por parte del servidor Web Apache.
  • URL: Uniform Resource Locator. Definición del acceso a un recurso. El concepto de URL ha sido incorporado dentro del más general de URI (Uniform Resource Identifier – Identificador Uniforme de Recurso), pero el término URL aún se utiliza ampliamente. La URL está dividida en tres partes: Nombre del Servidor Web, Recurso a acceder y Parámetros GET.
  • Método GET: Forma de paso de parámetros mediante URL.
  • Método POST: Forma de paso de parámetros mediante formulario (normalmente)
  • Contenedor de Aplicaciones Web: es el encargado de almacenar y gestionar las distintas aplicaciones web que estén instaladas, dependiendo de cada tecnología o Stack podremos disponer de distintos contenedores de aplicaciones para tecnologías como PHP, ASP, JEE, etc…
  • PHP: PHP Hypertext Pre-processor. es un lenguaje de programación usado generalmente para la creación de contenido para sitios web. PHP está preparado para funcionar como un módulo de Apache (y otros servidores Web).
  • Dirección IP: Identificativo único de un interfaz de red basado en el Protocolo IP.
  • SGBD: Sistema de Gestión de Bases de Datos. Son un tipo de software muy específico, dedicado a servir de interfaz entre la base de datos, el usuario y las aplicaciones que la utilizan. Se compone de un lenguaje de definición de datos, de un lenguaje de manipulación de datos y de un lenguaje de consulta. En los textos que tratan este tema, o temas relacionados, se mencionan los términos SGBD y DBMS, siendo ambos equivalentes, y acrónimos, respectivamente, de Sistema Gestor de Bases de Datos y DataBase Management System, su expresión inglesa.
  • SQL: Lenguaje de Consulta Estructurado (Structured Query Language). Es un lenguaje declarativo de acceso a bases de datos relacionales que permite especificar diversos tipos de operaciones sobre las mismas. Auna características del álgebra y el cálculo relacional permitiendo lanzar consultas con el fin de recuperar información de interés de una base de datos, de una forma sencilla.

Arquitectura de la Web

Una vez conocidos estos nuevos conceptos es necesario que nos hagamos una idea de la como encajan todas estas piezas dentro de la arquitectura, para ello nos ayudaremos del siguiente gráfico.

Como puede verse en el gráfico dichos componentes se conectan formando un procedimiento que indica la secuencia de llamadas entre los distintos componentes. A continuación detallaremos todos los componentes:

  • Cliente Web/DNS: Navegador Web. Por ejemplo: Firefox, Internet Explorer, Safari, Chrome, …
  • Servidor DNS: Conversor de nombres a IP’s. Por ejemplo: BIND.
  • Servidor Web: Almacén y procesador de la Información Web. Por ejemplo, Apache,  IIS…
  • Contenedor de Aplicaciones: Componente que permite la ejecución de aplicaciones web, por ejemplo PHP, ASP o JEE
  • Aplicación Web: Conjunto de ficheros o empaquetado que incluye todos los ficheros de nuestra aplicación web. PHP, ASP, JEE, etc…
  • SGBD: Sistema de gestión de bases de datos que permitirá almacenar la información dinámicamente. Por ejemplo,  Mysql.

Proceso de carga de una página web

A continuación se detallarán los pasos que realizan el cliente y el servidor de una arquitectura web:
0. Todo el procedimiento empieza cuando el usuario ha introducido una URL en el navegador web. Por ejemplo: www.google.es
  1. El Cliente Web solicita una conversión del nombre de una máquina al Servidor DNS. En este caso actúa como un cliente DNS.
  2. El Servidor DNS recibe la solicitud. Una vez recibida la petición realiza las consultas necesarias para resolver y obtener la dirección IP.
  3. El Servidor DNS devuelve la dirección IP correspondiente al navegador Web.
  4. El Navegador Web conecta contra el Servidor Web mediante la dirección IP y el Puerto (normalmente el 80) y realiza la solicitud de información mediante una URL de página (Método GET) o un formulario (Método POST). Dicha solicitud incluye: la dirección del servidor web, el puerto del servidor web, URL y parámetros POST(esta sólo en el caso de formularios normalmente).
  5. El Servidor Web realiza el Control de Acceso, el Análisis de la petición y localización del recurso. El Servidor Web determina que es necesario obtener la web desde el contenedor de aplicaciones web. 
  6. El Servidor Web llama al Contenedor de aplicaciones web para que resuelva él la petición.
  7. El contenedor de aplicaciones web localiza la aplicación requerida mediante la URL.
  8. El contenedor de aplicaciones web traspasa el control a la aplicación web elegida.
  9. Aplicación Web: Recoge los parámetros y la URL y la interpreta para localizar la funcionalidad que resolverá finalmente la petición. 
  10. La aplicación web conecta y realiza una consulta  SQL al Servidor de SGBD.
  11. El SGBD recoge la petición SQL y la procesa.
  12. El SGBD devuelve los resultados a la aplicación web.
  13. La Aplicación Web procesa de los datos devueltos por el SGBD y genera del HTML resultante.
  14. La aplicación web devuelve el  HTML resultante al contenedor de aplicaciones web.
  15. El contenedor de aplicaciones devuelve el HTML al Servidor Web.
  16. El servidor Web devuelve el HTML al cliente Web.
  17. Cliente Web: Presentación del HTML resultante, CSS y elementos relacionados y ejecución del Javascript.

Dentro del Navegador Web

Como se ha explicado en el punto anterior es necesario que el navegador web interprete los datos que recibe y se los presente al usuario.
Para ello es necesario conocer un poco los componentes básicos que tienen todos los navegadores y el proceso que sucede internamente de gestión de la información de cara a entender el funcionamiento de Javascript (JS a partir de ahora). 
Para ello incorporaremos el siguiente gráfico:
Como puede observarse después de haber lanzado la petición web en el paso 4 del anterior diagrama es necesario que el navegador esté a la espera de una respuesta, tal como sucede en el paso 16. 
Para ello está escuchando en el socket al flujo de información que proviene del servidor web. 
Según va recibiendo los datos 17.1, los va traspasando al Parser DOM 17.2, el parser va interpretando el flujo 17.3 y lo va convirtiendo dentro del DOM o el objeto document 17.4, si se encuentra código JS será necesario que lo ejecute 17.5, el motor lo interpreta y realiza los cambios sobre el  DOM si es necesario 17.6, a cada cambio ocurrido en el DOM se invoca al motor de Render 17.7, que es el responsable de dibujar sobre la ventana 17.8, el objeto window.
A partir de ese momento el navegador estará pendiente del las distintas acciones que pueda realizar el usuario sobre la ventana y sus distintos elementos a fin de ejecutar las funciones estándar  asociadas a dichos eventos. Esta parte la explicaremos en más profundidad en el apartado de Eventos JS.

Resumen

En este primer punto hemos podido observar cuáles son los elementos principales del a web y el procedimiento de carga de una página web, tanto desde la perspectiva del protocolo http como internamente dentro del propio navegador. 
Licencia Creative Commons

Curso Básico de Objetive C: 1 Introducción a Xcode 5

12 octubre 2013
Categories: curso básico, desarrollo, ios, mac, Objective C, xcode, xcode 5

Introducción a XCode 5

Lo primero que debemos saber a la hora de empezar con Objetive C es conocer el entorno de programación que necesitamos para hacer los desarrollos. 
Debido a que la finalidad de este curso es prepararnos para el Curso Básico de Desarrollo de Aplicaciones para iOS. Tenemos un sólo requisito técnico sobre el entorno de desarrollo:

  • Disponer de una máquina de Apple con Mac OSX instalado al menos en la versión 10.8.4
Este será nuestro mayor problema a la hora de iniciar el desarrollo porque la herramienta principal será Xcode 5 y sólo puede instalarse oficialmente en un Mac.

Instalación de XCode 5 [1]

Para instalar el Xcode lo podemos hacer desde la App Store:
Desde el buscados podremos encontrar la página del Xcode:

Pulsaremos en el botón verde de instalar la App, nos pedirá confirmación de compra, no te preocupes es gratuita e iniciará la descarga, son unos 1,9GB así que espera a que este disponible desde el Launchpad.
Una vez descargada para podremos arrancar el Xcode:
Como puedes ver se nos darán las opciones principales de crear un nuevo proyecto, enlazar a un repositorio o abrir proyectos recientes u otro proyecto.
Al pulsar sobre el botón de crear proyecto veremos lo siguiente:
 En el apartado de la Izquierda se pueden ver los distintos proyectos que podemos desarrollar tanto para iOS como para OS X.
En la parte de la derecha se nos mostrarán las opciones particulares para cada tipo de proyecto. 
De cara al curso nos centraremos por su simplicidad en las aplicaciones para OS X:
En este apartado vemos los tres tipos disponibles, para este curso utilizaremos la Command Line Tool como base para todos los proyectos. Esto simplificará la estructura de proyecto y la introducción de código.
Tras pulsar Next nos sale la pantalla de configuración del proyecto:
En ella deberemos rellenar:
  • El nombre del proyecto
  • El nombre de la organización
  • El Identificativo de la misma (deberá ser único en el mundo)
  • y el Tipo: Fundation
Pulsamos en Next  y nos saldrá el diálogo de guardar el proyecto:
Seleccionamos el directorio donde queremos guardar la carpeta del proyecto y pulsamos en Create.
A continuación veremos el interfaz de Xcode de gestión de proyectos:
Como podemos ver nos muestra todas las opciones del proyecto en la parte izquierda veremos el menú de proyecto, en la parte central las configuraciones del mismo y en la parte de la derecha las propiedades.
Esta estructura es muy compleja, así que nos centraremos en los apartados básicos de la misma. 
Al tener seleccionado el proyecto en la parte izquierda puede verse que debajo de él existen las carpetas:
  • una carpeta con el nombre del proyecto, que dentro tiene los ficheros del mismo
  • una carpeta frameworks donde veremos las bibliotecas y frameworks relacionados con el proyecto.
  • y una carpeta Products donde veremos el resultado de la compilación del proyecto, en nuestro caso un programa de linea de comandos. 

Estructura del proyecto

Si expandimos la carpeta del con el nombre del proyecto veremos lo siguiente:
Como podemos ver tenemos el fichero principal de nuestro programa main.m al seleccionarlo con el ratón veremos que la parte central del Xcode presentará el contenido del fichero:

Hola Mundo

Nos encontraremos con el siguiente texto:
//
//  main.m
//  ejemplo001-base
//
//  Created by pepesan on 12/10/13.
//  Copyright (c) 2013 pepesan. All rights reserved.
//
#import <Foundation/Foundation.h>
int main(int argc, const char * argv[])
{
    @autoreleasepool {
        
        // insert code here…
        NSLog(@”Hello, World!”);
        
    }
    return 0;
}

Dentro de este fichero destacan 3 apartados principales:

  • La cabecera con los comentarios
  • El import de las clases fundaciones de Objective C
  • La función principal del programa, donde vemos la directiva @autorelease que es la que nos va a permitir liberar los recursos de la aplicación una vez terminada.
  • La llamada a NSLog(), que nos permite una salida por consola. 
Como detalle curioso en Objective C todos los literales de cadenas de caracteres deben ir precedidos de un @.

 Compilación y ejecución del Proyecto

Una vez realizado el desarrollo como siempre debemos compilar y ejecutar el proyecto, para lo cual tenemos varias opciones:
  • Mediante el botón de Play que está presente en la barra superior a la izquierda
  • Mediante la combinación de teclas Comando + r

 una vez compilado el proyecto debería salir en la parte superior central de la ventana un mensaje de que la compilación ha sido un éxito:

Por otro lado habrá ejecutado el proyecto y deberíamos tener una salida en la consola, en la parte inferior central de la ventana:

Donde debería aparecer el mensaje del Hola Mundo.
Si en algún momento deseas parar la ejcución de un programa puedes hacerlo pulsando en el botón de stop o con la combinación te teclas Comando + . (esto es un punto no el final de línea 🙂 ).

Depuración en Xcode

Una de la tareas típicas en la codificación es el tratar de resolver errores en la compilación o la ejecución del programa.
Xcode es una buena herramienta en este aspecto ya que nos ayuda a la resolución de estos errores de código. Para ello en la edición del fichero se nos muestran en la parte lateral izquierda del área círculos rojos o triángulos de alerta en cada línea que incluye un error o aviso respectivamente:

Como puede verse en la captura vemos que hay errores y en la misma línea nos indica el error.
Una vez arreglado el código los errores visualmente desaparecerán:

Algunas veces esto no es suficiente para arreglar los errores, ya que será debido a fallos en ejecución de la aplicación. Para ello necesitaremos el uso de los BreakPoints.
Los breakpoints nos permitirán parar la ejecución de la aplicación en un determinado punto, indicando sobre una línea de código dicho punto de ruptura.
Para ello necesitaremos  hacer click en el número de línea donde queramos colocar el breakpoint, y nos debería aparecer un resaltado en azul sobre la misma:

Al ejecutar la aplicación deberá parar en dicho breakpoint:

En la parte inferior central debería aparecer la consola y el inspector de variables con las opciones de depuración:

Como puede verse la captura en la parte de la izquierda, están representadas las variables involucradas en el método que se está ejecutando en ese momento y su valor. Y encima de las variables podemos observar los botones típicos de acción en la depuración, que continúan normalmente con la ejecución, el paso a paso, etc…
También la parte de la izquierda nos aparecerá seleccionado el tercer icono de la barra empezando por la derecha y nos indicará información sobre el uso de CPU, el consumo de memoria y los hilos en ejecución:

Ejercicios

  1. Instala en Xcode en tu ordenador.
  2. Crea un nuevo proyecto de MacOSX tipo Aplicación/Línea de Comando/Foundation.
  3. Ejecuta tu nuevo proyecto.
  4. Coloca un pequeño bucle en el código y depura la línea que muestre en pantalla el valor de la variable i que recorra el índice. 

Referencias

Licencia Creative Commons

Curso Básico de Objetive C

12 octubre 2013
Categories: curso básico, desarrollo, ios, mac, Objective C, xcode, xcode 5
Tags: desarrollo, desarrollo ios, desarrollo mac, objective C

Curso Básico de Objective C

En este curso trataremos de explicar el funcionamiento de la plataforma Xcode y el lenguaje de programación Objetive C, desde la perspectiva de un programador de aplicaciones web con conocimientos en programación orientada a objetos (POO) y bases de datos relacionales (BBDD).

Temario

Licencia Creative Commons

Si estás interesado en seguir formándote tenemos una serie de cursos gratuitos:

Cursos Gratuitos

También disponemos de algunos cursos de pago por si son de tu interés:

https://cursosdedesarrollo.com/tienda/

Curso de Angular:

Angular

 

Suscríbete al Boletín

Si quieres estar al tanto de las novedades del blog, ya sabes :)
* = campo obligatorio

powered by MailChimp!

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

Aviso de cookies