Dia 1 Overview
O que veremos Conceitos Essenciais para Desenvolvimento WEB Em Geral Preparando o Ambiente Ambientação com a Linguagem Orientação a Objeto Minha nov
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
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
HTTP in a Nutshell Apache!! Stop ! Stop ! IE só serve para baixar os outros browsers. Use Firefox, Chrome ou Safari 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 url POST - Tipicamente ao enviar formulários. Parâmetros em variáveis PUT - Faz parte da especificação HTTP, significa atualizar DELETE - 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)
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
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> <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>
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>
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
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
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_docu ment.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
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
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
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
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ço Perguntas? Mão na massa!
Isso é só o começo Perguntas? Mão na massa!