Tecnologias Web

Plataformas WEB

Uma plataforma WEB é uma coleção de tecnologias desenvolvidas para a criação, desenvolvimento e distribuição de páginas e aplicativos na internet.

Front End

Elas envolvem tecnologias de níveis variados de complexidade sendo que as mais básicas, e mais amplamente empregadas, são a linguagem HTML, Hyper Text Markup Language e CSS, Cascade Style Sheets. HTML é responsável pela estrutura de uma página, marcando títulos, parágrafos, links, blocos de texto, inserção de imagens, etc. CSS são arquivos de formatação, usados para definir tamanhos e tipos de fontes, cores, espaçamentos, etc. A linguagem javascript é usada pela maioria dos sites para executar ações do lado do navegador, tais como atualização dinâmica de conteúdo, envio de respostas do usuário para o servidor e controle de arquivos multimídia. Diversas novas tecnologias são baseadas no javascript, como AngularJS, Node.js e React.

Back End

Além das tecnologias usadas no navegador quase sempre é necessário usar linguagens de programação que alteram a construção de páginas e aplicativos no lado do servidor. O acesso a um banco de dados é a utilização mais comum. As mais empregadas são o PHP, Java, Python, Ruby on Rails e ASP.Net. Cada uma delas oferece um número de plataformas, cada em com suas vantagens e desvantagens, como agilidade de desenvolvimento e velocidade de resposta das páginas. As plataformas são basicamente ambientes desenvolvidos para resolver problemas determinados. Por ex., o PHP é a base de CMSs como o WordPress, útil para a construção de blogs e exibição de textos, ou desenvolvimento de sites de vendas online. O Python é usado na plataforma Django, criado e muito empregado nos sites de jornalismo, onde as atualizações devem ser rápidas e constantes. Todas essas tecnologias demandam algum tempo de aprendizado.

A Arquitetura básica da Web

Partindo do usuário, a web é vista primeiro em um navegador, como o Firefox, Chrome ou Safari. O navegador envia uma URL para a rede e recebe em resposta páginas HTML, arquivos de estilo CSS, arquivos Javascript e de multimídia, como áudios e vídeos. O navegador é um aplicativo que pode agrupar esse conteúdo e apresentá-los de forma compreensível. Navegadores modernos podem exibir outros formatos de arquivo, como pdf e planilhas, nativamente ou por meio de plugins. Além disso eles podem interpretar e executar código javascript, também recebidos do servidor.

 

A requisição do cliente (o navegador) contém o endereço do servidor que são computadores dedicados à esse serviço em diversas partes do mundo. O servidor recebe a solicitação e monta uma resposta. Para isso ele pode usar diversas tecnologias diferentes, acesso a banco de dados, código de frameworks montadores de páginas, etc. O servidor pode, por sua vez, acessar outros servidores para montar o conteúdo que será enviado para o cliente. O resultado será uma página em formato HTML gerada pelo servidor e apropriada para ser exibida.

 

Para a comunicação entre cliente e servidor é usado o HTTP, um protocolo de transferência de hipertexto que define como dados devem trafegar na rede. O HTTPS é um aperfeiçoamento que adiciona uma camada de segurança entre a emissão e resposta. Páginas HTML enviadas pelo servidor podem ser estáticas, enviadas como estão gravadas, sem processamento. O mais comum hoje é que as páginas sejam dinâmicas, montadas por solicitação, processadas por código de programa, geralmente ASP ou .NET, Java, Rails ou  Python. Um servidor de aplicativos é o mecanismo que executa a lógica de negócios no lado do servidor que, em geral, está separado do servidor de páginas.

Tabela de cores Html e CSS


As bibliotecas gráficas do Python, Matplotlib, Seaborn e Bokeh aceitam cores no sistema css e a maioria dos nomes ou shortcuts. O código hexadecimal é formado por 3 números, de 0 até 255 (ou 00 até FF), para daterminar a intensidade das cores R, G, B (vermelho, verde, azul). Dessa forma FFFFFF representa (255, 255, 255), ou branco; 000000 representa (0, 0, 0) ou preto. FF0000 é vermelho puro, 00FF00 é verde puro, 0000FF é azul puro. Além disso se pode utilizar o parâmetro alpha=a, onde 0 ≤ a ≤1 para a opacidade da cor, sendo 1 opacidade máxima.

