Tutorial Javascript: Intermedio

​Hasta ahora ya llevamos lo básico de HTML, Javascript y CSS, ya es momento de ver como hacemos funcionar todos juntos y ver hasta donde podemos llegar y entiendan así la necesidad de conocer otra herramientas que ayudará mucho en el futuro.

Lo que les muestro a continuación es una página que podemos hacer para presentarnos a nosotros mismos.

Ya con esto vemos que con solo conocer lo básico se puede hacer algo interesante y de buena utilidad, pero ahora vamos a ver una librería llamada JQuery. Esta contiene muchas funciones que nos ayudarán a manipular contenido, tener menos código de lectura más fácil.

1 - Hola JQuery

Lo primero que vemos en el HTML es que se importa un archivo llamado jquery-1.10.2.js, esta librerias no las coloco en el código de arriba, pero pueden acceder a ella en la página oficial de JQuery o lo pueden descargar con todo el código bajo este link.. Después de esto ya podemos hacer uso de todas las funciones que nos trae JQuery. Podemos también incluir la librería desde el link de la página web de JQuery, pero eso depende de cada desarrollador.

En esta página se nos permite que al hacer click en la etiqueta con id cuadro se mostrará un mensaje. Hay que notar que se puede hacer click dentro de toda el área del cuadro y siempre se podrá mostrar el mensaje, ya que la función hace referencia a la etiqueta con id cuadro y no solo al texto.

Para usar la librería JQuery lo que necesitas es escribir $ y seguido entre paréntesis el id (también se puede usar la clase) del elemento a manipular. Seguido de esto último viene la acción y en este caso es la función click que recibe como parámetro una función, quien tiene la función alerta para mostrar un mensaje.

Para ver más manejadores de eventos pueden visitar el API de JQuery.

2 - Animaciones

En este otro ejemplo lo que hacemos es utilizar el poder de las clases para esconder el elemento que se selecciona con distintas animaciones y efectos. Lo más importante a notar en este ejemplo es que la función ready indica que todas las funciones estarán disponibles una vez que el documento este completamente cargado.

Fíjense que en la línea 4 del archivo 2-funciones.js se tiene la variable this que hace referencia solo al elemento seleccionado y luego le sigue la función hide(), dando así como resultado que se oculte solo el elemento seleccionado.

Para los otros ejemplos es muy parecido pero se hace uso de otras funciones de efectos que reciben parámetros que determinan el resultado de la animación.

Para ver más efectos pueden visitar el API de JQuery animaciones y efectos.

3 - Tomar valor

Para este ejemplo vemos como se hace para tomar el valor o contenido de una etiqueta y ha diferencia de aplicar un efecto lo que se hace es:

• val(): Que nos permite obtener el valor.
• val(""): Que sustituye el valor por el valor en el parámetro de la función.
• empty(): Permite eliminar todo el contenido anidado dentro de la etiqueta.
• append(foo): Agrega al final el contenido de la variable foo en la etiqueta .

Página de ventas

Ahora les muestro aquí una pequeña página que nos permite hacer compras dada una lista de artículos y así puedan ver la utilidad de todo lo que acabamos de aprender de JQuery.

Ya con esto hemos dado un gran salto en la programación web, aunque si nos damos cuenta, vemos que nuestras páginas si se ve bien aquí en el explorador, pero como se ve desde un celular, una tablet o consola de videojuegos, porque ahí que aceptar que actualmente ya no sólo navegamos desde la computadora, que es donde tenemos grandes resoluciones en general, es por eso que necesitamos usar otras herramientas que nos permita manejar varias resoluciones y es por eso que el próximo Post que haga lo voy hacer sobre Bootstrap CSS y verán una gran variedad de ayudas que nos trae, con muy poco esfuerzo.

Si algo no queda muy claro siempre me pueden escribir a mi correo tonylattke@gmail.com o también pueden dejar comentarios al final de este post y trataré de ayudarles lo antes posible.

