Web Design Definido
Quantos sites você visita diariamente? Já pensou em criar seu próprio site? Muitas pessoas e organizações criam sites para compartilhar informações, educar e comprar e vender produtos e serviços.
Web design é a criação e design visual de documentos exibidos na World Wide Web. As organizações contam com sites com conteúdo envolvente e visualmente estimulante para atrair e reter consumidores. A qualidade do design da Web é um fator chave ao criar ou revisar um site. Qualquer pessoa que se prepara para desenvolver um site deve considerar vários fatores para se planejar para o sucesso. Quais fatores você acha que seriam importantes? Considere alguns dos sites que você visitou recentemente. Houve coisas que você realmente gostou ou não gostou nesses sites?
Planejando Seu Site
Construir um site é como construir uma casa. A primeira etapa requer um planejamento adequado. Com uma casa, você precisará de um arquiteto para projetar a casa, um empreiteiro para construir a casa e um designer de interiores para decorar a casa. Embora você possa construir um site por conta própria, muitas organizações contratam profissionais que têm as habilidades e o talento para criar um site atraente e que funcione bem. Para construir um site, você precisará de um diretor de criação que atua como arquiteto, um diretor da Web que atua como contratado e um diretor de conteúdo que atua como designer de interiores.
Ao planejar um site, você deve conhecer seu público e criar um site que atenda às suas necessidades, interesses e preferências de visualização. Ao projetar sites, é importante ter em mente que eles serão visualizados na tela do computador. Eles devem ser projetados de forma adequada para esse meio. O conteúdo deve ser organizado de forma que seja significativo e fácil de navegar. É importante aproveitar o poder do hipertexto. Uma maneira de fazer isso é fornecer links dentro do conteúdo das páginas da Web para que os usuários criem seus próprios caminhos para as informações.
Os designers de sites devem considerar os usuários com diferentes navegadores da Web, sistemas operacionais e plataformas de computador para garantir a acessibilidade. As páginas também devem ser planejadas com as velocidades de conexão em mente. É benéfico projetar para baixa largura de banda. A largura de banda é a quantidade de dados que pode ser transmitida em um determinado período de tempo. Ninguém quer esperar o download de uma página lentamente devido a grandes gráficos ou animações complicadas. Na verdade, o usuário médio espera apenas 10-20 segundos para que uma página carregue antes de navegar para longe. Pode ser um cliente em potencial perdido para um concorrente!
Construindo a base do seu site
Assim que o planejamento estiver concluído e os planos arquitetônicos finalizados, a construção pode começar. Quer esteja trabalhando em uma nova casa ou um novo site, começamos com a fundação. Linguagens de programação da Web como HTML, XML e XHTML fornecem as ferramentas para construir a base, assim como o enquadramento fornece a estrutura básica, porém essencial, para construir e projetar a casa inteira.
 |
