Expression Web 3.0 and 4.0 Articles Link List

A couple of days ago, we had posted a Link List of ASP.NET MVC, ASP.NET and jQuery Articles and Silverlight, .NET 4.0 and LINQ Articles Link List published on this site in the last 6 months. This week, we will be covering the articles on Expression Web 3 and 4. This list should help you stay updated with the content you might have missed on this site. Here’s the list:What’s new in Microsoft Expression Web 4? – In this article we will explore the new features available in Expression Web 4

Designing websites for accessibility in Expression Web – Part I – This article gives you an idea and tips of how to make your web site accessible

Designing websites for accessibility in Expression Web – Part II – In this article we will explore the Accessibility Checker feature of Expression Web and how to use it to test your website accessibility

Using jQuery to Open External Links in a New Window – Expression Web – This article is about using jQuery to open external links on your page in a new window

Changing the appearance of a picture in Microsoft Expression Web 3 – In this article we will be exploring only those options that enable you to edit a picture’s appearance on the webpage.

How to use Personal Web Packages in Microsoft Expression Web – A Personal Web Package contains pages, files and folders. In Expression Web, you can export or package a website or a group of files or folders so that someone else can import it and use it in their websites. In this article we will learn more about these web packages, how to create them and use them.

Setting the Frame properties in Expression Web 3 – In this article, we will look at various properties of frames

Setting the Page Editor Options in Microsoft Expression Web 3 (Part I) – With Page Editor Options you can specify settings for various Microsoft Expression Web features. In this article we will explore few tabs of the Page Editor Options dialog box.

Setting the Page Editor Options in Microsoft Expression Web 3 (Part II – Code Formatting) – With Page Editor Options you can specify settings for various Microsoft Expression Web features. In this article we will explore some more tabs of the Page Editor Options dialog box.

Setting the Page Editor Options in Microsoft Expression Web 3 (Part III – CSS tab) – In this article, we will explore the various CSS options that help you control how styles are generated by Microsoft Expression Web 3.

Setting the Page Editor Options in Microsoft Expression Web 3 (Part IV) – With Page Editor Options you can specify settings for various Microsoft Expression Web features. In this article we will explore few tabs of the Page Editor Options dialog box.

Creating scrollable content area using CSS overflow property in Expression Web – In this article, we will create scrollable content area by using the CSS overflow property for HTML divs in Expression Web

Preview Tools in Microsoft Expression Web 3 – Microsoft Expression Web 3 has built-in preview tools which you can use to test your web pages while designing them. In this article, I have listed the preview tools focusing more on the Development Server.

Explore CSS Properties Panel in Expression Web 3 – Expression Web 3 Panels (known as task panes in earlier versions) contain all the tools you would require while developing you web pages. Panels have been classified according to the type and categories of tools. All the panels are available in the Panels menu in Expression Web 3. In this article, we will explore the CSS Properties panel.

Expression Web Queries – Queries in Expression Web to search and replace a particular pattern or factor could be required often while developing a website. The Find and Replace dialog box in Expression Web has much to offer, than the traditional find and replace mechanism. You can create queries for the same. In this article we would take a deep insight into how to create such queries to pinpoint any misses in the code and search and replace intelligently.

Open and publish a live website in Microsoft Expression Web 3 – Expression Web lets you create website live on the server as well as create it offline and then upload to the server. Let us explore how to use each of these options to open and publish your website using FTP.

I hope you liked this list and I thank you for viewing it.



Using Dynamic Views In ASP.NET MVC 2

A really cool addition to ASP.NET MVC 2 is the ability to use the dynamic type as the object passed into the view. This is also known as a dynamic view. If you create a new view and don’t create a strongly typed view, out of the box, the MVC framework will make the view inherit from the ViewPage class, but the generic type will be dynamic, like this:

<%@Page Language=”C#” MasterPageFile=”~/Views/Shared/ViewMasterPage.Master” Inherits=”System.Web.Mvc.ViewPage”

