Curso de Maquetación y Desarrollo Web

20 de abril de 2013

Hola que tal a todos!!

Les cuento así rapidito, se viene una super e interesante serie de video-talleres, en los que construiremos el sitio de Autodidactas desde cero, partiremos desde la maquetación, nos vamos con el css.. Todo esto lo haremos de manera modular para que se comprenda mejor.

Una vez concluida ésta parte, nuestro experto en Django Carlos Rocha, tomará todo el template Html creado y lo convertirá en una plantilla utilizable por django, crearemos los módulos necesarios para el sitio y todo esto trataremos de hacerlo en vivo.

Ademas tenemos un par de cositas cool por ahi con nodejs que con el buen Samuel Burbano, meteremos mano al código...

como ven es una buena oportunidad para aprender desde cero, espero que puedan acompañarnos a estos talleres.

Recuerden entrar siempre a Autodidact.as

Esto está en versión Beta, pero si gustan pueden ir ayudándonos a probar XD! ---> REGISTRATE

Deploy aplicaciones de Django con Xampp (Apache)

22 de septiembre de 2012

Hola gente...

El trabajo no me había permitido seguir escribiendo en el blog, hoy me escape para entregarles este pequeño tutorial.

Lo que vamos a hacer es permitir que nuestras paginas web hechas con Django puedan ejectuarse por medio del servidor Web, en este caso configuraremos Apache con Xampp.

Requerimientos:

  1. Necesitamos tener instalado, Python, Django, Xampp.
  2. Descargaremos el siguiente modulo mod_wsgi-win32-ap22py27-3.3.so, en ese enlace encontraran los módulos para otras versiones, escojan la apropiada para ustedes.
  3. Realizar una pequeña aplicación con Django para probar nuestra configuración.


Bien, lo primero vamos a "c:/python27/scripts" ahí estará el archivo django-admin.py, lo copiamos y pegamos en "c:/xampp/htdocs", para habilitar la ejecucion de los modulos python...

Luego el modulo que descargamos mod_wsgi-win32-ap22py27-3.3.so, lo copiamos y pegamos en "c:/xampp/apache/modules" y lo renombramos a "mod_wsgi.so"

Ahora abrimos el archivo de configuración de apache que esta en "c:/xampp/apache/conf", el archivo se llama "httpd.conf", lo editamos y escribimos la siguiente linea: "LoadModule wsgi_module modules/mod_wsgi.so"



Ahora creamos un proyecto django, y iniciamos una aplicacion en la carpeta htdocs.

python django-admin.py startproject sitio
python django-admin.py startapp aplicacion

esto nos creara el proyecto y la aplicación django, quedaría algo asi en la carpeta htdocs: c:/xampp/htdocs/sitio

ahora modificamos una vez mas el httd.conf del apache y colocamos las siguientes lineas al final del archivo:

Alias /media/ "c:/xampp/htdocs/sitio/media"
<Directory c:/xampp/htdocs/sitio>
        Order deny,allow
       Allow from all
</Directory>


WSGIScriptAlias / "c:/xampp/htdocs/sitio/mod.wsgi"
Luego en la carpeta "c:/xampp/htdocs/sitio", creamos un archivo con extencion wsgi y lo llamamos mod, de tal forma que nos quede asi "mod.wsgi", el contenido de este archivo sera el siguiente:

import os, sys
sys.path.append('c:\\xampp\\htdocs\\sitio')
os.environ['DJANGO_SETTINGS_MODULE'] = 'sitio.settings'

import django.core.handlers.wsgi
application = django.core.handlers.wsgi.WSGIHandler()


y con esto tendríamos configurado y ligado nuestro proyecto django con el servidor web, reiniciamos el apache y luego vamos a localhost/sitio y tendría que aparecer el típico mensaje de django.

Si se fijan no hemos hecho nada como "python manage.py runserver" para arrancar el servidor, sino que de esto se encarga el apache ahora.

Espero todo vaya bien, y si están leyendo esto antes del Domingo 23 de septiembre de 2012, recuerden que  este día tendremos un taller en vivo sobre django avanzado en www.autodidact.as

Saludos.

Listar videos subidos a Youtube en tu Página

16 de agosto de 2012

Hola gente....

Hoy quiero compartir con ustedes una pequeña rutina que obtiene los vídeos que cualquier usuario de Youtube haya subido a su canal.

Utilizaremos para ello Jquery, asi que vayan haciendo referencia en la cabecera de sus paginas, para poder utilizarlo.

Lo primero que haremos sera construir la URL que nos devolverá la lista de vídeos subidos por un usuario de Youtube.

