Html 5 datainfo

HTML5
CSS3, AngularJS, JavaScript, REST, Sass/{less}
Thiago Vinícius Vieira

Ementa
● HTML5
● Semântica
● Boas práticas
● SEO
● Acessibilidade
● CSS3
● Design responsivo
● Javascript orientado a objetos

Ementa
● Modularização e organização de código
● JS
● CSS
● Mobile First
● Uso de MVC com AngularJS
● Utilização de pré-compiladores Sass/{les}
● Utilização de APIs RESTfull com Node.js

Pesquisa recomendada obrigatória

HTML5 - semântica
● Tudo começa com o: <!DOCTYPE html>
● Essa é a chave de tudo: SEO, Acessibilidade, boas práticas...
©
LOGO

HTML5
● Exemplo “nav”: http://www.apple.com/br/safari/

HTML5
● Surgem novos “types” (inputs):

HTML5
● http://caniuse.com/#search=semantic
● http://validator.w3.org

Boas práticas
● HTML5 para vídeos
● evite usar tags com letras maiúsculas => legibilidade
● rótulos e descrições, código em geral, nome de métodos...
● nomes específicos e genéricos

Boas práticas
● Imagine um “id” com o nome “UD”.
● UD = Usados diversos?
● UD = Usando de novo?
● UD = Universo distinto?
● UD = Ultra Downloads?
● UD = University of Delaware
● Na cabeça de quem colocou isso, na verdade UD = “utilidade doméstica”.

Boas práticas
● Escreva código limpo, indentado e bem comentado.
● Evitar:
● (o não fechamento de tags):
<H1>Heading</h1>
<p>some text.....
● Definir estilos fora do .css
<h1 style="color:blue;">Isso é mesmo necessário?</h1>

Boas práticas
● Insira as tags de “stylesheet” para o “head” => Renderização mais
rápida.
● JS com funcionalidade para uma página específica => imediatamente
antes de fechar <body> => Carregar mais rápido.
● Utilize o web storage em vez de “cookies”:
● Show me the code! ->http://jsfiddle.net/CUt43/
● Use as transições do CSS3 em vez de animação JavaScript.

Boas práticas
● Utilize técnicas de compatibilidade para navegadores antigos:

Boas práticas
● Utilize o atributo “alt”, condizente com a realidade : SEO (Search
Engine Optimization); ele também permite que a sua página possa
ser lida por um programa de fala ou braile (acessibilidade).
Alt = inseto em uma folha, inseto sob uma
folha

Boas práticas – web workers

Boas práticas – web workers
● Imagine um problema de timeout ao fazer upload e processamento de
um arquivo texto em uma aplicação
● Uma possível solução seria utilizar um método assíncrono que ficará
responsável por fazer o processamento do arquivo não bloqueando
assim o request da página.
● Assicrono = não sincrono = não precisa seguir uma sequência
obrigatória

SEO
● SEO é praticamente uma ciência, tanto é que existem profissões
específicas para análise e desenvolvimento de técnicas de
otimização de buscas (e bem remuneradas, por sinal).
● Domínios antigos -> indexação -> valor $$

SEO
● Utilize os elementos de segmentação (header, hgroup, article,
section...)
● Use tags de títulos únicos e descrições para cada página do seu
website,
● Se mudar para um novo website ou URL use o recurso 301
(redirecionamento) para novas páginas. O mesmo vale para quem
tem múltiplos domínios: use apenas um como principal e redirecione
os outros. Isso vai gerar “backlinks” e evitar a duplicação.
● Use microdados. Esse é um bom (ótimo) método que pode melhorar
suas taxas de cliques.

