Tudo sobre CSS



CSS

Formas de utilização: externo, embutido e inline. 


O CSS pode ser incorporado no HTML de três formas: externo, embutido e inline sendo cada uma delas utilizadas com objetivos diferentes. Por ter a linguagem em cascata é interpretada pelos navegadores de acordo com a hierarquia, tendo como prioridade o css inline, depois o embutido e por último o externo. 

Falando de estilo embutido todos os códigos em CSS ficam dentro da tag <style> tendo que o estilo será aplicado somente na página que foi definido. Exemplo: 
<!DOCTYPE>
<html>
<head>
<title>Código Embutido</title>
<style TYPE="text/css">
h1 {
color: #0000FF;
font-family: verdana;
font-size: 12px;
}
</style>
</head>
<body>
<h1>CSS EMBUTIDO</h1>
</body>
</html>

O estilo inline é usado quando precisa estilizar um elemento em específico para didática e testes somente.
<!DOCTYPE>
<html>
<head>
<title>Código Inline</title>
</head>
<body>
<p style="color:red;">CSS INLINE</p>
</body>
</html>
Tipos de seletores: elemento html, ID, classe, pseudo-classe e descendente.

A classe é retrada por um ponto “.” e atribui aos seus elementos um valor/formatação que foi atribuido a class. O ID é retratado por um sinal de "#" e atribui aos seus elementos um valor/formatação definida. Pseudo-classe: Possibilita definir diferentes formatações para pseudo-classes posicionados em diferentes lugares de uma mesma página.
<!DOCTYPE>
<html>
<head>
<title>CSS</title>
<style>
#Barbara{
position:relative;
top:25px;
width:250px;
}
.Barbara{
position:relative;
top:250px;
background-color:red;
}
</style>
</head>
<body>
<div id = "Barbara">KKKKKKK</div>
<div class = "Barbara">HAHAHAHHA</div>
<div class = "Barbara">rsrsrsrsrs</div>
</body>
</html>

3.3 Propriedades de cores e fundo:

Para a definição de cores em CSS é utilizado a notação hexadecimal.
Podendo ser usado também em código RGB ou nominal, mas para por boa prática de um desenvolvedor é recomendado que use
em hexadecimal.
Obs: Os códigos hexadecimais são
iniciados pelo símbolo jogo da velha "#".

<!DOCTYPE>
<html>
<head>
<title>CSS</title>
<style>
body{
color: #FF0000;
background-color:#C0C0C0;;
}
</style>
</head>
<body>
Fatec Carapicuiba<br>
Sistemas para internet<br>
O poder das pessoas esta na atitude<br>
</body>
</html>

3.3.1 Cor do primeiro plano: color;

A cor do primeiro plano, ou para se usar alguma cor em tags HTML, é utilizado o atributo
"color".
<!DOCTYPE>
<html>
<head>
<title>CSS</title>
<style>
body{
color: #00FF00;
}
</style>
</head>
<body>
Fatec Carapicuiba
SISTEMAS PARA INTERNET
Professora CAROL
</body>
</html>

3.3.2 Cor do segundo plano: background-color;

A cor do plano de fundo é representanda por
"backgroud-color". Background = fundo color = cor.
<!DOCTYPE>

<html>

<head>

<title>CSS</title>

<style>

body{

background-color: #00FF00;

}

</style>

</head>

<body>

Fatec CARAPICUIBA

SISTEMAS PARA INTERNET

PROFESSORA CAROL GRACIOSO

</body>

</html>

3.3.3 Imagem de fundo: background-image, background-repeat, background-attachment;

background-image: Te possibilita deixar como plano de fundo, uma foto/imagem;
background-repeat: Repete a imagem atribuidaa página, movimentado-a na horizontal, vertical ou ambos;
background-attachment: a imagem será fixa ou vai rolar de acordo com o movimento da página.
3.4 Propriedades de formatação visual:
A propriedade "width" define a largura do elemento. 
A propriedade "height" define a altura do elemento. 
<!DOCTYPE>

<html>

<head>

<title>CSS</title>

<style>

img{

position:relative;

width:500px;

height:500px;

}

</style>

</head>

<body>

<img src="Babi.jpg">

