Aula 2: HTML

Aula 2: HTML

Nesta aula vamos ver o conceito de arquivos estáticos e dinâmicos, e extender o nosso servidor python para construir uma interface visual em HTML para listar nossos devices IoT

456d07b3f7a1ab66502e232fd9b1d378?s=128

Edson Hilios

October 02, 2014
Tweet

Transcript

  1. 3.

    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.
  2. 4.

    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.
  3. 5.
  4. 6.

    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.
  5. 9.

    Criando a rota from static import StaticHandler routes = [

    # ..., ('/static/(.+)', StaticHandler), ] servidor.py
  6. 10.
  7. 11.

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

    página</title> </head> <body> <!-- Aqui começa a parte visivel --> </body> </html>
  8. 12.

    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>
  9. 13.
  10. 19.

    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/
  11. 20.

    Gerando mapas <!-- Estado de São Paulo --> <img src="http://maps.googleapis.com/maps/api/staticmap?

    size=800x600&zoom=10&center=-23.5431786,-46.6291845"> <!-- Marcador no IMT --> <img src="http://maps.googleapis.com/maps/api/staticmap? size=800x600& markers=color:blue|Instituto Maua de Tecnologia,SP">
  12. 22.
  13. 23.
  14. 24.

    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.
  15. 25.

    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.
  16. 26.
  17. 27.

    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.
  18. 28.

    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.
  19. 29.

    Sistema de templates É um software que estende a capacidade

    do HTML padrão incluindo funcionalidades através de uma sintaxe.
  20. 30.

    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/
  21. 31.

    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
  22. 32.

    Funcionalidades http://jinja.pocoo.org/docs/dev/templates/ <!-- Variáveis --> {{ foobar }} {{ foo.bar

    }} {{ foo[1] }} {{ foo['bar'] }} <!-- Filtros --> {{ foobar | first }} {{ foobar | length }} {{ foobar | join(',') }}
  23. 33.

    Funcionalidades <!-- Variaveis --> {% set foobar = 'Foo Bar'

    %} {{ foobar }} {% set primeiro_item = alist | first %} {{ primeiro_item }}
  24. 34.

    Funcionalidades <!-- Condicionais --> {% if True %} <div class="foo">Foo</div>

    {% else %} <div class="bar">Bar</div> {% endif %} <!-- Loops --> {% for item in foo %} <li>{{ item }}</li> {% endfor %}
  25. 35.

    Funcionalidades <!doctype html> <html> <head> <meta charset="utf-8"> <title>{% block titulo

    %}{% endblock %}</title> </head> <body> {% block conteudo %}{% endblock %} </body> </html> <div>
  26. 36.

    Funcionalidades {% extends "base.html" %} {% block titulo %}Título da

    página{% endblock %} {% block conteudo %} Conteúdo do body {% endblock %}
  27. 37.

    Enviando variaveis ao template def get(self): tmpl = self.jinja2.render_template('index.html', devices=models.Devices.get_all()

    ) self.response.write(tmpl) <!-- Lista de devices --> {{ devices }} servidor.py index.html
  28. 38.

    Navegação dinâmica {% for device in devices %} <li> <a

    href="/?id={{ device.id }}">{{ device.nome }}</a> </li> {% endfor %}
  29. 39.

    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
  30. 40.

    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)
  31. 41.
  32. 42.

    Referencia {{ foobar }} {{ foo.bar }} {{ foo['bar'] }}

    {{ alist | join(',') }} {{ alist | first }} <!-- Blocos --> {% set valor = 'Variavel' %} {% if True %} … {% else %} … {% endif %} {% for item in foo %} … {% endfor %}
  33. 43.

    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.
  34. 45.

    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