SEO
● “One way Google’s algorithms determine the context of content on a
page is by looking at the page’s headings. The way semantic markup
is used throughout a site, including h1, h2, and h3 tags, helps us to
understand the priorities of a site’s content” (Google Webmaster
Central blog post)
● “Uma das formas dos algoritimos do Google determinar o contexto de
um conteúdo de uma página é olhando os “headings” =>tags h1,h2...
A forma que a semântica é utilizada no site, incluindo as tags h1,
h2,h3, nos ajuda a entender a prioridades de conteúdo do site.”

SEO
● Usar ou não o h1? Muito ou pouco? É spam ou não? Há
controvérsias...

SEO
● www.doceriadavovo.com.br/produto?=1334 não é amigável. Já a URL
www.doceriadavovo.com.br/bolo-prestigio-diet é amigável.

SEO
● Apesar de ainda não se saber o real efeito do “Curtir”, “Retweets”,
“+1”, sabe-se que o Google vem trabalhando cada vez mais para
considerar estes dados no posicionamento dos sites.

SEO
● Divulgue seu link (“backlinks”) porém não faça nenhuma alteração
muito rápida, senão o Google poderá estranhar e achar que você esta
utilizando as técnicas de Black Hat.

SEO
● Não se apresse: os resultados virão.
● SEO é um “processo” de casamento com o Google, e como todo
relacionamento você precisa conquistar a confiança (page rank).

Acessibilidade
● Audição
● Mobilidade
● Cognição
● Visual

Acessibilidade
● Semântica é muito importante
● (Obviamente) os controles de vídeo e áudio somente serão úteis se
os usuários puderem perceber o que está se passando durante a
reprodução
<video width="320" height="240“ controls>
<source src=“movie.mp4” type="video/mp4">
<source src=“movie.ogg” type="video/ogg">
<track src=english.vtt kind=captions srclang=en label=“”>
<track src=french.vtt kind=captions srclang=fr label=“”>
<p>Texto alternativo aqui com link para download do vídeo</p>
</video>

Acessibilidade
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_all

Acessibilidade
<figure>
<canvas id="example" width="260" height="200"></canvas>
<figcaption>
<span class="brush: html">
<a
href="http://en.wikipedia.org/wiki/Rectangle">Retângulo</a> com uma borda preta. No
fundo há um círculo na cor rosa.Sobrepondo parcialmente o círculo há um quadrado
na cor verde e um triângulo na cor púrpura e ambos são transparentes de modo que o
círculo pode ser visto atrás deles.
</span>
</figcaption>
<figure>

Acessibilidade
http://www.html5accessibility.com
/

Acessibilidade
● WAI-ARIA (Accessible Rich Internet Applications) = “Aplicações de
Internet Ricas em Acessibilidade”
● www.w3.org/WAI/intro/aria

Acessibilidade
● Além disso, devemos priorizar a utilização e divisão de folhas de
estilo para controle de tipos de letra, e eliminação do elemento FONT.

CSS3
● Antes de tudo! Conceitos básicos, porém importantes:
● . (ponto) => uma classe => aplicada a diversos elementos (bootstrap)
● # => um elemento específico receberá aquele estilo (id)
● > elementos filhos

CSS3
● .work-container h3 =>

CSS3
● .work-container h3 =>qualquer tag h3 que esteja dentro de um outro
elemento com a classe = work-container

CSS3
● Principais novidades:
● Gradiente em textos e elementos;
● Bordas arredondadas;
● Sombras em texto e elementos;
● Controle de rotação*;
● Controle de perspectiva;
● Animação (ex: transições)*;
● É o fim do Flash e do Photoshop!
*Reduz o JavaScript

CSS3
● Leituras recomendadas obrigatórias:
● http://css3generator.com/
● http://www.w3schools.com/css/css3_intro.asp

