Aula 2: HTML

HTML Criando conteúdo para os navegadores 26 de Setembro de
2012

Interface para humanos API

HTML É uma linguagem de marcação utilizada para criar interfaces
gráficas pelo navegador. Define blocos de construção de elementos visuais, como imagens <img>, formularios <input> entre outros.

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.

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.

Estendendo o servidor Vamos criar uma pasta para arquivos estativos
chamada static . imt-webapp/ static/

Servindo arquivos estáticos Faça download e adicione o arquivo static.py
ao projeto. http://bit.ly/imt-static

Criando a rota from static import StaticHandler routes = [
# ..., ('/static/(.+)', StaticHandler), ] servidor.py

Arquivos estáticos Crie dois arquivos index.html e estilo.css e teste
se eles estão sendo servidos corretamente.

Estrutura padrão <!doctype html> <html> <head> <meta charset="utf-8"> <title>Título da
página</title> </head> <body>  </body> </html>

Vinculando um HTML ao CSS <!doctype html> <html> <head> <meta
charset="utf-8"> <title>Título da página</title> <link href="/static/estilo.css" rel="stylesheet" type="text/css"> </head>

O Layout

Header <header> .breadcrumb .col-1 .col-2 <h1> #03A9F4 #ECECEC #FFFFFF #000000
300px 30px 15px

Footer <footer> #999999 30px

<ul> <li> Navegação #03A9F4 #000000 <nav>

Conteúdo <section> <img>

Google Maps Static API

Gerando uma imagem pela URL <img src="http://maps.googleapis.com/maps/api/staticmap? size={width}x{height}& zoom={0 a
21}& maptype={roadmap, satellite, hybrid, terrain}& center={latitude},{longitude}& markers= label:{A a Z ou 1 a 9}| size:{tiny, mid, small}| color:{red, blue, yellow, green, purple, …}| {loacation 1, location 2, …}"> https://developers.google.com/maps/documentation/staticmaps/

Gerando mapas  <img src="http://maps.googleapis.com/maps/api/staticmap?
size=800x600&zoom=10&center=-23.5431786,-46.6291845">  <img src="http://maps.googleapis.com/maps/api/staticmap? size=800x600& markers=color:blue|Instituto Maua de Tecnologia,SP">

Caminhos <img src="http://maps.googleapis.com/maps/api/staticmap? size=800x600& zoom=14& path= color:blue| weight:5| {lat, lng
1}|{lat, lng 2}|{ ... }">

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.

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.

Exemplos

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.

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.

Sistema de templates É um software que estende a capacidade
do HTML padrão incluindo funcionalidades através de uma sintaxe.

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/

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

Funcionalidades http://jinja.pocoo.org/docs/dev/templates/  {{ foobar }} {{ foo.bar
}} {{ foo[1] }} {{ foo['bar'] }}  {{ foobar | first }} {{ foobar | length }} {{ foobar | join(',') }}

Funcionalidades  {% set foobar = 'Foo Bar'
%} {{ foobar }} {% set primeiro_item = alist | first %} {{ primeiro_item }}

Funcionalidades  {% if True %} <div class="foo">Foo</div>
{% else %} <div class="bar">Bar</div> {% endif %}  {% for item in foo %} <li>{{ item }}</li> {% endfor %}

Funcionalidades <!doctype html> <html> <head> <meta charset="utf-8"> <title>{% block titulo
%}{% endblock %}</title> </head> <body> {% block conteudo %}{% endblock %} </body> </html> <div>

Funcionalidades {% extends "base.html" %} {% block titulo %}Título da
página{% endblock %} {% block conteudo %} Conteúdo do body {% endblock %}

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

Navegação dinâmica {% for device in devices %} <li> <a
href="/?id={{ device.id }}">{{ device.nome }}</a> </li> {% endfor %}

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

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)

Referencia {{ foobar }} {{ foo.bar }} {{ foo['bar'] }}
{{ alist | join(',') }} {{ alist | first }}  {% set valor = 'Variavel' %} {% if True %} … {% else %} … {% endif %} {% for item in foo %} … {% endfor %}

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.

Próximas aulas + =

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

Código fonte http://github.com/hilios/imt-webapp/tree/html http://speakerdeck.com/hilios

That's all folks

Aula 2: HTML

Aula 2: HTML

More Decks by Edson Hilios

Other Decks in Programming

Featured

Transcript