View
107
Download
3
Category
Preview:
Citation preview
Dia 1Overview
O que veremos
Conceitos Essenciais para Desenvolvimento WEB Em Geral
Preparando o Ambiente
Ambientação com a Linguagem
Orientação a Objeto
Conceitos Sobre Web Em Geral
Protocolo HTTP
HTML
Javascript
CSS
Hypertext Transfer ProtocolHypertext Transfer Protocol
Hypertext Markup LanguageHypertext Markup Language
Não tem nada haver com JavaNão tem nada haver com Java
Cascade Style SheetCascade Style Sheet
Conceitos Sobre Web Em Geral
Protocolo HTTP
HTML
Javascript
CSS
Hypertext Transfer ProtocolHypertext Transfer Protocol
Hypertext Markup LanguageHypertext Markup Language
Não tem nada haver com JavaNão tem nada haver com Java
Cascade Style SheetCascade Style Sheet
HTTP in a Nutshell
Stop !
IE só serve para baixar os outros
browsers.Use Firefox,
Chrome ou Safari
Stop !
Apache!!
HTTP in a Nutshell
GET, POST, PUT, DELETE
É o tipo de requisição enviada pelo cliente para o servidor.
Pode ser tratada como desenvolvedor bem entender
GET - Tipicamente o que se obtem ao acessar uma url pelo navegador. Parâmetros na urlPOST - Tipicamente ao enviar formulários. Parâmetros em variáveisPUT - Faz parte da especificação HTTP, significa atualizarDELETE - Idem, deletar
GET - Tipicamente o que se obtem ao acessar uma url pelo navegador. Parâmetros na urlPOST - Tipicamente ao enviar formulários. Parâmetros em variáveisPUT - Faz parte da especificação HTTP, significa atualizarDELETE - Idem, deletar
HTTP serve HTML e qualquer outra coisa
Tipicamente HTML, CSS e Javascript são enviados
Pro Tip: Javascript não é tudo o que existe. Qualquer linguagem script pode ser executada desde que o
navegador tenha a Máquina Virtual para linguagem. Exemplos: VBScript (dead), Typescript (alpha), Google
Dart (alpha)
HTMLO que é HTML 5?
Tem mais marketing no nome do que realmente é mas pegou (assim como web 2.0)
Junção de todos os novos recursos produzidos pela indústria: HTML5, CSS3, Novas API’s Javascript
Daqui a pouco estão vendendo igual mp5, mp6, mp7
HTML5
<!DOCTYPE html><html>
<head></head><body></body>
</html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="css/application.css" />
<link rel="import" href="imports/comentarios.html" />
</head>
<body>
<div id="page">
<h1>Titulo da página</h1>
<div class="alerta">Oi sou uma caixa com classe alerta</div>
<div class="alerta">Oi sou mais uma caixa com classe alerta</div>
</div>
</body>
HTML5
<!DOCTYPE html><html>
<head></head><body></body>
</html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="css/application.css" />
<link rel="import" href="imports/comentarios.html" />
</head>
<body>
<div id="page">
<h1>Titulo da página</h1>
<div class="alerta">Oi sou uma caixa com classe alerta</div>
<div class="alerta">Oi sou mais uma caixa com classe alerta</div>
</div>
</body>
HTML5
<!DOCTYPE html><html>
<head></head><body></body>
</html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="css/application.css" />
<link rel="import" href="imports/comentarios.html" />
</head>
<body>
<div id="page">
<h1>Titulo da página</h1>
<div class="alerta">Oi sou uma caixa com classe alerta</div>
<div class="alerta">Oi sou mais uma caixa com classe alerta</div>
</div>
</body>
DOM<html><head></head><body><div id=”primeiro”><div id=”sub-div”></div></div><p>Texto</p></body></html>
html
head body
div#primeiro
div#sub-div
p
CSS3
.classe
#id
elemento
elemento[propriedade=valor]
.classe:hover, #id:first-child
#id > ul
#id ul
button.primario
button .primario
CSS3
seletor {
color: #cccccc;
font-size: 12px;
text-align: justify;
border: 1px solid #333;
}
Uma propriedade aplicada no pai vai ter efeito em todos os
nós filhos a não ser que sobreescrito no filho
Regras inline tem precedencia sobre
regras externas
Javascript
Fracamente Tipada e Interpretada
Orientada a Objeto por Técnica prototype (ruim pra cacete)
Sintaxe parecida com C, C++ e Java
Programação Dirigida por Eventos
Javascript
anoaniversario = 1988 // variável global
var dataatual = new Date(); // variável local
var aniversario = new Date();
aniversario.setFullYear(anoaniversario);
var idade = dataatual - aniversario;
var idadeTotal = ((((idade/1000) / 60) / 60) / 24)/365;
alert("Aniversario " + aniversario + " Idade: " + idadeTotal.toFixed(0));
Javascript e DOM
document.getElementById()
document.getElementsByName()
document.getElementsByTagName()
http://www.w3schools.com/jsref/dom_obj_document.asp
Preparando o Ambiente
Use Linux/Unix e seja feliz, 90% das hospedagens PHP são linux, todas as boas hospedagens são em linux.
Vantagens: Mais recursos, simplicidade, rápido, estável, de graça, enterprise
Sem Linux? No problem, baixe o XAMPP ou Wamp e instale tudo de uma vez
Instalação Básica Linux
apt-get install apache php5 mysql-server
chmod 777 /var/www (apenas em ambiente de desenvolvimento)
Pronto!
PHP
Fracamente Tipada
Orientada a Objeto
Interpretada
PHP
<?php
phpinfo();
?>
Resumidamente, usa-se PHP para gerar páginas HTML dinâmicamente.
Servidor Apache lê o arquivo
Servidor Apache lê o arquivo
Quando encontra as tags <?php ?> passa o conteúdo para o
módulo PHP interpretar
Quando encontra as tags <?php ?> passa o conteúdo para o
módulo PHP interpretar
O resultado entra no lugar da tag
O resultado entra no lugar da tag
Isso significa que HTML e PHP podem
ser mesclados (apesar de não ser
muito legível)
Isso significa que HTML e PHP podem
ser mesclados (apesar de não ser
muito legível)
Sintaxe BásicaVariáveis começam com $
Funções:
function nome(){
echo “Nome”; // Comentários, toda instrução termina com ;
}
Estruturas de controle, iguais
à Java e C
If, else, for, foreach, while, do-while, switch-case
Sintaxe Básica
Operadores básicos:
+ - ++ -- / *
Operadores de String
Alguns são str_algumacoisa:
str_replace()
Outros são ucfirst, strtoupper, strtlower
Operadores Lógicos:&& || AND OR == !=Operador Ternário:
if true ? “Verdadeiro” : “Falso”
Orientação a Objeto
class, extends, interface, implement, private public, protected
Não há sobrecarga de função, mas pode ser simulada
Isso é só o começoPerguntas?
Mão na massa!
Isso é só o começoPerguntas?
Mão na massa!
Recommended