Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Desenvolvimento Web

Desenvolvimento Web

Semana Acadêmica da URI Santiago
Apresentação das tecnologias utilizadas no desenvolvimento web.

Tonin Bolzan

November 11, 2015
Tweet

More Decks by Tonin Bolzan

Other Decks in Programming

Transcript

  1. Tonin R. Bolzan Bacharel em Sistemas de Informação Diretor Técnico

    Programador na Metrosoft S/A http://bolzan.io/
  2. 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
  3. 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
  4. 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
  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
  6. 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> <!-- Comentários --> <!doctype>
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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;}
  13. 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>
  14. 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; }
  15. 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>
  16. 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
  17. 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
  18. 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
  19. 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";
  20. 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.
  21. 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
  22. 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);
  23. 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
  24. JS: Integração com HTML Inline <script type="text/javascript"> alert('Olá mundo!'); </style>

    Externo <script type="text/javascript" src="js/app.js"></style>
  25. 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/
  26. 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
  27. PHP

  28. 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
  29. 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>
  30. 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
  31. 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.
  32. 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
  33. PHP: Inclusão de outros arquivos <html> <head> <?php include “head.php“;

    ?> </head> <body> <?php include “body.php“; ?> </body> </html>
  34. 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.
  35. 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
  36. 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/