Using the dynamic type is good because it allows you to create your objects on the fly. The downside of this is because the view is not strongly typed, you don’t get the compile time checking. For me compile time checking is a compelling reason to use strongly typed views.
In this example, I’m going to pass a collection of time zones into the view as a dynamic object to the view. To see this in action, I’m going to create a small ASP.NET MVC 2 website. If you haven’t got Microsoft Visual Studio 2010, you can download the Express edition here.
To begin, let’s add the view straight away. Normally you would do this after you have defined your action, but that’s not the focus of this article. By adding a view that is not strongly, we get to use the dynamic type. Here’s the view:
The HTML that’s added inherits from the ViewPage class, but the generic type is dynamic:
<%@Page Title=”” Language=”C#” MasterPageFile=”~/Views/Shared/ViewMasterPage.Master” Inherits=”System.Web.Mvc.ViewPage”
Cool huh?! Now I can add a dynamic object. I’m going to be displaying the list of time zones on your computer in a drop down list. Here’s the code:
<asp:ContentID=”Content2″ ContentPlaceHolderID=”MainContent” runat=”server”>
<SelectListItem> )Model.TimeZones) %>
I can access the dynamic type via the Model property which is available to the view by default. If you compiled this now, even though I haven’t created a real object, it will still compile.
Ok let’s add code to the controller to return the list of time zones. I’m adding this to the HomeController. Here’s the code below:

public ActionResult GetTimeZones()
dynamic viewData = new ExpandoObject();
viewData.TimeZones = from p in TimeZoneInfo.GetSystemTimeZones()
select new SelectListItem
Text = p.DisplayName,
Value = p.Id
return View(“Index”, viewData);

Public Function GetTimeZones() As ActionResult
Dim viewData As Object = New ExpandoObject()
viewData.TimeZones = From p In TimeZoneInfo.GetSystemTimeZones()

How to: Branch Files and Folders

How to: Branch Files and Folders
Branching is a Team Foundation source control function to create new folders or files that are based on existing ones. Branches can be used for various reasons, such as maintenance releases and changes that may break a build. For more information, see Understanding Branching. Branching can be conducted from either Source Control Explorer as demonstrated in this topic, or from the command line using the Branch Command

Required Permissions 

To perform these procedures, you must have the Check out permission set to Allow. For more information, see Team Foundation Server Permissions


To branch a file or folder

  1. On the View menu, click Other Windows, and then click Source Control Explorer
  2. In Source Control Explorer, locate the folder or file that you want to branch, right-click, and click Branch
  3. In the Branch dialog box, in the Target text box, modify the location and name for the new branch. You may also click Browse… to move to a location. 
  4. In the Branch from version section, in the By list box, click the version of the source from which you want to create your new branch. 
    • To branch a specific changeset, click Changeset and enter the changeset in the Changeset text box. To find a changeset, click the browse button with the ellipses (…) next to the Changeset text box. 

      The Find Changesets dialog box appears. 

      Use the options on the Find Changesets dialog box to filter to the changeset you want to branch. For more information, see How to: Find a Changeset

    • To branch a file or folder based on a version date, click Date. In the Date text box, enter a date to specify a file or folder version. 
    • To branch a file or folder based on a label, click Label and enter a label name in the Label text box. To find a label, click the browse button with the ellipses (…) next to the Label text box. 

      The Find Label dialog box appears. 

      Use the options on the Find Label dialog box to filter to the label-version of the file or folder you want to branch. For more information, see How to: Find Labels

    • To branch the latest version, click Latest Version
    • To branch the file or folder version that exists in your local workspace, click Workspace Version
  5. As an option, select the Create local working copies for the new branch option that creates copies of the source on the local workspace. Leave the check box unchecked if you do not need a local copy. 

    Also, leaving the check box unchecked prevents a large selection of items from being downloaded to your computer. This will improve your computer’s performance. 

  6. Click OK

    The new branch is created and presented in Source Control Explorer. 

  7. As an option, if you select the Create local working copies for the new branch option, and the local folder you selected is not mapped in the current workspace, the system displays a Browse For Folder window. Perform one of the following actions. 
    • Browse for a folder, and then click OK. 

      – Or – 

    • Click Make New Folder, designate a new folder to sync to the source, and then click OK