Descarga aquí todos los archivos fuente.

Tutorial CSS: Básico

Hasta este momento ya llevo el tutorial sobre lo básico en HTML y Javascript, ya llego el momento de aprender a darle una mejor apariencia a la página web y esto lo lograremos a través de CSS.

Formalmente CSS es un lenguaje usado para describir la apariencia de un documento que use etiquetas para identificar el contenido. Dentro de CSS podemos declarar un cambio de propiedad del mismo elemento, es como la trayectoría del agua que caé por una cascada, por cada piedra que tropieza el agua cambiará su trayectoría hasta llegar a la superficie, para CSS las piedras son las declaraciones de propiedades y la superficie es la apariencia final que esta muestra en la pantalla. Gracias a este funcionamiento es que recibe el nombre Cascading Style Sheets (Hoja de estilos en cascada en español).

1 - Hola CSS

Al igual que en Javascript aquí también podemos declarar el estilo dentro del mismo HTML usando la etiqueta style, esto realmente no se acostumbra hacer pero se los muestro para que tengan una primera idea fácil de CSS.

Lo primero que vemos es que dentro de la etiqueta style se hace referencia a h1 y se le está agregando 2 propiedades, un nuevo color y centrar texto. Para especificar el color se puede tomar el nombre para muchos colores predefinidos (aquí pueden ver una lista de todos los colores definidos) aunque normalmente queremos especificarlo a través de la representación hexadecimal, de este para tener un mayor grado de personalización. El haber definido estas propiedades sobre h1 quiere decir que cada vez que usemos h1 dentro del documento, esta obedecerá las propiedades descritas a menos que se alteren posteriormente.

Para este ejemplo ya hago uso de otro atributo muy importante dentro de las etiquetas y es el id, el cual para el primer párrafo tiene el nombre texto, esto nos sirve para varias cosas, pero de momento para lo qu interesa es que se vea que dentro de la etiqueta style una sección de código que utiliza el id texto y le asigna unas propiedades. Es muy importante el simbolo # que precede a texto ya que este indica id, más adelante veremos que existen otros. La personalización que hacemos en este caso es cambiar el color de la fuente a blanco, el fondo a un color azul y tamaño de la fuente 20 píxeles.

Por último el menos recomendable en proyectos grandes pero también disponible, es el atributo style en la etiqueta p en este caso, donde vemos que se altera el color de fondo. Digo que no se recomienda ya que como buena práctica de programación es tener la menor cantidad de código y repetir funciones lo menos posible.

2 - Uso de librerias, clases y propiedades de altura y ancho

El código necesario para tener acceso a un archivo de estilo de CSS se tiene usando la etiqueta link el cual tiene los atributos para especificar que se trata de una hoja de estilo. Por buena práctica coloco la ruta a la imagen desde la carpeta css.

Dentro del estilo de las etiquetas se especifica para el id cuadrado, un color de fondo azul claro, un ancho y alto de 100 píxeles.

Se especifíca la clase elemento con color de fondo cyan y ancho del 100% de la pantalla. Noten que el símbolo . que precede al nombre elemento es la forma de describir propiedades en una clase.

Un poco más formal con los ids y clases, los podemos definir como:

• id: Es el identificador y por lo tanto único.
• class: Es el que permite clasificar elementos y dando el mismo comportamiento para todos aquellos que sean de la misma clase.

3 - Márgenes y rellenos

Para este ejemplo lo que tenemos es el uso de las propiedades margin (márgen) y padding (relleno).

• margin: Sirve para declarar los márgenes en píxeles alrededor de un elemento. Esta propiedad de puede usar de dos formas:
  • margin: 10px 20px 30px 40px;
  • margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;
  Ambos significan que el margen superior es de 10 píxeles, derecho 20 píxeles, inferior 30 píxeles e izquierdo 40 píxeles. En la primera forma tenemos que podemos declarar todos los márgenes en una sola línea y las medidas son descritas en sentido de las agujas del relog. Usando la segunda forma tenemos la ventaja que se pueden declarar solo alguna de las medidas.
