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.

9436c8fee41e53c79ccc145dffee09d2?s=128

Tonin Bolzan

November 11, 2015
Tweet

More Decks by Tonin Bolzan

Other Decks in Programming

Transcript

  1. DESENVOLVIMENTO WEB Tonin R. Bolzan HTML JS PHP, Python, Ruby,

    C# CSS
  2. Tonin R. Bolzan Bacharel em Sistemas de Informação Diretor Técnico

    Programador na Metrosoft S/A http://bolzan.io/
  3. frontinsm.com.br sfdsm.org

  4. 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
  5. 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
  6. CONCEITOS

  7. CLIENTE

  8. SERVIDOR

  9. CLIENTE SERVIDOR FRONT-END BACK-END Solicita Responde

  10. 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
  11. HTML 5

  12. 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
  13. 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>
  14. 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
  15. 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
  16. 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
  17. HTML 5 PERGUNTAS ?

  18. CSS 3

  19. 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
  20. CSS3: Estrutura Um agrupamento forma uma regra. seletor { propriedade:

    valor; }
  21. 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
  22. CSS3: Exemplo body { background-color: #000; } div { font-size:

    14px; font-weight: bold; }
  23. 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;}
  24. 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>
  25. 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; }
  26. 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>
  27. CSS3: Frameworks http://getbootstrap.com/ http://foundation.zurb.com/

  28. CSS3: Pré-processadores Organizam melhor o código CSS Permitem escrever funções

    e fazer cálculos sass-lang.com lesscss.org
  29. CSS 3 PERGUNTAS ?

  30. JAVASCRIPT

  31. 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
  32. 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
  33. 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
  34. 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";
  35. 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.
  36. 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
  37. 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);
  38. 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
  39. JS: Integração com HTML Inline <script type="text/javascript"> alert('Olá mundo!'); </style>

    Externo <script type="text/javascript" src="js/app.js"></style>
  40. JS: Bibliotecas e Frameworks http://todomvc.com/

  41. JS: Compiladores

  42. JAVASCRIPT PERGUNTAS ?

  43. FERRAMENTAS

  44. Open Source

  45. Licença Com ercial

  46. Licença Com ercial

  47. PRÁTICA

  48. 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/
  49. INTERVALO DESENVOLVIMENTO WEB Tonin R. Bolzan HTML JS PHP, Python,

    Ruby, C# CSS
  50. 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
  51. PHP

  52. 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
  53. 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>
  54. 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
  55. 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.
  56. 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
  57. PHP: Inclusão de outros arquivos <html> <head> <?php include “head.php“;

    ?> </head> <body> <?php include “body.php“; ?> </body> </html>
  58. 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.
  59. PHP: Frameworks

  60. 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
  61. PHP: Servidor HTTP

  62. PHP PERGUNTAS ?

  63. PRÁTICA

  64. 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/
  65. Obrigado! Tonin R. Bolzan Slides: https://goo.gl/msdGpA Contato: http://bolzan.io E-mail: contato@bolzan.io

    HTML JS PHP, Python, Ruby, C# CSS