Jul/2010 - Microsoft Silverlight Hands-On Sol

Introdução à Tecnologia

Desenvolvendo RIA’s com

ImplantaçãoEncerrament

o

DesenvolvimentoPrototipação

Utilidades

Deep Zoom

VITÓRIA, 2010 | FABRICCIO C. BERNARDES

Quer saber mais?

Unused Section Space 1



Adicionando Interatividade à suas aplicações

O grande “trunfo”

2001

Uma breve

HISTÓRIAdo Silverlight

Flexibilidade da interfaceTodas as funções do .NET 2.0

3DAnimações

Gráficos vetoriais

Reconhecimento de voz

Layouts avançados

Conceito de web no Desktop

Otimiza performanceda interface

Controles personalizáveis

XAML + .NET

WPF

Windows Vista

Windows Seven

A tecnologia estava evoluindo

... Mas faltava alguma coisa

... Estava presa

Necessitava explorar novos horizontes

“WPF/E”

Setembro/2007

1.0

XAML

Programação via JavaScript

Complicadíssima integração com o Visual Studio

Pouquíssimos controles

2.0

Outubro/2008

Implementação semelhante à CLR (MSIL)

C# VB .NET

BCLData access

50 novos controles

DeepZoom Composer

3.0

Julho/2009

Out-Of-Browser

SketchFlow

Suporte à Adobe Illustrator

Suporte à Adobe Photoshop

Suporte à Power Point

Aceleração Gráfica via GPU

Smooth Streaming

Multi-Touch

Suporte a vídeos HD (720p), CODECs H.264, AAC e MPEG4

Behaviors

Melhorias em navegação e SEO

+60 controles disponíveis

Element to Element binding

4.0

Abril/2010

WebcamMicrofoneHTML Brush

WebBrowser

Trust Level (Out-Of-Browser)

Windows Phone 7

Integração com Sharepoint

Integração com VS aprimorada

RichText Edit

Impressão

Botão direitodo mouse

Scroll do mouse

Clipboard

Drag and drop de arquivos

Google Chrome

Evolução

Set/07

Out/08

Jul/09

Abr/10

1.02.03.04.0

Ferramentas necessárias

O que é? Objetivo Ferramentas

Expression Blend Expression Design Expression Web

Expression Studio

Designer Gráfico Expression Design

Designer Interativo Expression Blend Expression Web

Desenvolvedor Visual Studio

Profissionais Foco

Expression Design

Expression Blend

Função Base WPF Liberte sua imaginação:

XAML

Expression Blend

Desenhos vetoriais

BitmapsVídeos

Sons Texto

Conteúdo 3DAnimações

Expression Web

Visual Studio

Qual o diferencial da tecnologia?

Desenvolvimento de RIA’s Atualmente...

Produto esperado

O designer projeta

Destrói o trabalho...

A grande idéia

Consertar da sua forma!

E o produto final...

Fluxo de desenvolvimento com Silverlight

Nova Feature Projeto inteiro na mesma plataforma

Flow Windows Sketch Styles (antigo Wiggly) Sketching

Interatividade Player FeedBack Relatório automático em Word Importação de arquivos

Prototipando com SketchFlow

Flow Windows

Sketch Styles

Sketching

Sketching - Interatividade

Player

FeedBack

Documentação Automática

Importação de Arquivos

Organizando sua Aplicação com Containers

Trabalhando com Full Screen

Full Screen total

Full Screen no navegador

Padronização de controles Stilos Design Interatividade

Templates

Meramente visual Styles x Templates Resource Dictionary Exemplo:

“Criando e aplicando estilo à controles” “Trabalhando com Resource Dictionaries”

Template StyleStyles

State group State

Timeline Transitions

Default Transitions Easing

Exemplo: “Modelando buttons no Blend3”

States

Reusabilidade de código Reusabilidade de interação (Storyboard) Silverlight 3 Control Library Exemplo:

“Criando um UserControl no Blend3”

UserControls

“Filhos” Essa apresentação é uma children Media Player é uma children IE é uma children

Childrens

Reuso de código Até designers podem “programar” Exemplo:

“Aplicando behaviors à controles”

Behaviors

Storyboard storyboard = new Storyboard();DoubleAnimation doubleAnimation = new DoubleAnimation();

doubleAnimation.From = vlInicial;doubleAnimation.To = vlFinal;doubleAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(tempo));

Storyboard.SetTarget(doubleAnimation, objeto);Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath(Canvas.OpacityProperty));

storyboard.Children.Add(doubleAnimation);return storyboard;

Animações via Código (C#)

O que é ChildWindow? ChildWindow é children Função Exemplo:

“Criando uma nova ChildWindow” “Recuperando valores de uma ChildWindow” “Personalizando sua ChildWindow”

Trabalhando com ChildWindows

WCF LINQ

SilverlightApplication

Acesso a Dados SQL

DEMO

MediaElement Vídeos Músicas

Image

Trabalhando com Multimídia

Relaciona propriedades de controles Configurável na maioria das propriedades Exemplo:

“Realizando Data Binding em controles”

Element to Element Binding

Vida fora do browser Suporte a atalhos no desktop e start

menu Seguro Instalação fácil Auto-update Detecção de conectividade com a

internet Silverlight x Adobe AIR Exemplo:

“Habilitando sua aplicação para rodar Out-Of-Browser”

Out-of-browser

Introdução à animação Animation Workspace (F6) Storyboard

TimeLine KeyFrame

Trabalhando com animações

Common Properties (StoryBoard) AutoReverse RepeatBehavior


Easing (KeyFrame) KeySpline EasingFunction Hold In


Exemplos: “Criando uma animação simples no Blend3” “Executando sua aplicação via Behavior” “Executando sua aplicação via Código C#”


DEMO

A ferramenta pre-processa a imagem em partes de 256 x 256 lado a lado

Em seguida gera pirâmides lado a lado com baixas resoluções

Deep Zoom numa imagem

Quando uma imagem é exibida no cliente os pedaços em baixa resolução são exibidos primeiramente

Em seguida os pedaços em maior resolução são e são gradualmente substituidos na imagem

Como funciona?

Deep Zoom Composer Importar imagens Compor uma cena Exportar composição

Criando projetos no Deep Zoom

Exportando um projeto

Facilidade

Expression Web

DEMO

Via código

Outras plataformas

Suporte dos integrantes do grupo Notificações de eventos Ampliação de networking Oportunidades profissionais Fotos e documentos anunciados nos

eventos

twitter.com/msdeves br.groups.yahoo.com/group/msdev-es

MSDev-ES

Obrigado!FABRICCIO C. BERNARDES

twitter.com/fabricciocb

[email protected]

fabricciocb.wordpress.com

meadiciona.com/fabricciocb

Jul/2010 - Microsoft Silverlight Hands-On Sol

Technology

Transcript of Jul/2010 - Microsoft Silverlight Hands-On Sol