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