Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Lo quiero para ayer

Un espacio donde aprenderás una opción ágil y sencilla para desarrollar tus proyectos en tiempo record con tecnologías como django, jquery, bootstrap y algo mas. Presentación realizada en las JOINCIC 2012 en la USB.
by

Carlos Zager

on 14 August 2012

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Lo quiero para ayer

Lo quiero para ayer! por Carlos Zager De que hablaremos? El framework web para perfeccionistas con fechas límite La librería que cambio la
manera de escribir Javascipt Un conjunto de herramientas y componentes
HTML, CSS y Javascript para la creación de interfaces
de manera simple, flexible y elegante Para que quiero saber esto? Por que son poderosas herramientas
que reducirán la cantidad de trabajo
que tendrás que realizar, el tiempo que
te toma hacerlo y además el trabajo
se vera profesional sin tanto esfuerzo... Acaso pensaste:
"Me cuesta creerlo..." Pues creelo..!!
Y mira el porqué... Te ofrece Estructura MVT Modelo Vista Template Acoplamiento entre
librerías y herramientas API ORM Eficiente Con una sintaxis breve,
sencilla y muy poderosa Con capacidad de saltar a SQL fácilmente,
cuando sea necesario Un sistema de URL flexible basado
en expresiones regulares Un sistema de plantillas
que permite separar la
lógica de la presentación Que maneja Herencia e inclusión La posibilidad de generar
diferentes formatos El uso de filtros y librerías
para ayudarse en el diseño y...puede ser extendido! Con un manejo de vistas simples
que pueden ser des/incorporadas
en cualquier momento Donde se diferencia claramente
un GET y un POST Y se tiene un manejo de objetos Request
para manejar todo lo relacionado con la solicitud Ya empezaste a creer? Pues entonces agárrate a la silla
por que aún falta... Te ofrece Uso de potentes selectores
para recorrer el DOM Creación, consulta y modificación
de atributos Creación, consulta y modificación
de parámetros CSS que cumple con
Standard CSS3 Crossbrowser Manejo y manipulación de eventos Integración con AJAX y JSON para
envío de Request GET o POST tan
sencillo que cuesta creerlo Y por si fuera poco...
También es extensible por medio
de plugins Como vamos? Aún te queda
un respiro para lo que queda? Te ofrece Una cuadrícula de 12 columnas responsive Con layouts de ancho fijo o fluído Con soporte HTML5 y CSS3 A través de toda una gama de exploradores,
viejos y nuevos...Tanto en PC como
en tablets y móviles Una definición de CSS elegante
para tipografías,tablas,formularios,
botones, íconos y más... Aparte de la definición de nuevos
componentes como: Botones en grupo Botones con dropdown Listas de navegación Manejo de pestañas Alertas formateadas Paginación Y muchos otros por medio de plugins..
Como por ejemplo un Carrusel listo para usar Y ahora?
Ya eres creyente? Bueno bueno...
Tampoco así...no es una religión...
Ahora aprendamos a lo que vinimos!! Instalarlo...
Podemos lograrlo con PIP, easy_install o descargandolo de djangoproject.com Que eso eso de PIP y easy_install?
Son manejadores de paquetes del
lenguaje de programación Python, en el cual esta hecho Django, que permiten instalarlos y manejarlos A manera de recomendación antes
de instalar es mejor configurar un entorno de Python
limitado, para ello usaremos Virtualenv Si tenemos instalado Virtualenv en nuestra máquina
ejecutamos:
$ virtualenv --no-site-packages myvirtenv

y cuando termine
$ cd myvirtenv
$ source bin/activate

De esa manera estamos dentro de nuestro entorno virtual
Para salir en cualquier momento $ deactivate Por último corremos
$ pip install django==1.4 Felicidades! Has instalado Django
Para comprobar su funcionamiento y crear nuestro primer proyecto corremos el comando
$ django-admin.py startproject joincic
$ cd joincic
$ python manage.py runserver Con lo que deberíamos ver un mensaje que nos dice que se ha levantado un servidor de prueba en la dirección http://localhost:8000

Visitándola deberíamos ver algo como Ahora para hacer nuestro primer ejemplo
real, crearemos un Hello World
Editamos el archivo joincic/urls.py con:
---------------------------------------------------------------
from django.conf.urls import patterns, include, url
urlpatterns = patterns (“”
url(r“^$”,”joincic.views.hello_world”,name=“hello-world”)
)
--------------------------------------------------------------

Y editamos joincic/views.py con:

--------------------------------------------------------------
from django.http import HttpResponse
def hello_world(request):
return HttpResponse(“HELLO WORLD!”)
-------------------------------------------------------------- A partir de este punto todo el código mostrado
podrá ser descargado de http://zava.com.ve/learning/joincic2012.tgz Volvemos a ejecutar
$ python manage.py runserver
y visitamos http://localhost:8000

si todo salió bien deberíamos ver
HELLO WORLD! Que tal si hacemos que ese Hello World se vea mas presentable? Presentable? Elegante?
Eso suena a Bootstrap... Vamos a descargarnos el ejemplo básico de Bootstrap de

http://twitter.github.com/bootstrap/examples/hero.html

y lo colocamos dentro de la carpeta joincic/templates/ Luego editamos el archivo joincic/views.py con:
---------------------------------------------------------------------------
from django.http import HttpResponse
from django.shortcuts import render_to_response as Render