</body>

</html>


3.4.2 Posicionamento: position, float, clear;

Position: Define o posicionamento do elemento.
Float: Define o posicionamento flutuante do elemento.
Clear: Define os detalhes da propriedade "float"como limpar a formatação à direita,
esquerda ou ambos os lados.

<!DOCTYPE>

<html>

<head>

<title>CSS</title>

<style>

#imagem1 {

position:relative;

left:50px;

}

#imagem2 {

float:right;

width:350px;

}

</style>

</head>

<body>

<p><img

src="http://www.livroturmadamonicajovem.blog.br/wp-content/uploads/2010/08/Pitty-grava-especial-para-a-MTV-em-Florianopolis.jpg"

id="imagem1">

A minha vida,
Eu preciso mudar todo dia
Pra escapar
Da rotina dos meus desejos por seus beijos
Os meus sonhos
Eu procuro acordar e perseguir meus sonhos
Mas a realidade que vem depois
Não é bem aquela que planejei
</p>

<p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuL3VXP7HtTOaqyGIc9XybtjAz8-UE9L-pVwk85IT9GkuXe4PbMvEKYjOnHrZpXV862oDo5WlwWLVEKbNthaTc-p9RLPZ6iJTEwNjxLeZg3HxIGvqfUn7N4CbDkRoSh3KGpmueWZ8nxWaD/s1600/encontros.jpg" id="imagem2">

Eu quero sempre mais
Eu quero sempre mais
Eu espero sempre mais de ti

Por isso hoje estou tão triste
Porque querer está tão longe de poder
E quem eu quero está tão longe, longe de mim

Longe de mim
Longe de mim
Longe de mim

Longe de mim
Longe de mim


</p>

</body>

</html>



3.5 Propriedades de borda:

3.5.1 Largura da borda: border-width, border-top-width, border-right-width,

border-bottom-width, border-left-width.
border-width: Utilizada para determinar a espessura das bordas.
border-top-width,border-right-width, border-bottom-width e border-left-width:

Utilizados para definirem cada lado individualmente. E os valores das espessuras
podem ser: thin, medium, thick.

3.5.2 Cor da borda: border-color, border-top-color, border-right-color,

bottom-color, border-left-color;
border-color: Utilizada para definir a cor da borda.
border-top-color, border-right-color, border-bottom-color e border-left-color: Utilizados
para definirem cada cor de cada borda individualmente.

3.5.3 Estilo da borda

border-style: Define o estilo da borda.
border-top-style, border-right-style, border-bottom-style e border-left-style: Utilizados
para definirem cada estilo de cada borda individualmente.

Os estilos são:
none;
hidden;
dotted;
dashed;
solid;
double;
groove;
ridge;
inset;
outset.

<!DOCTYPE>
<html>
<head>
<title>CSS</title>
<style>
table {
border-width:medium;border-style:solid;border-color:purple;
}
td {
border-width:thick;border-color:orange;
}
td.x {
border-style:dotted;
}
td.y {
border-style:double;
}
td.z {
border-style:groove;
}
</style>
</head>
<body>
<table>
<tr><td class="x">Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo
Exemplo Exemplo </td></tr>
<tr><td class="y">Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo
Exemplo Exemplo </td></tr>
<tr><td class="z">Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo
Exemplo Exemplo </td></tr>
</table</body>
</html>




3.6 Propriedade de margens
3.6.1 Tamanho da margem

margin: Utilizado para definir o tamanho das margens.
margin-top, margin-right, margin-bottom, margin-left: Utilizadas para definirem
individualmente cada margem.
A propriedade margem em HTML pode-se usar de maneira abreviada "px"
Exemplo: Definido que a margem superior é de 100px, a margem da direita em 90px, a
margem inferior em 80px e a margem da esquerda em 70px.

 <!DOCTYPE>
<html>
<head>
<title>CSS</title>
<style>
table {
border-style:solid;
margin: 100px 90px 80px 70px;}
</style>
</head>
<body>
<table>
<tr>
<td>Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo <br>
Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo
<br>
Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo
<br>
Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo </td>
</tr>
</table>
</body>
</html>




3.7 Propriedade de espaçamento:

