Desenvolvimento Web

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

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

frontinsm.com.br sfdsm.org

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

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

CONCEITOS

CLIENTE

SERVIDOR

CLIENTE SERVIDOR FRONT-END BACK-END Solicita Responde

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

HTML 5

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

HTML5: Estrutura <tag>conteúdo</tag> <tag/> <tag> <tag atributo="valor">conteúdo</tag> <tag atributo="valor"/> <tag
atributo-a="valores de a" atributo-b="valores de b"></tag>  <!doctype>

HTML5: Tags <html></html> <head></head> <body></body> <main><main/> <div></div> <h1><h1/> <br> <hr>
http://www.w3.org/TR/html-markup/elements.html <section></section> <article></article> <header></header> <footer></footer> <nav></nav> <table></table> <input> <hr> Total de 108 tags na referência + algumas não padronizadas

HTML5: Atributos class <div class="classe-de-teste01 classe-de-teste02"> Determina uma (ou mais)
classe(s) para o elemento. Para definir mais de uma classe, coloque-as separadas por espaço. id <div id="identificador-de-teste"> Identificador único do elemento. Somente um por tag. não deve ser repetido na mesma página. hidden <div hidden="hidden"> Oculta o elemento onde for declarado. http://www.w3.org/TR/html-markup/global-attributes.html

HTML5: Elementos -------------------------------------------- <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8">
<title>Minicurso</title> </head> <body> </body> </html> -------------------------------------------- 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

HTML 5 PERGUNTAS ?

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

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

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

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

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 <div id="identificador" class="teste"></div> No CSS estes atributos possuem caracteres especiais id é representado por # class é representado por . (ponto) #identificador {font-size: 14px;} .teste {font-size: 14px;}

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

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; }

CSS3: Integração com HTML Inline <span style="color: red">texto na cor
vermelha</span> Interno <head> <style type="text/css"> span { color: red; } </style> </head> Externo <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head>

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

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

CSS 3 PERGUNTAS ?

JAVASCRIPT

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

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

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

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";

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.

JS: Consulta ao HTML (DOM) <div id="identificador" class="teste"></div> document.getElementsByTagName(“div”); //
HTMLElement document.getElementsByClassName(“teste”); // HTMLElement document.getElementById(“identificador”); // HTMLCollection document.querySelector(“#identificador”); // HTMLElement document.querySelectorAll(“.teste”); // NodeList

JS: Eventos <button id="btn">Clique Aqui</button> <p id="el">Texto</p> ------------------------------------------------------------- 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);

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

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

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

JS: Compiladores

JAVASCRIPT PERGUNTAS ?

FERRAMENTAS

Open Source

Licença Com ercial

PRÁTICA

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/

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

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

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

PHP: Como ele faz isso <html> <head> <title>Dev. Web</title> </head>
<body> <?php echo date(“Y-m-d”); ?> </body> </html> <html> <head> <title>Dev. Web</title> </head> <body> 2015-11-11 </body> </html>

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

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.

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

PHP: Inclusão de outros arquivos <html> <head> <?php include “head.php“;
?> </head> <body> <?php include “body.php“; ?> </body> </html>

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.

PHP: Frameworks

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

PHP: Servidor HTTP

PHP PERGUNTAS ?

PRÁTICA

PRÁTICA Estes slides https://goo.gl/msdGpA Referência PHP http://php.net/manual/pt_BR Guia PHP http://br.phptherightway.com
PHPStorm http://bit.ly/1Kya102 Sublime Text http://bit.ly/1ccNxBi Atom.io https://atom.io/

Obrigado! Tonin R. Bolzan Slides: https://goo.gl/msdGpA Contato: http://bolzan.io E-mail: [email protected]
HTML JS PHP, Python, Ruby, C# CSS

Desenvolvimento Web

Desenvolvimento Web

More Decks by Tonin Bolzan

Other Decks in Programming

Featured

Transcript