iPhone é um celular inovador e sucesso de vendas no mundo inteiro, inclusive aqui no Brasil. Consequentemente o aparelho da Apple corresponde a mais da metade dos acessos de internet móvel, para ser mais preciso, da última vez que vi as estatísticas, elas apontavam que 61% dos acessos a internet móvel eram realizados por meio do iPhone.

Então se você quer que o seu site esteja presente na internet móvel, mais da metade do caminho consiste em tornar o seu site compatível com o iPhone. E para isso produzi um exemplo de website que pode ser baixado aqui e um roteiro com os pontos mais importantes para tornar seu site compatível com o iPhone.

Antes de mais nada, vale a pena conferir o site para iPhone que fiz para a minha agência especializada no desenvolvimento de web sites: http://www.w2c.com.br

Vamos então ao nosso roteiro:

1- Sites e animações em Flash não funcionam no iPhone. Temos então que utilizar a famosa combinação HTML + Javascript para construir nosso site.

2- É muito importante utilizar as dimensões corretas, e isso vale quando o iPhone está na vertical ou na horizontal. Na vertical a área útil para o conteúdo do site é de 320×356 pixels e na horizontal a área útil é 480×208 pixels.

3- Determine o viewport correto para a sua página. O viewport é uma área retangular que determina o layout do conteúdo e as quebras de linhas dos textos, funciona como um “zoom” da página. Em nosso exemplo utilizamos o viewport igual a “1.0”, pois nosso exemplo foi construído utilizando as dimensões da tela do iPhone.

4- Redimensione o site para a vertical e horizontal. Vale a pena gastar um pouco mais de tempo fazendo e utilizar esse recurso bacana do iPhone. O nosso exemplo tem esse recurso, estude como ele funciona, é bem simples.

5- Fique atento ao tamanho da página, principalmente ao tamanho das imagens. Lembre-se que nem todo mundo tem rede 3G, muito ainda utilizam o EDGE que é bastante lento, então não abuse da paciência do usuário.

-> Clique aqui para download do site exemplo para iPhone

A Microsoft anunciou a versão Beta do Silverlight 3 no evento MIX09. Essa nova versão possui muitos novos recursos como: rodar aplicativos Silverlight fora dos navegadores, enorme melhoria na qualidade e performance dos vídeos, perspectiva de objetos em 3D, efeitos de animação, novos controles como o dock, view-box, autocomplete, treeview, etc…

Pelo andar da carruagem a Microsoft está levando muito a sério o Silverlight e com esse ritmo de melhorias os concorrentes podem se preocupar.

Para saber mais sobre o Silverlight 3 visite 0 site: http://silverlight.net/getstarted/silverlight3/default.aspx

Datagrid em 3D no Silverlight 3

O Papervison 3D é uma engine 3D para o Flash e Flex da Adobe que vem ganhando cada vez mais espaço.

Acredito que um dos campos mais disputados entre o Flash da Adobe e o Silverlight da Microsoft será o 3D.

Existem vários sites interessantes que estão utilizando os recursos do Papervision 3D, e vocês podem ver alguns exemplos nos sites: http://www.w2c.com.br e http://blog.papervision3d.org

Galeria de Imagens com Papervision 3D

Estou fazendo um curso em formato de vídeo-aulas sobre Silverlight 2 para o grupo DevMedia.

Para saberem mais sobre o curso, visitem o site da DevMedia:
http://www.devmedia.com.br/space.asp?id=169426

A Microsoft lançou no final de 2008 o Silverlight 2 que possue muitas novidades e melhorias em relação a versão anterior.

Podemos destacar:
- Suporte as linguagens VB.Net, C#, IronPython, IronRuby, etc
- Novos controles como o Grid
- Cross Domain Network
- View State Manager
- Maior compatibilidade com o WPF
- Suporte ao linq
- Tecnologia Deep Zoom
- Isolated Storage
- Data Binding e ADO.net
- Upload de arquivos
- Melhorias no suporte as mídias
- Melhoria no uso do teclado

E para quem quiser saber mais, visite o site:
http://silverlight.net/GetStarted/overview.aspx

Para quem ainda tem dúvidas se o Silverlight “vai pegar”, vejam a notícia dos celulares da Nokia que vão rodar o Silverlight:

http://idgnow.uol.com.br/telecom/2008/03/04/microsoft-fecha-acordo-com-nokia-para-levar-silverlight-a-celulares/

Instalando os programas utilizados nos Tutoriais

Muitas pessoas estão tendo problemas em fazer os tutoriais devido as versões dos programas utilizados.

O principal problema vem sendo com o Expression Blend, e consiste simplesmente da utilização da versão anterior do Expression Blend. Nesses tutoriais eu estou utilizando o Expression Blend 2 que possui integração com o Visual Studio 2008, que ainda está em versão preview e pode ser baixado no link:

http://www.microsoft.com/expression/products/download.aspx?key=blend2preview

Contudo, vale lembrar que antes de instalar o Expression Blend 2, você deve ter instalado o Microsoft .Net Framework 3.5 que pode ser baixado no link:

http://www.microsoft.com/downloads/details.aspx?familyid=333325FD-AE52-4E35-B531-508D977D32A6&displaylang=en

O Visual Studio 2008 Professional  pode ser baixado no link:

 http://msdn2.microsoft.com/pt-br/vs2008/products/default(en-us).aspx

E o Silverlight 1.1 Tools Alpha for Visual Studio 2008:

http://www.microsoft.com/downloads/details.aspx?familyid=25144c27-6514-4ad4-8bcb-e2e051416e03&displaylang=en

Eu recomendo instalar na seguinte ordem:

1- Microsoft .Net Framework 3.5

2- Visual Studio 2008 Professional

3- Silverlight 1.1 Tools Alpha for Visual Studio 2008

4- Expression Blend 2

Tutorial 6 – Utilizando o Inking Support do Silverlight com o Visual Studio 2008

Download completo do exemplo

1- Para construirmos nosso exemplo vamos precisar ter instalado em nosso computador o

- Microsoft Visual Studio 2008
- Microsoft Silverlight Tools Alpha for Visual Studio 2008
- E claro o plug-in Silvelight 1.1 Alpha
2- Abra o Visual Studio 2008  vá no menu File -> New -> Project -> Visual Basic -> Silverlight -> SilverLight Project e dê o nome “inksilverlight” para o projeto.

Figura: Criando um projeto Silverlight no Visual Studio 2008
3- Abra o arquivo Page.xaml e insira o seguinte código antes de </Canvas>:

 <InkPresenter x:Name=”inkP” Background=”Gray” Width=”600″ Height=”400″></InkPresenter>
4- Abra o Page.xaml.vb e deixe o código como abaixo:

Partial Public Class Page
    Inherits Canvas

    Dim s As Stroke

    Public Sub Page_Loaded(ByVal o As Object, ByVal e As EventArgs)
        ‘ Required to initialize variables
        InitializeComponent()

    End Sub

    Private Sub inkP_MouseLeftButtonDown(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles inkP.MouseLeftButtonDown
        ‘ Start capture mouse movevement and drawing
        inkP.CaptureMouse()
        ‘ Create stroke object
        s = New Stroke
        s.StylusPoints.AddStylusPoints(e.GetStylusPoints(inkP))
        ‘ Set stroke color to red
        s.DrawingAttributes.Color = Colors.Red
        ‘ Set stroke width to 15
        s.DrawingAttributes.Width = 15
        inkP.Strokes.Add(s)
    End Sub

    Private Sub inkP_MouseLeftButtonUp(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles inkP.MouseLeftButtonUp
        ‘ Stop drawing
        s = Nothing
    End Sub
    Private Sub inkP_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles inkP.MouseMove
        ‘ Drawing in mouse move
        If s IsNot Nothing Then
            s.StylusPoints.AddStylusPoints(e.GetStylusPoints(inkP))
        End If
    End Sub

End Class
5- Teste o projeto com menu Debug -> Start Without Debugging (Ctrl + F5) e veja o resultado 

Figura: Testando o projeto

Tutorial 5 – Construindo um vídeo player no Silverlight com o Visual Studio 2008

Download completo do exemplo

1- Para construirmos nosso exemplo vamos precisar ter instalado em nosso computador o

- Microsoft Visual Studio 2008
- Microsoft Silverlight Tools Alpha for Visual Studio 2008
- E claro o plug-in Silvelight 1.1 Alpha

2- Abra o Visual Studio 2008  vá no menu File -> New -> Project -> Visual Basic -> Silverlight -> SilverLight Project e dê o nome “testvideosilverlight” para o projeto.

Figura: Criando um projeto Silverlight no Visual Studio 2008

3- Copie o arquivo de vídeo para a pasta do projeto que criamos, geralmente é “Meus documentos\Visual Studio 2008\Projects\testvideosilverlight\testvideosilverlight“. Clique com o botão direito do mouse sobre o item “testvideosilverlight” selecione “Add -> Existing item…” e selecione o arquivo de vídeo que você acabou de copiar para a pasta do seu projeto.

Figura: Adicionando o arquivo de vídeo ao projeto

4- Abra o arquivo Page.xaml e insira o seguinte código antes de </Canvas>:

 <Canvas x:Name=”playButton” Width=”80″ Height=”35″ Canvas.Left=”192″ Canvas.Top=”277″>
  <Rectangle x:Name=”rectangleButton” Width=”80″ Height=”35″ Stroke=”#FF000000″ RadiusX=”7.5″ RadiusY=”7.5″>
   <Rectangle.Fill>
    <LinearGradientBrush EndPoint=”1.15,1.543″ StartPoint=”0.017,-0.343″>
     <GradientStop Color=”#FF28FF00″ Offset=”0″/>
     <GradientStop Color=”#FF0000FF” Offset=”1″/>
    </LinearGradientBrush>
   </Rectangle.Fill>
  </Rectangle>
  <TextBlock x:Name=”textButton” Width=”72″ Height=”24″ Canvas.Left=”8″ Canvas.Top=”8″ FontFamily=”Arial” FontSize=”18″ FontWeight=”Bold” Foreground=”#FFFFFFFF” TextWrapping=”Wrap” RenderTransformOrigin=”0.5,0.5″ Text=”Play”>
   <TextBlock.RenderTransform>
    <TransformGroup>
     <ScaleTransform ScaleX=”1″ ScaleY=”1″/>
     <SkewTransform AngleX=”0″ AngleY=”0″/>
     <RotateTransform Angle=”0″/>
     <TranslateTransform X=”0″ Y=”0″/>
    </TransformGroup>
   </TextBlock.RenderTransform>
  </TextBlock>
 </Canvas>
 <Canvas x:Name=”stopButton” Width=”80″ Height=”35″ Canvas.Left=”336″ Canvas.Top=”277″>
  <Rectangle x:Name=”rectangleButtonStop” Width=”80″ Height=”35″ Stroke=”#FF000000″ RadiusX=”7.5″ RadiusY=”7.5″>
   <Rectangle.Fill>
    <LinearGradientBrush EndPoint=”1.15,1.543″ StartPoint=”0.017,-0.343″>
     <GradientStop Color=”#FF28FF00″ Offset=”0″/>
     <GradientStop Color=”#FF0000FF” Offset=”1″/>
    </LinearGradientBrush>
   </Rectangle.Fill>
  </Rectangle>
  <TextBlock x:Name=”textButtonStop” Width=”72″ Height=”24″ Canvas.Left=”8″ Canvas.Top=”8″ FontFamily=”Arial” FontSize=”18″ FontWeight=”Bold” Foreground=”#FFFFFFFF” TextWrapping=”Wrap” RenderTransformOrigin=”0.5,0.5″ Text=”Stop”>
   <TextBlock.RenderTransform>
    <TransformGroup>
     <ScaleTransform ScaleX=”1″ ScaleY=”1″/>
     <SkewTransform AngleX=”0″ AngleY=”0″/>
     <RotateTransform Angle=”0″/>
     <TranslateTransform X=”0″ Y=”0″/>
    </TransformGroup>
   </TextBlock.RenderTransform>
  </TextBlock>
 </Canvas>
 
 <MediaElement x:Name=”video_test” AutoPlay=”False” Width=”333.333″ Height=”250″ Canvas.Left=”144″ Canvas.Top=”16″ Source=”Lake.wmv” Stretch=”Fill”/>

5- Abra o Page.xaml.vb e insira o código após o End Sub:

  Private Sub playButton_MouseEnter(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles playButton.MouseEnter
        ‘ Set Play text to Black when mouse enter in playButton
        Dim buttonBrush As New SolidColorBrush
        buttonBrush.Color = Colors.Black
        Dim tb As TextBlock = Me.playButton.Children(1)
        tb.Foreground = buttonBrush
    End Sub

    Private Sub playButton_MouseLeave(ByVal sender As Object, ByVal e As System.EventArgs) Handles playButton.MouseLeave
        ‘ Set Play text to White when mouse leave the playButton
        Dim buttonBrush As New SolidColorBrush
        buttonBrush.Color = Colors.White
        Dim tb As TextBlock = Me.playButton.Children(1)
        tb.Foreground = buttonBrush
    End Sub

    Private Sub playButton_MouseLeftButtonDown(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles playButton.MouseLeftButtonDown

        ‘ Get object of TextBlock in playButton
        Dim tb As TextBlock = Me.playButton.Children(1)

        ‘ If text in playButton is “Play” then play video and set text to Pause
        If tb.Text = “Play” Then
            video_test.Play()
            tb.Text = “Pause”
            ‘ Else text in playButton is “Pause” then pause video and set text to Play
        Else
            video_test.Pause()
            tb.Text = “Play”
        End If

    End Sub

    Private Sub stopButton_MouseEnter(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles stopButton.MouseEnter
        ‘ Set Stop text to Black when mouse enter in stopButton
        Dim buttonBrush As New SolidColorBrush
        buttonBrush.Color = Colors.Black
        Dim tb As TextBlock = Me.stopButton.Children(1)
        tb.Foreground = buttonBrush
    End Sub

    Private Sub stopButton_MouseLeave(ByVal sender As Object, ByVal e As System.EventArgs) Handles stopButton.MouseLeave
        ‘ Set Stop text to White when mouse leave the stopButton
        Dim buttonBrush As New SolidColorBrush
        buttonBrush.Color = Colors.White
        Dim tb As TextBlock = Me.stopButton.Children(1)
        tb.Foreground = buttonBrush
    End Sub

    Private Sub stopButton_MouseLeftButtonDown(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles stopButton.MouseLeftButtonDown
        ‘ Stop video when stopButton was clicked
        video_test.Stop()
    End Sub   

6- Teste o projeto com menu Debug -> Start Without Debugging (Ctrl + F5) e veja o resultado 

Figura: Testando o projeto

Esse “mapa” mostra onde e como o Silverlight interage com outras tecnologias.
Vale a pena dar uma olhada!

Clique na imagem para empliar