def hello_world(request):
return HttpResponse("HELLO WORLD!")

def hello_bootstrap(request):
param=request.GET.get(“param”,”ZAVA”)
context={“param":param}
return Render(“hero.html”,context)
----------------------------------------------------------------------------- Para hacer funcionar esta nueva vista modificamos el archivo joincic/urls.py con:
--------------------------------------------------------------------------------------------------
from django.conf.urls import patterns, include, url
urlpatterns = patterns (“”
url(r“^$”,”joincic.views.hello_world”,name=“hello-world”)
url(r“^bootstrap/$”,”joincic.views.hello_bootstrap”,name=“hello-bootstrap”)
)
--------------------------------------------------------------------------------------------------
y habiendo levantado el servidor de prueba visitamos

http://localhost:8000/bootstrap/

OJO: Para que el template renderice correctamente, deben ser alteradas las URL de los CCS completandolas con http://twitter.github.com/bootstrap/ Si tuvimos cuidado de ver lo que haciamos, habremos visto que teniamos una variable param que agarramos del GET

Para utilizarla debemos colocar en nuestro template la sintaxis de Django para uso de variables en template, y eso es {{var_name}}

Por lo que afectaremos nuestro template cambiando donde dice Hello World por Hello, {{param}} Veremos que por defecto ahora nuestro template
nos muestra Hello, ZAVA

Pero si pasamos la variable param en el GET como
http://localhost:8000?param=VALOR

el template renderizará Hello, VALOR


OJO: ver https://docs.djangoproject.com/en/1.4/ref/templates/builtins/ para colocar filtros de diseño Vamos muy bien ahora deberíamos ver como se usa la parte de Modelos (DB) de Django A continuación definiremos el archivo joincic/models.py como
-----------------------------------------------------------
from django.db import models
class News (models.Model):
title=models.CharField(max_length=128)
description=models.TextField()
resume=models.TextField()
date=models.DateTimeField(auto_now=True)

def __str__(self):
return self.title

def __unicode__(self):
return u"%s"%self.title

class Meta:
ordering=("-date",) Para poder usar la base de datos tenemos que configurar nuestro proyecto.
Entonces editemos joincic/settings.py y debemos asegurarnos que la variable DATABASES se parezca a

DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': 'data.db',
'USER': '',
'PASSWORD': '',
'HOST': '',
'PORT': '',
}
}

Y que la variable INSTALLED_APPS contenga "joincic" y "django.contrib.admin"

INSTALLED_APPS={
...
"django.contrib.admin"
"joincic",
...
} Ahora corremos el comando
$python manage.py syncdb
y seguimos los pasos Para probar que todo funcionó editamos joincic/urls.py y activamos
---------------------------------------------------------------
....
from django.contrib import admin
admin.autodiscover()
....
url(r'^admin/', include(admin.site.urls)),
...
-------------------------------------------------------------------
Por último editamos el archivo joincic/admin.py con
--------------------------------------------------------------
from django.contrib import admin
from models import *

admin.site.register(News)
-------------------------------------------------------------- Si todo salió bien levantamos el servidor de prueba
si no lo tenemos activo y visitamos
http://localhost:8000/admin/

entremos con el usuario que creamos al momento del syncdb y juguemos a ser periodistas... Pero y como hago que eso parezca un periódico? Para esto tenemos que crear 2 nuevas vistas ,por lo que tenemos que editar
joincic/urls.py con:
--------------------------------------------------------------------------------------
from django.conf.urls import patterns, include, url
from django.contrib import admin
admin.autodiscover()

urlpatterns = patterns('',
url(r'^$', 'joincic.views.hello_world', name='hello-world'),
url(r'^bootstrap/$', 'joincic.views.hello_bootstrap', name='hello-bootstrap'),
url(r'^news/$', 'joincic.views.news_latest',name='news-latest'),
url(r'^news/(?P<news_id>\d+)/$', 'joincic.views.news_detail',name='news-detail'),
url(r'^admin/', include(admin.site.urls)),
)
-------------------------------------------------------------------------------------- Y finalmente las vistas en joincic/views.py quedarian como:
------------------------------------------------------------------------------------------------------------
from django.shortcuts import render_to_response as Render,get_object_or_404 as get404
from models import News
from django.utils import simplejson

NUMBER_NEWS=6

def news_latest(request):
latest=News.objects.all()[:NUMBER_NEWS]
context={
"latest":latest
}
return Render("news_latest.html",context)

def news_detail(request,news_id):
news=get404(News,id=news_id)
if request.is_ajax():
data={
"title":news.title,
"description":news.description,
"date":news.date.strftime("%d/%m/%Y %H:%M")
}
rendered=simplejson.dumps(data)
return HttpResponse(rendered)
latest=News.objects.all()[:NUMBER_NEWS]
context={
"detail":news,
"latest":latest,
}
return Render("news_latest.html",context) zava.com.ve Carlos Zager

Tech Consultant
czager@zava.com.ve El código puede ser descargado de zava.com.ve/learning/joincic2012.tgz Hacemos crecer ideas Para ver la estructura de news_latest.html por favor
referirse al código contenido en
http://zava.com.ve/learning/joincic2012.tgz

Visitemos
http://localhost:8000/news/ Hasta aqui llega el paseo...
Esperamos te haya gustado. En el código encontrarás
documentación de lo aquí mencionado y un poco de código extra de regalo como es RSS.
Full transcript