1 / 37

Aplicativos para Internet Aula 05

Aplicativos para Internet Aula 05. Box model e layouts Prof. Danielle Martin Universidade de Mogi das Cruzes. Web Design. O layout de um website está diretamente ligado à imagem da empresa a que está vinculado A criação de um bom layout deve incluir a preocupação com aspectos como:

emory
Download Presentation

Aplicativos para Internet Aula 05

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Aplicativos para InternetAula 05 Box model e layouts Prof. Danielle Martin Universidade de Mogi das Cruzes

  2. Web Design • O layout de um website está diretamente ligado à imagem da empresa a que está vinculado • A criação de um bom layout deve incluir a preocupação com aspectos como: • Diagramação • Estética • Tipografia • Usabilidade • Experiência do usuário • Responsividade a mídias alvo

  3. Evolução do web design • A primeira página da internet (1992)

  4. Evolução do web design • Década de 90 • Utilização de tabelas para criar colunas • Imagens de fundo cortadas para encaixar nas células • Utilização de frames • Gifs animados • Texto animado • Contadores de acessos no rodapé • Criação de sites com Geocities, Angelfire e outros

  5. Evolução do web design • Década de 90

  6. Evolução do web design • Início da Década de 2000 • Menus animados com flash • Páginas de abertura dos sites • Uso crescente de CSS • Fim dos layouts com tabela • Menus laterais começaram a ser posicionados no topo da página • Navegação com menus dropdown • Animações e interações com javascript

  7. Evolução do web design • Início da década de 2000

  8. Evolução do web design • Final da Década de 2000 • Início da Web 2.0 • Disseminação da web semântica • Técnicas de Search EngineOptimization (SEO) • Integração com XML • Conteúdo interativo com Ajax • Integração com redes sociais • Surgimento do HTML 5

  9. Evolução do web design • Final da década de 2000

  10. Evolução do web design • Tendências atuais • Designs responsivos a diferentes mídias • Enfoque no conteúdo • Tendências minimalistas de design • Layout vertical para se adaptar à rolagem de dispositivos móveis • Aumento da área útil do site • Utilização de dispositivos móveis • Web sites recebem informações de localização e movimentação de aparelhos móveis

  11. Evolução do web design • Hoje

  12. Ferramentas para auxiliar a criação de designs • Esquema de cores • http://colrd.com • https://kuler.adobe.com/ • Criação de protótipos e wireframes • http://pencil.evolus.vn/ • Tipografia e fontes • http://www.typography.com/email/2010_03/index.htm • http://www.google.com/fonts • Gerador de efeitos do CSS 3 • http://css3generator.com • Edição de imagens online • http://clippingmagic.com • http://mugtug.com/darkroom/ • Ícones gratuitos • https://www.iconfinder.com/browse/free • http://www.smashingmagazine.com/tag/freebies/

  13. Criando um layout com HTML + CSS • Para criar um layout com HTML usamos a tag DIV para delimitar cada região do layout. O id de cada um nos permitirá formatá-los. • Exemplo: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Marcação de layout</title> <link rel="stylesheet" href="exemplolayout.css" type="text/css"> </head> <body> <div id="layout"> <div id="topo"> <h1>Títulodapágina</h1> </div> <div id="esquerda"> <p>Menu</p> </div> <div id="direita"> <p>Conteúdo</p> </div> </div> </body> </html>

  14. Criando um layout com HTML + CSS • A formatação do layout será feita com CSS, e iremos usar os seguintes conceitos: • Posicionamento • Permite posicionar um elemento em uma localização absoluta da tela, ou deslocá-lo de sua posição original • Propriedade CSS: position • Flutuação • Permite encaixar um elemento em outro, ocupando o espaço disponível entre eles • Propriedade CSS: float • Margem • O espaçamento externo de um elemento, define a distância entre ele e os demais. • Propriedade CSS: margin • Espaçamento • Espaçamento interno de um elemento, define a distância entre a margem e o conteúdo da tag • Propriedade CSS: padding

  15. Box model • Em termos de espaçamento e margem, as propriedades do CSS se aplicam da seguinte maneira, representação conhecida como Box Model. TOP MARGIN BORDER PADDING HEIGHT CONTEUDO LEFT RIGHT WIDTH BOTTOM

  16. Box Model • Cada tag do HTML tem seus valores de tamanho e espaçamento padrão, definidos pelo browser. • Exemplo: representação do elemento H1 pelo Google Chrome.

  17. Propriedade border • A propriedade border define a espessura, o estilo e a cor da borda de um box. • border-style: declara o estilo da borda; • border-color: declara a cor da borda; • border-width: declara a espessura da borda. • Exemplo:

  18. Propriedade border • Versão abreviada: • Versão abreviada 2: TOP RIGHT BOTTOM LEFT

  19. Propriedade margin • A propriedade margin define o espaçamento externo de um elemento. • As regras de abreviação valem também para a margem • Exemplo:

  20. Propriedade margin • Versão abreviada: • Versão abreviada 2: TOP RIGHT BOTTOM LEFT TOP/BOTTOM LEFT/RIGHT

  21. Propriedade padding • A propriedade padding define o espaçamento interno de um elemento (enchimento). • As regras de abreviação valem também para o padding • Exemplo:

  22. Propriedade padding • Versão abreviada: • Versão abreviada 2: TOP RIGHT BOTTOM LEFT TOP/BOTTOM LEFT/RIGHT

  23. Propriedade position • A propriedade position permite retirar um elemento de sua posição inicial e recolocá-lo em outra coordenada, de uma das seguintes maneiras: • Absoluta: define que o novo posicionamento será definido por coordenadas absolutas na tela; • position: absolute; • Relativa: define que o novo posicionamento será definido por coordenadas relativas em relação à sua posição inicial. • position: relative; • As coordenadas da localização podem ser definidas pelas propriedades top, left, right e bottom.

  24. Propriedade position • Posicionamento absoluto: • Posicionamento relativo:

  25. Propriedade float • A propriedade float permite deslocar um elemento para a esquerda ou direita do fluxo natural de posicionamento. Os elementos ao seu redor tentarão então se encaixar no espaço disponível deixado por esse elemento. • Um uso comum é flutuar uma imagem para a lateral para que um parágrafo seja exibido ao seu lado. Vamos flutuar a seguinte imagem:

  26. Propriedade float • float: left; • float: right;

  27. Flutuando elementos de layout • Iremos utilizar a propriedade float para encaixar as regiões do layout. É dessa maneira que criamos o efeito de colunas. • Vamos criar o CSS para a marcação de layout que criamos: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Layout com CSS</title> <link rel="stylesheet" href="exemplolayout.css" type="text/css"> </head> <body> <div id=“container"> <div id=“header"> <h1>Títulodapágina</h1> </div> <div id=“nav"> <p>Menu</p> </div> <div id=“main"> <p>Conteúdo</p> </div> </div> </body> </html>

  28. Flutuando elementos de layout • Com CSS aplicado:

  29. Flutuando elementos de layout • Vamos criar agora um layout com: cabeçalho, menu horizontal, barra lateral, área de conteúdo e rodapé. • O layout é representado pelo seguinte wireframe:

  30. Flutuando elementos de layout

  31. Flutuando elementos de layout

  32. Criando menus horizontais • Menus de navegação são semanticamente uma lista de links internos do site. • Portanto, para criar a marcação de um menu, usamos as tags <ul> e <li> • Exemplo: <ul> <li>Item do menu</li> <li>Item do menu</li> <li>Item do menu</li> <li>Item do menu</li> </ul>

  33. Criando menus horizontais • Para remover o marcador da lista usamos a propriedade list-style: none; • Para formatar o menu de forma que os links apareçam horizontalmente, usamos a propriedade display: inline-block;

  34. Exercício • Crie uma réplica de maneira mais fiel possível do seguinte layout:

  35. Exercício • Dica: wireframe do layout

  36. Exercício • Dica: wireframe do layout

  37. Links para inspiração • http://www.printi.com.br/blog/8-dicas-para-criar-um-layout-perfeito • http://www.finalizart.com/o-mundo-do-design/718-21-exemplos-de-web-design-responsivo • http://designerfaztudo.com.br/vintage-retro-design-30-exemplos/ • http://www.smashingmagazine.com/2010/09/19/showcase-of-web-design-in-the-arab-world/ • http://www.smashingmagazine.com/2008/09/03/40-creative-design-layouts-getting-out-of-the-box/ • http://www.smashingmagazine.com/2010/11/11/designing-memorable-websites-showcase-of-creative-designs/ • http://www.smashingmagazine.com/2011/01/25/showcase-of-beautiful-and-fresh-ecommerce-websites/ • http://www.smashingmagazine.com/2013/08/29/innovative-appraoches-web-layout/<<

More Related