3.7.1 Espaçamento: padding, padding-top, padding-right, padding-bottom,
padding-left;

padding: Define o tamanho do espaçamento.
padding-top, padding-right, padding-bottom e padding-left: Define o espacamento
individualmente.
No exemplo a seguir foi usada a forma abreviado, onde foi definido que o espaçamento
superior é de 10px, da direita em 20px, inferior em 30px e da esquerda em 40px.

<!DOCTYPE>

<html>

 <head>

  <title>CSS</title>

   <style>

    table {border-style:solid;padding: 100px 90px 80px 70px;}

   </style>

 </head>

 <body>

 <table>

  <tr>

   <td>BARBARA BARBARA BARBARA BARBARA BARBARA BARBARA BARBARA BARBARA BARBARA.</td>

  </tr>

 </table>

 </body>

</html>


3.8 Propriedades de fontes tipográficas

font-family: Define o tipo de fonte(Arial, Times New Roman, Tahoma, etc) Pode também definir um grupo de família (serif, sans-serif, cursive, etc).
font-style: Define o estilo da fonte, se ficará padrão do navegador, itálico ou oblíquo. É utilizado esses valores: normal, italic e oblique.
font-variant: Define o texto no estilo caixa alta. Valores: normal esmall-caps.
font-weight: Define a largura e negrito da fonte. Valores: normal,bold, bolder e lighter.
font-size: Define o tamanho da fonte. Valores: medium, larger,smaller, tamanho especifico e porcentagem.



<!DOCTYPE>

<html>

 <head>

  <title>CSS</title>

   <style>

    .t1 {font-family:Arial;}

    .t2 {font-style:italic;}
    .t3 {font-variant:small-caps;}
    .t4 {font-weight:bolder;}
    .t5 {font-size:30px;}
   </style>
 </head>
 <body>
  <p class="t1">Arial</p>
  <p class="t2">Itálico</p>
  <p class="t3">Caixa alta</p>
  <p class="t4">Negrito</p>
  <p class="t5">Tamanho</p>
 </body>
</html>

3.8 Propriedades de fontes tipográficas
font-family: Define o tipo de fonte (Arial, Times New Roman, Tahoma, etc). Pode se definir um grupo de família (serif, sans-serif, cursive, etc).

font-style: Define o estilo da fonte, se ela será normal, itálico ou oblíquo. Valores: normal, italic e oblique.

font-variant: Define o texto no estilo caixa alta. Valores: normal esmall-caps.

font-weight: Define a largura e negrito da fonte. Valores: normal, bold, bolder e lighter.

font-size: Define o tamanho da fonte. Valores: medium, larger,smaller, tamanho especifico e porcentagem.

<!DOCTYPE>
<html>
 <head>
  <title>CSS</title>
   <style>
    .t1 {
font-family:Arial;
}
    .t2 {
font-style:italic;
}
    .t3 {
font-variant:small-caps;
}
    .t4 {
font-weight:bolder;
}
    .t5 {
font-size:30px;
}
   </style>
 </head>
 <body>
  <p class="t1">Arial</p>
  <p class="t2">Itálico</p>
  <p class="t3">Caixa alta</p>
  <p class="t4">Negrito</p>
  <p class="t5">Tamanho</p>
 </body>
</html>



3.9 Propriedades de texto

text-indent: Define o recuo à esquerda da primeiro linha;
text-align: Define o alinhamento do texto. Valores: left, right,center e justify;
text-decoration: Define alguns efeitos no texto (sublinhado (underline), uma linha em cima do texto (overline), tachado (line-through) e um texto piscante (blink));
text-transform: Define se o texto será em maiúscula (uppercase), minúscula (lowercase) ou somente a primeira letra de cada palavra será maiúscula (capitalize);
line-height: Define a distancia entre as linhas.

3.10 Propriedades de listas

3.10.1 Estilo de marcadores
list-style-type: Define o estilo visual dos marcadores da lista. Valores: disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha e upper-alpha;

list-style-image: Define uma imagem como marcador de lista.

<!DOCTYPE>
<html>
 <head>
  <title>CSS</title>
   <style>
    #t1 {
list-style-type:disc;
}
    #t2 {
