Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Material 5 - Tecnologias WEB
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
HTML – FORMULÁRIO
(continuação…)
O tag <textarea> é um campo de texto multi‐linha.
● Os atributos rows e cols definem o número de linhas de altura e o de "caracteres"
de largura, respectivamente.
● O atributo wrap define se a mudança de linha será automática durante a digitação
("on"), ou somente quando for pressionado ENTER ("off").
<head>
<meta http‐equiv="content‐type" content="text/html; charset=iso‐8859‐1">
<title>textarea</title>
</head>
<body>
<form>
Observações: <p> <textarea name="obs" rows="5" cols="80"
placeholder="Digite o seu texto aqui" ></textarea> </p>
</form>
</body> No navegador:
Form: textarea
Outros: input type=“tipos”
<!DOCTYPE html>
<html lang="pt=br">
<head>
<meta charset="iso‐8859‐1" />
<title>Medida (Number type)</title>
</head>
<body>
<form>
<font face="Trebuchet MS" size="5" color="blue">
Informe o valor em centímetros:
</font>
<input type="number" name="valuex“
value="12.4" step="0.2" min="0" max="20"/>
</form>
</body>
</html>
No navegador:Type=”number”
Outros: input type=“tipos”
No navegador:
Type=”range”
<body>
<font face="Trebuchet MS" size="15" color="green">
<marquee direction=right behavior=alternate scrollamount=1 scrolldelay=50>
Bem‐Vindo ao meu SITE
</marquee>
</font>
<form>
<font face="Trebuchet MS" size="5" color="blue">
Informe o valor em centímetros:</font><br>
<input color="red" type="range" name="valuex“
value="12.4" step="0.2" min="0" max="20"/>
</form>
<font face="Trebuchet MS" size="2" color="red">
<span style = "position: absolute; left: 0px; top: 120px"> 0 </span>
<span style = "position: absolute; left: 65px; top: 120px"> 10 </span>
<span style = "position: absolute; left: 130px; top: 120px"> 20 </span> </font>
</body>
</html>
Lado Cliente (client‐side)
● O navegador, analisará o código HTML, e descobrirá quais são os
anexos adicionais que são necessários (fotos, imagens, sons) e
solicitará ao servidor.
● Note que nessa tecnologia, quem desempenha a função de
processamento é o cliente, por isso ele é chamada de client‐side.
● A função do servidor é somente fornecer os arquivos solicitados.
Como exemplos de tecnologias, client‐side podemos citar: HTML,
linguagens script (JavaScript, Jscript, VBScript), Java Applet, Flash e
outros.
● Em uma tecnologia desse tipo, normalmente precisa‐se instalar
programas adicionais ou plug‐ins em nosso navegador, já que o
cliente é quem fará o processamento.
Utilizando jQuery (Máscara)
jQuery é uma biblioteca JavaScript cross‐browser desenvolvida para
simplificar os scripts client‐side que interagem com o HTML. jQuery é a
mais popular das bibliotecas JavaScript.
Vamos precisar dos dois arquivos citados abaixo:
Na figura ao lado os campos
DATA, TELEFONE E CEP estão
formatados com a utilizando do
jQuery. O slide a seguir tem o
código deste exemplo.
<!DOCTYPE html>
<html lang="pt‐br">
<head>
<meta charset="iso‐8859‐1">
<script src="jquery‐1.11.1.js"> </script> <script src="jquery.maskedinput.js"> </script>
</head>
<body>   – Siginifica espaço.
<p>Utilizando jQuery (Máscara)</p>
<form>
<label for="campoDt">Data:</label> <input type="text" id="campoDt" size="6"> <br>
<label for="campoTel">Tel.: </label> <input type="text" id="campoTel" size="9">
<br>
<label for="campoCep">CEP:</label> <input type="text" id="campoCep" size="5">
<br> <br>
<input type="submit" value="enviar">
</form>
<script>
jQuery(function($){
$("#campoDt").mask("99/99/9999");
$("#campoTel").mask("(99)9999‐9999");
$("#campoCep").mask("99999‐999"); });
</script>
</body>
</html>
A Tag <label> juntamente com o parâmetro for, poderá fazer um vínculo entre
um rótulo e um campo do formulário de forma que, ao clicar no rótulo, você
terá o mesmo resultado que se clicasse no campo vinculado.
Lado servidor (server‐side)
● Tecnologias que exigem processamento de código por parte do
servidor são chamadas de server‐side.
● Como exemplo de tecnologias server‐side podemos citar: PHP, ASP e
JSP.
● Em uma tecnologia desse tipo, o cliente não possui nenhum
requisito de software adicional, já que ele receberá o resultado em
HTML e precisará apenas do navegador para interpretá‐lo.
● Ao construir o site utilizando uma linguagem server‐side, podemos
criar conteúdos dinâmicos e personalizados.
Lado servidor (server‐side)
Exemplo de utilização (PHP)
PHP ("PHP: Hypertext Preprocessor“) é uma linguagem interpretada livre, usada
originalmente apenas para o desenvolvimento de aplicações presentes e atuantes no lado
servidor, capazes de gerar conteúdo dinâmico na World Wide Web. O código é interpretado
no lado do servidor pelo módulo PHP, que também gera a página web a ser visualizada
no lado cliente.
Sem precisar e instalar e configurar todos os servidores e módulos necessários para
trabalhar com esta linguagem de criação de páginas do lado do servidor, pode‐se utilizar
um programa chamado EasyPHP.
Nele tem‐se o Apache, o servidor mais popular de páginas web, o MySQL, o banco dados
mais difundido de código livre e por fim o PHP, a linguagem ou tecnologia mais difundida
para realizar páginas com programação no servidor, acesso ao banco de dados, etc. O Easy
PHP é um programa que permite dispor dos três componentes indispensáveis para
programar com PHP em nosso próprio computador.
Lado servidor (server‐side)
Para baixar o programa EasyPHP vá neste link:
http://www.easyphp.org/easyphp‐devserver.php
Depois de baixá‐lo, faça a instalação. Na imagem a seguir é mostrado o nome do arquivo
baixado para a instalação no Windows 7 e 8.
Lado servidor (server‐side)
Se após a instalação do “EasyPHP” for solicitado o arquivo “MSVRC100.dll” , você
pode baixá‐lo deste site:
http://www.microsoft.com/en‐us/download/details.aspx?id=30679
Lado servidor (server‐side)
Após a instalação completa do
“EasyPHP”, clique duas vezes no
ícone do EasyPHP que se encontra
no lado direito inferior na tela do
windows (perto do relógio) para
abrir a janela do EasyPHP:
Ou vá no botão inicial e procure o
“EasyPHP DevServer 14.1 VC11”
EasyPHP
EasyPHP
Lado servidor (server‐side)
Ao abrir esta janela clique no LOGO conforme indicado pela seta:
No menu vá em “configuration” e
depois em “Apache”.
Lado servidor (server‐side)
Irá abrir o bloco de notas com o arquivo “httpd.conf”.
Pressione simultaneamente as teclas “Ctrl+F” e surgirá uma janela chamada “Localizar”.
Insira a informação “Listen 127” como mostrado abaixo e clique no botão “Localizar Próxima”.
Na informação:
Listen 127.0.0.1:80
Mudar o último número:
Listen 127.0.0.1:81
Lado servidor (server‐side)
Chame novamente a janela do EasyPHP clicando duas vezes no ícone do EasyPHP que se
encontra no lado direito inferior na tela do windows (perto do relógio) ou vá para o botão
inicial e procure o “EasyPHP DevServer 14.1 VC11”
Agora é só clicar no botão “Apache” e no menu clicar em “Start” ao EasyPHP conforme
indicado na tela a seguir:
Caso já tenho iniciado ir para o próximo slide.
Lado servidor (server‐side)
Apache iniciado !.Materiais relacionados
64 pág.
Perguntas relacionadas
Compartilhar