sábado, 23 de agosto de 2014

HTML, lo básico - Estructura de un documento

Hoy vamos a dar un repaso por lo básico de HTML, la estructura de un documento. Esto va dirigido para aquellos que quieren iniciarse en la maquetación web, o simplemente para aquellos que quieren repasar lo que ya saben.

La estructura de un documento HTML básico sería la siguiente

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Mi página web</title>
  5. </head>
  6. <body>
  7.     <!-- Contenido -->
  8.     </body>
  9. </html>

Como podemos ver, tenemos que indicar un "DOCTYPE", en este caso hemos utilizado el "DOCTYPE" que corresponde con un documento HTML5, para más información sobre esta declaración podéis visitar el articulo de Wikipedia aquí

Después todo va dentro de la etiqueta "<html>", aquí dentro tenemos dos partes, la cabeza y el cuerpo (etiquetas head y body respectivamente). La etiqueta "<head>" contiene meta-información de la página web, el titulo, la codificación, etc, la inclusión de las hojas de estilo (CSS), scripts y otros recursos de la página web. La etiqueta "<body>" contiene la parte "visible" de la web, es decir, el contenido que estamos mostrando.

Algunos tags indispensables dentro de la etiqueta "<head>" son los siguientes.

viernes, 22 de agosto de 2014

Tutorial barra de progreso AJAX + PHP (Parte 2)

Bueno, pues aquí está la parte 2 del videotutorial para crear una barra de progreso.

En cuanto pueda subiré la entrada con el tutorial completo redactado

Un saludo

jueves, 21 de agosto de 2014

Tutorial barra de progreso AJAX + PHP (Parte 1)

Hola, bueno aquí dejo la primera parte del tutorial para crear una barra de progreso mediante AJAX y PHP. Es mi primer videotutorial, espero que os guste.

Bueno, las siguientes partes las colgare en breve.

Un saludo

lunes, 4 de agosto de 2014

Herramientas de test online

Vamos a ver tres herramientas online para el testeo que nos ayudan a la hora del desarrollo web. Cuando desarrollamos a veces se nos olvida que existen muchas utilidades y librerías online que nos hacen la vida más fácil. A veces tenemos mil y una cosas instaladas en nuestros ordenadores cuando en internet tenemos mucho de lo que nos hace falta.

Bueno estas son algunas de la herramientas que yo uso muy a menudo y que me son muy útiles en el día a día

Codepad

http://codepad.org

Codepad es una web que te permite escribir código y ejecutarlo online sin complicaciones, soporta los siguientes lenguajes de programación:

C C++ D Haskell Lua OCaml PHP Perl Plain Text Python Ruby Scheme Tcl

La verdad es que es muy útil para hacer pruebas puntuales o saber cómo se comporta un código sin tener para ello que compilar o ejecutar en nuestra máquina. Yo la suelo utilizar cuando no dispongo de un entorno de pruebas unitarias o cuando lo que quiero probar es muy puntual y necesito hacerlo rápidamente sin más. Además puedes obtener el link del código que has hecho para su distribución.

JsFiddle

http://jsfiddle.net/

Siguiendo con las herramientas para testear el código no puede faltar JsFiddle, una herramienta que nos permite hacer pruebas, guardarlas y editarlas. JsFiddle nos proporciona 4 paneles, uno para escribir el código HTML, otro para el CSS, un tercero panel para nuestro Javascript y en el último panel se muestra el resultado. Nos permite trabajar con JQuery y otras librerias javascript, importar las nuestras propias e incluso escribir en CoffeeScript. Además tambien podemos validar el código HTML y Javascript.

JsFiddle es una herramienta muy útil cuando queremos probar nuestro código javascript, hacer pruebas y compartir los resultados, ya que siempre se guarda un link con el código. Además se pueden hacer versiones diferentes. En fin, una herramienta que no puede faltar en el desarrollo web.

Bootply

http://www.bootply.com/

Bootply es una herramienta de testeo como JsFiddle que además integra Bootstrap, permite guardar las pruebas y editarlas. Además proporciona una forma rápida para añadir clases y componentes de Bootstrap.

Espero que os sirva de ayuda y si alguna no la conocíais os invito a probarlas, un saludo.

sábado, 26 de julio de 2014

Gimp - Recortar imágenes

En esta entrada vamos a ver una operación muy sencilla en Gimp, a pesar de ser algo muy básico puede ser útil de cara a aprender una de las herramientas más potentes de este software, la selección.

En Gimp mucha gente se siente frustada por varias cosas, una de ellas es el modo de 3 ventanas. Para los que todavía no lo sepan es posible unir las 3 ventanas de Gimp en una sola, tan solo hay que seleccionar "Ventanas->Modo de ventana única" en el menú superior. Para ello necesitamos al menos la versión 2.8 de Gimp.

Volvamos al tema que nos ocupa la entrada, lo primero que debemos hacer es abrir la imagen que queremos recortar, para ello podemos ir a "Archivo->Abrir" o simplemente arrastrándolo al area de la herramientas (Ventana o panel izquierda, donde se encuentran las herramientas de pincel, rellenado, etc)

viernes, 18 de julio de 2014

Una vieja nueva experiencia

Esta entrada no es la primera de este blog, pero es la primera de hace mucho tiempo. Me propuse llevar este blog para poder recopilar toda la información interesante sobre programación e informática en general. Es más que evidente que fue un fracaso.

En todo este tiempo he aprendido muchas cosas nuevas, gracias a la carrera de ingeniería informática y la experiencia laboral como programador web. Ahora pienso que puede ser buena idea retomar el blog y "comenzar otra vez de cero". Es por eso que he cambiado totalmente la plantilla, me plantee cerrar este blog y abrirlo en Wordpress, pero me daba pena y, que demonios, vamos a intentar aquella promesa de hace tiempo.

Por ahora solo diré que me voy a proponer publicar una o dos entradas cada semana. Es cierto, no es mucho, pero ya se verá más adelante si la frecuencia se incrementa.

¡Hasta muy pronto!

martes, 12 de febrero de 2013

Javascript - Closure


Debido a la forma en la que javascript interpreta las funciones y posteriormente las ejecuta tenemos lo que se denomina "closure". Un "closure" es el link que se crea entre una función y una variable (u otra función) que esta fuera de dicha función. Es decir, tenemos acceso a las variables en el ámbito en el que fueron definidas.Podemos utilizar los "closures" para llevar a cabo diversas técnicas como podría ser el cacheo de resultados.

Ejemplo (Serie numérica):

function naturales() {
  var foo = -1;
  return function () {
    foo++;
    return foo;
  }
}

var serie = naturales();
serie() //devuelve 0
serie() //devuelve 1
serie() //devuelve 2

En este ejemplo tenemos la función A que devuelve una función  esta segunda función incrementa foo en 1 y devuelve el resultado. La función retornada puede ver foo, se ha creado un "closure", por lo tanto una vez guardamos nuestra función retornada veremos como nos va dando números consecutivos cada vez que la llamamos.

Más adelante veremos que los "closures" se utilizan para muchísimas cosas en Javascript.

Hasta pronto