list-style-type:circle;
}
    #t3 {
list-style-type:square;
}
    #t4 {
list-style-type:decimal-leading-zero;
}
    #t5 {
list-style-type:upper-latin;
}
    #t6 {
list-style-image: url;
}
   </style>
 </head>
 <body>
  <ul>
   <li id="t1">Ponto sólido</li>
   <li id="t2">Círculo</li>
   <li id="t3">Quadrado</li>
   <li id="t4">Decimal com zero</li>
   <li id="t5">Letra maiúscula</li>
   <li id="t6">Imagem como marcador</li>
  </ul>
 </body>
</html>




=================================================================================

4.1 Elemento form e seus atributos

Atributos do form:

name: Define um nome para o elemento;
action: Define o endereço do site onde serão salvos os dados;
method: Atribui os dados como serão enviados. Atribuir dois valores: "get" e "post"

Pelo URL o get envia dados. Exemplo, pesquisas do Google. 
As palavras pesquisadas são colocadas na URL da pagina redirecionada. Onde pesquisando "escola", a mesma palavra será mostrada na URL da pagina.



4.2 Elemento input e seus atributos

Na criação de  um campo de texto comum, é usado o atributo "text".
Para definir também um campo do tipo senha utiliza-se o atributo "password", na qual os valores serão "mascarados".


<!DOCTYPE>

<html>


<head>


 <title>CSS</title>

</head>
<body>
<form action="form.php" method="post">
 Login: <input type="text" name="login"></br>
 Senha: <input type="password" name="pass"></br>
</form>
</body>
</html>

Há dois tipos de caixa alternativa "checkbox" e o "radio".
checkbox: É uma caixa alternativa de múltipla escolha, que pode ter mais de uma opção de escolha pelo usuário. 
radio: É apenas uma opção entre as alternativas para serem selecionadas.

As caixas de escolhas, é usado o elemento <fieldset>, que vai agrupar esses elementos de acordo com as perguntas do formulário.
<!DOCTYPE>
<html>
<head>
 <title>CSS</title>
</head>
<body>
<form action="form.php" method="post">
<fieldset>
    Sexo:<br>
 <input type="radio" name="sex">Masculino<br>
    <input type="radio" name="sex">Feminino<br>
</fieldset>

<fieldset>
 Qual a sua cor favorita:<br>
 <input type="checkbox" name="color">Rosa<br>
 <input type="checkbox" name="color">Azul<br>
 <input type="checkbox" name="color">Verde<br>
 <input type="checkbox" name="color">Bege<br>
</fieldset>
</form>
</body>
</html>



Para finalizar o formulário e enviar os dados é utilizado o atributo submit. 
reset: Apaga todos os sábados
button: Cria um botão que vai executar uma determinada ação específica. O atributo "value" é usado para dar um nome aos botões.

Atributos especiais depende da versão e compatibilidade do browser usado pelo usuário:
number: campo específico de números;
color: caixa de seleção de cores;
range: caixa de controle para definir números;
image: campo para enviar uma imagem do computador;
file: campo para enviar um arquivo do computador.

<!DOCTYPE>
<html>
<head>
 <title>CSS</title>
</head>
<body>
<form action="form.php" method="post">
 Selecione uma cor: <input type="color"><br>
 Escolha um número entre 1 a 100: <input type="number" min="1" max="100"><br>
 Escolha um número entre 1 a 100: <input type="range" min="1" max="100"><br>
 Selecione uma imagem: <input type="image"><br>
 Selecione um arquivo: <input type="file"><br>
</form>
</body>
</html>












Campos específicos para data e horário. A ação de cada campo vai depender do browser utilizado;

date: seleção de data;
datetime: seleção de data e horário;
datetime-local: seleção de data, horário e local;
time: seleção de horário;
week: seleção da semana;
month: seleção do mês.


<!DOCTYPE>

<html>

<head>

 <title>CSS</title>
</head>
<body>
<form action="form.php" method="post">
 Data: <input type="date"><br>
 Data e horas: <input type="datetime"><br>
 Data, horas e local: <input type="datetime-local"><br>
 Horário: <input type="time"><br>
 Semana: <input type="week"><br>
 Mês: <input type="month"><br>
