SlideShare uma empresa Scribd logo
1 de 2
Caro Aluno,
Com as discussões desta unidade, podemos perceber que as tabelas não são mais
utilizadas para posicionamento de elementos em uma página. Para isso, são usados
conceitos de CSS. Apesar de tratarmos apenas das tabelas nesta unidade, uma boa
discussão, que podemos começar agora, é sobre os motivos que levaram o Consórcio
Mundial da Internet a essa decisão. Procure algumas soluções para esse problema,
para tentarmos chegar a uma solução adequada ou mais
Vamos lá?
Existe hoje no mercado uma grande quantidade de empresas especializadas no
desenvolvimento de sites e aplicações web, bem como algumas empresas de
desenvolvimento de software ou agências de comunicação que têm pessoas
capacitadas para executar esse tipo de projeto.
Quando detectada a necessidade do desenvolvimento de um site ou aplicação web, a
empresa que tem essa necessidade deve passar todas as informações relevantes ao
projeto para a empresa que vai executá-lo. A empresa responsável pelo seu
desenvolvimento deve analisar muito bem essas informações e utilizar pesquisas
para complementar ou mesmo certificar-se da validade dessas informações.
Um projeto de site ou aplicação web envolve muitas disciplinas em sua execução,
pois são diversas características a serem analisadas e diversas as
possibilidades apresentadas pela plataforma. Por exemplo, devemos conhecer muito
bem as características do público alvo, pois ele define qual a melhor abordagem
para definir a navegação, tom linguístico e visual a ser adotado, entre outras.
A afinidade do público com a Internet e o computador pode inclusive definir o
tipo e a intensidade das inovações que podem ser utilizadas.
Por isso, a primeira etapa do desenvolvimento do projeto fica a cargo da área de
User Experience Design (UX) ou Interaction Design (IxD), normalmente composta de
pessoas com formação na área de comunicação. Essa equipe, ou pessoa, analisa e
endereça uma série de informações da característica humana do projeto, definindo
a quantidade, conteúdo e localização de cada informação.
Algumas das motivações e práticas de Design de Interação e Experiência do
Usuário são conteúdo do curso Design de Interação, Experiência do Usuário e
Usabilidade. O resultado do trabalho dessa equipe é uma série de definições
sobre a navegação (mapa do site) e um esboço de cada uma das visões, que são as
páginas, e visões parciais como, por exemplo, os diálogos de alerta e
confirmação da aplicação. Essas visões não adotam nenhum padrão de design
gráfico: são utilizadas fontes, cores e imagens neutras, embora as informações
escritas devam ser definidas nessa fase do projeto.
Esses esboços das visões são o que chamamos de wireframes e guiam o restante do
processo de design.
Com os wireframes em mãos, é hora de adicionar as imagens, cores, tipos, fundos,
bordas e outras características visuais. Esse trabalho é realizado pelos
designers gráficos, que utilizam ferramentas gráficas como Adobe Photoshop,
Adobe Fireworks, GIMP, entre outras. O que resulta desse trabalho que o designer
realiza em cada wireframe é o que chamamos de layout. Os layouts são imagens
estáticas já com o visual completo a ser implementado. Apesar de os navegadores
serem capazes de exibir imagens estáticas, exibir uma única imagem para o
usuário final no navegador não é a forma ideal de se publicar uma página.
Para que as informações sejam exibidas de forma correta e para possibilitar
outras formas de uso e interação com o conteúdo, é necessário que a equipe de
programação front-end transforme essas imagens em telas visíveis e,
principalmente, utilizáveis pelos navegadores. Existem diversas tecnologias e
de programa o front-end transforme essas imagens em telas vis veis e,�� �
principalmente, utiliz veis pelos navegadores. Existem diversas tecnologias e�
ferramentas para realizar esse tipo de trabalho. Algumas das tecnologias
dispon veis s o: HTML, Adobe Flash, Adobe Flex, JavaFX e Microsoft� �
Silverlight.
De todas as tecnologias dispon veis, a mais recomendada certamente o HTML,� �
pois a linguagem que o navegador entende. Todas as outras tecnologias citadas�
dependem do HTML para serem exibidas corretamente no navegador e, ultimamente, o
uso do HTML, em conjunto com o CSS e o JavaScript, tem evolu do a ponto de�
podermos substituir algumas dessas outras tecnologias onde t nhamos mais poder�
e controle em rela o exibi o de gr ficos, efeitos e interatividade.�� � �� �
Durante o curso, vamos produzir algumas p ginas de um projeto: um e-commerce de�
roupas. No cap tulo anterior, de introdu o, criamos uma p gina simples de� �� �
Sobre. Vamos come ar agora a projetar o restante, com as p ginas mais� �
complexas.
Uma equipe de UX j definiu as p ginas, o conte do de cada uma delas e� � �
produziu alguns wireframes. Depois de realizado esse trabalho, a equipe de
design j adicionou o visual desejado pelo cliente como resultado final do�
projeto.
Agora a nossa vez de transformar esse layout em HTML, para que os navegadores�
possam ler e renderizar o c digo, exibir a p gina para o usu rio final.� � �
No cap tulo anterior, come amos a codificar a p gina de Sobre da nossa loja,� � �
com o intuito de praticar o b sico de HTML e CSS.�

Mais conteúdo relacionado

Mais procurados

Introdução ao web design
Introdução ao web designIntrodução ao web design
Introdução ao web design
Carla Suelen
 
Wireframe workshop externo_001_b
Wireframe workshop externo_001_bWireframe workshop externo_001_b
Wireframe workshop externo_001_b
maurohs
 

Mais procurados (20)

Design Responsivo
Design ResponsivoDesign Responsivo
Design Responsivo
 
Acessibilidade para web
Acessibilidade para webAcessibilidade para web
Acessibilidade para web
 
Design responsivo
Design responsivoDesign responsivo
Design responsivo
 
Introdução ao web design
Introdução ao web designIntrodução ao web design
Introdução ao web design
 
DESIGN DE INTERFACE
DESIGN DE INTERFACEDESIGN DE INTERFACE
DESIGN DE INTERFACE
 
Curitiba treinamentos corporativos
Curitiba treinamentos corporativosCuritiba treinamentos corporativos
Curitiba treinamentos corporativos
 
Design de Interface - Diretrizes
Design de Interface - DiretrizesDesign de Interface - Diretrizes
Design de Interface - Diretrizes
 
Arquitetura da Informação - Wireframes
Arquitetura da Informação - WireframesArquitetura da Informação - Wireframes
Arquitetura da Informação - Wireframes
 
O uso do prezi
O uso do preziO uso do prezi
O uso do prezi
 
"Estratégia para “Responsive UX”"- #7 Industry Sessions by EDIT. / UX & Resp...
"Estratégia para “Responsive UX”"-  #7 Industry Sessions by EDIT. / UX & Resp..."Estratégia para “Responsive UX”"-  #7 Industry Sessions by EDIT. / UX & Resp...
"Estratégia para “Responsive UX”"- #7 Industry Sessions by EDIT. / UX & Resp...
 
Introdução Ao Web Design
Introdução Ao Web DesignIntrodução Ao Web Design
Introdução Ao Web Design
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
 
UI e UX no Material Design
UI e UX no Material DesignUI e UX no Material Design
UI e UX no Material Design
 
Desenvolvimento de Sites
Desenvolvimento de SitesDesenvolvimento de Sites
Desenvolvimento de Sites
 
Arquitetura de Sofware
Arquitetura de SofwareArquitetura de Sofware
Arquitetura de Sofware
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
 
Estruturação Web
Estruturação WebEstruturação Web
Estruturação Web
 
Wireframe workshop externo_001_b
Wireframe workshop externo_001_bWireframe workshop externo_001_b
Wireframe workshop externo_001_b
 
