Início » HTML5

Arquivo da categoria: HTML5

Iniciando com ASP.NET Web Forms 4.5 – Parte 2 – Criando o Projeto

Nesse tutorial você irá criar, revisar, e executar o projeto padrão no Visual Studio, que permitirá que se familiarize com as características do ASP.NET. Também irá revisar o ambiente do Visual Studio.

1 O que aprenderá:

  • Como criar um novo projeto Web Forms.
  • A estrutura de arquivos do projeto Web Forms.
  • Como executar o projeto em Visual Studio.
  • As diferentes características da aplicação padrão Web Forms.
  • Alguns conceitos básicos de como usar o ambiente do Visual Studio.

2 Criando o Projeto

  1. Abra o Visual Studio.
  2. Selecione New Project do menu File no Visual Studio.
  3. Figura 1 - Parte 2

  4. Selecione Templates  Visual C#  Web do grupo de templates do lado esquerdo.
  5. Escolha o template ASP.NET Web Application na coluna do meio.
  6. Nomeie seu projeto como WingtipToys e clique no botão OK.
  7. Figura 2 - Parte 2

    Nota: o nome do projeto nesse tutorial é WingtipToys. É recomendado que você use exatamente o mesmo nome de projeto para que o código fornecido através do tutorial funcione como esperado.

  8. Selecione o template Web Forms e clique no botão Create Project.
  9. Figura 3 - Parta 3

Levará um tempo até que o projeto seja criado. Quando estiver pronto, abra a página Default.aspx.

Figura 4 - Parte 2

Você pode mudar entre Design e Source view selecionando uma opção no fundo da janela do centro. Design view exibe páginas ASP.NET, master pages, páginas de conteúdo, páginas HTML, e controle de usuário usando a visão WYSIWYG (What You See Is What You Get). Source view exibe a marcação HTML para sua página web, que você pode editar.

3 Entendendo o ASP.NET Framework

ASP.NET Web Forms te permite construir websites dinâmicos usando o modelo familiar drag-and-drop e event-driven. A superfície do design e milhares de controles e componentes te permite criar rapidamente sofisticado, poderosa interface gráfica com acesso a dados. A loja Wingtip Toy é baseada no ASP.NET Web Forms, mas muitos dos conceitos que você aprenderá nessa série de tutoriais são aplicáveis a todo ASP.NET.