</form>
</body>
</html>

4.3 Elementos

textarea: cria uma caixa de texto, definindo o número de linhas ("row") e colunas ("cols");
select: cria um campo com itens selecionáveis;
option: define os itens do campo <select>;
optgroup: agrupa os itens do atributo <option>.


<!DOCTYPE>

<html>

<head>
 <title>CSS</title>
</head>
<body>
<form action="form.php" method="post">
<textarea rows="5" cols="30">
Caixa de texto 
</textarea>
<br>
<select>
<optgroup label="Números impares">
 <option value="1">1</option>
 <option value="3">3</option>
 <option value="5">5</option> 
</optgroup>
<optgroup label="Números pares">
 <option value="2">2</option>
 <option value="4">4</option>
 <option value="6">6</option> 
</optgroup>
</select>
</form>
</body>
</html>

Com a semântica do HTML5, tem como deixar o formulário mais organizado.
label: Define um título e associação com os campos do formulário. É usado o valor id tanto nos atributos dos campos como no <label> para ter essa ligação. 
Sendo também usados os atributos <legend> para criar as legendas de checkbox, radio.
<!DOCTYPE>
<html>
<head>
 <title>CSS</title>
</head>
<body>
<form action="form.php" method="post">

<label for="name">Nome:</label>
<input type="text" id="name" name="nome"><br>

<label for="lname">Sobre nome:</label>
<input type="text" id="lname" name="sobrenome"><br>

<fieldset>
<legend>Sexo:</legend>
<input type="radio" name="sex" id="m">
<label for="m">M</label>
<input type="radio" name="sex" id="f">
<label for="f">F</label>
</fieldset><br>

<fieldset>
<legend>Cor preferida: </legend>
<input type="checkbox" name="tv" id="cor">
<label for="tv">Azul</label>
<input type="checkbox" name="rad" id="cor">
<label for="rad">Verde</label>
<input type="checkbox" name="maq" id="cor">
<label for="maq">Amarelo</label>
<input type="checkbox" name="gel" id="cor">
<label for="gel">Preto</label>
</fieldset><br>

<label for="nasc">Data de nascimento:</label>
<input type="date" id="nasc" name="datanasc"><br>

<label for="obs">Observações:</label><br>
<textarea rows="4" cols="50">
Digite aqui
</textarea><br>

<input type="submit" value="Enviar">
<input type="reset" value="Apagar">

</form>
</body>
</html>

SAAS: Software as a service

Saas | Cloud Computing:

Vantagens do Cloud Computing

Vantagens e Benefícios


 Conceito de SAAS:
Software como serviço, do inglês Software as a service (SaaS), é uma forma de distribuição e comercialização de software. No modelo SaaS o fornecedor do software se responsabiliza por toda a estrutura necessária para a disponibilização do sistema (servidores, conectividade, cuidados com segurança da informação) e o cliente utiliza o software via internet, pagando um valor recorrente pelo uso.
Não é necessariamente a tecnologia utilizada que determina o modelo. O software utilizado pode ser 100% web (utilizado via browser) ou pode ter alguma instalação local (como antivírus ou sistemas de backup). A característica principal é a não aquisição das licenças (mas sim pagar pelo uso como um "serviço") e a responsabilidade do fornecedor pela disponibilização do sistema em produção.

SaaS é a sigla de 'software as a service' cuja comercialização é totalmente online. Da negociação até a entrega, todas as etapas são realizadas pela web de maneira ágil, fácil e segura.

As soluções baseadas em SaaS apresentam muitos benefícios para quem oferta, entre eles: maior eficiência e produtividade, agilidade no atendimento ao cliente, fidelização, alta lucratividade, rápida distribuição e implantação e venda sobre a demanda (conforme a necessidade do cliente final).

Para os usuários finais as vantagens também são múltiplas como: alta disponibilidade das aplicações, redução do departamento de TI interno, precificação simplificada e diferenciada, possibilidade de recorrência mensal e baixo custo de manutenção.

Achei super interessante mostrar uma empresa que presta este tipo de serviço, é a "D-SAAS", conceituada neste ramo, oferece um dos melhores serviços de SAAS no Brasil.
Vou deixar o link do site para que todos conheçam o incrível trabalho que a D-SAAS desenvolve.

