Carregar apresentação
A apresentação está carregando. Por favor, espere
1
Dia 1 Overview
2
O que veremos Conceitos Essenciais para Desenvolvimento WEB Em Geral
Preparando o Ambiente Ambientação com a Linguagem Orientação a Objeto Minha nov
3
Conceitos Sobre Web Em Geral
Protocolo HTTP Hypertext Transfer Protocol Hypertext Markup Language HTML Javascript Não tem nada haver com Java CSS Cascade Style Sheet
4
Conceitos Sobre Web Em Geral
Protocolo HTTP Hypertext Transfer Protocol HTML Hypertext Markup Language Javascript Não tem nada haver com Java CSS Cascade Style Sheet
5
HTTP in a Nutshell Apache!!
Stop ! Stop ! IE só serve para baixar os outros browsers. Use Firefox, Chrome ou Safari Apache!!
6
HTTP in a Nutshell
7
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 url POST - Tipicamente ao enviar formulários. Parâmetros em variáveis PUT - Faz parte da especificação HTTP, significa atualizar DELETE - Idem, deletar
8
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)
9
HTML O 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
10
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>
11
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>
12
HTML5 <!DOCTYPE html> <html> <head> </head>
<body> </body> </html> <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> <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>
13
DOM <html> <head> </head> <body>
div#primeiro div#sub-div p <html> <head> </head> <body> <div id=”primeiro”> <div id=”sub-div”></div> </div> <p>Texto</p> </body> </html>
14
CSS3 .classe #id .classe:hover, #id:first-child #id > ul elemento
elemento[propriedade=valor] .classe:hover, #id:first-child #id > ul #id ul button.primario button .primario
15
Regras inline tem precedencia sobre regras externas
CSS3 Uma propriedade aplicada no pai vai ter efeito em todos os nós filhos a não ser que sobreescrito no filho seletor { color: #cccccc; font-size: 12px; text-align: justify; border: 1px solid #333; } Regras inline tem precedencia sobre regras externas
16
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
17
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));
18
Javascript e DOM document.getElementById()
document.getElementsByName() document.getElementsByTagName() ment.asp
19
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
20
Instalação Básica Linux
apt-get install apache php5 mysql-server chmod 777 /var/www (apenas em ambiente de desenvolvimento) Pronto!
21
PHP Fracamente Tipada Orientada a Objeto Interpretada
22
Servidor Apache lê o arquivo O resultado entra no lugar da tag
PHP Resumidamente, usa-se PHP para gerar páginas HTML dinâmicamente. Servidor Apache lê o arquivo Quando encontra as tags <?php ?> passa o conteúdo para o módulo PHP interpretar <?php phpinfo(); ?> Isso significa que HTML e PHP podem ser mesclados (apesar de não ser muito legível) O resultado entra no lugar da tag
23
Sintaxe Básica Estruturas de controle, iguais à Java e C
Variá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
24
if true ? “Verdadeiro” : “Falso”
Sintaxe Básica Operadores Lógicos: && || AND OR == != Operador Ternário: if true ? “Verdadeiro” : “Falso” Operadores básicos: / * Operadores de String Alguns são str_algumacoisa: str_replace() Outros são ucfirst, strtoupper, strtlower
25
Orientação a Objeto class, extends, interface, implement, private public, protected Não há sobrecarga de função, mas pode ser simulada
26
Isso é só o começo Perguntas?
Mão na massa!
27
Isso é só o começo Perguntas?
Mão na massa!
Apresentações semelhantes