Hypertext Markup Language (HTML) é uma ferramenta de programação que usa hipertexto para estabelecer links dinâmicos para outros documentos. É conhecida como a linguagem de programação da Web e fornece uma estrutura geral para a criação de páginas da web. Todas as páginas da web são, na verdade, arquivos HTML. Os documentos HTML são simplesmente documentos de texto que contêm o conteúdo da sua página da web, bem como instruções especiais chamadas tags. Tagfornecem instruções sobre como exibir texto ou gráficos e controlar as entradas do usuário. As tags estão entre colchetes: <>. Normalmente, há uma marca inicial e final em torno do texto. Por exemplo, se quisermos colocar um título em negrito, nossa marca inicial é um ‘b’ entre colchetes, seguido pelo título e concluindo com a marca final ‘/ b’ entre colchetes: <b> ‘Título’ </b>. Todos os documentos HTML começam com HTML entre colchetes e terminam com a barra e HTML entre colchetes: <html> e </html>. Essas tags informam ao navegador da Web que o conteúdo entre as tags deve ser montado em um documento HTML. Existem programas, como o Dreamweaver, projetados para ajudá-lo a criar código HTML para uma página da web. O aplicativo fornece uma interface gráfica de usuário que permite clicar, arrastar e copiar partes da página da web. O aplicativo gera o código HTML para o usuário. Mas se você estiver realmente interessado em aprender HTML, provavelmente é melhor abrir um programa de editor de texto simples, como o Bloco de notas, e digitar o código HTML você mesmo.
Extensible Markup Language (XML) é uma linguagem de programação de marcação como HTML sem elementos predefinidos. Não pode substituir o HTML, mas complementa-o. Enquanto o HTML rege a aparência das informações em um navegador da Web, o XML complementa o HTML adicionando marcas para descrever os dados. XML é o que chamamos de metalinguagem. Metalinguagem significa sobre uma linguagem, ou em outras palavras, XML permite que um usuário descreva uma linguagem de marcação para atender a necessidades específicas. XML permite que você crie ou invente tags e atributos personalizados que atendam às suas necessidades para o tipo de documento que você está escrevendo. XML fornece maior flexibilidade para adicionar novos elementos e atributos que estenderão os recursos HTML. Ele também oferece a capacidade de projetar novos navegadores ou aplicativos.
O HTML foi introduzido pela primeira vez em 1993 como o padrão da Internet. Ao longo dos anos, muitas versões foram lançadas com recursos adicionais. Hoje, o Extensible Hypertext Markup Language (XHTML) está substituindo o HTML como o padrão da Internet. XHTMLé uma linguagem de programação de marcação semelhante ao HTML, mas escrita em XML. Basicamente, ao usar XHTML, você está escrevendo código XML com restrições baseadas em um conjunto de elementos predeterminados. Ele combina as melhores partes de HTML e XML para criar uma linguagem de programação poderosa e flexível. XHTML é basicamente uma reformulação de HTML usando a sintaxe XML. A principal diferença entre essas linguagens de programação é que os documentos XHTML devem ser bem formados ou desenvolvidos de acordo com regras específicas para que sejam considerados documentos XHTML. O XHTML diferencia maiúsculas de minúsculas, enquanto o HTML não. O XHTML funciona perfeitamente com aplicativos de banco de dados e fluxo de trabalho. O XHTML torna mais fácil para os designers serem criativos e adicionar novos elementos. Ele fornece uma maneira mais estruturada e conceitual de pensar sobre o conteúdo.
Decorando Seu Site
A apresentação é importante, pois há apenas uma chance de causar uma impressão boa e duradoura. Os consumidores farão suposições sobre a empresa e seus produtos ou serviços com base no site. Pense em comprar uma casa. Não só é importante ter solidez estrutural, mas também se preocupa com a aparência externa e o apelo visual. A maneira como a casa está disposta, o tipo de piso, a cor das paredes e até mesmo os arbustos do lado de fora podem fazer a diferença em como você se sente sobre a casa e seu valor.
Duas ferramentas usadas no design de um site que podem ajudar na decoração de um site são as folhas de estilo em cascata e o JavaScript .
As folhas de estilo em cascata (CSS) usam uma linguagem de estilo simples que fornece aos usuários uma terminologia de editoração eletrônica familiar para alterar a aparência dos sites. CSS descreve como as páginas da web devem ser exibidas em um navegador. Você pode pensar no CSS como a decoração da sua casa. Sem qualquer decoração, é bastante insosso e enfadonho, mas quando você adiciona uma decoração, ele realmente apimenta o ambiente e o torna mais convidativo. CSS foi desenvolvido pelo World Wide Web Consortium (W3C). Ele pode controlar tipografia, cores, planos de fundo e outras características de design.
 |