Buscas avançadas no Google

Quando surge uma dúvida na internet, para muitos internautas, não há “professor” melhor que o Google. Seja para buscar algum site, tirar uma dúvida, consultar o melhor caminho para chegar a algum lugar ou saber as novidades daquele artista ou programa predileto, o Google tornou-se um referencial. O site oferece grande diversidade de possibilidades, e as dicas abaixo podem ajudar a utilizar melhor algumas delas.

 
Aspas - Para buscar uma frase exata, use aspas. Assim, os resultados terão a expressão que você procura com as palavras na mesma ordem em que você as digitou.

 

Exclusão - Use o hífen antes de um termo para excluí-lo dos resultados da pesquisa. Se você quer encontrar referências a Xuxa que não contenham a palavra Meneghel, por exemplo, basta procurar por Xuxa - Meneghel.

 

Asterisco - Um asterisco indica a falta de uma expressão. Suponha que você tenha esquecido uma das palavras que compõem um ditado popular. Busque, entre aspas, "em casa de * o espeto é de pau". Nos resultados, você encontrará referências à frase com o termo ausente (nesse caso, ferreiro).

 

Tipo de arquivo - O Google é capaz de encontrar conteúdo dentro de documentos hospedados na rede em formatos como Word (DOC) e Excel (XLS). Basta usar o operador filetype, seguido de dois pontos e da extensão do arquivo, sem espaços.

Para encontrar, em PDF, o texto de Dom Casmurro, de Machado de Assis, faça uma busca por Machado de Assis Dom Casmurro filetype:pdf. 
Ao entrar no google, primeiro digite a pesquisa sobre o assunto que você procura. Ao final escreva: filetype:pdf
Pronto! Se desejar arquivos DOC, XLS, TXT ou qualquer outra extensão, é só modificar o final da string.
Exemplo:
- See more at: http://dilbertorosa.com/google/buscar-por-extensao-de-arquivo-no-google-filetype#sthash.Ea9LshOr.dpuf
 Ao entrar no google, primeiro digite a pesquisa sobre o assunto que você procura. Ao final escreva: filetype:pdf.
Pronto! Se desejar arquivos DOC, XLS, TXT ou qualquer outra extensão, é só modificar o final da string.
Exemplo:
Ao entrar no google, primeiro digite a pesquisa sobre o assunto que você procura. Ao final escreva: filetype:pdf
Pronto! Se desejar arquivos DOC, XLS, TXT ou qualquer outra extensão, é só modificar o final da string.
Exemplo:
- See more at: http://dilbertorosa.com/google/buscar-por-extensao-de-arquivo-no-google-filetype#sthash.Ea9LshOr.dpuf
                                                                       Clique na imagem para melhor visualização
Ao entrar no google, primeiro digite a pesquisa sobre o assunto que você procura. Ao final escreva: filetype:pdf
Pronto! Se desejar arquivos DOC, XLS, TXT ou qualquer outra extensão, é só modificar o final da string.
Exemplo:
- See more at: http://dilbertorosa.com/google/buscar-por-extensao-de-arquivo-no-google-filetype#sthash.Ea9LshOr.dpuf

 

Site específico - Dá para fazer uma busca com resultados que se restrinjam a apenas um site. Para encontrar referências a Pablo Picasso no UOL, por exemplo, procure por Pablo Picasso site:www.uol.com.br.

 

Pesquisa avançada - Clicando no link Pesquisa Avançada na página inicial do Google, você tem acesso a uma série de opções, como restrições a resultados em apenas certos idiomas ou de sites de determinado país. Nessa página, você pode fazer buscas como as das dicas acima sem precisar decorar nenhum comando. 









Ao entrar no google, primeiro digite a pesquisa sobre o assunto que você procura. Ao final escreva: filetype:pdf
Pronto! Se desejar arquivos DOC, XLS, TXT ou qualquer outra extensão, é só modificar o final da string.
Exemplo:
- See more at: http://dilbertorosa.com/google/buscar-por-extensao-de-arquivo-no-google-filetype#sthash.Ea9LshOr.dpuf