Executar aplicações em background com Agendador de Tarefas Windows

Às vezes precisamos executar algumas aplicações em background, ou seja, sem que o usuário saiba disso. Alguns processos como integrações ou carga de dados.

Uma forma bem simples de se fazer isso é utilizar o Agendador de tarefas do próprio Windows localizado em: Painel de Controle\Todos os Itens do Painel de Controle\Ferramentas Administrativas.

Para testar, vamos fazer uma aplicação console no Visual Studio. Abra o Visual Studio acesse File\New\Project e escolha o projeto Console Application conforme imagem 01.

A idéia é fazer uma aplicação que irá gerar um arquivo txt que irá registrar a hora atual.

Vamos mudar algumas opções para que a aplicação console seja executada sem exibir a janela do prompt do DOS.

Acesse as propriedades do projeto clicando com o botão direito do mouse no projeto e em propriedades conforme a imagem 02.

Na guia application mude a opção Output Type para Windows Application conforme a imagem 03:

Agora vamos programar para gerar o arquivo txt.  Na classe Program.cs digite o seguinte código no método Main:

Pronto, temos uma aplicação console que gerar um arquivo txt salvado a hora atual, agora vamos compilar e gerar o executável.

Vamos agendar para que esse executável seja executado pelo agendador de tarefa. Após abrir o agendador de tarefa, clique na opção “Criar Tarefa ” no menu Ações localizado do lado direito.

A janela “Criar Tarefa será exibida”. De um nome para a tarefa, no meu caso “Executar aplicações em background com Agendador de Tarefas Windows” e clique na aba Disparadores. Clique em Novo e faça as configurações conforme a imagem abaixo:
Acabamos de configurar a hora e a quantidade de vezes que o agendador de tarefa será executado. Clique em OK e acesse a guia Ações. Clique em Novo e a janela “Nova Ação” será exibida. Deixe a opção Iniciar um Programa na opção Ação e em Programa/script localize o nosso executável. Clique em OK. Pronto agora a cada um minuto o arquivo txt receberá a informação.

Perceba que o arquivo é modificado, porém, nenhuma janela e exibida para o usuário.

Recomendo pesquisas sobre o Agendador de Tarefa que existem outras opções como enviar e-mail.

Installing FullText Search on SQL Server 2008

1. DownloadSQL Express with FullText Search capability for SQL Server 2008

2. Select Installation Type as New Installation

3 During Feature Selection, select Full-Text Search

4. While Instance Configuration, Create new Instance Configuration.
– Select Named Instance and give new name.  Example: I have given name: MyShriGanesh

5. Main steps for installation are done, now simply press next with default choices and complete the installation.

6. After Installation login with new instance name created.
– Example: Earlier I have created named instance MyShriGanesh, so i need to login with same named instance in order to take benefit of FullText Search feature.

7. Now, Create New Database, Run Tables and SPs Scripts and restore database with data.  If you don’t have one already, download sample database and use that database.

After installation of sample database your object explorer will look like as follow:

8. Open Query Window and type following command to test whether FullText Search is installed or not.

Select SERVERPROPERTY(‘IsFullTextInstalled’)
If this query returns a value of ‘1’ then the component is installed.

Now, lets go step by step to run Full Text Search on SQL Server 2008

Step 1: Creating Full Text Catalog in SQL Server 2008
Create FullText Catalog DatabaseNameCatalog

Create FullText Catalog AdventureWorksCatalog