Wireframe em Aplicativos - Webdesign 2022
Wireframe em Aplicativos - Webdesign 2022Wireframe em Aplicativos - Webdesign 2022
Wireframe em Aplicativos - Webdesign 2022
 
Design se faz também com Software Livre !
Design se faz também com Software Livre !Design se faz também com Software Livre !
Design se faz também com Software Livre !
 

Semelhante a Ap iii

Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptxBack-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptx
SENAC SC
 
Apresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoApresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo Santiago
Rodrigo Correia
 
Design e Usabilidade
Design e UsabilidadeDesign e Usabilidade
Design e Usabilidade
Claudio Toldo
 
Aula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdfAula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdf
ssuser595b1e1
 
Apostila comunicação visual para web
Apostila comunicação visual para webApostila comunicação visual para web
Apostila comunicação visual para web
Pedro de Siqueira
 

Semelhante a Ap iii (20)

Web Design e Front End - Definição e conceitos
Web Design e Front End - Definição e conceitosWeb Design e Front End - Definição e conceitos
Web Design e Front End - Definição e conceitos
 
Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptxBack-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptx
 
Responsive wordpress
Responsive wordpressResponsive wordpress
Responsive wordpress
 
Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2
 
Guia de Otimização de Performance de Sites (Page Speed)
Guia de Otimização de Performance de Sites (Page Speed)Guia de Otimização de Performance de Sites (Page Speed)
Guia de Otimização de Performance de Sites (Page Speed)
 
as-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdf
as-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdfas-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdf
as-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdf
 
User experience
User experienceUser experience
User experience
 
Apresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoApresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo Santiago
 
Aplicacoes responsivas
Aplicacoes responsivasAplicacoes responsivas
Aplicacoes responsivas
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
 
Tcc
TccTcc
Tcc
 
Metodologia De Projetos Para Web(1)
Metodologia De Projetos Para Web(1)Metodologia De Projetos Para Web(1)
Metodologia De Projetos Para Web(1)
 
Design e Usabilidade
Design e UsabilidadeDesign e Usabilidade
Design e Usabilidade
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
T CC - David William e Marce
T CC - David William e Marce T CC - David William e Marce
T CC - David William e Marce
 
7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPress7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPress
 
Aula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdfAula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdf
 
Cv alexandre rezendedecastro
Cv alexandre rezendedecastroCv alexandre rezendedecastro
Cv alexandre rezendedecastro
 
Apostila comunicação visual para web
Apostila comunicação visual para webApostila comunicação visual para web
Apostila comunicação visual para web
 
Design de interfaces para CMS's
Design de interfaces para CMS'sDesign de interfaces para CMS's
Design de interfaces para CMS's
 

