Desenvolvimento Código Aberto

HTML5 ou Hypertext Markup Language, versão 5 é uma linguagem para estruturação e apresentação de conteúdo para a World Wide Web e é uma tecnologia chave da Internet, está na quinta versão da linguagem HTML. Esta nova versão traz consigo importantes mudanças quanto ao papel do HTML no mundo da Web, através de novas funcionalidades como semântica e acessibilidade.

Claro, houve mudanças na linguagem HTML em si. Algumas Tags foram adicionadas em comparação ao padrão HTML 4, e um número considerável também foram excluídas. Provavelmente o maior ajuste para aqueles que usaram ​​o HTML4 não é realmente o HTML em si, mas a relação entre a mudança de HTML e CSS. Em HTML5 (como em HTML), a linguagem de marcação só descreve o que significam os vários elementos. CSS é usado para descrever como as coisas se parecem.

CSS3 é a mais nova versão das famosas Cascading Style Sheets ou simplesmente CSS, onde se define estilos para páginas web com efeitos de transição, imagem, e outros, que dão um estilo novo às páginas Web 2.0 em todos os aspectos de design do layout. A principal função do CSS3 é abolir as imagens de plano de fundo, bordas arredondadas, apresentar transições e efeitos para criar animações de vários tipos, como um simples relógio de ponteiros.

Computação nas Nuvens

Agora que você já sabe como funciona a tecnologia Cloud do Google App Engine e como o funciona o ambiente de SandBox no qual nossa aplicação Python roda, vamos nos aprofundar um pouco mais nas linguagens de scripts para a Web, pois não há como existir computação nas nuvens sem a boa e velha linguagem de scripts chamada HTML. Em sua versão mais recente o HTML5 possui como uma melhor amiga, a linguagem de scripts que também ganhou uma cara nova e é chamada de CSS3.

Entretanto na arquitetura Cloud as coisas são um pouco diferentes do que são em um servidor web padrão, como por exemplo, os diretórios da web, em um servidor web você possui um diretório pré-estabelecido no qual pode utilizar, criando subdiretórios para scripts, imagens entre outros arquivos e apenas os referenciar utilizando scripts do qual você já esta acostumado.

Na tecnologia Cloud do Google quem comanda toda a aplicação é um arquivo YAML, então os scripts que, por exemplo chamam uma imagem em uma pagina HTML, só podem encontrar a imagem se ela ou o diretório onde a imagem se encontra estiver declarado nos handlers do arquivo que manipula a aplicação, como podemos ver nos códigos abaixo.

Diretórios Google Cloud App

1. A imagem open-source.jpg que você vê na pagina esta localizada dentro de uma pasta chamada static na raiz da aplicação, você pode perceber que a tag “img src” é utilizada sem o caractere “/” fazendo referencia a um diretório, quem controla onde as imagens serão encontradas é a instrução handlers do arquivo yaml.
2.  O ícone favicon.ico (16×16) utilizado pelo navegador se encontra na raiz da aplicação junto com o arquivo main.py, mais uma vez quem controla este ícone é a instrução handlers do arquivo yaml.

 

Multi Plataforma

Considerando que nossa aplicação roda em um navegador web, você pode utiliza-la de um sistema operacional de sua preferencia.

Você pode ver esta aplicação direto das nuvens: http://devabertolinux.appspot.com/

Para configurar sua primeira aplicação Google Cloud Linux: Hello World Google Cloud App Engine

Para Windows e Mac utilize o Google Cloud App Engine Launcher: Instalação e Hello World

Exemplo:

Neste exemplo criamos uma aplicação padrão no Google Cloud Engine, e utilizamos para programação a linguagem Python e através delas criamos uma variável no qual atribuímos um script contendo HTML5 e CSS3 para criar nossa pagina.

Yaml

application: devabertolinux
version: 1
runtime: python27
api_version: 1
threadsafe: yes

handlers:
- url: /favicon\.ico
  static_files: favicon.ico
  upload: favicon\.ico

- url: /(.*\.(gif|png|jpg))$
  static_files: static/\1
  upload: static/.*\.(gif|png|jpg)$

- url: .*
  script: main.app

libraries:
- name: webapp2
  version: "2.5.2"

Python

#!/usr/bin/env python
#
#########################################
# Desevolvimento Aberto
#########################################
# E-mail: desenvolvimento.aberto@live.com
#
# Cloud Computing
# Python - HTML5 - CSS3 - Javascript
# main.py

import webapp2

devhtml = """
<!DOCTYPE HTML>
<html>
  <head>
     <title>Cloud - Desenvolvimento Aberto - Google APP Engine</title>
        <style type = "text/css">
           body { background-color: white; }
           h1   { color: #191970; }
           h3   { color: #53868B; }
           p    { color: #27408B; }
        </style>
  </head>
<body>
 <h1>Desenvolvimento Aberto</h1>
   <h3>Cloud Computing - HTML5 - CSS3 - Javascript</h3>
   <p>
     <img src = "open-source.jpg" alt = "Open Source" />
   </p>
   <h2>C&oacute;digo Aberto de melhor qualidade</h2>
     <p>Desenvolvimento Aberto &eacute; formado para educar sobre e defender</br>
        os benef&iacute;cios do c&oacute;digo aberto e de construir pontes entre os</br>
        diferentes c&iacute;rculos eleitorais na comunidade de c&oacute;digo aberto.</p>
</body>
</html>
"""

class MainHandler(webapp2.RequestHandler):
    def get(self):
        self.response.write(devhtml)

app = webapp2.WSGIApplication([
    ('/', MainHandler)
], debug=True)