Curso Web Designer - UTD Aula 01

Transcrição

1 Curso Web Designer - UTD Aula 01

2 Objetivos da Aula Aula 01 Introdução a Web; O que é um Web Design? FrontEnd e o Mercado Hoje; HTML e CSS; Estrutura de um website; Sites estáticos e dinâmicos; Arquitetura Web; Navegadores; Editores de Texto.

3 Introdução a Web 11

4 Introdução a Web A World Wide Web, também conhecida como Web e WWW, é um sistema de documentos disponível na Internet. Ele permite o acesso à informações interligados no formato e executados informações, é necessário de hipertexto na Internet. Mas hipermídia), para são essas chamado mais famosos são: Mozilla Firefox Safari que acessar utilizar um programa de computador navegador (browser). Os navegadores Google Chrome (ou Internet Explorer Opera 12

5 Introdução a Web Era uma vez... A ideia de World Wide Web surgiu em 1980, na Suíça. O precursor da ideia foi o britânico Tim Berners-Lee

6 Introdução a Web Era uma vez... Em 1990, um computador NeXTcube foi usado por Tim Berners-Lee como primeiro servidor web, e também para escrever o primeiro navegador, o WorldWideWeb

7 Introdução a Web Era uma vez... Em 6 de agosto de 1991, Tim Berners-Lee postou resumo sobre todas as suas ideias um e projetos no grupo de notícias de nome alt.hypertext. Esta data marca a estréia oficial da Web como um serviço publicado na Internet

8 Introdução a Web Desde então, a Internet proporções gigantescas. informações que A chance de ser perder em meio à tantas em quantidade de está disponível no universo online é muito mais assimilar durante A cresceu do que poderiamos uma vida inteira. informações é muito grande, por esta razão é importante saber como essas informações estão dispostas. É aí que entra o hipertexto. 16

9 Introdução a Web O que é um hipertexto? Os hipertextos são textos exibidos em formato digital, os quais podem conter informações em formato de imagens, sons, vídeos, etc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullan fermentum Integer malesuada Sed efficitur, neque convalli O acesso a essas informações se dá por meio de links, estes servem como uma ponte entre os mais diversos sites da Internet e seus conteúdos. 17

10 O QUE É WEB DESIGN? 18

11 O que é Web design O web design é uma área de estudo caracterizada pelo desenvolvimento de interfaces com o usuário em web sites e aplicações web. Podemos considerar o web design como parte do design gráfico, que é muito mais abrangente, pois envolve o desenho de qualquer tipo de layout, banner ou mídia computadorizada. O que faz o Web Designer? O profissional que estuda web design é então chamado de web designer, que é responsável por projetar e desenhar web sites, blogs, sistemas e aplicativos web. Seu papel é criar a interface gráfica do site, onde ocorrerá toda interação do usuário, portanto é importante que o web designer tenha em mente atributos como: facilidade de uso do site e emoções que o design pode despertar no usuário, dessa forma seu design será mais eficiente.

12 FrontEnd e o Mercado Hoje 5

13 Front End e o Mercado Hoje Muitas empresas costumam contratar desenvolvedores back-end, esperando que eles façam todo o trabalho do front-end. Esse é um dos maiores erros cometidos, resultado disso Efeitos com CSS/JS Se ainda não pois em muitos casos, o é a falta de atenção a detalhes do layout como: Alinhamento dos elementos fosse o bastante, Fonte esses gastando para fazer o que (geralmente) não fazem. Grids Performance desenvolvedores acabam

14 Front End e o Mercado Hoje Com o tempo, as empresas começaram a entender a necessidade de ter um profissional focado apenas em desenvolver ultimamente, tem aquecido muito o mercado profissional interfaces, mundial. Normalmente um projeto é dividido em 3 níveis: Interface Design Front-End / Client-Side Back-End / Server-Side o que,

15 Front End e o Mercado Hoje Existem vários exemplos de profissionais no mundo que tornam os nossos dias mais fáceis com interfaces amigáveis e interativas, são eles: Google Gmail Facebook Hotmail Globo.com Google Gma il Facebook Hotmail Globo.com Entre vários outros serviços, portais ou até mesmo websites. Hoje o mercado está desesperado por profissionais, mas não encontram com as características e experiências necessárias para os projetos. 8

16 Front End e o Mercado Hoje A Globo.com, desenvolvedores por exemplo, está sempre contratando novos por 2 simples motivos: Nem sempre encontram um profissional com a experiência e/ou conhecimento necessário; Às vezes, os desenvolvedores vão para outras empresas (Google, Facebook, etc). 9

17 Front End e o Mercado Hoje Fatos interessantes No Brasil, em algumas empresas de médio e grande porte, o salá rio de um Front-End Júnior pode chegar entre R$ 2.000,00 à R$ 2.500,00 (dependendo de seu conhecimento). Algumas Startup's estão com necessidades extremas para encontrar um profissional Front-End com uma boa experiência, pagando às vezes, muito acima da média. 10

18 HTML e CSS 18

19 HTML e CSS Sempre que acessamos uma página web, a informação pode estar na forma de texto, imagem, áudio ou vídeo e são inseridos por uma linguagem chamada HTML (HyperText Markup Language). Objetivo 1 1Originalmente proposta por Tim 2 2 Foi criado a partir de um Berners-Lee no final da década mecanismo simples, que pudesse de 1990, é uma linguagem de ser utilizado por qualquer pessoa marcação para produzir páginas interessada em disseminar web. documentos científicos. 19

20 HTML e CSS Até os dias de hoje, a linguagem HTML sofreu diversas alterações, e a cada versão novos recursos são adicionados e os problemas corrigidos. Hoje a versão mais atual da linguagem HTML é a 5 que foi finalizada em meados de Outubro de A maioria dos navegadores suportam o HTML5 com pequenas limitações. Você pode ver a documentação aqui: 20

21 HTML e CSS As descrições da linguagem HTML são especificadas pela W3C (World Wide Web Consortium) que além do HTML, também é responsável linguagens como o XML SVG e pelo DOM, por exemplo., extensible Markup Language XML Scalable Vector Graphics SVG Document Object Model DOM por

22 HTML e CSS Os navegadores não exibem o HTML com o estilo que é determinado por quem implementa. passam a Isso gera problemas, decidir a formatação Navegador pois os navegadores que será adotada. C onsiderando que cada navegador ad ota uma formatação diferente Formatação diferente em u ma mesma página web, a informação o será exibida da mesma forma em nã dos os navegadores. to

23 HTML e CSS Vale lembrar formatações que as adotadas pelos principais navegadores não são bonitas, desta forma podemos padronizar a maneira que as páginas exibidas nos web serão diferentes navegadores, e obter um visual agradável de acordo com a nossa pro pria formatação.

24 HTML e CSS Os estilos das páginas devem ser definidas com a linguagem (Cascading Style Sheets). IMPORTANT E Assim como a linguagem HTML, a linguagem CSS é definida pelo W3C, e você pode consultar documentação do CSS no seguinte endereço: a CSS

25 HTML e CSS O W3C faz diversas funcionalidades do CSS, recomendações sobre mas nem sempre os como implementar as navegadores respeitam essas recomendações. Eventualmente adotam uma acordo com essas os abordagem pro pria de a funcionalidade, e diferenças problemas para o páginas. navegadores que podem são gerar desenvolvimento de

26 Estrutura de um website 26

27 Estrutura de um Website O desenvolvimento Client-side é baseado Informação Em outras palavras: Formatação em 3 principais camadas: Comportamento

28 Estrutura de um Website Informação Sem dúvidas é a camada mais importante ficando sob controle do HTML, que por sua vez, é o responsável por dar significado ao conteúdo da página, sendo reconhecido por robôs, aplicações, sistemas e outras coisas que possam acessar e reutilizar essa informação. CONTEÚDO DA PÁGINA HTML INFORMAÇÃO 28

29 Estrutura de um Website Mas, qual é a diferença entre conteúdo e informação? Informação Informação é tudo o que o usuário consome e compartilha de maneira rápida e dinâmica, por meio de recursos portáveis que não seja acessível somente por um meio. No s entendemos o significado dos elementos porque sabemos a diferença entre um titulo e um parágrafo, por conta de suas características visuais, como tamanho da fonte, escrita, etc... 29

30 Estrutura de um Website As máquinas (sistemas de busca, leitores de tela, browsers, etc) não tem essa mesma visão, eles não conseguem entender visualmente o que é um título, um parágrafo, uma imagem, entre outras coisas. No entanto, o papel da marcação do HTML é dar sentido as coisas, pois se todas a mensagem as outras entregue camadas falharem será independente do visual. 30

31 Estrutura de um Website Formatação Esta camada é responsável por controlar o visual da informação exibida pelo HTML, ou seja, é a camada que deixa tudo bonito, que faz vender e enche os olhos do cliente. Ela é controlada pelo CSS, que formata todo o Ea conteúdo deixando mais agradável em qualquer con meio de acesso (TVs, Smartphones, me o Computadores e até mesmo meios de Com impressão). mp 31

32 Estrutura de um Website Formatação com CSS é muito mais do que pintar divs e trocar letras e cores, ele é o responsável por desenvolver que exibida será independente de a informação forma adequada do dispositivo. 32

33 Estrutura de um Website Comportamento Esta camada é quem cuida dos comportamentos da nossa página. Hoje o JavaScript é o principal responsável por esta camada, pois nele definimos os elementos que serão arrastados, dimensionados, rotacionados, etc. Ele pode controlar as características de um determinado elemento através do CSS manipulando assim suas propriedades. 33

34 Estrutura de um Website O CSS também é um pé nessa camada, já que o com CSS3 comportamento podemos simples dos controlar elementos como animações ou transições por exemplo. 34

35 Sites estáticos e dinâmicos 35

36 Sites estáticos e dinâmicos O que são sites estáticos e dinâmicos? Sites estáticos Sites dinâmicos Sites estáticos são aqueles que não possuem banco de dados e ferramentas de gerenciamento incorporadas a ele. A sua manutenção é muito difícil, ou seja, tudo o que é adicionado precisa ser feito a mão, o que dificulta muito a vida do cliente, sempre dependendo de um programador. 36

37 Sites estáticos e dinâmicos O que são sites estáticos e dinâmicos? Sites estáticos Sites dinâmicos Sites dinâmicos são facilmente gerenciados através de algum sistema feito sob medida, ou algum CMS (Content Management System) onde suas informações estão armazenadas em um banco de dados. Podem ser facilmente atualizados e corrigidos pelo pro prio site, utilizando linguagens de programação como PHP, Java, Python e outras para que tudo seja facilmente alterado. 37

38 Arquitetura Web 38

39 Arquitetura Web Alguns profissionais se especializam no client-side (Front-end) e outros no server-side (Back-end). Mas o nosso foco é: O desenvolvimento do lado cliente, por tanto vamos usar a estrutura básica do Front-end. 39

40 Arquitetura Web O desenvolvedor projeto, acaba que organiza o dizendo muito sobre ele. No entanto, muitos front-ends recentes na área, não possuem uma base so lida de como o back-end de uma aplicação funciona. Por esse motivo, se torna necessário a abordagem de algumas boas práticas para produtividade de toda equipe, partindo da organização de todos os arquivos. 40

41 Arquitetura Web Acompanhe, agora, CSS IMAGE M um exemplo de organização de projeto: /- css /- pages - (seus arquivos.css) - main.css /- img /- sample - (suas imagens na raiz da pasta) JAVASCRIPT /- js /- components /- modules main.js 41

42 Arquitetura Web Agora veja as funcionalidades do CSS, JAVASCRIPT e IMAGENS: CSS CSS JAVASCRIPT JAVASCRIPT IMAGENS IMAGENS CSS main.css: É o arquivo principal que pode ou não importar arquivos correspondentes de cada página. pages: Pasta que contém os arquivos.css para cada página/componente do projeto. 42

43 Arquitetura Web Agora veja as funcionalidades do CSS, JAVASCRIPT e IMAGENS: CSS CSS JAVASCRIPT components: JAVASCRIPT JAVASCRIPT Armazenar suas bibliotecas, frameworks, etc. modules: Armazenar os arquivos específicos para IMAGENS IMAGENS cada mo dulo necessário na aplicação. main.js: É o arquivo JavaScript principal da aplicação. 43

44 Arquitetura Web Agora veja as funcionalidades do CSS, JAVASCRIPT e IMAGENS: CSS CSS IMAGENS sample: Pasta que contém um tipo específico de JAVASCRIPT JAVASCRIPT imagem, por exemplo, onde são armazenadas imagens vindas do back-end da aplicação. IMAGENS IMAGENS : Imagens, CSS e arquivos JS que ficam na raiz da pasta pai. Obs: Você pode organizar suas imagens em várias subpastas da maneira que achar melhor. 44

45 Arquitetura Web Modularizar a aplicação, ajuda a organizar implementar uma determinada funcionalidade para arquivos e também uma página específica. Ainda, facilita à debugar quaisquer tipos de erros, tirando o fato de que cada desenvolvedor trabalha em paralelo com mo dulos diferentes da aplicação, sem atrapalhar ninguém. 45

46 Editores de Texto 53

47 Editores de Texto Escolhendo um editor de texto É importantíssimo saber utilizar diferentes tipos de editores de texto, no entanto, é altamente recomendável ter um editor de texto que melhore seu workflow, desta forma, será possível ter mais agilidade nas execuções. Não se importe em utilizar o Dreamweaver, desde que você esteja ciente do que está fazendo e não fique tão dependente dele. Assim, ele não servirá de muleta, o que para o desenvolvedor é muito ruim. 54

48 Editores de Texto Você precisa entender o co digo, e não depender de nada que faça tudo sozinho como o Dreamweaver, Eclipse, entre outros. Se você esta começando a ter um editor que fica auto-completando tudo o que você faz, desabilite esta função pelo menos por enquanto. Com isto, você precisará procurar a resposta e se esforçará a lembrar do que você se esqueceu. 55

49 Próximos Passos Para que você tenha um melhor aproveitamento seguintes atividades disponíveis no do curso, participe das Step 2: Aula 2: Conhecendo o HTML Fazer a leitura dos Slides; Assistir a aula Síncrona; Realizar o Laborato rio e Teste de Conhecimento; Faça os exercícios propostos do Projeto Dexter. Mãos à obra! 57