Para ello podes dar click a este link que nos llevara a la pagina de la Api de Youtube, donde hay una serie de parametros para construir nuestra URL., copian la direccion generada que sera similar a esta:

"http://gdata.youtube.com/feeds/api/videos?lr=es&orderby=published&author=lenincasco"

Básicamente obtiene los videos subidos por "lenincasco" ordenados por fecha de publicacion y que la metadata esté en español.

Bien ahora Jquery.

<script>


$.get("http://gdata.youtube.com/feeds/api/videos?lr=es&orderby=published&author=lenincasco", 

function (xml) {
$(xml).find("entry").each(

function () {
var idd = $(this).find('id');
var $id = idd.text().substring(42);

$("#videos").append("<li><iframe type='text/html' height='100%'     width='100%' src='http://www.youtube.com/embed/" + $id + "'></iframe></li>");
});

});

</script>


Explicación:

Con .get() es una función de Jquery que recibe como parámetros una URL de donde va a obtener los datos, y en este caso una función para el CallBack, la cual tiene el elemento "xml" que es la Data regresada en el request de la Url.

con jquery buscamos el elemento "entry" en el arbol de la Data regresada, y para cada uno de ellos ejecutamos otra función anonima, dentro de esta buscamos el elemento "id" que esta dentro de la "entry" y la almacenamos en la variable "idd", "idd" nos regresa una url conteniendo al final de esta el id de cada video.

http://gdata.youtube.com/feeds/api/videos/l03R-F2dhlo

Lo que haremos sera extraer ese ID del final de está URL.

Primero convertimos a texto la url con esta instrucción idd.text(), luego hacemos un substring que nos regresara una subcadena y le decimos que nos regrese los caracteres restantes a partir del indice 42 (longitud de la url sin el ID).

luego solo nos resta armar nuestra forma de presentarlo en Html, asi que concatenamos el ID obtenido con el html correspondiente del Iframe donde pondremos nuestro video.

Comenten si les resulta.

Hasta la próxima.


Cómo crear un Servidor NodeJS

8 de agosto de 2012

Hola gente...

Hoy quiero compartirles este mini tuto, para crear un servidor Nodejs.

Lo primero es que voy a asumir que ya tienen instalado NodeJs, en sus computadoras.

Bien al grano.

Abrimos nuestro editor de texto preferido (SublimeText2), y comenzamos a codear.

//Declaramos una variable llamada http y le decimos que requiera el protocolo 'http'
var http = require('http');

//Declaramos una variable llamada servidor y le decimos que se inicialice con la creacion del servidor.
var servidor = http.createServer(); 

//Y le decimos que al servidor creado que almacenamos en 'server', que escuche en el puerto 8080.
server.listen(8080);

//Y para que sepamos que realemente esta corriendo, imprimimos en la consola.
console.log('Servidor inciado y escuchando en el puerto 8080');

Ahora le damos guardar a nuestro archivo, escogemos un directorio de nuestra PC, y le damos un nombre con extensión JS. (como ejemplo usaremos el nombre 'server.js')

Perfecto con esto ya está creado el servidor NodeJs, pero ahora falta iniciarlo.

Para eso vamos a la consola y buscamos el directorio donde creamos el archivo del servidor, una vez dentro ejecutamos la siguiente instrucción.

node server.js

y veremos algo como esto.



Si se fijan es el mismo mensaje que imprimimos a consola. con esto sabemos que el servidor está corriendo.

Genial, pero que pasa si vamos a nuestro servidor local 'localhost:8080'. y al puerto donde escucha nuestro server? bueno no pasa nada, precisamente porque no le dijimos a nuestro servidor que hiciera algo, solo que escuchara en ese puerto.

Bien cambiemos algo más en nuestro codigo del server, para que aparezca algo en nuestro navegador cuando entremos a 'localhost:8080'....

En la parte donde creamos nuestro servidor agregamos una función, de ésta manera.

server = http.createServer( function (request, response) {
      response.writeHead(200, {"Content-Type" :  "text/html"});
      response.write("<div><h1>Hola Mundo</h1></div>");
      response.end();
});

En pocas palabras le decimos a nuestro server que el tipo de contenido sera texto / html
ademas escribimos html con un Hola Mundo

Ahora a probar nuevamente nuestro 'localhost:8080' y veremos nuestro Hola Mundo.

Bueno todo por hoy, ya iremos viendo algunos ejemplos con NodeJs.








Taller Básico Html5 (desde cero)

16 de julio de 2012