Step 2: Create FullText Index in SQL Server 2008
Create FullText Index on TableName
(Column1, Column2, …., ColumnN)
Key Index PK_TablesPrimaryKey on DatabaseNameCatalog
with Change_Tracking Auto
  • TableName is name of table you would like to create fulltext index.
  • ColumnName is column on which you would like to create fulltext index, it is column you would like to perform search on.
  • PK_TablesPrimaryKey is primary key of table you are creating on fulltext search index.
  • DatabaseNameCatalog is fulltext search catalog created earlier.
Create FullText Index on Production.ProductDescription
Key Index PK_ProductDescription_ProductDescriptionID on AdventureWorksCatalog
with Change_Tracking Auto


Step 3: Running FullText Search Query
There are many different examples of running fulltext query, I would be giving 2 examples of fulltext search query.
Example 1: Using FreeText

Select [Description]
from Production.ProductDescription
FREETEXT([Description],  ‘Entry Level Bike’)

Example 2: Using Contains
Select [Description] 
from Production.ProductDescription
Contains([Description],  ‘”Entry” and “Level” and “Bike”‘)

Example 3: Using Weight keyword
Select [Description] 
from Production.ProductDescription
‘ISABOUT (Entry Weight(.8), Level Weight(.4), Bike Weight (.2))’)



Example 4: Using Inflectional keyword

Select [Description]
from Production.ProductDescription
‘FormsOf (INFLECTIONAL, Entry, Level, Bike)’)

Create WPF Master – Detail UI Using Data Sources Window Object DataSource

This article has a corresponding video that can be viewed here.

Master – Detail layouts are the bread and butter of Line of Business (LOB) applications. This walkthrough will show you how to drag & drop from the Data Sources Window to create the UI that is sourced from an Object DataSource.

This article has a C# and VB.NET download that includes both a completed solution and a starter solution. The starter solution includes the data entity classes and a static (Shared) data source class.

This walkthrough assumes that you’ll be starting with the starter solution.

Table of Contents

  1. Completed Application
  2. Starter Solution
  3. Adding a Title to the Form
  4. Adding the ComboBox Used for Record Selection
  5. Adding the Details Form
  6. Adding the DataGrid
  7. How does it Work?

Completed Application 

Figure 1 Completed Application

Starter Solution 

