Dia 1 Overview. O que veremos Conceitos Essenciais para Desenvolvimento WEB Em Geral Preparando o...

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

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>

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!

Dia 1 Overview. O que veremos Conceitos Essenciais para Desenvolvimento WEB Em Geral Preparando o...

Documents

Transcript of Dia 1 Overview. O que veremos Conceitos Essenciais para Desenvolvimento WEB Em Geral Preparando o...