Hola gente..

Este domingo 15 de julio hicimos un taller html5 en vivo, donde increiblemente tuvimos participación internacional jejeje (Colombia, México, Ecuador, Argentina...).

El objetivo era enseñar a construir una página web desde cero, utilizando html5, no es introductorio a Html5, sino a aprender a maquetar una página.

Los que se lo perdieron, estén pendiente este domingo próximo 22 de julio de 2012 haremos otro webcast (pendientes).

Aqui les dejo el webcast pasado.

Primera Parte



Segunda Parte


Como reparar arranque de Windows (Grub Rescue)

13 de julio de 2012

Hola gente...

Hoy temprano me llegó un cliente con una portátil en la que tenia instalado dos sistemas operativos (Windows 7 y Ubuntu).

Pues resulta señores que el cliente eliminó la partición donde tenia Ubuntu, pero como sabrán al instalar un sistema operativo Linux, este instala un gestor de arranque en el registro MBR, que existe al principio de los sectores de un disco.

Pues como se imaginan al borrar la partición bruscamente y no desinstalando el sistema, el registro MBR queda con los cambios hechos por Ubuntu, con lo que luego no arranca Windows, para solucionar este problema es necesario hacer los siguiente:


  1. Bootear desde el disco de instalación de Windows7.
  2. En la opción que se presenta de instalar, en la parte inferior sale otra opción que dice Reparar Windows.
  3. Se presentan varias opciones, nosotros seleccionaremos la que dice Simbolo de Sistema.
  4. Nos aparece la consola de windows y ahi introducimos el siguiente comando:

    •  bootsect /nt60 ALL /force /mbr
y listo, después de esto solo nos queda cerrar ventanas abiertas y reiniciar.

A lo olvidaba...



El comando bootsect actualiza el MBR para cambiar entre BOOTMGR Y NTLDR, está herramienta se usa para restaurar el sector de arranque de la computadora.

El parámetro /nt60 aplica el MBR compatible con BOOTMGR (Windows vista o superiores)

Con ALL le decimos que lo aplique a todas las particiones que se pueden usar como arranque.

Con Force le decimos que desmonte la unidad y la bloquee para sobrescribir

Y que todo se haga en el Master Boot Record (MBR).



Suerte..



Tuto Básico PhotoShop

30 de junio de 2012

Hola gente...

Por fin sábado otra vez, y hoy tendremos un streaming en vivo, con Alex Rayo, un chavalo entusiasta, fanático hasta los huesos de diseño gráfico, ha aprendido a usar Photoshop, Illustrator, After Effects, etc.., por su cuenta, travesiando dice él, Alex comenta que le ha gustado la dinámica de compartir conocimiento que hemos comenzado a desarrollar (haciendo pequeños tutos como éste) en la Comunidad Informática, como fruto de esto el desea compartir un poco también, es por eso que hoy a las 7 pm hora Nicaragua, nos estará entregando algunas técnicas que él utiliza para sus "travesuras".

Si nunca te has metido con PhotoShop, o si eres travieso igual que Alex, te invito que nos acompañes hoy y veas como él lo hace y quién sabe a la larga y aprendes uno que otro truquito.

Revisa el evento que hemos creado y únete al circulo de Google + para que no te pierdas próximas actividades.

Los esperamos.


Actualizar campo Mysql con número consecutivo

28 de junio de 2012

Hola Gente:

En esta ocación quiero compartirles este pequeño truco de Mysql, ya les explico como llegué a este problema.

Resulta que tengo en una base de datos de Msyql al rededor de 1500 registros, bueno estos se ingresaron importandolos de un archivo CSV, bueno la cosa es que yo necesitaba reorganizar estos items, agregandoles un id numerico y consecutivo (eh ahi mi gran necesidad), bueno a continuacion les dejo la instruccion sql que permite solventar este problema:

update tabla a,(select @numeroConsecutivo:=0) tv 

set idItem=@numeroConsecutivo:=@numeroConsecutivo+1;

Es una instruccion de actualización que se ejecuta sobre "tabla" con el alias "a", luego tenemos otra "tabla virtual" con alias tv que se conforma por un select que me regresa una variable "numeroConsecutivo" inicializada a cero, luego le digo que al campo "idItem" le asigne ("set")  la variable que regresa "tv" incrementado en uno y asignada a si misma (para que en el siguiente registro conserve el valor anterior), esto lo hará hasta que no queden registros en la "tabla".

Espero se comprenda y a más de alguno le sea de utilidad.

Hasta pronto.

Lenín Casco

Blog Informático