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

Workshop de Web Design

Pedro Amado
October 02, 2017

Workshop de Web Design

Universidade de Aveiro, 2017-10-02
IEEE-Student Branch

Pedro Amado

October 02, 2017
Tweet

More Decks by Pedro Amado

Other Decks in Education

Transcript

  1. <wwd /> Workshop de Web Design IEEE Day, IEEE Student

    Branch Mestrado em Engenharia Electrónica e Telecomunicações, UNIVERSIDADE DE AVEIRO, 2 DE OUTUBRO DE 2017 PEDRO AMADO, [email protected]
  2. Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2

    de outubro de 2017 2 Sumário <!-- Referências & inspiração --> <!-- Processo & Ferramentas --> <!-- HTML5 & CSS3 --> <!-- Tipografia & Layout -->
  3. Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2

    de outubro de 2017 3 Apresentação Pedro Amado —Licenciatura Design de Comunicação (FBAUP, 2002) —Mestrado Arte Multimédia (FBAUP, 2007) —Doutoramento Ciências e Tecnologias da Comunicação (UA, 2014) —Delegado Português da ATypI (2012—)
  4. Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2

    de outubro de 2017 5 Projetos de Investigação
  5. Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2

    de outubro de 2017 7 Referências & Inspiração W3schools… FWAAAwards Mailing Lists
  6. Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2

    de outubro de 2017 8 http://www.webdesignernews.com/ W3schools… HTML Inspire FWAAAwards Podcasts Mailing Lists Newsletters
  7. Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2

    de outubro de 2017 9 https://hackdesign.org/ W3schools… HTML Inspire FWAAAwards Podcasts Mailing Lists Newsletters
  8. Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2

    de outubro de 2017 10 http://thewebahead.net/ W3schools… HTML Inspire FWAAAwards Podcasts Mailing Lists Newsletters
  9. Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2

    de outubro de 2017 11 https://www.siteinspire.com/ W3schools… HTML Inspire FWAAAwards Podcasts Mailing Lists Newsletters
  10. Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2

    de outubro de 2017 12 https://www.awwwards.com/ W3schools… HTML Inspire FWAAAwards Podcasts Mailing Lists Newsletters
  11. Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2

    de outubro de 2017 13 https://www.awwwards.com/ W3schools… HTML Inspire FWAAAwards Podcasts Mailing Lists Newsletters
  12. Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2

    de outubro de 2017 15 Processo & Ferramentas: Processo
  13. Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2

    de outubro de 2017 16 Processo & Ferramentas: Processo
  14. Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2

    de outubro de 2017 17 Processo & Ferramentas: Processo
  15. Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2

    de outubro de 2017 19 Processo & Ferramentas: Browsers… muitos…
  16. Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2

    de outubro de 2017 20 Processo & Ferramentas: Editores de código & gestor de FTP (publicação)
  17. Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2

    de outubro de 2017 21 Processo & Ferramentas: Integrated Development Environment (IDE)
  18. Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2

    de outubro de 2017 23 HTML5 & CSS3 HTML & CSS: Estrutura (Texto, Listas, hiperligações, imagens, Tabelas, Formulários, Audio, Vídeo, Gráficos e elementos interativo…) Apresentação e Layout
  19. Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2

    de outubro de 2017 24 HTML5 & CSS3 <html> </html> <body> </body> <h1>This is the Main Heading</h1> <h2>This is a Sub-Heading</h2> <p>This text might be an introduction to the rest of the page.</p> <p>Many long articles have sub-headings to help you follow the structure.</p>
  20. Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2

    de outubro de 2017 25 <marca atributo=“valor”> conteúdo </marca>
  21. Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2

    de outubro de 2017 26 HTML5 & CSS3 Conhecer o léxico (elementos) e a sintaxe da estrutura: https://www.w3schools.com/html/default.asp
  22. Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2

    de outubro de 2017 27 HTML5 & CSS3 <html> <head> <title> </title> </head> <body> <header> <h1> <p>… </header> <nav> <ul> <li> <a>… </nav> <main> <section> <article> <section> <figure /> <h1><p>… </section></article> </section> </main> <aside> <ul> <li> <a>… </aside> <footer> <h1> <p>… </footer> </body> </html>
  23. Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2

    de outubro de 2017 29 HTML5 & CSS3 seletor { propriedade : valor ; } Seletor Classe de elementos de HTML (marcas) que irão ter as propriedades (re)definidas. Exemplo: Texto, Títulos, Links, Listas, Tabelas, etc… Propriedade A propriedade ou atributo do elemento que vai assumir uma nova definição. Exemplo: Cor do texto, Cor de fundo, Fonte, Estilo, Margens, etc… Valor da propriedade. O valor, qualidade, ou quantidade de unidades que queremos assumir no elemento Exemplo: #FF0000, Red, Arial, 10pt, 10px, Normal, etc… Declaração (como o elemento se deve comportar)
  24. Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2

    de outubro de 2017 30 HTML5 & CSS3 h1, h2, h3 { font-family: arial; color: yellow; } Declaração (como o elemento se deve comportar)
  25. Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2

    de outubro de 2017 31 HTML5 & CSS3 <html> <head> <title>Using External CSS</title> <link href="css/styles.css” type="text/css" rel="stylesheet"> </head> <body> <h1>Potatoes</h1> … Declaração (como o elemento se deve comportar)
  26. Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2

    de outubro de 2017 32 HTML5 & CSS3 Universal * {} Type h1, h2, h3 {} Class .note {} p.note {} ID #introduction {}
  27. Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2

    de outubro de 2017 33 HTML5 & CSS3 Child li>a {} Descendent p a {} Adjacent sibling h1+p {} General sibling h1~p {}
  28. Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2

    de outubro de 2017 34 HTML5 & CSS3: Box Model 101 The Cottage Garden The cottage garden is a distinct style of garden that uses an informal design, dense planting and a mixture of ornamental and edible plants. The Cottage Garden originated in England and its history can be traced back for centuries, although they were re-invented in 1870's England, when stylized versions were formed as a reaction to the more structured and rigorously maintained English estate gardens. The earliest cottage gardens were more practical than their modern descendants, with an emphasis on vegetables and herbs, along with some fruit trees.
  29. Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2

    de outubro de 2017 35 HTML5 & CSS3: Box Model 101 Dimensão e posição Largura, altura, visibilidade, moldagem,… Cor Cor do elemento, cor de background, border, padding… Tipografia Tipo de letra, tamanho, espaçamentos, alinhamentos,
  30. Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2

    de outubro de 2017 37 Tipografia & Layout Criar interesse e contraste Classificação Hieraquia & Escala (Rutter) Estilo e peso
  31. Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2

    de outubro de 2017 38 Tipografia & Layout: http://webtypography.net/ Criar interesse e contraste Classificação Hieraquia & Escala (Rutter) Estilo e peso
  32. Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2

    de outubro de 2017 39 Tipografia & Layout
  33. Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2

    de outubro de 2017 40 Tipografia & Layout Espaço branco Sistemas de grelhas
  34. Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2

    de outubro de 2017 41 Tipografia & Layout Espaço branco Sistemas de grelhas
  35. Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2

    de outubro de 2017 42 Frameworks: https://www.lightningdesignsystem.com/ Espaço branco Sistemas de grelhas
  36. Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2

    de outubro de 2017 43 Referências importantes Técnicas Duckett, J. (2011). HTML & CSS: Design and Build Websites. Indianapolis: John Wiley & Sons, Inc. Howe, S. (2017). Learn to Code HTML & CSS - Beginner & Advanced. Retrieved September 19, 2017, from http://learn.shayhowe.com/ Robbins, J. N. (2012). Learning Web Design, 4th Edition: A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics. Sebastopol: O’Reilly Media. Retrieved from http://shop.oreilly.com/product/0636920023494.do Design Boulton, M. (2009). A Pratical Guide to Designing for the Web. Penarth: Five Simple Steps. Retrieved from http://designingfortheweb.co.uk/