Desenvolvimento Web [Versão 5 Maio/2019] Professor Emiliano S. Monteiro
API REST (PHP) Professor Emiliano S. Monteiro
API REST Significa Representation State Transfer. É um estilo de desenvolvimento ou arquitetura de aplicações web. É uma API que define um conjunto de funções que recebem requisições para processamento e enviam respostas via HTTP GET e POST. As API REST usam o protocolo HTTP, portanto podem ser usadas por qualquer linguagem. Uma API REST torna cliente e servidor independente. Exemplo de empresas que usam REST: Google, Bing, Magento, DropBox, Facebook, etc. Um exemplo é o uso de requisições http no twitter para pegar 5 mensagens com a palavra "java. Foi desenvolvida como uma dissertação de doutorado pelo Dr. Roy Fielding. Exemplo: https://www.mulesoft.com/what-we-do
URL + parâmetros da API para os métodos Browser no desktop, Apicação desktop, PWA, aplicação nativa mobile, navegador mobile, etc. O cliente pode ser escrito em qualquer linguaem (C#, Java, ObjectPascal, PHP, Ruby, etc...) API REQUEST Response (json, XML...) API get post Put, delete.htaccess Arquivo de configuração usado pelo Apache, quando colocado no diretório ele é carregado pelo apache e usado para alterar configurações globais do apache como redirecionamentos. http REQUEST http response Dados Servidor separados ou não! Servidor MySQL (exemplo) curl é uma ferramenta para transferir dados de ou para um servidor, usando um dos protocolos suportados (ARQUIVO, FTP, FTPS, HTTP, HTTPS, IMAP, IMAPS, LDAP, LDAPS, POP3, SMB, SMBS, SMTP, SMTPS e TFTP). O comando é projetado para funcionar sem interação do usuário. O servidor pode ser escrito em qualquer linguaem (C#, Java, ObjectPascal, PHP, Ruby, etc...)
API REST PHP
Extensões de navegador Professor Emiliano S. Monteiro
Extensões de navegador São pequenos programas que modificam e ampliam a capacidade dos navegadores adicionando novas características e funcionalidades. São desenvolvidas utilizando a WebExtensions API, que é uma API para vários navegadores. As extensões podem ser desenvolvidas utilizando HTML, CSS e Javascript.
Arquivos borda manifest.json borda.js icons app_icon.png
Material design Professor Emiliano S. Monteiro
Inserir o Material Design no CSS: <link rel="stylesheet" href="https://unpkg.com/bootstrap-materialdesign@4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384- wxzngjnexng1nfsbm0ugrlfmqpwswr3lds2veinahp8n0zjw9vwsopbjv2x7wcvx" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384- KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js" integrity="sha384- fa23zrq3g/j53melwqvjegjzu0sts+svzg8fxvwp+kjq1lwfaokcuoysnlkjc33u" crossorigin="anonymous"></script> <script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-causukpeqafajspkdjv3z9t8e7rlpj1up0lkm/+ndtsarrovku069alsrpkkfbz9" crossorigin="anonymous"></script> <script>$(document).ready(function() { $('body').bootstrapmaterialdesign(); });</script>
VueJS, React e Angular Professor Emiliano S. Monteiro
Fonte: https://codeburst.io/angular-vs-react-vs-vue-f470f5b74bf6
Static site generator Professor Emiliano S. Monteiro
Low Code Development Professor Emiliano S. Monteiro
Fonte: https://www.pcmag.com/roundup/353252/the-best-low-code-development-platforms
Single Page Applications (SPA) Professor Emiliano S. Monteiro
SPA Os aplicativos da Web de página única são construídos em torno do conceito de reescrever dinamicamente o conteúdo dessa única página. Isso é diferente do carregamento de páginas pré-renderizadas do servidor. Exemplo: Google Maps Fonte figura: https://msdn.microsoft.com/en-us/magazine/dn463786.aspx
SPA Em uma página convencional, a cada chamada da aplicação ao servidor, o servidor deve preparar o HTML que será enviado ao cliente. Isso provoca uma atualização no lado cliente. Em uma abordagem SPA, após o 1º carregamento, as interações ocorrem através de chamadas AJAX e o retorno de dados é via JSON, Texto, desta forma a página pode se atualizar dinamicamente sem um carregamento total. Fonte figura: https://msdn.microsoft.com/en-us/magazine/dn463786.aspx
SPA SPA permite que as aplicações fiquem mais fluídas e responsivas. Não existe a necessidade de reload de página. A arquitetura da página pode ser separada em apresentação (HTML) e lógica da aplicação (AJAX+JSON). Em uma aplicação SPA toda interação do usuário ocorre no lado cliente através de Javascript e CSS. O cliente não necessita saber como o servidor no back end implementa o tratamento de requisições. Cliente e Servidor são independentes.
Controllers Model Views
AJAX Significa: Asynchronous JavaScript and XML O Ajax usa XHTML para conteúdo, CSS para apresentação, Document Object Model e JavaScript para exibição de conteúdo. O AJAX junto com o JavaScript realizar a solicitação ao servidor, interpreta os resultados e atualiza a tela atual. XML, JSON e texto simples são usados para receber dados do servidor. AJAX é independente servidor da web. É orientado a dados.
Progressive Web Apps Professor Emiliano S. Monteiro
PWA É uma aplicação baseada nos seguintes conceitos: a) confiável (pode ser carregada independente do estado da rede. b) rápida (responde rapidamente às interações do usuário) c) rodam em tela cheia d) não necessitam de uma loja de aplicativos. e) rodam na tela inicial do sistema. pode receber notificações push. f) possuem um arquivo chamado App Manifest que controla vários aspectos da aplicação (como a aplicação aparece e é iniciada, ícones, orientação de tela, etc). g) Uma aplicação PWA é composta por um arquivo manifest.json é ele quem faz a instalação no celular. h) Deve possuir um arquivo index.html. i) Um Service worker, é um script executado em 2º plano atendendo as requisições da aplicação, desta forma a aplicação funciona off-line. Ele intercepta requisições e recupera dados do cache, se estes não existirem dai realiza um request.
WebAssembly Professor Emiliano S. Monteiro
WebAssembly (WASM) É um aprimoramento ao JavaScript, o código pode ser implementado em wasm e importado como um módulo JavaScript. WASM define um novo formato binário que pode ser lido (como um texto). Os navegadores podem entender o formato binário, receber código menor e montar páginas mais rápidas, desta forma WASM pode ser mais rápido que JavaScript. Permite o uso de primitivas incluindo uma ampla gama de tipos e operações, controle de fluxo, chamadas, etc, WebAssembly define uma Abstract Syntax Tree (AST) ou Syntax Tree, é a representação da estrutura do código fonte escrito em uma determinada linguagem... a AST é armazenada em formato binário. Poderá ser usado com threads, processamento paralelo, processamento de linguagens como C/C++/Rust. Blazor é framework.net para uso do C# e WASM.
WebAssembly (WASM) Blazor: Usa o WASM para compilar o C# para formato binário para sua execução em browsers. Mono: é um runtime.net que pode ser compilado para WASM. RAZOR: é uma sintaxe de marcação para que código (VB ou C#) possa ser incorporado em páginas HTML, permitindo que código possa rodar no servidor. Características do Razor: Blocos de código são colocados entre @ {...} Expressões inline (variáveis e funções) começam com @ As declarações de código terminam com ; Variáveis são declaradas com a palavra-chave var Cordas são colocadas entre (aspas) O código c # é case sensitive Os arquivos C # têm a extensão.cshtml Exemplo de Razor: @{ var minhamensagem = Ola Mundo"; } <p> O valor da mensagem é: @minhamensagem</p>
https://d2jta7o2zej4pf.cloudfront.net/
Microsoft Sharepoint Professor Emiliano S. Monteiro
SharePoint
SharePoint
Hospedagem gratuítas Professor Emiliano S. Monteiro
Referências
Referências https://www.ibm.com/support/knowledgecenter/en/ssgmcp_5.3.0/com.ibm.cics.ts.webse rvices.doc/concepts/dfhws_definition.html https://developer.mozilla.org/en-us/docs/web/javascript/reference/methods_index https://docs.microsoft.com/en-us/scripting/javascript/reference/javascript-methods https://thatjsdude.com/interview/js1.html http://javascript-html5-tutorial.com/algorithms-and-data-structures-in-javascript.html https://getbootstrap.com/docs/4.1/layout/grid/ http://helenaboitsova.com/uikit-grid-accordance-to-bootstrap-grid/ https://www.formget.com/bootstrap-grid/ https://www.c-sharpcorner.com/article/bootstrap-grid-system/