• padding: Con este podemos declarar un relleno dentro del elemento y al igual que margin se pueden declarar de las 2 formas.

4 - Texto y propiedad hover

En este caso quiero mostrar un ejemplo que tiene id fondo en el que podemos centrar el elemento especificando el ancho y márgenes izquierdo y derecho automáticos. Otro atributo que incluyo en el ejemplo es el cambio de cursor al colocar el mouse sobre el elemento boton.

En el ejemplo incluyo el comportamiento hover que significa colocar el mouse sobre el elemento. La descripción de esto se logra como en la línea 17 del archivo estilo-4.css.

El elemento boton cambiaría como se ve en la siguiente imagen:

Si algo no queda muy claro siempre me pueden escribir a mi correo tonylattke@gmail.com o también pueden dejar comentarios al final de este post y trataré de ayudarles lo antes posible.

Descarga aquí todos los archivos fuente.

Tutorial Javascript: Básico

En esta parte explicaré el uso de Javascript que le damos en el desarrollo web.

Formalmente definamos Javascript, este es un lenguaje interpretado, podemos tener orientación a objetos, es imperativo, débilmente tipado y dinámico.

1 - Hola Javascript

Con este ejemplo se puede ver el código mínimo para usar Javascript. Aquí podemos ver que la etiqueta script en donde se pueden definir variables y funciones, en la cual es muy importante que el orden de declaración, ya que si se quiere usar una función o variable tiene que ser previamente declarada.

Para este ejemplo tenemos que se declara la variable mensaje y al presionar el botón se muestra el contenido de la variable en la ventana de alerta. El ejemplo se ve en el explorador como en la siguiente imagen.

2 - Funciones

Con este ejemplo se trata de mostrar la extracción del valor en el campo de entrada y mostrar el mismo en la ventana de alerta al presionar el botón. Además de todo esto se ve la sintaxis que tiene una función y operador de concatenación.

La función para obtener el valor del checkbox es realmente poco amigable, pero más adelante en otros tutoriales usaremos una librería llamada Jquery que nos permitirá hacer esto de una manera mucho más fácil. En el explorador se ve la página como en la siguiente imagen.

Si interactuas varias veces marcando las opciones podrás ver que los mensaje de alerta cambiarán correspondientemente a las opciones marcadas.

3 - Importar archivos y condicionales

Un código con el HTML y el Javascript unidos en un solo archivo no son fáciles de dar soporte, es por eso que tenemos la opción de separarlos en archivos diferentes. Para que esto llegue a funcionar el HTML debe hacer referencia al archivo manejador-funciones.js y en este caso lo hace con la etiqueta script indicando la ruta en el atributo src. Por motivo de buenas prácticas y estilo es recomendable a su vez organizarse por carpetas y por eso es que la ruta dice en el principio js/.

Para esta parte lo que pretendo es mostrar como se hace en Javascript los condicionales y como se elabora un mensaje según las opciones marcadas.

4 - Manipulando contenido y ciclos

Para este ejemplo quiero mostrarles como se hace una variable tipo arreglo y tabla.

En la primera variable diccionario podemos acceder a un valor usuarios que a su vez contiene una lista de nombres y apellidos. Este tipo de variable es muy conveniente de entender ya que en un futuro se usaran mucho para comunicar y almacenar información.

La segunda variable declarada contiene una lista de valores que corresponden a los nombres de excelentes películas :)

Ya dentro de las funciones encontramos la sintaxis de los ciclos y accesos a valores de las variables anteriormente declaradas.

Al haber presionado click en los botones se darán los cambios y verá como se sustituye y agrega contenido en cada etiqueta, dando como resultado la siguiente imagen.