ASP.NET oferece quatro frameworks de desenvolvimento primários:

  • ASP.NET Web Forms
    O framework Web Forms é o alvo dos desenvolvedores que preferem programação declarativa e baseada em controles, assim como Microsoft Windows Forms (WinForms) e WPF/XAML/Silverlight. Oferece um WYSIWYG modelo de desenvolvimento de design, então é popular com desenvolvedores olhando para um rápido ambiente de desenvolvimento de aplicação (RAD) para desenvolvimento web. Se você é novo em programação web e familiar com as tradicionais ferramentas de desenvolvimento cliente RAD (por exemplo, para Visual Basic e Visual C#), você pode rapidamente construir uma aplicação web sem ter experiência em HTML e JavaScript.

  • ASP.NET MVC
    ASP.NET MVC é o alvo para desenvolvedores que estão interessados em padrões e princípios como desenvolvimento de teste dirigido, separação de interesses, inversão de controle (IoC), e injeção de dependências (DI). Esse framework encoraja separação da BLL (Business Logic Layer – Camada de Regra de Negócios) de uma aplicação web da sua camada de apresentação.

  • ASP.NET Web Pages
    ASP.NET Web Pages é o alvo para desenvolvedores que querem um desenvolvimento web simples, ao longo de linhas do PHP. No modelo Web Pages, você cria páginas HTML e então adiciona código baseado em servidor a fim de controlar dinamicamente como a marcação é renderizada. Web Pages é especificamente desenhada para ser um framework leve, e é o ponto de entrada mais fácil para o ASP.NET para pessoas que conhecem HTML mas não tem experiência em programação – por exemplo, estudantes ou hobbistas. É também uma boa maneira para desenvolvedores web que sabem PHP ou frameworks similares para começar usar ASP.NET.

  • ASP.NET Single Page Application
    ASP.NET Single Page Application (SPA) te ajuda a construir aplicações que incluem interações cliente-side significantes usando HTML5, CSS3 e JavaScript. O ASP.NET e Web Tools 2012.2 Update envia um novo template para construir aplicações single page usando knockout.js e ASP.NET Web API. Em adição ao novo template SPA, novos templates SPA criados pela comunidade também estão disponíveis para download.

Em adição aos quatro principais frameworks de desenvolvimento, ASP.NET também oferece tecnologias adicionais que são importantes estar cientes e familiarizados, mas não são cobertos nessa série de tutoriais:

  • ASP.NET Web API – um framework para construção de serviços HTTP que alcançam uma ampla gama de clientes, incluindo navegadores e mobile devices.
  • ASP.NET SignalR – uma biblioteca que torna o desenvolvimento web em tempo real fácil.

4 Revisando o Projeto

No Visual Studio, a janela Solution Explorer permite que você gerencie arquivos para o projeto. Vamos dar uma olhada nas pastas que foram adicionadas na sua aplicação na Solution Explorer. O template web application adiciona uma estrutura básica de pastas:

Figura 5 - Parte 2

Visual Studio cria alguns pastas e arquivos iniciais para seu projeto. Os primeiros arquivos que você trabalhará posteriormente no tutorial são os seguintes:

Arquivo Propósito
Default.aspx Tipicamente a primeira página exibida quando a aplicação é executada no navegador.
Site.Master Uma página que permite que você crie um layout consistente e use comportamento padrão nas páginas de sua aplicação.
Global.asax Um arquivo opcional que contém código para responder eventos appication-level e session-level levantados pelo ASP.NET ou pelos módulos HTTP.
Web.config Dados de configuração para uma aplicação.

5 Executando a Aplicação Web Padrão

A aplicação Web padrão fornece uma experiência rica baseada em suporte e funcionalidade embutidos. Sem nenhuma mudança no projeto padrão Web Forms, a aplicação está pronta para ser executada no seu navegador Web local.

  1. Aperte a tecla F5 enquanto estiver no Visual Studio. A aplicação será compilada e exibida no seu navegador Web.
  2. Figura 6 - Parte 2

  3. Quando você tiver completado a revisão da aplicação em execução, feche a janela do navegador.

Existem três páginas principais nessa aplicação Web: Default.aspx (Home), About.aspx e Contact.aspx. Cada uma dessas páginas podem ser obtidas pela barra de navegação. Existem também duas páginas adicionais contidas na pasta Account, as páginas Register.aspx e Login.aspx. Essas duas páginas permitem que você use o membership do ASP.NET para criar, armazenar, e validar credenciais de usuário.

6 ASP.NET Web Forms Background

ASP.NET Web Forms são páginas que são baseadas nas tecnologias Microsoft ASP.NET, em que cada código que executa no servidor dinamicamente gera saída de uma página Web no browser ou dispositivo client. Uma página ASP.NET Web Forms automaticamente renderiza o navegador compatível correto com HTML para características como estilos, layout, dentre outros. Web Forms são compatíveis com qualquer linguagem suportada pelo CLR (Common Language Runtime), assim como Microsoft Visual Basic e Microsoft Visual C#. Também, Web Forms são construídas no Microsoft .NET Framework, que fornece benefícios tanto como um ambiente gerenciado, tipo de segurança e herança.

Quando uma página ASP.NET Web Forms é executada, a página vai através de um ciclo de vida em que executa uma série de etapas de processamento. Essas etapas incluem inicialização, controles de instanciação, restauração e manutenção de estado, executando código de manipulação de eventos, e renderizando. Assim que você tornar mais familiarizado com o poder do ASP.NET Web Forms, é importante para você entender o ciclo de vida da página para que assim você possa escrever código no estágio apropriado de ciclo de vida para o efeito que você pretender.

Quando um web server recebe uma requisição de uma página, ele encontra a página, processa, envia para o navegador, e então desfaz toda a informação da página. Se o usuário requisitar a mesma página novamente, o servidor repete toda a sequencia, reprocessando a página a partir do zero. Dito de outra forma, um servidor não possui nenhuma memória de páginas que foram processadas – páginas são sem estado. O framework de uma página ASP.NET automaticamente manipula as tarefas de manutenção do estado de sua página e seus controles, e fornece a você caminhos explícitos para manter o estado de informação de sua específica aplicação.

6.1 Características de uma Aplicação Web nos templates de uma Aplicação Web Forms

Um template de Aplicação ASP.NET Web Forms fornece um rico conjunto de funcionalidades de construção. Não somente fornece a você com uma página Home.aspx, About.aspx, Contact.aspx, mas também inclui funções de membros que registra usuários e salva suas credenciais assim eles podem fazer login no seu website. Essa visão geral fornece mais informação sobre algumas das características contidas no template ASP.NET Web Forms Application e como eles são usados na aplicação Wingtip Toys.

6.2 Memberships

ASP.NET Identity armazena as credenciais dos seus usuários numa base de dados criada pela aplicação. Quando seus usuários fazem o login, a aplicação valida suas credenciais lendo a base de dados.
A pasta Account do seu projeto contém os arquivos que implementam as várias partes do membership (membros): registrando, logando, trocando uma senha, e autorizando acesso. Adicionalmente, ASP.NET Web Forms suporta OAuth e OpenID. Essas melhorias de autenticação permite aos usuários logar dentro do seu site usando credenciais existentes, de várias contas como Facebook, Twitter, Windows Live and Google.

Figura 7 - Parte 2

Por padrão, o template cria uma base de dados de membros usando um nome padrão de base de dados numa instância do SQL Server Express LocalDB, o servidor da base de dados de desenvolvimento que vem com Visual Studio 2013 Express for Web.

6.3 SQL Server Express LocalDB

SQL Server Express LocalDB é uma versão leve do SQL Server que tem muitas características de programabilidade da base de dados do SQL Server. SQL Server Express LocalDB executa em modo usuário e tem uma instalação rápida e sem configuração que tem uma pequena lista de pré-requisitos para instalação. No Microsoft SQL Server, qualquer base de dados ou código T-SQL pode ser movido do SQL Server Express LocalDB para SQL Server e SQL Azure sem nenhum passo de upgrade. Então, SQL Server Express LocalDB pode ser usado como um ambiente de desenvolvimento para alvo de aplicações de todas as edições do SQL Server.

SQL Server Express LocalDB habilita características como stored procedures, funções definidas de usuário e agregados, integração com .NET Framework, tipos especiais e outros que não estão disponíveis no SQL Server Compact.

6.4 Master Pages

Uma ASP.NET master page define uma aparência consistente e comportamento para todas as páginas de sua aplicação. O layout da master page funde com o conteúdo de uma página de conteúdo individual para produzir a página final que o usuário vê. Na aplicação Wingtip Toys, você modifica a master page Site.master para que assim todas as páginas no website Wingtip Toys compartilhem o mesmo logo e barra de navegação.

6.5 HTML5

O template ASP.NET Web Forms Application suporta HTML5, que é a última versão da linguagem de marcação HTML. HTML5 suporta novos elementos e funcionalidades que torna mais fácil criar Web sites.

6.6 Modernizr

Para navegadores que não suportam HTML5, você pode usar o Modernizr. Modernizr é uma biblioteca JavaScript que pode detectar se um navegador suporta as características do HTML5, e habilita caso contrário. No template ASP.NET Web Forms Application, Modernizr é instalado como um pacote NuGet.

6.7 NuGet Packages

O template ASP.NET Web Forms Application inclui um conjunto de pacotes NuGet. Esses pacotes fornecem funcionalidades de componentes no formulário de ferramentas e bibliotecas open source. Há uma ampla variedade de pacotes para ajudar você criar e testar suas aplicações. O Visual Studio torna fácil adicionar, remover, e atualizar pacotes NuGet. Desenvolvedores podem criar e adicionar pacotes ao NuGet como quiserem.

Figura 8 - Parte 2

Quando você instala um pacote, NuGet copia arquivos para sua solução e automaticamente faz quaisquer mudanças que são necessárias, assim como adiciona referencias e troca seu arquivo Web.config. Se você decidir remover a biblioteca, NuGet remove arquivos e inverte quaisquer mudanças que foram feitas em seu projeto de modo que não cause nenhuma desordem. NuGet está disponível no menu Tools no Visual Studio.

6.8 jQuery

jQuery é uma rápida e concisa biblioteca JavaScript que simplifica documentos HTML, manipulação de eventos, animação, e interações Ajax para rápido desenvolvimento web. A biblioteca jQuery do JavaScript está inclusa no template ASP.NET Web Forms Application como um pacote NuGet.

6.9 Unobtrusive Validation

Controles de validação embutidos tem sido configurados para usar JavaScript discretamente para validação de lógica do lado cliente. Isso reduz significantemente a quantidade de JavaScript renderizando inline na marcação da página e reduz o tamanho global da página. Validação discreta é adicionada globalmente ao template ASP.NET Web Forms Application baseado na configuração do elemento do arquivo Web.config na raíz da aplicação.

6.10 Entity Framework Code First

Além das características do template ASP.NET Web Forms Application, a aplicação Wingtip Toys usa Entity Framework Code First, que é uma biblioteca NuGet que habilita o desenvolvimento de código centrado quando você trabalha com dados. Simplificando, ele cria uma parte da base de dados de sua aplicação para você baseado no código que você escreve. Usando o Entity Framework, você recupera e manipula dados como objetos fortemente tipados. Isso permite que você foque na regra de negócio de sua aplicação em vez dos detalhes de como o dado é acessado.

7 Tour pelo Visual Studio

A janela primária no Visual Studio inclui a Solution Explorer, o Server Explorer (Database Explorer no Express), a Properties Window, o Toolbox, a Toolbar, e o Document Window.

Figura 9 - Parte 2

Sumário

Nesse tutorial você criou, revisou e executou a aplicação padrão do Web Forms. Você revisou as diferentes características da aplicação padrão do Web Forms e aprendeu alguns conceitos básicos sobre como usar o ambiente do Visual Studio. Nos próximos tutoriais você irá criar o DAL (Data Access Layer – Camada de Acesso a Dados).


O conteúdo desta página resulta da tradução do artigo Create the Project, escrito pelo autor Erik Reitan, originalmente presente no site do asp.net. A página correspondente pode ser conferida aqui.

Iniciando com ASP.NET Web Forms 4.5 e Visual Studio 2013 – Parte 1 – Introdução e Visão Geral

1 Introdução

Essa série de tutoriais guia você através de passos requeridos para criar uma aplicação em ASP.NET Web Forms usando Visual Studio Express 2013 e ASP.NET 4.5.

A aplicação que você criará se chama Wingtip Toys. É um exemplo simples de uma loja online que vende itens online. A série de tutoriais destaca novas características disponíveis no ASP.NET 4.5.

1.1 Download do projeto completo

Você pode fazer o download do projeto em C# que contém o tutorial completo.

1.2 Revise o conteúdo respondendo o ASP.NET Web Forms Quiz

Depois que você completar o tutorial, teste seu conhecimento e reforce conceitos chaves respondendo o ASP.NET Web Forms Quiz. Esse Quiz foi especialmente criado do conteúdo contido nessa série de tutoriais. Cada questão no quiz fornece uma explicação sobre os links com guia adicional.

1.3 Público-alvo

O público-alvo desta série de tutoriais são desenvolvedores experientes que são novos no ASP.NET Web Forms. O desenvolvedor interessado nessa série de tutoriais deve ter os seguintes skills (habilidades):

  • Familiar com alguma linguagem de programação orientada a objeto.
  • Familiar com conceitos de desenvolvimento Web (HTML, CSS, JavaScript).
  • Familiar com conceitos relacionais da base de dados.
  • Familiar com conceitos de arquitetura em camadas.

1.4 Características da Aplicação

As características do ASP.NET Web Forms apresentadas nesta série inclui:

  • O Web Application Project (não Web Site Project)
  • Web Forms
  • Master Pages, configuração
  • Bootstrap
  • Entity Framework Code First, LocalDB
  • Request Validation
  • Data Controls fortemente tipados, Model Binding, Data Annotations, e Value Providers
  • OAuth e OpenID
  • ASP.NET Identity, Configuração e Autorização
  • Unobtrusive Validation (Validação Discreta)
  • Routing
  • ASP.NET Error Handling

1.5 Cenários de Aplicação e Tarefas

Tarefas demonstradas nessa série inclui:

  • Criando, revisando e rodando o novo projeto.
  • Criando a estrutura da base de dados.
  • Inicializando e povoando a base de dados.
  • Customizando User Interface usando estilos, gráficos e master page.
  • Adicionando páginas e navegação.
  • Exibindo detalhes do menu e dados do produto.
  • Criando um carrinho de compras.
  • Adicionando suporte OpenID.
  • Adicionando método de pagamento.
  • Incluindo uma regra de administrador e um usuário a aplicação.
  • Restringindo acesso a páginas e pastas específicas.
  • Carregando um arquivo para a aplicação web.
  • Implementando validação de input (entrada).
  • Registrando rotas para a aplicação web.
  • Implementando error handling e error logging.

2 Visão Geral

Se você é novo com ASP.NET Web Forms mas tem familiaridade com conceitos de programação, você está no tutorial correto. Se você já é familiarizado com ASP.NET Web Forms, você pode se beneficiar através desta série de tutoriais das novas características do ASP.NET 4.5. Se você não possui familiaridade com conceitos de programação e ASP.NET Web Forms, veja Getting Started no ASP.NET Web Site.

As últimas características especificadas fornecidas nessa série de tutoriais incluem o seguinte:

  • Uma simples interface de usuário para criar projetos que oferecem suporte para múltiplos ASP.NET frameworks (Web Forms, MVC e Web API).
  • Boostrap, um layout e framework para tema que fornece design responsivo e capacidades de tema.
  • ASP.NET Identity, um novo sistema de ASP.NET membership que trabalha da mesma forma em todos frameworks ASP.NET e trabalha com web hosting exceto IIS.
  • Entity Framework 6, uma atualização do Entity Framework que permite que você recupere e manipule dados como objetos fortemente tipados, acesso a dados assíncronos, manipular falhas de conexão transitórios, e log de SQL.

2.1 A Aplicação Wingtip Toys

Os screenshots a seguir fornecem uma rápida visão da aplicação em ASP.NET Web forms que você criará nesta série de tutoriais. Quando você executa a aplicação no Visual Studio Express 2013 para Web, você verá a Home Page a seguir.

Wingtip Toys [1]

Você pode se registrar como um novo usuário, ou logar como um usuário existente. A navegação é fornecida no topo para cada categoria de produto recuperando os produtos disponíveis da base de dados.

Selecionando o link Products (Produtos), você será capaz de ver uma lista de produtos disponíveis.

Wingtip Toys [2]

Você pode também ver detalhes dos produtos individuais selecionando qualquer um dos produtos listados.

Wingtip Toys [3]

Como um usuário, você pode registrar e fazer login utilizando funcionalidades padrões do modelo de Web Forms. Também, esse tutorial explica como fazer login usando uma conta do Gmail existente. Adicionalmente, você pode fazer login como administrador para adicionar e remover produtos da base de dados.

Wingtip Toys [4]

Uma vez que você esteja logado, você pode adicionar produtos ao carrinho de compras e pagar com PayPal. Note que essa aplicação é desenvolvida para funcionar com PayPal sandbox. Nenhuma transação atual com dinheiro terá lugar.

Wingtip Toys [5]

PayPal confirmará sua conta, encomenda, e informação de pagamento.

Wingtip Toys [6]

Depois de retornar do PayPal, você pode revisar e completar sua encomenda.

Wingtip Toys [7]

3 Pré-requisitos

Antes de começar, certifique-se de que você tenha os seguintes softwares instalados no seu computador:

  • Microsoft Visual Studio 2013 ou Microsoft Visual Studio Express 2013 para Web. O .NET Framework é instalado automaticamente.

Esta série de tutoriais utiliza Microsoft Visual Studio 2013 para Web. Você pode também utilizar Microsoft Visual Studio 2013 Express para Web ou Microsoft Visual Studio 2013 para completar a série de tutoriais.

4 Download da Aplicação

Depois de instalar os pré-requisitos, você está pronto para começar a criar o novo projeto Web que é apresentado nesta série de tutoriais. Se você quer executar a amostra da aplicação que esse tutorial cria, você poderá fazer download do site MSDN Samples. Esse download contém:

  • A Amostra da Aplicação na pasta Wingtip Toys.
  • Os recursos usados para criar a amostra da aplicação na pasta WingtipToys-Assets na pasta WingtipToys.

4.1 Faça o download do arquivo no site do MSDN Samples

Getting Started with ASP.NET 4.5 Web Forms and Visual Studio 2013 – Wingtip Toys (C#)

O download é um arquivo .zip. Para ver o projeto completo que essa série de tutoriais cria, encontre e selecione a pasta C# no arquivo .zip. Salve a pasta C# para a pasta que você usará para trabalhar com projetos do Visual Studio 2013. Por padrão, os projetos do Visual Studio 2013 se localizam na seguinte pasta:

C:\Users\\Documents\Visual Studio 2013\Projects

Renomeie a pasta C# para WingtipToys.

Para executar o projeto completo, abra a pasta WingtipToys e dê um duplo-clique no arquivo WingtipToys.sln. Visual Studio 2013 abrirá o projeto. Depois, dê um clique com o botão direito no arquivo Default.aspx na janela da Solution Explorer e clique em View In Browser no menu mostrado após o clique com o botão direito.


O conteúdo desta página resulta da tradução do artigo Getting Started with ASP.NET 4.5 Web Forms – Introduction and Overview, escrito pelo autor Erik Reitan, originalmente presente no site do asp.net. A página correspondente pode ser conferida aqui.

Guia de referência para HTML5

A W3C do Brasil ministrou um treinamento sobre HTML5 e foi construída uma apostila com todo o conteúdo abordado no curso e foi publicada no Tableless.
Fiz este post especialmente para indicar o material de estudo da mesma, pois achei muito bom. Os temas abordados são:

Parte 1: Markup
Parte 2: Formulários e Multimídia
Parte 3: A nova geração de aplicações web I
Parte 4: A nova geração de aplicações web II

HTML5: Um guia de referência para os desenvolvedores web

Bons estudos!

Andrielle Azevedo de Paula
MTAC – Microsoft Technical Audience Contributor