Cores podem ser definidas como:

  • no formato hexadecimal (como #123456), com strings do CSS4 rgb(), rgba() ou hsl(): como rgb(0 127 0 / 1.0), rgba(255, 0, 127, 0.6) ou hsl(60deg 100% 50% / 1.0).
  • como tupla de inteiros (r, g, b), onde r, g, b são inteiros entre 0 e 255.
  • como a tuple (r, g, b, a), onde r, g, b são inteiros entre 0 e 255 e a é número de ponto flutuante entre 0 e 1.
  • um inteiro sem sinal representando RGBA values no padrão 0xRRGGBBAA, 0xffff00ff ou 0xff0000ff.

Segue uma tabela com as cores em código hexadecimal e seu nome.

Cor Hexadecimal Html/CSS Cor Hexadecimal Html/CSS Cor Hexadecimal Html/CSS
#000000 Black #000080 Navy #00008B DarkBlue
#0000CD MediumBlue #0000FF Blue #006400 DarkGreen
#008000 Green #008080 Teal #008B8B DarkCyan
#00BFFF DeepSkyBlue #00CED1 DarkTurquoise #00FA9A MediumSpringGreen
#00FF00 Lime #00FF7F SpringGreen #00FFFF Aqua
#00FFFF Cyan #191970 MidnightBlue #1E90FF DodgerBlue
#20B2AA LightSeaGreen #228B22 ForestGreen #2E8B57 SeaGreen
#2F4F4F DarkSlateGray #2F4F4F DarkSlateGrey #32CD32 LimeGreen
#3CB371 MediumSeaGreen #40E0D0 Turquoise #4169E1 RoyalBlue
#4682B4 SteelBlue #483D8B DarkSlateBlue #48D1CC MediumTurquoise
#4B0082 Indigo #556B2F DarkOliveGreen #5F9EA0 CadetBlue
#6495ED CornflowerBlue #663399 RebeccaPurple #66CDAA MediumAquaMarine
#696969 DimGray #696969 DimGrey #6A5ACD SlateBlue
#6B8E23 OliveDrab #708090 SlateGray #708090 SlateGrey
#778899 LightSlateGray #778899 LightSlateGrey #7B68EE MediumSlateBlue
#7CFC00 LawnGreen #7FFF00 Chartreuse #7FFFD4 Aquamarine
#800000 Maroon #800080 Purple #808000 Olive
#808080 Gray #808080 Grey #87CEEB SkyBlue
#87CEFA LightSkyBlue #8A2BE2 BlueViolet #8B0000 DarkRed
#8B008B DarkMagenta #8B4513 SaddleBrown #8FBC8F DarkSeaGreen
#90EE90 LightGreen #9370DB MediumPurple #9400D3 DarkViolet
#98FB98 PaleGreen #9932CC DarkOrchid #9ACD32 YellowGreen
#A0522D Sienna #A52A2A Brown #A9A9A9 DarkGray
#A9A9A9 DarkGrey #ADD8E6 LightBlue #ADFF2F GreenYellow
#AFEEEE PaleTurquoise #B0C4DE LightSteelBlue #B0E0E6 PowderBlue
#B22222 FireBrick #B8860B DarkGoldenRod #BA55D3 MediumOrchid
#BC8F8F RosyBrown #BDB76B DarkKhaki #C0C0C0 Silver
#C71585 MediumVioletRed #CD5C5C IndianRed #CD853F Peru
#D2691E Chocolate #D2B48C Tan #D3D3D3 LightGray
#D3D3D3 LightGrey #D8BFD8 Thistle #DA70D6 Orchid
#DAA520 GoldenRod #DB7093 PaleVioletRed #DC143C Crimson
#DCDCDC Gainsboro #DDA0DD Plum #DEB887 BurlyWood
#E0FFFF LightCyan #E6E6FA Lavender #E9967A DarkSalmon
#EE82EE Violet #EEE8AA PaleGoldenRod #F08080 LightCoral
#F0E68C Khaki #F0F8FF AliceBlue #F0FFF0 HoneyDew
#F0FFFF Azure #F4A460 SandyBrown #F5DEB3 Wheat
#F5F5DC Beige #F5F5F5 WhiteSmoke #F5FFFA MintCream
#F8F8FF GhostWhite #FA8072 Salmon #FAEBD7 AntiqueWhite
#FAF0E6 Linen #FAFAD2 LightGoldenRodYellow #FDF5E6 OldLace
#FF0000 Red #FF00FF Fuchsia #FF00FF Magenta
#FF1493 DeepPink #FF4500 OrangeRed #FF6347 Tomato
#FF69B4 HotPink #FF7F50 Coral #FF8C00 DarkOrange
#FFA07A LightSalmon #FFA500 Orange #FFB6C1 LightPink
#FFC0CB Pink #FFD700 Gold #FFDAB9 PeachPuff
#FFDEAD NavajoWhite #FFE4B5 Moccasin #FFE4C4 Bisque
#FFE4E1 MistyRose #FFEBCD BlanchedAlmond #FFEFD5 PapayaWhip
#FFF0F5 LavenderBlush #FFF5EE SeaShell #FFF8DC Cornsilk
#FFFACD LemonChiffon #FFFAF0 FloralWhite #FFFAFA Snow
#FFFF00 Yellow #FFFFE0 LightYellow #FFFFF0 Ivory
#FFFFFF White