Slide 1
Slide 1 text
HTML
Criando conteúdo para os navegadores
26 de Setembro de 2012
Slide 2
Slide 2 text
Interface para humanos
API
Slide 3
Slide 3 text
HTML
É uma linguagem de marcação utilizada para criar
interfaces gráficas pelo navegador. Define blocos
de construção de elementos visuais, como
imagens ![]()
, formularios entre
outros.
Slide 4
Slide 4 text
CSS
É uma linguagem para aplicação de estilos em
documentos HTML, isto é, mudar sua aparência
visual, através da mudança dos atributos como
cor de fundo background-color, tipo de fonte
font-style, cor color, bordas border, etc.
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
Arquivos estáticos
São os arquivos de apoio utilizados para alterar a
aparência do site, ou um conteúdo que não muda,
como imagens, vídeos, CSS e até mesmo HTML.
Slide 7
Slide 7 text
Estendendo o servidor
Vamos criar uma pasta para arquivos estativos
chamada static .
imt-webapp/
static/
Slide 8
Slide 8 text
Servindo arquivos estáticos
Faça download e adicione o arquivo static.py ao
projeto.
http://bit.ly/imt-static
Slide 9
Slide 9 text
Criando a rota
from static import StaticHandler
routes = [
# ...,
('/static/(.+)', StaticHandler),
]
servidor.py
Slide 10
Slide 10 text
Arquivos estáticos
Crie dois arquivos index.html e estilo.css e teste se
eles estão sendo servidos corretamente.
Slide 11
Slide 11 text
Estrutura padrão
Título da página
Slide 12
Slide 12 text
Vinculando um HTML ao CSS
Título da página
Slide 13
Slide 13 text
O Layout
Slide 14
Slide 14 text
Header
.breadcrumb .col-1 .col-2
#03A9F4 #ECECEC #FFFFFF #000000 300px 30px 15px
Slide 15
Slide 15 text
Footer
#999999
30px
Slide 16
Slide 16 text
- Navegação #03A9F4 #000000
Slide 17
Slide 17 text
Conteúdo
![]()
Slide 18
Slide 18 text
Google Maps Static API
Slide 19
Slide 19 text
Gerando uma imagem pela URL
https://developers.google.com/maps/documentation/staticmaps/
Slide 20
Slide 20 text
Gerando mapas
Slide 21
Slide 21 text
Caminhos
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
Estático vs. Dinâmico
Vimos que os arquivos estáticos são aqueles que
não mudam com frequencia.
Porém, há vezes que queremo exibir dados do
banco de dados. Para os arquivos que são gerados
pelo servidor em tempo real chamamos de
arquivos dinâmicos.
Slide 25
Slide 25 text
Arquivos dinâmicos
A imagem gerada pelo Google Maps é um
exemplo de um arquivo dinâmico, em outras
palavras é um arquivo se atualiza
automaticamente, a partir da requisição realizada.
Slide 26
Slide 26 text
Exemplos
Slide 27
Slide 27 text
Gerando HTMLs dinâmicos
Vamos utilizar o nosso servidor em Python para
gerar um HTML dinânico, que automaticamente
exibe as informações dos devices do banco de
dados e, as exiba na tela.
Slide 28
Slide 28 text
Concatenando strings no HTML
O HTML por principio é uma marcação estática,
por isso desenvolvedores criaram softwares para
adicionar funcionalidade úteis como variáveis,
condicionais, loops, imports e herança, a isso
damos o nome de sistema de templates.
Slide 29
Slide 29 text
Sistema de templates
É um software que estende a capacidade do
HTML padrão incluindo funcionalidades através
de uma sintaxe.
Slide 30
Slide 30 text
Sistema de templates
Vamos instalar o Jinja2, criar a pasta templates e
mover o nosso index.html para lá.
$ pip install jinja2
imt-webapp/
templates/
Slide 31
Slide 31 text
Servindo um template HTML
from webapp2_extras import jinja2
class HelloWorld(webapp2.RequestHandler):
@webapp2.cached_property
def jinja2(self):
return jinja2.get_jinja2(app=self.app)
def get(self):
tmpl = self.jinja2.render_template('index.html')
self.response.write(tmpl)
servidor.py
Slide 32
Slide 32 text
Funcionalidades
http://jinja.pocoo.org/docs/dev/templates/
{{ foobar }}
{{ foo.bar }}
{{ foo[1] }}
{{ foo['bar'] }}
{{ foobar | first }}
{{ foobar | length }}
{{ foobar | join(',') }}
Slide 33
Slide 33 text
Funcionalidades
{% set foobar = 'Foo Bar' %}
{{ foobar }}
{% set primeiro_item = alist | first %}
{{ primeiro_item }}
Slide 34
Slide 34 text
Funcionalidades
{% if True %}
{{ item }}
{% endfor %}
Foo
{% else %}
Bar
{% endif %}
{% for item in foo %}
Slide 35
Slide 35 text
Funcionalidades
{% block titulo %}{% endblock %}
{% block conteudo %}{% endblock %}
Slide 36
Slide 36 text
Funcionalidades
{% extends "base.html" %}
{% block titulo %}Título da página{% endblock %}
{% block conteudo %}
Conteúdo do body
{% endblock %}
Slide 37
Slide 37 text
Enviando variaveis ao template
def get(self):
tmpl = self.jinja2.render_template('index.html',
devices=models.Devices.get_all()
)
self.response.write(tmpl)
{{ devices }}
servidor.py
index.html
Slide 38
Slide 38 text
Navegação dinâmica
{% for device in devices %}
{{ device.nome }}
{% endfor %}
Slide 39
Slide 39 text
Modelo de dados
import models
# Dispositivos
models.Devices.get_all() # Retorna todos os dispositivos
models.Devices.get_by_id(XXX) # Retorna o dispositivo com ID
models.Devices.get_by(id=XXX, foo='a') # Retorna o dispositivo com o parametro
models.Devices.count() # Retorna a quantidade de dispositivos
device = models.Devices.get_by_id(1)
device.medidas() # Retorna as medidas deste device
Slide 40
Slide 40 text
Device selecionado
def get(self):
device_id = self.request.params.get('id')
tmpl = self.jinja2.render_template('index.html',
devices=models.Devices.get_all(),
current_device=models.Devices.get(device_id)
)
self.response.write(tmpl)
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
Referencia
{{ foobar }}
{{ foo.bar }}
{{ foo['bar'] }}
{{ alist | join(',') }}
{{ alist | first }}
{% set valor = 'Variavel' %}
{% if True %} … {% else %} … {% endif %}
{% for item in foo %} … {% endfor %}
Slide 43
Slide 43 text
Going further
O JavaScript é uma linguagem de programação
que roda no navegador. Em conjunto com o
HTML você pode criar interações complexas entre
o usuário e a interface.
Slide 44
Slide 44 text
Próximas aulas
+ =
Slide 45
Slide 45 text
Atenção com o servidor
$ python servidor.py
serving on http://127.0.0.1:8080
GET /devices
POST /devices
PUT /devices
DELETE /devices
GET /devices/N
POST /devices/N
Slide 46
Slide 46 text
Código fonte
http://github.com/hilios/imt-webapp/tree/html
http://speakerdeck.com/hilios
Slide 47
Slide 47 text
That's all folks