Soluções de Web DesignExpression & Silverlight Family
Frederico Cerdeira10 de Maio 2009http://fredcnet.com | http://gozoomin.com
Soluções de Web Design Agenda
• Design para a web• Usabilidade e acessibilidade• Processo de design • Estruturação• Interacção• Ferramentas de desenvolvimento• Expression Studio• Silverlight 2• Exemplos• Demo• Referências importantes• Q&A
Boas práticas de Web Design Fundamentos de web design
Interface design? – o que é?• Interface - Camada que separa o utilizador do objecto de interacção
Utilizador + Interface + Objectivo + Feedback
Boas práticas de Web Design Fundamentos de web design
Interface design? – o que é?• Interface - Camada que separa o utilizador do objecto de interacção
• Interfaces para a web – devem respeitar:Usabilidade – a forma como o site é navegado e processado: Sequencia de
navegação, instruções, tempo de acesso a conteúdos, etc. Visualização – A forma como são apresentado os elementos multimédia:
Texto, iconografia, imagens, layout, etc.Funcionalidade – o correcto funcionamento dos elementos e a utilidade
dos mesmos: mapas de navegação, inputs de procura, etc., Acessibilidade – Garantir o acesso aos conteúdos em condições especiais
– Utilizadores e ambientes específicos.
Boas práticas de Web Design Usabilidade e Acessibilidade
Usabilidade e Acessibilidade• Centrar o design no utilizador (user centered design)
• Os utilizadores apreciam a qualidade e a credibilidade do conteúdo
• Os utilizadores fazem “scan” na vez de uma leitura convencional
• Os utilizadores são impacientes - procuram a gratificação imediata
• Os utilizadores procuram sempre o controlo da interacção.
Usabilidade é garantir que o utilizador se sinta confortável e
que volte a utilizar o site /aplicação mais vezes!
Boas práticas de Web Design Usabilidade e Acessibilidade
Referências importantes:•http://www.w3.org – Usabilidade e acessibilidade (ferramentas e princípios)
•http://www.w3.org/WAI - Informação importante para o Design de Acessibilidade
•Acessibilidade em Silverlight 2:http://www.code-magazine.com/article.aspx?quickid=0810062&page=1
•Heurísticas de Nielsen:http://www.useit.com/papers/heuristic/heuristic_list.html
•http://psd.tutsplus.com/articles/6-interface-design-principles-and-tips-every-web-designer-should-know
- Princípios do Interface Design
•http://validator.w3.org/ - validador de código XHTML / CSS
Boas práticas de Web Design Processo de Design
Processo de Design para a Web
•Planificação e preparação
•Pesquisa – muitas vezes ignorada quando o orçamento é baixo
•Especificação técnica e funcional – essencial!
•Estruturação
Boas práticas de Web Design Processo de Design
Processo de Design para a Web - estruturação
Saiam do computador!
• Peguem num papel e numa canetae começam a desenhar a estruturado site
•Estrutura as secções principaise suas ramificações
• Definir a estrutura de navegação e a arquitectura de informação
Boas práticas de Web Design Processo de Design
Processo de Design para a Web – wireframing
É um erro começar logo com as ferramentas de imagem(Adobe Photoshop, Microsoft Expression Design) para composição visual da interface!
Deve-se começar por definir as secções principais do site ou aplicação web.Os contentores de conteúdos.
Boas práticas de Web Design Processo de Design
Processo de Design para a Web – wireframing
De preferência em papel
Desenhar um protótipo que representeos elementos principais – posicionamentodimensões, detalhes, etc.
•Posição do logótipos•Cabeçalho•Menus•Zonas de conteúdos •Rodapé
Boas práticas de Web Design Processo de Design
Processo de Design para a Web – wireframing
Wireframe
Do papel para o esboço em Photoshop / Expression Design
Boas práticas de Web Design Processo de Design
Processo de Design para a Web – Soluções de interacção
•Javascript e AJAX•Linguagens e Frameworks (ASP.NET, PHP, Silverlight…)
Accordions, Tabs, Tooltips, Sliders..etc:Scritptaculous, JQuery, ASP.NET AJAX
Boas práticas de Web Design Layout CSS
Processo de Design para a Web – Layouts CSS
Browsers e resoluções:
• Guerra dos Browsers
• Testar sempre em diferentes Browsers
•Utilizar ferramentas de debugging∙ Firebug para o Firebox∙ CSS viewer para o FireFox∙ Internet Explorer 8 modo de compatibilidade:
renderizar um site com o IE7 e com o IE8 ∙ Developer tools IE 8
Boas práticas de Web Design Resoluções
Processo de Design para a Web
Browsers e resoluções:
Qual a melhor resolução? Não existe a melhor.• Deve-se pensar o design para resoluções standard actuais:
• 1024*768 ainda é standard , sobretudo com o aparecimento dos NetBooks
(Asus eeepc, etc).
• Considerar que 800*600 ainda é uma resolução válida
• Considerar que a maior parte dos portáteis actuais tem uma resolução
1200*800
• Utilizar margens de segurança, por ex. em 1024 usar 960 px de width max
Boas práticas de Web Design Dont make me think
Soluções Expression e Silverlight RIA´s
Rich Internet Aplications
• Expression Studio• Silverlight 2
Ferramentas
Software / Ferramentas autor
Microsoft Expression Studio 2
Web Design
Profissional
Design de Interacção
XAML
Design Gráfico
ProfissionalVECTORIAL e
bitmap
Gestão de elementos
MULTIMÉDIA
Expression Encoder 2
Encoding e edição de vídeoAVI, MPEG, Quicktime…
Soluções Expression e Silverlight
Ferramentas
Software / Ferramentas de desenvolvimento
Microsoft Expression Studio 2 - http://www.microsoft.com/expression
Gratuito para todos os estudantes Universitários Através do programa Dreamspark.
https://www.dreamspark.com
Soluções Expression e Silverlight
Ferramentas
Software / Ferramentas autor
Microsoft Visual Web Developer 2008 Express
• Gratuito• Ideal para o desenvolvimento com ASP.NET e AJAX e integração com SQL Server
http://www.microsoft.com/express/vwd/
Soluções Expression e Silverlight
Silverlight 2Soluções Expression e Silverlight
cross-browsercross-platform
implementação .NET
Para construir e difundir a próxima geração de:
media experiences&
rich interactive applications para a Web
Workflow
Desktop
Media& RIA
Web
Designer Developer
Server Vista
Soluções Expression e Silverlight
XAMLSoluções Expression e Silverlight
XAML
XAML = eXtensible Application Markup Language
• Colaboração eficiente : Designer + Programador
• User Interface amigável e personalizável
• Desenvolvimento Silverlight ou WPF
• Editor Javascript bluit in
• Comunicação directa com Visual Studio
ExemplosSoluções Expression e Silverlight
• http://memorabilia.hardrock.com – Alta resolução Silverlight 2 + DeepZoom
•http://www.xrez.com/yose_proj/yose_deepzoom/new/XRez%20Xtreme%20Pano/in
dex.html
- Alta resolução Silverlight 2 + DeepZoom
• http://www.kbb.com/kbb/PerfectCarFinder/PhotoEdition.aspx - Deepzoom
• http://www.seat.co.uk/exeo/pagelife - Seat Exeo
• http://videothek.vodafone.de – Videoteca Vodafone – Aluguer de filmes HD
• http://www.herbess.com/Projects/Silverlight.aspx - Tetris em silverlight
• http://www.joerassic.ch – Jogo simples em silverlight
• http://www.laguna-coupe.com/silverlight - Renault Laguna - vídeo e animações
Mais exemplos em: http://silverlight.net/Showcase
Exemplos práticos
ExemplosSoluções Expression e Silverlight
• 10 a 30 % de compressão no ficheiro XAP
• Integração com WCF (Windows Communication Foundation)
• Suporte para H264 / AAC / MP4
• Acelaração GPU – melhoria na performance
• Perspective 3D – renderizar elementos 2D sob a forma de perspectiva tridimensional
• Animation easing – stock de funções de animação
• Pixel Shader
• “Out of the Browser” – sandbox
…. Mais novidades surgirão
3 Beta
demo
Demo
Introdução ao desenvolvimento em Silverlight 2 (enquanto a versão final do 3 não sair… :)
Soluções Expression e Silverlight
Referências
Referências•Expression blogs: http://blogs.msdn.com/expression•Site Oficial da Comunidade Silverlight: http://Silverlight.net•Site de Produto: http://www.microsoft.com/Silverlight•Dev Center MSDN: http://msdn.microsoft.com/Silverlight•Forums: http://Silverlight.net/forums
Blogs•Tim Sneath: http://blogs.msdn.com/tims•Mike Harsh: http://blogs.msdn.com/mharsh•Joe Stegman: http://blogs.msdn.com/jstegman•Laurence Moroney: http://blogs.msdn.com/webnext•Jeff Wilcox: http://www.jeff.wilcox.name
Comunidade Zoomin – http://gozoomin.com Comunidade de estudantes de tecnologia e Microsoft Student Partners. Apoio tecnológico, software gratuito, prémios, eventos, etc.
Soluções Expression e Silverlight
Q&A
Questões
?
Soluções Expression e Silverlight
Top Related