Open the accompanying (C# or VB.NET) starter solution.

Figure 2 Starter Solution

The Data class provides two static (Shared) properties that expose an ObserveableCollection that the application will use as its data source. The Data class takes the place of a data layer that would be used to populate CLR classes from a database.

Figure 3 Data Class Diagram

The Customer class can contain one or more Addresses. Each Address has an associated AddressType.

Figure 4 Entity Class Diagram

Adding a Title to the Form 

Step One

Figure 5 Draw Border

  • Build the solution
  • Open ApplicationMainWindow.xaml
  • Select the root Grid by clicking inside the Window
  • Create a new Grid Row that takes up about 25% of the Window by
    • Click the Grid rail on the left to create a new row
  • Draw a Border control inside the new row
    • Select the Border control in the Toolbox then draw the Border as pictured in Figure 5 above

Step Two

  • Draw a TextBlock control inside the Border
  • Multi-select the TextBlock and Border controls using either the Document Outline or by CTRL + clicking each control
    • Right click, select Reset Layout, All
    • This will reset the Width, Height, HorizontalAlignment and VerticalAlignment properties to their default values


Figure 6 Reseting Values

  • After properties are reset your Window should look like Figure 7 below

Figure 7 Title Step Two

Step Three

  • Using the Document Outline, select the Border control
  • Using the Properties Window set the following properties:
    • CornerRadius to 30
    • Margin to 11
    • Padding to 7
    • BorderThickness to 2
    • Background to formTitleBackgroundBrush
      • Use Resource Picker, see Figure 8 below.  After opening Resource Picker, select formTitleBackgroundBrush.
    • BorderBrush to formTitleBorderBrush
      • Use Resource Picker, see Figure 8 below.  After opening Resource Picker, select formTitleBorderBrush.

    Figure 8 Applying Resource

  • Using the Document Outline, select the TextBlock
  • Using the Properties Window set the following properties
    • Text to Customer
    • VerticalAlignment to Center
    • FontSize to 18
    • FontWeight to Bold
    • Foreground to formTitleForegroundBrush
      • Use Resource Picker
  • Select the Grid
  • Hover cursor over the left Grid rail for the top row. Set top row to Auto sizing as in Figure 9 below
  • The bottom image in Figure 9 shows the completed form title

Figure 9 Auto Sizing Row

Adding the ComboBox Used for Record Selection 

Step One

  • Select the root Grid by clicking inside the Window
  • Create a new Grid Row that takes up about 25% of the Window
    • Click the Grid rail on the left to create a new row
  • Draw a StackPanel inside the new row
  • Add a TextBlock to the StackPanel by double clicking the TextBlock icon in the Toolbox
  • Add a ComboBox to the StackPanel by double clicking the ComboBox icon in the Toolbox
  • Form should now look like Figure 10 below

Figure 10 StackPanel

Step Two

  • Select the StackPanel
  • Right click on the StackPanel, choose Reset Layout, All
  • Using the Properties Window set the following properties:
    • Margin to 11
    • Orientation to Horizontal
  • Multi-select the TextBlock and ComboBox
  • Right click on the TextBlock and choose Reset Layout, All
  • Using the Properties Window set the following property:
    • VerticalAlignment to Center
  • Form should now look like Figure 11 below

    Figure 11 StackPanel

Step Three

  • Select the TextBlock
  • Using the Properties Window set the Text property to Select Customer
  • Select the ComboBox
  • Using the Properties Window set the following properties:
    • Margin to 7, 0
    • Width to 175
  • Form should now look like Figure 12 below

    Figure 12 Record Selector Completed

Step Four

From the Data menu, select Show Data Sources.

Figure 13 Data Menu

Figure 14 Data Sources Window

Before clicking the Add New Data Source link, you must have built your solution.  The Data Sources Window uses reflection to discover types in your solution.  If the type has not been built yet, it will not appear in the Data Sources Window.
  • Add a new Data Source by clicking on the “Add New Data Source…” link pictured in Figure 14 above
  • When the Data Source Configuration Wizard is displayed select the Object icon and click the Next button

Figure 15 Select Data Objects

  • Drill down to the Customer object and select it, then press the Finish button
  • Figure 16 below shows the newly created Object Data Source

Figure 16 New Data Source

Step Five

The ComboBox will provide Customer selection. To wire up the ComboBox drag the Customer object and drop it on the ComboBox as pictured in Figure 17.

Figure 17 Binding ComboBox

  • Select the ComboBox
  • Using the Properties Window set the DisplayMemberPath to Name
  • Run application. You should be able to view data as pictured in Figure 18.

Figure 18 Run Application

As part of the Solution Starter, the ApplicationMainWindow Loaded event has code that populates the CollectionViewSource for the application. This is code that developers would normally have to write as the Object Source drag and drop from the Data Sources Window does not add code to your projects.

Adding the Details Form 

The details form in this application plays the role of the Master in our Master-Details application.

Step One

Customize the Customer object output.

Figure 19 Change Layout Type

  • Change the Customer object layout to Details as pictured in Figure 19 above

Figure 20 Change CustomerID Control

  • Change the CustomerID field to use the Label control when rendered as pictured in Figure 20 above

Step Two

Figure 21 Adding New Row

  • Select the Grid and add a new row as pictured in Figure 21 above.

Figure 22 Details Form Generation

  • Drag and drop the Customer object to the Grid Row below the ComboBox
  • With the Details Grid selected, use the Properties Window and reset the following properties:
    • Height
    • Width
  • Using the Properties Window set the following properties:
    • VerticalAlignment to Top
    • Margin to 11
  • Select the outer Grid and change the Details Form row to use Auto sizing
  • The application should now look like Figure 23 below
  • Run the application and select different Customers

Figure 23 Details Form Completed

Adding the DataGrid 

Step One

Customize the Addresses object output.

  • Expand the Address node
  • Set the CustomerID field control to None

Step Two

Figure 24 Add Grid to Bottom Row

  • Add a Grid control to the bottom row
  • With Grid selected, right click, select Reset Layout, All
  • Using the Properties Window set the following property:
    • Margin to 11

Step Three

Figure 25 Drag and Drop DataGrid

  • Drag and drop the Addresses object from the Data Sources Window to the Grid control added in Step Two above
  • With DataGrid selected, right click, select Reset Layout, All
  • The DataGrid should now look like Figure 26 below



Figure 26 Data Grid Resized

Step Four

Edit DataGrid columns using the XAML Editor.

Figure 27 DataGrid Columns

  • Insert a DataGridComboBoxColumn as pictured in Figure 27 above by copying the below XAML:

<DataGridComboBoxColumn SelectedValueBinding=”{Binding Path=AddressType.AddressTypeId, Mode=TwoWay}” ItemsSource=”{x:Static local:Data.AddressTypes}” DisplayMemberPath=”Name” Header=”Address Type” SelectedValuePath=”AddressTypeId” />

  • Cut and Paste the Street column so that it is above the City column as pictured in Figure 27 above.
  • Run you application
    • You can add, edit and delete rows in the DataGrid
    • Notice that the ComboBox in the DataGrid provides selection for the Address, AddressType.
See How does it Work section below for an explanation of the DataGrid ComboBox.

How does it Work? 

The CollectionViewSource is a powerful class that provides a wrapper around a data source, adding sorting, grouping and filtering functionality without changing the source data.

The CollectionViewSource is a proxy class to the underlying CollectionView that provides navigation of collection items.

MSDN CollectionViewSource documentation can be viewed here:

Figure 28 Data Object Relationships

  • The Data.Customers ObservableCollection is the source for the CustomerViewSource. This data is wired up in the ApplicationMainWindow.Loaded event.
  • When the ComboBox selection changes it sets the CurrentItem on the underlying CollectionView.
  • The Details Form is bound to the CurrentItem. When selection changes, the Details Form DataContext changes and the selected Customer is displayed.
  • The CustomerAddressesViewSource is bound to the CurrentItem (current Customer) Addresses property.
  • The DataGrid is bound to the CustomerAddressesViewSource and displays all items in this collection.

DataGrid ComboBox

The DataGrid ComboBox displays the AddressType.Name for the Address and provides selection of an AddressType.

Figure 29 DataGrid ComboBox

  • SelectedValueBinding property gets and sets the AddressTypeId for the Address in the row
  • ItemsSource is set to the static (Shared) property AddressTypes exposed by the Data class. AddressTypes is a collection of AddressType.
  • DisplayMemberPath is the Name property of the AddressType
  • Header is the column header displayed in the DataGrid
  • SelectedValuePath is the AddressTypeId of the AddressType
MSDN DataGridComboBoxColumn documentation can be viewed here:


Microsoft values your opinion about our products and documentation. In addition to your general feedback it is very helpful to understand:

  • How the above feature enables your workflow
  • What is missing from the above feature that would be helpful to you

Thank you for your feedback and have a great day,

Autor: Karl Shifflett

Visual Studio Cider Team

Gestalt do Objeto em websites – Parte 02: analisando o comportamento do internauta

Com tantos sites básicos, quadradões, com cores apagadas, sendo criados em ’24 horas’ a preço de banana, vemos que a criação de
design para web é fácil, fácil! Será?

Apesar do dito acima não soar nada agradável para os verdadeiros Webdesigners e as verdadeiras Agências, esta é a infeliz realidade que nos cerca. Veremos, neste segundo artigo sobre Gestalt do Objeto aplicado a websites, a necessidade do estudo do comportamento e da percepção do internauta, o que, de fato, pode levar bem mais que 24 horas!

A internet é uma mídia estabelecida e que conta com um público cada vez mais crescente. Então, por se tratar de um meio comercial e de negócios, necessita de
estratégias de marketing – e é aí onde entra a produção publicitária.
Entretanto, é digno de atenção o seguinte fato: por se tratar de um meio digital, eletrônico e de alto teor de informação, o comportamento do consumidor alvo da publicidade online é diferente do público que tem contato com as mídias tradicionais, fazendo com que o profissional de publicidade detenha mais do que a costumeira atenção sobre tal comportamento.

De fato, os Websites fornecem material multimídia e interativo, permitindo um contato mais personalizado e impactante com o seu público-alvo, afetando assim a percepção do usuário. Os designers do nosso século, em se tratando de internet, trabalham com ambientes diversos dos espaços físicos reais.
Tais ambientes, por serem simulados, acarretam muitas indagações ao serem comparados com a mídia impressa. Vemos a mudança do suporte, o brilho, a
posição da página etc. O objeto gráfico físico é estático, enquanto o virtual é interativo, dinâmico, totalmente funcional, e que necessita de determinados comandos para dar as respostas certas. Um exemplo dessa dicotomia são os livros que têm uma usabilidade pré-determinada e imutável por toda nossa vida, pois desde o primeiro contato do ser humano até o seu último, a funcionalidade de virar as páginas e o manuseio, segurando-o pelas bordas, é imutável (Revista Webdesign, 2007).

Segundo relata Lucas Hirata, designer da, os “projetos digitais podem provocar nossos olhos e ouvidos de maneira realmente impactante. Projetos impressos podem também ser comidos, cheirados e manipulados. O chocolate ‘SURPRESA’, da Nestlé, é um exemplo clássico. Como a percepção visual está diretamente ligada à vivência de cada um de nós, todas as nossas experiências sensoriais (táteis, olfativas, visuais, auditivas e gustativas) modificam a maneira como vemos e interpretamos as imagens. Para osnossos olhos, as diferenças dos sistemas de cores provocam percepções diferentes nos dois universos. No mundo digital, as cores são luzes emanadas de dispositivos eletrônicos. Em impressos, as cores são resultados das diversas luzes refletidas no ambiente onde o produto se encontra” (Revista Webdesign, p. 31-32, Janeiro, 2007).

Outro fator importante a ser observado é o que diz respeito ao tempo de exposição à peça gráfica que transmite a mensagem publicitária. Um dos princípios da publicidade define que quanto mais o público-alvo for exposto à mensagem publicitária, mais propenso ele estará a comprar ou adquirir um determinado produto ou serviço.

Você tem menos de dois minutos para se comunicar na primeira vez em que um potencial cliente visita seus Website. Este é o fato básico sobre a experiência Web: no que diz respeito a usuários, cada página deve justificar sua importância quando chamada. Se uma página não fizer isso imediatamente e de maneira clara, eles vão para outros sites (NIELSEN, LORANGER; 2007 p. 21).

Os estudos de Jacob Nielsen e sua equipe mostraram que os internautas são extremamente impacientes, pois eles gastaram uma média de 27 segundos em cada página da Web.
Segundo ele, tal pressa é resultante do excesso de coisas inúteis na Internet e que se as pessoas analisassem cuidadosamente tudo o que encontram on-line, elas nunca conseguiriam se desconectar e viver sua vida. Ainda segundo tais pesquisas, em média, os usuários avaliados gastaram 1 minuto e 49 segundos visitando um Website antes de decidir abandoná-lo e partir para outro. E o que mais preocupa é que se concluiu que um site tem apenas 12% de probabilidade de ser evisitado, mostrando que quase sempre, ao perder um usuário, ele nunca voltará (NIELSEN, LORANGER; 2007). Queremos reforçar com tais estatísticas a
idéia de que “a única esperança de um site para atrair novos clientes dependerá da facilidade de uso do mesmo durante a primeira visita” (NIELSEN, LORANGER; 2007, p.). Se o design não ajudar, os usuários gastarão a maior parte do tempo de permanência do site pensando em qual será o próximo site que irão visitar e com certeza será o de um concorrente. (NIELSEN, LORANGER; 2007).

Talvez o designer pense que na próxima visita o usuário estará mais adaptado à composição visual do site. Entretanto, vimos acima o índice pífio de retorno ao site depois de o cliente rejeitá-lo, pois o primeiro contato e, além disso, as pesquisas também mostram que a cada visita ao Website o internauta reduz o seu tempo de permanência na primeira página (NIELSEN, LORANGER; 2007), a qual é responsável pelo impacto que fará com que ele continue no site e veja os produtos ou serviços anunciados.

Corroborando a questão do tempo do usuário em relação à navegação do internauta e a característica interativa distintiva do meio, José Ricardo Cereja, coordenador pedagógico da graduação em Design Gráfico do Instituto Infnet e professor de Computação Gráfica da PUC Rio, afirma que “em ambientes
interativos, a dinâmica visual estabelece uma relação ‘tempo versus percepção’ que influencia na apreensão das imagens. Isto é, o tempo de observação que o usuário dedica a uma interface pode ser controlado tanto pelo designer que a projetou, através da composição de elementos e arquitetura de navegação, quanto pela velocidade com que a ação do usuário é realizada.

Temos ainda as ações motoras controlando o tempo de ação e fazendo mudar todo o aparato visual em segundos. Isto vai influenciar diretamente a disposição das imagens, fundos, animações, inclusive, no ambiente interativo” (Revista Webdesign, p. 32, 2007). É digno de atenção que, segundo o especialista, mesmo se tratando de um meio distinto com suas peculiaridades em termos de composição gráfica, onde se observa o alto valor funcional do conjunto, é possível sim que o designer controle o tempo de observação do usuário em relação a peça gráfica através da elaboração e disposição dos elementos. Nessa elaboração e disposição de elementos é que entram os princípios e teorias da Escola Gestalt.

Como já visto no primeiro artigo desta série, de acordo com a Gestalt, a arte e o design se fundam no princípio da pregnância da forma. Ou seja, na formação de imagens, os fatores de equilíbrio, clareza e harmonia visual constituem para o ser humano uma necessidade e, por isso, considerados indispensáveis, seja numa obra de arte, num produto industrial, numa peça gráfica, num edifício, numa escultura ou em qualquer outro tipo de manifestação visual… (GOMES FILHO, 2006, p.17). É fato que inconscientemente tendemos a organizar formas percebidas por nós, seguindo leis ou princípios. Se um designer souber aplicar tais leis de forma consciente, seus trabalhos gráficos serão mais objetivos, podendo assim agradar e transmitir a mensagem publicitária com eficácia, além de poder direcionar a atenção do usuário internauta para o que realmente importa.

Listamos abaixo as leis propostas pela Escola Gestalt e que são indicadas ao design em geral:

  • 1º – Proximidade;
  • 2º – Similaridade ou semelhança;
  • 3° – Direção, boa continuidade, alinhamento ou simplesmente
  • 4° – Disposição Objetiva, aprendizagem ou experiência
  • 5° – Fechamento ou Clausura;
  • 6° – Pregnanz ou simplesmente pregnância.

No próximo artigo veremos a aplicação prática de algumas das leis ou princípios da Gestalt no desenvolvimento de websites arrasadores.


NIELSEN, Jakob e LORANGER, Hoa. Usabilidade na web: projetando websites com qualidade. Rio de Janeiro: Elsevier/Campus, 2007.

Revista Webdesign, p. 32, Janeiro/2007.

Fonte: Fabio Aires –