Si algo no queda muy claro siempre me pueden escribir a mi correo tonylattke@gmail.com o también pueden dejar comentarios al final de este post y trataré de ayudarles lo antes posible.

Descarga aquí todos los archivos fuente.

Tutorial HTML: Básico

Lo primero que necesitamos para el desarrollo de páginas web es conocer sobre HTML, tal y como mencioné en el primer post de es blog. Así que iré mostrando el código necesario y una imagen de como se ve la página que se representa.

Definiciones:
- HTML: Es un lenguaje de texto enriquecido con etiquetas (Tags en inglés).

- Etiqueta: Es una marca que delimita una sección del código. Es muy importante que cada etiqueta que se abra se cierre, de no hacerlo existirán errores al interpretarse el código por el explorador.

1 - Una primera página web


Este código es el mínimo y necesario para tener una página web básica. Las etiquetas significan:
- <!doctype html> Indica que el tipo de archivo es HTML.
- El texto dentro de las etiquetas <html> y </html> contienen la descripción del documento web.
- El texto dentro de las etiquetas <body> y </body> contienen la descripción de los elementos visibles.

- El texto dentro de las etiquetas <h1> y </h1> contiene el título "Hola mundo".

Al ver este archivo en el explorador el resultado es el que muestra en la imagen anterior.

2 - Etiqueta de párrafo

El código lo incluyo para mostrar que dentro de la etiqueta body se puede agregar más de una etiqueta y en este caso es la etiqueta p que contiene un texto que por defecto estará justificado.

Este archivo en el explorador se muestra como la imagen anterior. En este momento capaz no muestro mucho código dentro del párrafo, pero pueden agregar muchas lineas extras como ejercicio y comprobar como se comporta el texto en la etiqueta p. Otro ejercicio posible es agregar muchos párrafos dentro de body y así comprobar el comportamiento que tiene la etiqueta p.

3 - Etiqueta Head y Title


La importancia de este ejemplo es para mostrar que dentro del HTML existe una sección que se puede colocar para configuraciones, esta etiqueta se llama head y en este caso tiene la configuración para cambiar el nombre de la página, esto lo logramos con la etiqueta title. El resultado se ve en el explorador como la siguiente imagen.

En esta sección es donde normalmente se coloca los links para acceder a los archivos de javascript y CSS, esto en un futuro será muy útil.

4 - Etiqueta Meta y atributos

Hasta ahora tendríamos problemas con el uso de acentos y caracteres especiales, eso lo solventamos usando el formato de codificación UTF 8. La etiqueta que se necesita para esto se llama meta y para especificar este soporte de caracteres especiales se coloca el atributo charset con el valor utf-8. Gracias a esto último se vio también como se especifican los atributos dentro de una etiqueta.

El resultado es como lo que se ve en la imagen anterior, lo cual es simplemente la muestra de las vocales acentuadas.

5 - Configurando lenguaje y comentarios


Para este caso lo que se muestra es como se configura el lenguaje usado dentro del HTML, lo cual tiene como finalidad ser usado para los motores de búsqueda y exploradores. Para ver la lista de todos los lenguajes a configurar dentro del HTML los puede conseguir en este link.

6 - Etiqueta h1-h6


Existen varios títulos configurados en el HTML, estos pueden ser usados con las etiquetas h1, h2, h3, h4, h5 y h6. Los resultados por defecto que estas etiquetas tienen son los que se muestran a continuación.

7 - Etiqueta a

Para agregar un link es de gran utilidad la etiqueta a. En el ejemplo del código el URL se coloca en el atributo href y lo que queremos mostrar en el HTML se coloca dentro del contenido de la etiqueta.

8 - Etiqueta img

Usando la etiqueta img es una de las posibilidades de colocar imágenes en el HTML y en el atributo src se coloca la ruta del archivo, el cual puede ser un link o una ruta local.

9 - Etiqueta ul y li