Ap iii

  • 1. Caro Aluno, Com as discussões desta unidade, podemos perceber que as tabelas não são mais utilizadas para posicionamento de elementos em uma página. Para isso, são usados conceitos de CSS. Apesar de tratarmos apenas das tabelas nesta unidade, uma boa discussão, que podemos começar agora, é sobre os motivos que levaram o Consórcio Mundial da Internet a essa decisão. Procure algumas soluções para esse problema, para tentarmos chegar a uma solução adequada ou mais Vamos lá? Existe hoje no mercado uma grande quantidade de empresas especializadas no desenvolvimento de sites e aplicações web, bem como algumas empresas de desenvolvimento de software ou agências de comunicação que têm pessoas capacitadas para executar esse tipo de projeto. Quando detectada a necessidade do desenvolvimento de um site ou aplicação web, a empresa que tem essa necessidade deve passar todas as informações relevantes ao projeto para a empresa que vai executá-lo. A empresa responsável pelo seu desenvolvimento deve analisar muito bem essas informações e utilizar pesquisas para complementar ou mesmo certificar-se da validade dessas informações. Um projeto de site ou aplicação web envolve muitas disciplinas em sua execução, pois são diversas características a serem analisadas e diversas as possibilidades apresentadas pela plataforma. Por exemplo, devemos conhecer muito bem as características do público alvo, pois ele define qual a melhor abordagem para definir a navegação, tom linguístico e visual a ser adotado, entre outras. A afinidade do público com a Internet e o computador pode inclusive definir o tipo e a intensidade das inovações que podem ser utilizadas. Por isso, a primeira etapa do desenvolvimento do projeto fica a cargo da área de User Experience Design (UX) ou Interaction Design (IxD), normalmente composta de pessoas com formação na área de comunicação. Essa equipe, ou pessoa, analisa e endereça uma série de informações da característica humana do projeto, definindo a quantidade, conteúdo e localização de cada informação. Algumas das motivações e práticas de Design de Interação e Experiência do Usuário são conteúdo do curso Design de Interação, Experiência do Usuário e Usabilidade. O resultado do trabalho dessa equipe é uma série de definições sobre a navegação (mapa do site) e um esboço de cada uma das visões, que são as páginas, e visões parciais como, por exemplo, os diálogos de alerta e confirmação da aplicação. Essas visões não adotam nenhum padrão de design gráfico: são utilizadas fontes, cores e imagens neutras, embora as informações escritas devam ser definidas nessa fase do projeto. Esses esboços das visões são o que chamamos de wireframes e guiam o restante do processo de design. Com os wireframes em mãos, é hora de adicionar as imagens, cores, tipos, fundos, bordas e outras características visuais. Esse trabalho é realizado pelos designers gráficos, que utilizam ferramentas gráficas como Adobe Photoshop, Adobe Fireworks, GIMP, entre outras. O que resulta desse trabalho que o designer realiza em cada wireframe é o que chamamos de layout. Os layouts são imagens estáticas já com o visual completo a ser implementado. Apesar de os navegadores serem capazes de exibir imagens estáticas, exibir uma única imagem para o usuário final no navegador não é a forma ideal de se publicar uma página. Para que as informações sejam exibidas de forma correta e para possibilitar outras formas de uso e interação com o conteúdo, é necessário que a equipe de programação front-end transforme essas imagens em telas visíveis e, principalmente, utilizáveis pelos navegadores. Existem diversas tecnologias e
  • 2. de programa o front-end transforme essas imagens em telas vis veis e,�� � principalmente, utiliz veis pelos navegadores. Existem diversas tecnologias e� ferramentas para realizar esse tipo de trabalho. Algumas das tecnologias dispon veis s o: HTML, Adobe Flash, Adobe Flex, JavaFX e Microsoft� � Silverlight. De todas as tecnologias dispon veis, a mais recomendada certamente o HTML,� � pois a linguagem que o navegador entende. Todas as outras tecnologias citadas� dependem do HTML para serem exibidas corretamente no navegador e, ultimamente, o uso do HTML, em conjunto com o CSS e o JavaScript, tem evolu do a ponto de� podermos substituir algumas dessas outras tecnologias onde t nhamos mais poder� e controle em rela o exibi o de gr ficos, efeitos e interatividade.�� � �� � Durante o curso, vamos produzir algumas p ginas de um projeto: um e-commerce de� roupas. No cap tulo anterior, de introdu o, criamos uma p gina simples de� �� � Sobre. Vamos come ar agora a projetar o restante, com as p ginas mais� � complexas. Uma equipe de UX j definiu as p ginas, o conte do de cada uma delas e� � � produziu alguns wireframes. Depois de realizado esse trabalho, a equipe de design j adicionou o visual desejado pelo cliente como resultado final do� projeto. Agora a nossa vez de transformar esse layout em HTML, para que os navegadores� possam ler e renderizar o c digo, exibir a p gina para o usu rio final.� � � No cap tulo anterior, come amos a codificar a p gina de Sobre da nossa loja,� � � com o intuito de praticar o b sico de HTML e CSS.