Slide 1

Slide 1 text

DESENVOLVIMENTO WEB Tonin R. Bolzan HTML JS PHP, Python, Ruby, C# CSS

Slide 2

Slide 2 text

Tonin R. Bolzan Bacharel em Sistemas de Informação Diretor Técnico Programador na Metrosoft S/A http://bolzan.io/

Slide 3

Slide 3 text

frontinsm.com.br sfdsm.org

Slide 4

Slide 4 text

Podem haver questões ingênuas, enfadonhas, mal formuladas, mas não há perguntas imbecis toda pergunta é um grito para compreender o mundo Carl Sagan HTML JS PHP, Python, Ruby, C# CSS

Slide 5

Slide 5 text

Estrutura do Minicurso Introdução Nível 1 1 hora e 10 Minutos Até 20:40 Intervalo 20 Minutos Até 21:00 Introdução Nível 2 1 hora e 00 Minutos Até 22:00 Palestra 30 Min Prática 40 Min Palestra 15 Min Prática 45 Min

Slide 6

Slide 6 text

CONCEITOS

Slide 7

Slide 7 text

CLIENTE

Slide 8

Slide 8 text

SERVIDOR

Slide 9

Slide 9 text

CLIENTE SERVIDOR FRONT-END BACK-END Solicita Responde

Slide 10

Slide 10 text

HTML 4 HTML 5 XHTML Marcação JavaScript Interatividade Java Python PHP Ruby C# CSS 3 Estilização FRONT-END Nível 1 BACK-END Nível 2 Design Programação

Slide 11

Slide 11 text

HTML 5

Slide 12

Slide 12 text

HTML5: O que é HyperText Markup Language (Linguagem de Marcação de Hipertexto) Semelhante ao XML, porém com estrutura pré-definida Da semântica ao conteúdo, ou seja, organização e significado para a máquina

Slide 13

Slide 13 text

HTML5: Estrutura conteúdo conteúdo

Slide 14

Slide 14 text

HTML5: Tags

http://www.w3.org/TR/html-markup/elements.html
Total de 108 tags na referência + algumas não padronizadas

Slide 15

Slide 15 text

HTML5: Atributos class

Determina uma (ou mais) classe(s) para o elemento. Para definir mais de uma classe, coloque-as separadas por espaço. id

Identificador único do elemento. Somente um por tag. não deve ser repetido na mesma página. hidden

Oculta o elemento onde for declarado. http://www.w3.org/TR/html-markup/global-attributes.html

Slide 16

Slide 16 text

HTML5: Elementos -------------------------------------------- Minicurso -------------------------------------------- Algumas tags, formam elementos estruturais básicos. Certos elementos são usados em locais específicos. Elementos sempre respeitam uma hierarquia. Tags junto com seus atributos formam Elementos

Slide 17

Slide 17 text

HTML 5 PERGUNTAS ?

Slide 18

Slide 18 text

CSS 3

Slide 19

Slide 19 text

CSS3: O que é Cascading Style Sheets, é uma linguagem de folhas de estilo Define como serão exibidos os elementos contidos no HTML Equanto o HTML da organização e significado para a máquina, O CSS da organização e significado visual ao usuário

Slide 20

Slide 20 text

CSS3: Estrutura Um agrupamento forma uma regra. seletor { propriedade: valor; }

Slide 21

Slide 21 text

CSS3: Estrutura Seletor Elemento HTML ao qual a regra será aplicada Por exemplo: body, div. Propriedade Atributo do elemento que será aplicado a regra. Por exemplo: color, font, position. Valor Característica que o elemento irá assumir Por exemplo: cor azul, tamanho de fonte 14

Slide 22

Slide 22 text