CSS usa sintaxe fácil de ler e escrever. É composto por duas partes: um seletor e uma declaração. O seletor decide sobre o elemento ao qual uma regra é aplicada, enquanto a declaração especifica exatamente o que deve ser feito para aquele elemento. Se você quiser definir o título como roxo, sua regra de estilo seria: h1 {color: purple;}. ‘H1’ é o seletor e ‘color: purple’ é a declaração. A declaração pode ser dividida em duas seções: a propriedade e o valor. A propriedade é a qualidade ou característica, como cor; o valoré a especificação precisa da propriedade, como roxo. As regras de estilo estão alojadas em uma folha de estilo. A folha de estilo é um documento externo independente, compartilhado por várias páginas da web. Controla estilos convenientemente em todo o site. Uma alternativa é conter uma folha de estilo em uma única página da web para uso exclusivo dessa página. As regras CSS podem ser combinadas com o código HTML. CSS deve ser usado para processar informações de apresentação em XHTML.
JavaScript é uma linguagem de programação projetada para fornecer conteúdo da Web interativo. É um componente importante do design de páginas da web. O JavaScript é integrado ao código HTML e torna as páginas da web dinâmicas. JavaScript contido no código HTML é freqüentemente chamado de script. JavaScript pode pegar documentos HTML estáticos e torná-los interativos, melhorando assim a experiência do usuário. Ele permite que o conteúdo da Web seja alterado quando uma página é carregada em um navegador. Isso possibilita que a página da Web interaja com um usuário por meio de formulários e controles. JavaScript também fornece animação e efeitos visuais. JavaScript faz as coisas acontecerem em sua página da web. JavaScript é para uma página da Web o que as dobradiças que permitem que as portas abram e fechem ou os interruptores que permitem ligar e desligar as luzes são para uma casa.
Para criar um site visualmente atraente, é preciso considerar os layouts, fontes e cores que aparecerão na tela. Ao projetar seu site, use temas e estruturas unificadores que mantêm as páginas unidas. Os visitantes gostarão da consistência e familiaridade que o tema unificado oferece. Considere o uso de uma grade ou dispositivo de layout conceitual para organizar a página da web em colunas e linhas para uma aparência polida. A forma como o texto é apresentado é outro componente importante para o design do site. Você desejará limitar o número de fontes usadas, dimensionar adequadamente sua fonte, deixar espaço em branco suficiente e usar cores contrastantes, como um fundo claro com texto escuro. Espaço em brancocompõe as áreas em branco em sua página. O espaço em branco pode ser usado deliberadamente para orientar os leitores e definir áreas da página.
Finalizando seu site
 |
Após o planejamento, construção e decoração, é necessária uma inspeção final. Assim como uma casa é inspecionada para garantir que está dentro do código e concluída de acordo com as especificações, um site deve ser inspecionado e revisado. Deve atender às especificações criadas durante a fase de planejamento. Deve ser preciso em termos de conteúdo. Deve ser visualmente atraente, envolvente e fácil de navegar. O site deve ser testado em vários navegadores da Web, como Internet Explorer, Mozilla Firefox, Google Chrome ou Safari, para garantir que tenha a aparência e o funcionamento pretendidos. O site deve ser verificado para funcionalidade em várias plataformas, como Windows e Mac. O cliente analisará o site e garantirá que ele seja satisfeito. Quaisquer alterações ou correções que precisem ser feitas serão feitas neste ponto. Assim que o site for aprovado,
Resumo da lição
Para resumir, Web design é a criação e design visual de documentos exibidos na World Wide Web. A primeira etapa requer um planejamento adequado. Isso inclui o layout, meio de visualização, facilidade de navegação, uso de hipertexto e considerações sobre largura de banda.
A próxima é a fase de construção. Os sites são construídos com HTML, XML e XHTML. Hypertext Markup Language (HTML) é uma ferramenta de programação que usa hipertexto para estabelecer links dinâmicos para outros documentos. Extensible Markup Language (XML) é uma linguagem de programação de marcação como HTML sem elementos predefinidos. XHTML é uma linguagem de programação de marcação semelhante a HTML, mas escrita em XML.
Assim que a estrutura do site estiver completa, é hora da parte de design e decoração. Isso inclui o design de informações, temas unificados, uso de espaço em branco e aparência geral e apelo. Contamos com CSS e JavaScript para decorar páginas da web. Cascading Style Sheets (CSS) usa uma linguagem de estilo simples que fornece aos usuários uma terminologia familiar de editoração eletrônica para alterar a aparência de uma página da web. JavaScript é uma linguagem de programação projetada para fornecer conteúdo da Web interativo. Por último, o teste e a revisão ocorrem para garantir a precisão. Em seguida, o site é lançado.
lições objetivas
Depois de assistir a esta lição, você será capaz de:
- Definir web design
- Identifique as etapas necessárias para criar um site
- Distinguir entre as diferentes linguagens de programação usadas para criar um site