Otra etiqueta muy útil es ul la cual permite colocar una lista de items con la etiqueta li.

10 - Etiqueta table


La etiqueta table permite colocar una tabla de datos muy fácilmente y la manera de especificar esto es especificar las filas con la etiqueta tr y cada columna se especifica con la etiqueta td.

11 - Etiquetas de entradas de valores

- textarea permite crear un campo de texto para escribir y en este caso se especifican 3 filas, 50 columnas y el texto por defecto es el famoso Lorem ipsum dolor sit amet.

- br Nos permite hacer un salto de línea.

- select nos permite colocar varias opciones en un menu despegable. Las opciones tienen un texto que se muestra al usuario visitante y un atributo llamado value que permite más adelante su extracción a nivel lógico.

- input tiene realmente varios tipos pero solo 3 de ellos son los únicos que muestro aquí porque me parecen los más utilizados. Lo más importante de cada uno es que necesitan un nombre para su extracción futura.

- button es el que permite hacer un simple botón.

Hasta aquí ya les compartí y explique las etiquetas básicas, si quieres saber más sobre ellas puedes acceder a W3School. 

Si algo no queda muy claro siempre me pueden escribir a mi correo tonylattke@gmail.com o también pueden dejar comentarios al final de este post y trataré de ayudarles lo antes posible.

Descarga aquí todos los archivos fuente.

Hola mundo web

En los próximos meses les compartiré un resumen de lo que he aprendido en los últimos meses en cuanto al desarrollo de sistemas web. 

En algunos casos se tiende a confundir que hacer una pagina web es solamente tener uno o varios archivos de HTML comunicados entre sí y con eso ya haz desarrollado un sistema web, la verdad es que hace falta unos pasos extras para lograrlo. Porque en un sistema por lo general queremos ser capaces de tener acceso a usuarios, generar entradas de blog, guardar configuraciones de usuario, entre otros que no son posibles de no tener comunicación con una base de datos. 

Por esto mi motivación para explicarles en verdad lo que es necesario para tener un sistema web. Las cosas que necesitas saber entonces son:

1 - Conocimiento de HTML, Javascript (JQuery para usar todas las funciones de ayuda en la manipulación del HTML) y CSS (Bootstrap como herramienta de ayuda para tener un estilo muy fácil en varias resoluciones y Less para poder estructurar el código con más naturalidad, además del uso de variables y herencia).

2 - Uso de un framework web MVC para ayudar a tener una buena estructura del código, seguridad y orden modular de cada sección del proyecto. Aquí es donde más pretendo extenderme para que se entienda bien la diferencia entre un framework y otro, ya que dependiendo del problema puede ser mejor uno de ellos. Por lo pronto conozco estos únicamente Catalyst, Django, Laravel, Rails y Yesod.

3 - Manejador de base de datos, esta parte realmente no me gusta mucho pero es importante saber como usar y configurar para los distintos ambientes en los que se encuentre el proyecto.  SQLite, Mysql y PostgreSQL.

4 - Servidor para almacenamiento y ejecución del sistema. Recomiendo para aprender usar Heroku y Openshift.

5 - Dominio con el cual se puede finalmente tener una página con un URL personalizado.

Ya enumerado lo necesario, seguiré ese orden para explicar todo esto. De momento pueden acceder a mi repositorio de GitHub para ver un  sistema de blog sencillo que hice para aprender a usar varios Frameworks web.

Para terminar les digo que un gran amigo para programar en general serán:
- Stackoverflow: En esta comunidad puedes realizar preguntas y ver muchas respuestas.
- W3School: Aquí existe mucha documentación sobre HTML, CSS, Javascript y de muchas otras herramientas y lenguajes.

Consejo: Algo muy importante a la hora de programar es que la mayoría de la documentación, ejemplos y ayudas que se pueda conseguir va a estar en inglés, por esta razón les aconsejo que no tengan miedo a tener que buscar todo en inglés.