Workshop de Web Design

<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]

Workshop de Web Design. IEEE Day, Universidade de Aveiro, 2
de outubro de 2017 2 Sumário

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—)

de outubro de 2017 4

de outubro de 2017 5 Projetos de Investigação

<!– Referências & Inspiração -->

de outubro de 2017 7 Referências & Inspiração W3schools… FWAAAwards Mailing Lists

de outubro de 2017 8 http://www.webdesignernews.com/ W3schools… HTML Inspire FWAAAwards Podcasts Mailing Lists Newsletters

de outubro de 2017 9 https://hackdesign.org/ W3schools… HTML Inspire FWAAAwards Podcasts Mailing Lists Newsletters

de outubro de 2017 10 http://thewebahead.net/ W3schools… HTML Inspire FWAAAwards Podcasts Mailing Lists Newsletters

de outubro de 2017 11 https://www.siteinspire.com/ W3schools… HTML Inspire FWAAAwards Podcasts Mailing Lists Newsletters

de outubro de 2017 12 https://www.awwwards.com/ W3schools… HTML Inspire FWAAAwards Podcasts Mailing Lists Newsletters

de outubro de 2017 13 https://www.awwwards.com/ W3schools… HTML Inspire FWAAAwards Podcasts Mailing Lists Newsletters

de outubro de 2017 15 Processo & Ferramentas: Processo

de outubro de 2017 19 Processo & Ferramentas: Browsers… muitos…

de outubro de 2017 20 Processo & Ferramentas: Editores de código & gestor de FTP (publicação)

de outubro de 2017 21 Processo & Ferramentas: Integrated Development Environment (IDE)

<!– HTML5 -->

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

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>

de outubro de 2017 25 <marca atributo=“valor”> conteúdo </marca>

de outubro de 2017 26 HTML5 & CSS3 Conhecer o léxico (elementos) e a sintaxe da estrutura: https://www.w3schools.com/html/default.asp

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>

<!– CSS3 -->

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)

de outubro de 2017 30 HTML5 & CSS3 h1, h2, h3 { font-family: arial; color: yellow; } Declaração (como o elemento se deve comportar)

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)

de outubro de 2017 32 HTML5 & CSS3 Universal * {} Type h1, h2, h3 {} Class .note {} p.note {} ID #introduction {}

de outubro de 2017 33 HTML5 & CSS3 Child li>a {} Descendent p a {} Adjacent sibling h1+p {} General sibling h1~p {}

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.

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,

<!– Tipografia & Layout -->

de outubro de 2017 37 Tipografia & Layout Criar interesse e contraste Classificação Hieraquia & Escala (Rutter) Estilo e peso

de outubro de 2017 38 Tipografia & Layout: http://webtypography.net/ Criar interesse e contraste Classificação Hieraquia & Escala (Rutter) Estilo e peso

de outubro de 2017 39 Tipografia & Layout

de outubro de 2017 40 Tipografia & Layout Espaço branco Sistemas de grelhas

de outubro de 2017 41 Tipografia & Layout Espaço branco Sistemas de grelhas

de outubro de 2017 42 Frameworks: https://www.lightningdesignsystem.com/ Espaço branco Sistemas de grelhas

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/

Workshop de Web Design

Workshop de Web Design

More Decks by Pedro Amado

Other Decks in Education

Featured

Transcript