CSS3: Exemplo body { background-color: #000; } div { font-size: 14px; font-weight: bold; }

Slide 23

Slide 23 text

CSS3: Seletores São a forma de encontrar um ou vários elementos dentro de uma página HTML Relembrando os atributos class e id do HTML

No CSS estes atributos possuem caracteres especiais id é representado por # class é representado por . (ponto) #identificador {font-size: 14px;} .teste {font-size: 14px;}

Slide 24

Slide 24 text

CSS3: Seletores Seletores podem ser agrupados e combinados section.teste div {font-size: 14px;} section.teste > div {font-size: 14px;} div + article {color: red;}

Slide 25

Slide 25 text

CSS3: Versão e Compatibilidade Alguns navegadores necessitam de prefixos especiais button.shadow, a.shadow, { -webkit-box-shadow: 0px 0px 5px #babaca; -moz-box-shadow: 0px 0px 5px #babaca; -ms-box-shadow: 0px 0px 5px #babaca; -o-box-shadow: 0px 0px 5px #babaca; box-shadow: 0px 0px 5px #babaca; }

Slide 26

Slide 26 text

CSS3: Integração com HTML Inline texto na cor vermelha Interno span { color: red; } Externo

Slide 27

Slide 27 text

CSS3: Frameworks http://getbootstrap.com/ http://foundation.zurb.com/

Slide 28

Slide 28 text

CSS3: Pré-processadores Organizam melhor o código CSS Permitem escrever funções e fazer cálculos sass-lang.com lesscss.org

Slide 29

Slide 29 text

CSS 3 PERGUNTAS ?

Slide 30

Slide 30 text

JAVASCRIPT

Slide 31

Slide 31 text

JS: O que é Apesar do nome, Javascript não tem nada em comum com a linguagem Java Linguagem de programação interpretada (especificação ECMAScript) Multi-paradigma, com suporte a Orientação a Objetos Tipagem Dinâmica (não exigem declarações de tipos de dados) Tipagem Fraca (tal como, 0 zero ser tratado como false) Alterar o HTML e CSS manipulando o comportamento de uma página

Slide 32

Slide 32 text

JS: Variáveis e Tipos de dados Tipagem Dinâmica var escopo_local = “Desenvolvimento WEB”; escopo_global = “Desenvolvimento WEB”; // window var nada; // undefined var num1 = 22; // number var num2 = “22”; // string var falso = false; // boolean var lista = []; // object var outro = {}; // object num1 + num2; // “2222” Concatenação const prefix = 'web'; // Declaração de Constantes

Slide 33

Slide 33 text

JS: Sintaxe - Funções Declaração Normal function somar(x, y) { return x + y; } Declaração Anônima var somar = function(x, y) { return x + y; } Invocando somar(3, 2); // 5 somar.call(this, 3, 2); // 5

Slide 34

Slide 34 text

JS: Sintaxe - Objetos Quase tudo é um objeto. Todos os tipos primitivos, com exceção de null e undefined, são tratados como objetos. var teste = “web”; teste.toUpperCase(); // WEB Declaração Literal var teste = {titulo: "Dev. Web", local: ”Uri”}; Declaração usando Função construtora var teste = new Object(); teste.titulo = "Dev. Web"; Ou teste["titulo"] = "Dev. Web"; teste.local = "Uri"; Ou teste["local"] = "Uri";

Slide 35

Slide 35 text

JS: Console do Navegador console.log(object [, object...]) Utilizado para a emissão de informações de registro em geral console.dir(object) Exibe uma listagem interativa das propriedades de um objeto JavaScript console.error(object [, object...]) Emite uma mensagem de erro Não é padronizado entre os diferentes navegadores.

Slide 36

Slide 36 text

JS: Consulta ao HTML (DOM)

document.getElementsByTagName(“div”); // HTMLElement document.getElementsByClassName(“teste”); // HTMLElement document.getElementById(“identificador”); // HTMLCollection document.querySelector(“#identificador”); // HTMLElement document.querySelectorAll(“.teste”); // NodeList

Slide 37

Slide 37 text

JS: Eventos Clique Aqui

Texto

------------------------------------------------------------- function modifyText() { var el = document.getElementById("el"); el.innerText = "Modificado"; } function load() { var btn = document.getElementById("btn"); btn.addEventListener("click", modifyText); } document.addEventListener("DOMContentLoaded", load);

Slide 38

Slide 38 text

JS: Peculiaridades Roda em uma única thread A linguagem é Unicode var σ = 'Köln'; var \u03c3="K\xf6ln"; var str = ' '; Tome cuidado com as palavras reservadas

Slide 39

Slide 39 text

JS: Integração com HTML Inline alert('Olá mundo!'); </style> Externo <script type="text/javascript" src="js/app.js"></style>

Slide 40

Slide 40 text

JS: Bibliotecas e Frameworks http://todomvc.com/

Slide 41

Slide 41 text

JS: Compiladores

Slide 42

Slide 42 text

JAVASCRIPT PERGUNTAS ?

Slide 43

Slide 43 text

FERRAMENTAS

Slide 44

Slide 44 text

Open Source

Slide 45

Slide 45 text

Licença Com ercial

Slide 46

Slide 46 text

Licença Com ercial

Slide 47

Slide 47 text

PRÁTICA

Slide 48

Slide 48 text

PRÁTICA Estes slides https://goo.gl/msdGpA Guia de estudo http://tableless.github.io/iniciantes Referência HTML http://mzl.la/1JJLwHJ Referência CSS http://mzl.la/1VsDbEr PHPStorm http://bit.ly/1Kya102 Sublime Text http://bit.ly/1ccNxBi Atom.io https://atom.io/

Slide 49

Slide 49 text

INTERVALO DESENVOLVIMENTO WEB Tonin R. Bolzan HTML JS PHP, Python, Ruby, C# CSS

Slide 50

Slide 50 text

HTML 4 HTML 5 XHTML Marcação JavaScript Interatividade Java Python PHP Ruby C# CSS 3 Estilização FRONT-END Nível 1 BACK-END Nível 2 Design Programação

Slide 51

Slide 51 text

PHP

Slide 52

Slide 52 text

PHP: O que é O nome é um acrônimo recursivo para "PHP: Hypertext Preprocessor" Originalmente chamada de Personal Home Page. Linguagem de programação interpretada Suporta Orientação a Objetos Tipagem Dinâmica (não exigem declarações de tipos de dados) Tipagem Fraca (tal como, 0 zero ser tratado como false) Usada para gerar o conteúdo do Front-End de forma Dinâmica

Slide 53

Slide 53 text

PHP: Como ele faz isso Dev. Web Dev. Web 2015-11-11

Slide 54

Slide 54 text

PHP: Variáveis e Tipos de dados $var1 = true; // Boolean $var2 = 22; // Integer $var3 = 22.3; // Float $var4 = “web”; // String $var5 = null; // Null $var5 = array(22, “web”); // Array $var5 = [22, “web”]; // Array $var5 = [0 => 22, 1 => “web”]; // Array $var6 = new DateTime(); // Object

Slide 55

Slide 55 text

PHP: Tipos de dados Complexos Closure, também chamadas de funções anônimas (similar ao javascript) $somar = function($x, $y) { return $x + $y; }; Resource, tipo de variável especial, pois representa um recurso externo. Objetos ou tipos de dados criados por extensões de terceiros para manipulação de um dado específico. Ex.: Imagens criadas com a extensão GD, que só podem ser manipuladas pelas funções que a própria extensão fornece.

Slide 56

Slide 56 text

PHP: Manipulação de tipos (Type Juggling) $foo = "1"; // $foo é uma string $foo += 2; // $foo agora é integer (3) $foo = $foo + 1.3; // $foo agora é float (4.3) $a = 'car'; $a[0] = 'b'; // Substitui o primeiro caractere echo $a; // bar

Slide 57

Slide 57 text

PHP: Inclusão de outros arquivos

Slide 58

Slide 58 text

PHP: Versão e Compatibilidade PHP 5.6 - Versão Atual Evite usar versões mais velhas que 5.5, apesar de compatíveis entre si, cada versão nova ganha novas caraterísticas únicas. PHP 5.5 End of Life 10 Jul 2016 PHP 7.0 - Dezembro de 2015 Muitas melhorias de performance e novas caraterísticas.

Slide 59

Slide 59 text

PHP: Frameworks

Slide 60

Slide 60 text

O PHP é só a linguagem de programação Apache HTTP Servidor mais usado atualmente na Web NGINX Pronuncia “engine x”, ganhando o espaço do Apache Microsoft IIS Internet Information Server, servidor web para Windows Pacotes Completos XAMPP X (todos s/o), Apache, MySQL, PHP - Perl WAMP Windows, Apache, MySQL, PHP - Perl - Python LAMP Linux, Apache, MySQL, PHP - Perl - Python MAMP Macintosh, Apache, MySQL, PHP - Perl - Python LEMP Linux, Nginx, MySQL, PHP - Perl - Python PHP: Servidor HTTP

Slide 61

Slide 61 text

PHP: Servidor HTTP

Slide 62

Slide 62 text

PHP PERGUNTAS ?

Slide 63

Slide 63 text