CSS3
● Opacity (transparência) -> 0.0 signifca totalmente transparente e 1.0
signifca totalmente opaco. É possível utilizá-lo inserindo o número ao final
do “rgba” ex. (rgba(0,255,0,0.5).
● Hsl (hue, saturation, lightness) com canal alpha (opacidade/transparência)

CSS3
● Background-image (várias imagens separadas por vírgula)

CSS3
● Arredondamento de bordas

CSS3
● Sombreamento de elementos (box-shadow e text-shadow)

CSS3
● Sombreamento de elementos (box-shadow e text-shadow)
● Em alguns navegadores algumas propriedades ainda podem estar
em fase de “testes” e neste caso elas estarão acessíveis da seguinte
forma:
● -moz-box-shadow
● -webkit-box-shadow
● -o-box-shadow
● -ms-box-shadow

CSS3
● Com o @font-face podemos associar fontes diferentes das existentes
no Sistema Operacional. Após associado estará disponível na
propriedade font-family.

CSS3
● Obs: Alguns navegadores suportam apenas o .eot e outros suportam
alguns adicionais (.ttf, .otf). Entretanto os navegadores estão em
constante atualização, é necessário pesquisar e verificar as
especificações antes.

CSS3
● Rotate -> possibilidade de rotacionar um elemento em determinado
ângulo

CSS3
● Scale -> dimensionar a escala de um elemento com em proporções
(X e Y)

CSS3
● Se apenas um parâmetro for passado, este será aplicado tanto para o X
quanto para o Y. O mesmo se aplica à diversas outras propriedades, mas
não é regra, ou seja não vale para todas;
● Exemplo: a propriedade “Margin” é subdivida em top, right, bottom e left:
● margin:25px 50px 75px 100px;
● margin:25px 50px 75px (right e left = 50px);
● margin:25px 50px (top e bottom = 25px);
● margin:25px (todas = 25px);

CSS3
● Skew -> inclinação de elementos com base nas posições X e Y
● Exceção: Neste caso se for passado apenas um parâmetro o valor de Y
será assumido como 0.

CSS3
● Translate -> mover um objeto ao longo do eixo especificado. É aceito
em px, em %, etc.

CSS3
● Como resolver a questão:
● Usar o http://jsfiddle.net
● Background – informação inútil, não faz sentido a decorar os códigos das
cores;
● Fator determinante para responder a questão é o atributo “border-radius”
(border-top-left-radius, border-top-right-radius, border-bottom-right-radius,
border-bottom-left-radius).

Design responsivo <> adaptativo
● Design responsivo = design ajustável
● Responsivo = que responde (interface);
● Adaptativo = código foi adaptado;
● Adaptativo = página se adapta a diversos dispositivos
● Adaptativo responsivo = página se adapta (ajusta) a diversos
dispositivos
● Todo design adaptativo é responsivo, mas nem todo responsivo
é adaptativo.

Design responsivo
● É a técnica de criar páginas para a web que se adaptem ajustem a
diferentes resoluções, telas, dispositivos, sem precisar criar uma
página específica para cada situação, mantendo sempre a
acessibilidade e a usabilidade da página.

Design responsivo
● http://demo.twebly.com/responsibly

Design responsivo
● Por quê?

Design responsivo
● Hoje é um desafio desenvolver um css que renderize em todos os
navegadores.
● Economia de código é também não precisar definir diversas folhas de
estilos para cada resolução.

Design responsivo
● Utilize imagens fluidas (sem números fixos), isto é, utilize a
propriedade ‘max-width: 100%’ em seus estilos, desta forma imagens
podem se adaptar de acordo com o layout.
● “cortar” laterais da imagem, fazendo com que ela fique contida na div
a qual pertence utilizando a propriedade ‘overflow:hidden;’

Design responsivo
● Um iPhone em modo retrato, por exemplo, possui 320px de width
(largura). Se você desenvolver um CSS para o smartphone da Apple
basta utilizar a seguinte Media Query:
@media only screen and (max-width: 320px){
}

Design responsivo
● Qual é o foco? Garantir que o usuário tenha uma excelente
experiência ao acessar o site de um dispositivo móvel. Ou seja,
realizar os procedimentos necessários através do menor número de
cliques possíveis, as informações precisam estar visíveis e
adequadas à tela, os botões precisam ser de um tamanho ideal a fim
de viabilizar o clique.

Design responsivo
● Resumindo... Sua função é proporcionar:
● Ótima experiência de visualização
● Fácil leitura e navegação com um mínimo de redimensionamento

Javascript orientado a objetos
● Por padrão já tem uma capacidade forte a OO;
● Pense diretamente em objetos (afinal, quase tudo já o é);
var tt = new Tooltip();
tt.init();
function Tooltip() {
this.init = function() {
//..
}
}

● Problema => sempre que instanciarmos um novo objeto, a função init
será novamente criada na memória (isso é bom?)

● Nem sempre...
● Para resolver então... Eis que surge o “prototype”
● Mas afinal o que é? É uma boa ótima prática recomendada
obrigatória.
● Se adicionarmos o método init ao protótipo do objeto, todas as
instâncias herdarão esse método
● O objetivo é não encher a memória com declarações repetidas
(performance)

function Tooltip() {}
Tooltip.prototype.init = function() {}

var tweet = {
'user': 'tuitando',
'message': 'Afinal, como é Orientação a Objetos em JavaScript ?’,
'date': '2013-05-17‘
};
console.log( tweet.user );
console.log( tweet.message );

Modularização e organização de código
● Modularizar => quebrar um problema em pequenas partes => cada
uma dessas partes será responsável pela realização de uma etapa
do problema. (Não esquecer do conceito de SOLID).
● Uma função deve fazer exatamente o que foi destinada a fazer, e
repassar o resultado à próxima função que realizará outro tipo de
procedimento.
● Visam facilitar a legibilidade e reuso do código e consequentemente
uma posterior manutenção.

JS
● Não tem mecanismos internos para particionar os elementos de
código fonte, diferentemente de outras linguagens como o Java com
seus packages e o C# com seus Namespaces
● Mas nem tudo está perdido... podemos importar e incluir diretivas
para trazer dependências.

JS
define(["util"], function (util) {
return {
date: function(){
var date = new Date();
return util.format(date);
}
};
});

JS
● Aqui definimos um módulo que diremos que vive em “app/people.js”.
Ele precisou de dois módulos, “models/Person”, e “my/utils
● 1 módulo = união de um modelo com um utilitário (utils)

JS
● Bônus, divida a aplicação em widgets => http://dojotoolkit.org/
● É compatível com o require.js
● E ainda, pode melhorar com o CoffeeScript (.coffee => É
simplesmente uma linguagem que, quando compilada, gera
Javascript)

CSS
● Dividir o CSS do seu site em vários arquivos, onde você ganha mais
agilidade em uma possível atualização, o site no browser do usuário
também carrega mais rápido, pois evita de se carregar CSS
desnecessário.

CSS
● Ah entendi! Então posso modularizar também o CSS? Não faça isso!
Há controvérsias, mas não é considerada uma boa prática, pois isso
impacta negativamente no SEO.

CSS
● Tá... então modularizo ou não?

CSS
● Se o objetivo for carregar estilos específicos para uma página, sim!

Mobile first
● “Estamos observando agora um valor de pagamentos diários totais
(TPV) de US$ 10 milhões – um grande aumento com relação aos
US$ 6mi verificados em março. E Atualmente temos 8 milhões de
clientes que efetuam compras regularmente a partir de seus
telefones celulares, 2 milhões a mais que o valor verificado
anteriormente”.

Mobile first
● Começar a desenvolver e planejar projetos web primeiramente para
dispositivos móveis e somente depois para desktops/notebooks.
● Trata-se de uma ideologia de desenvolvimento, e como toda
ideologia, vem acompanhada de princípios que devem ser seguidos
para atingir o resultado. (ex: TDD)

Mobile first
● As capacidades técnicas são mais interessantes. Com o mobiles
você pode brincar com o GPS, multitouch, etc.
● Ampliar a experiência do usuário para um patamar que o desktop
nunca terá.
● Informação demais prejudica.

Mobile first
● Nunca use o método “aperta-pra-caber”, é totalmente contrário aos
princípios do mobile first. O mobile first é justamente a seleção e
moldagem da tela a fim de que traga somente o essencial ao usuário.
● http://responsejs.com/

Mobile first
● Utilizar símbolos (caracteres especiais) para evitar carregar imagens
desnecessárias.
● “★” para criar uma estrela preenchida (★) e “☆” para
apresentar estrelas vazias (☆) => classificações
● Utilizar o “tel”: <a href="tel:04733333333">047 3333-3333</a>
● Em um iPhone por exemplo, ao clicar neste link já seria iniciada uma
chamada.

Mobile first
● Geolocalização =
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_geolocati
on

Mobile first
● Reduzir chamadas HTTP - Utilizando "Image Arrays“
● #nav li a {background:none no-repeat left center}
● #nav li a.item1 {background-image:url('../img/image1.gif')}
● #nav li a:hover.item1 {background-image:url('../img/image1_over.gif')}
● #nav li a.item2 {background-image:url('../img/image2.gif')}
● #nav li a:hover.item2 {background-image:url('../img/image2_over.gif')}

Mobile first
● #nav li a {background-image:url('../img/image_nav.gif')}
● #nav li a.item1 {background-position:0px 0px}
● #nav li a:hover.item1 {background-position:0px -72px}
● #nav li a.item2 {background-position:0px -143px;}
● #nav li a:hover.item2 {background-position:0px -215px;}

Mobile first
● Usar menos JS, e quando usar, otimizá-los, manter a página leve.
● Uma aplicação web offline utiliza um arquivo de manifesto cache. O
que é um arquivo manifesto? É uma lista de todos os recursos que a
sua aplicação web irá precisar acessar quando estiver desconectada
de uma rede.

Mobile first
● E onde eu crio esse arquivo? Em qualquer editor de texto (notepad,
notepad++), porém deve ser observada a extensão do arquivo ao
salvá-lo.

Uso de MVC com AngularJS
● É um framework MVC Javascript, para aplicações web dinâmicas,
suporta HTML5,extende o HTML (diretivas), usa abordagem
declarativa para expressar lógica nas views, injeção de
dependências...

● DOM = Modelo de Objetos de Documentos = elementos de um
documento HTML (hierarquia)

● Evite o uso do ng-init. As inicializações de variáveis/modelo devem
ser feitas dentro de controladores.
● Exemplo: “Deve-se exibir um text área e garantir que o botão enviar
só funcione quando o usuário preencher no mínimo 10 caracteres”

Uso de MVC com AngularJS – caso
prático
● No arquivo js

prático
● No arquivo html

prático
● E se eu quiser adicionar um novo empregado nessa lista?
● Adiciona-se no EmpresaController:

prático
● Cria-se um form no HTML:

prático
● Ordenando uma lista:

prático
● Realizando pesquisa:

● Isso tudo é client-side, e como fica a comunicação com o server-side?
● Utiliza-se então os serviços $http e $resource para esta
comunicação.

● Cada caso é um caso, avalie bem antes de decidir que abordagem
utilizar. Existem relatos positivos e negativos quanto ao uso de
frameworks MVC client-side.

● E o banco?
● Webservice, asmx, APIs...

Uso de MVC com AngularJS - rotas
● No app.js

● No controller.js

Uso de MVC com AngularJS - estrutura

Utilização de pré-compiladores
Sass/{less}
● Basicamente é um interpretador com uma linguagem própria (ou
melhor script) que gera arquivos de estilos (css) como resultado final.
Qual a vantagem disto? Estender o CSS. Evitar repetição de código.
Utilizar variáveis...
● Então pré-compiladores tornam o CSS mais complicado?
● Não! A adição de variáveis, condições, loops e operações matemáticas
tornam o trabalho mais fácil e eficiente.

Sass/{less}
● Além da adição de lógica ao CSS, um recurso muito útil é a utilização
de partials (parciais), que são arquivos que não são compilados
diretamente e que devem ser importados a partir de um arquivo que
será compilado diretamente => modularização => organização

Sass/{less}

Sass/{less}
● // declara a variável
$brand-color: #00a99d;
.a {
color: $brand-color; // o resultado final será color: #00a99d;
}

Sass/{less}
● Já pensou ter que mudar a cor de destaque em todo o projeto no final
do desenvolvimento do mesmo? (Só com “find and replace” mesmo, e
ainda assim...)
● Nada de pesquisar em 3.000 linhas de código para isto.

Sass/{less}
● Mixins são parecidos com variáveis, porém ao invés de armazenar
somente um valor, eles armazenam blocos de códigos e podem
receber parâmetros. É um recurso extremamente útil, que pode
poupar muito tempo e evitar repetições.

Sass/{less}
@mixin vendor($property, $value...){
-webkit-#{$property}:$value;
-moz-#{$property}:$value;
-ms-#{$property}:$value;
-o-#{$property}:$value;
#{$property}:$value;
}

Sass/{less}
.a {
color: $brand-color;
display: inline-block;
@include (transition, opacity 0.5s ease);
}

Sass/{less}
● Fluidez => proporção e fração
$gutter: 16px;
.panel {
min-height: $gutter*4;
padding: $gutter/2;
}

Sass/{less}
Para utilizar o LESS em ambiente de desenvolvimento basta adicionar
o arquivo .less no <head> do documento, como é feito com o próprio
css: <link rel="stylesheet/less" type="text/css" href="styles.less" /> e
adicionar o less.js também no <head> do seu documento: <script
src="less.js" type="text/javascript"></script>. Porém não é aconselhável
utilizar este método em ambiente de produção (quando a página vai ao
ar), o ideal é compilar via Node.js e adicionar o css resultante no seu
documento.

Sass/{less}
Para isto, instale o Node.js em sua máquina (Windows, Linux ou Mac),
após instalar o Node.js, abra o terminal e digite npm install -g less.
Agora navegue para onde estão os seus arquivos .less e digite lessc
styles.less > styles.css. (Estes comandos são executados em Linux e
podem sofrer variações dependendo da distribuição)

Sass/{less}
● Se você tem pesadelos quando alguém cita linha de comando
(terminal), existem alguns aplicativos que fazem todo o "trabalho sujo"
por você:
● Koala (Opensource - LESS e SASS );
● Prepros (Opensource - LESS, SASS e Stylus);
● CodeKit (Pago - LESS, SASS e Stylus);
● Scout (Opensource - SASS)

Sass/{less}
● Mas então, qual pré-compilador escolher?
● Depende muito do projeto e preferências pessoais. Em termos de
recursos, todos os pré-compiladores estão em um nível semelhante,
qualquer um será uma boa opção.

Sass/{less}
● O LESS seria a melhor opção para quem utiliza o famoso Twitter's
Bootstrap, pois este é construído em LESS. Possui uma comunidade
bem relevante e ativa. Além disto tem a vantagem de rodar 100% em
javascript que tanto é mais "natural" para quem trabalha com front-
end quanto pode ser compilado facilmente via Node.js.

Sass/{less}
● SASS é a opção mais "madura" entre os três. Tem uma comunidade
muito ativa e que está sempre inovando. Existem excelentes
frameworks construídos em SASS (COMPASS, ZURB's Foundation e
inuit.css são ótimos exemplos), além de bibliotecas e design patterns
(modelos, padrões de design). Roda nativamente em Ruby, porém
existe uma versão escrita em C que funciona também com Node.js.

Sass/{less}
● Devo usar um pré-compilador em todos os projetos?
● É recomendado, mas é necessário um nível de maturidade (falando
de equipe) para isso. Os ganhos são muito grandes para se ignorar,
mesmo em projetos pequenos. Além da organização e das
facilidades oferecidas, é muito mais fácil reaproveitar códigos
utilizados anteriormente. Se você usa algum framework, será possível
utilizar todos os recursos dos mesmo, e o seu workflow será muito
mais eficiente. Se você não utiliza um framework, você acaba por
criar um código base, que acaba se repetindo em quase todos os
projetos.

Sass/{less}
● http://stackoverflow.com/questions/20727102/how-to-use-sass-in-
visual-studio-2013

Utilização de APIs RESTfull com
Node.js
● Porque utilizar?
● http://app.com/getfile.php?type=video&game=skyrim&pid=68
● http://app.com/files/video/skyrim/68
● SEO => links amigáveis

Node.js

Node.js
● Porque utilizar?
● http://app.com/getfile.php?type=video&game=skyrim&pid=68
● http://app.com/files/video/skyrim/68

Node.js
● A grande desvantagem da maioria das implementações REST não
suportam invocações e eventos assíncronos, e é por isso que o
Node.js é “colocado na jogada”.

Node.js
● O Node.js tem atraído ultimamente muita atenção dos meios de
comunicação, e foi muito elogiado pelo seu modelo de E/S
assíncrono, que libera o thread principal para fazer outras coisas
enquanto espera por respostas de E/S. A regra geral do Node.js é
que E/S é cara, e ele tenta reduzir a despesa forçando um modelo de
E/S assíncrono.

Node.js
● Uma API RESTful recebe alguns parâmetros, interpreta-os, monta
uma resposta e envia-a (normalmente uma quantidade relativamente
pequena de texto) de volta ao usuário.

Node.js
● Mãos à obra!
● http://nodejs.org/download/
● Instalar o Node.js pode requerer habilidades Linux e exige, além
disso, a instalação do Express (na pasta do projeto deve-se criar um
arquivo package.json):

Node.js
● De forma muito resumida, posteriormente deve-se então abrir o
arquivo server.js e ajuste o conteúdo e instalar o MongoDB (se for o
caso) e o respectivo “driver” para o Node.js.

Node.js
● é uma aplicação de código aberto, de alta performance, sem
esquemas, orientado a documentos
● Em geral, os bancos de dados orientados a documento não possuem
esquema, ou seja, os documentos armazenados não precisam
possuir estrutura em comum.

Node.js
● NoSQL = sem SQL
● http://mongodb.github.io/node-mongodb-native/api-
articles/nodekoarticle1.html
● Entidade <> registro <> documento

Node.js
● select * from pessoas where idpessoa = 4564564

Node.js
● Exposing MySQL database/table using REST
● http://stackoverflow.com/questions/4771485/exposing-mysql-
database-table-using-rest

Node.js
● Aplicação de adega (exemplo)

Node.js
● API não é WebService

Node.js
● http://appsonmob.com/nodejs-expressjs-mysql/
● https://github.com/AzureADSamples/WebAPI-Nodejs
● http://www.kdelemme.com/2014/03/09/authentication-with-angularjs-
and-a-node-js-rest-api/
● http://www.obomprogramador.com/2014/03/implementando-uma-api-
rest.html
● http://www.obomprogramador.com/2014/03/detone-usando-o-
nodejs.html

Node.js
● Create REST API on Node.js using Visual Studio
● http://debugmode.net/2014/01/23/create-rest-api-on-node-js-using-
visual-studio/

Node.js
● Combinando o Node.js à solução do Windows Azure
● http://msdn.microsoft.com/pt-br/magazine/jj190801.aspx

Html 5 datainfo

Mais conteúdo relacionado

Semelhante a Html 5 datainfo (20)

Último (19)

Html 5 datainfo