Produção WEB

Conteúdo abordado nesta página


Home

É o conjunto de conhecimento adquirido que possibilita criar, desenvolver e gerir paginas para internet.


Esta palavra é muito utilizada no mundo da internet, mas para a compreensão vamos entender separadamente o significado e depois sua junção.

Web tem como significado de "Teia ou Rede", ou seja, páginas de internet.
Design significa "Projeto" planejamento a ser construído ou já fabricado do qual é iniciado por um desenho.

Portanto Web design é o planejamento para o desenvolvimento de uma Website, ou seja, conjunto de páginas eletrônicas para Internet ou simplesmente Site.

Web designer é o profissional que desenvolve a elaboração do projeto estético e funcional de um site. Para o desenvolvimento de Websites esse profissional deve ter conhecimento de Linguagens de Estruturação e Formatação de Documentos como XHTML (Extensible Hypertext Markup Language), CSS(Cascade Style Sheet) e tratamento e edição de imagens.

Webmaster é um profissional capaz de realizar tarefas tanto de um Web designer quanto de um Web developer (que faz a parte da programação, como sistemas de login, cadastro, área administrativa e interilagação com banco de dados).

O Webmaster domina uma lista de tecnologias de programação e desenvolvimento.


Arquitetura da Informação

Arq_info


A.I. ou Arquitetura da informação: é uma etapa de pré-projeto para desenvolvimento de web sites, portais ou qualquer estrutura digital que ofereça informação e possibilidades de interação com o usuário. A principal característica da A.I. é a preocupação com o usuário, buscando a satisfação subjetiva e conforto. Para tanto, utiliza-se padrões de desenvolvimento de conteúdo para que não existam barreiras entre a busca e o entendimento, para que haja troca de informação clara e eficiente entre o usuário e a interface.

O objetivo de um trabalho de A.I. é criar as estruturas de organização das informações para que além de compreender e encontrar facilmente as informações que necessita, o usuário desempenhe suas tarefas com facilidade. Para tanto, é necessário definir regras de organização do web site, traçar o modelo de interação com o usuário baseado em experiência e conhecimento do perfil do usuário e análise conotativa das tarefas para buscar o modelo conhecido pelo usuário em outros ambientes.
Por fim, o projeto de Arquitetura da Iformação documenta as regras de vocabulário controlado, o mapa e fluxo de informações do site e especifica as páginas do web site e seus componentes em rascunhos de tela chamados wireframes.

WEB: Linguagem de Programação

São linguagens de programação específicas para o desenvolvimento de sites e aplicações que rodem na internet, atualmente o mercado conta com diversas opções de linguagens WEB, como por exemplo:

Cada linguagem possui suas próprias características e peculiaridades possuindo formas diferentes de se realizar determinadas ações, a forma como um problema pode ser resolvido em uma linguagem pode ser completamente diferente em outra linguagem. Por isso, estudar e entender bem como cada uma delas funciona faz com que o profissional consiga extrair ao máximo o potencial da linguagem que escolher para trabalhar.

Interação: Linguagens de programadores como as linguagens de marcação como: XHTML, HTML, XML algumas formas de script como: ASP, PHP e Javascript. Bancos de dados: MySQL e PostgreSQL também é relevante, uma vez que se usará PHP e ASP.

Design: Desenho das interfaces que atraiam o usuário e que, seja de fácil uso.

A criação de uma interface geralmente depende mais de programas como: Photoshop, do Fireworks e do Dreamweaver, de um projeto bem feito e de muita criatividade. Animações interativas exigem o Adobe Flash.




Home
Internet, tem o significado de International Network (Rede Internacional) do qual temos computadores de diversos portes e sistemas operacionais conectados no mundo inteiro e ao mesmo tempo, ou seja, então podemos dizer que Internet é uma Rede Mundial de Computadores. Rede_mundo

Surgimento:

Durante a guerra fria . . . em outubro de 1957 URSS lança o Sputnik . . .

Sputnik

. . . em 1958 os EUA criam a DARPA todas as informações eram centralizadas no pentágono!

Darpa

em 1966, por medo de um ataque ao pentágono, a DARPA planejou uma grande rede . . .

Foi desenvolvida para manter a comunicação entre as bases militares dos EUA.

Logo_arpanet

Agência de Pesquisas em Projetos Avançados.

Tipos de conexão:

ADSL ADSL
Bluetooth Bluetooth
Cabo Cabo
Dial-up Dial-up
Fibra óptica Fibra
Rádio Radio
Rede  Elétrica Rede_eletrica
Satélite Satelite
Wireless Wireless

Internet: é uma rede mundial de computadores interligados através do protocolo TCP-IP como já visto anteriormente, que permite o acesso a informações e transmissão de dados.

Intranet: é uma rede de computadores privada que também usa protocolos da Internet. O conceito de intranet pode ser interpretado como "uma versão privada da Internet", confinada a uma organização e com controle de Cliente/Servidor.

Brouser:

O navegador de internet também é conhecido como Browser, este software tem a função de interpretar linguagens de programação para a Web, bem como reconhecer textos, imagens, animações, áudio, vídeo entre outros arquivos

Brouser

Tipos de sites:

Institucional: mantidos por empresas ou profissionais liberais, tem como objetivo principal a divulgação de serviços e ou produtos.

E-commerce: conhecido também como comércio eletrônico é voltado para a comercialização de compra e venda caracterizado com a liquidação financeira por intermédio de meios de pagamentos eletrônicos.

Informações: veículos de comunicação como jornais, revistas e agências de notícias utilizam a Internet para divulgar notícias. Jornalistas freelances e indivíduos comuns também publicam informações na Internet, por meio de blogs.

Armazenagem de informações: estes sites funcionam como bancos de dados, que catalogam registros e permitem efetuar buscas, podendo incluir áudio, vídeo, imagens, softwares, mercadorias, ou mesmo outros sites. Alguns exemplos são os sites de busca e a Wikipédia.

Comunitário: estes servem para a comunicação entre usuários da rede. Nesta categoria se encontram os chats, fóruns e sites de relacionamentos.

Portais: sites com diversos tipos de assuntos e serviços aos usuários. Normalmente estes sites são os mais visitados da internet pelo fato de conter informações diversificadas e atualizadas constantemente.


WWW

www é um sistema em hipermídia, que é a reunião de várias mídias interligadas por sistemas eletrônicos de comunicação e executadas na Internet, onde é possível acessar qualquer site para consulta na Internet.

Estes documentos podem estar na forma de vídeos, sons, hipertextos e figuras, e para visualizar a informação, utiliza-se um programa de computador chamado navegador para descarregar essas informações, e mostrá-los na tela do usuário.

A Web funciona através de três parâmetros:

1. URL: que especifica o endereço único que cada página vai receber, e é como ela vai ser encontrada quando os usuários digitarem;

2. HTTP: que é um protocolo de comunicação que permite a transferência de informação entre redes;

3. HTML: que é um método de codificar a informação da internet, para ser exibida de diversas maneiras

Instituições Responsáveis

W3C

A World Wide Web Consortium (W3C) “www.w3c.org

é uma comunidade internacional onde as organizações-membros, uma equipe de funcionários de tempo integral, e trabalham juntos para desenvolver padrões para Web. Liderados pelo inventor da Web “Tim Berners-Lee” e CEO “Jeffrey Jaffe”.

   
W3C_Brasil

O escritório do W3C Brasil “www.w3c.br” iniciou suas operações no final de 2007, parte das atividades do W3C Brasil está em conformar interlocuções técnicas em torno das especificações e padrões, considerando as necessidades e demandas apresentadas pela comunidade brasileira. Essas atividades acontecem em Grupos de Trabalho com participação de representantes dos filiados brasileiros, de organizações parceiras e de especialistas convidados.

   
CGI

O Comitê Gestor da Internet no Brasil - CGI.br “www.cgi.br” o primeiro da América do Sul, mantém grupos de trabalho e coordena diversos projetos em áreas de importância fundamental para o funcionamento e o desenvolvimento da internet no país.

   
Registro_br

Desde 1995, o Registro.br  “www.registro.br” é o executor de algumas das atribuições do Comitê Gestor da Internet no Brasil, entre as quais as atividades de registro de nomes de domínio, a administração e a publicação do DNS para o domínio (.br).

   
Interlic

InterNIC (Internet Network Information Center) “www.internic.net”  é uma organização do Departamento de Comércio dos Estados Unidos, responsável pelo registro de domínios utilizados na Internet.

   
Icann

ICANN (Internet Corporation for Assigned Names and Numbers) “ Sociedade Internet para a Atribuição de Nomes e Números” “www.icann.org www.icann.org.br”, é responsável pela gestão e coordenação do Sistema de Nomes de Domínio (DNS) para assegurar que cada endereço é exclusivo e que todos os utilizadores da Internet conseguem encontrar todos os endereços válidos.

   
Cert

O CERT.br (Centro de Estudos, Resposta e Tratamento de Incidentes de Segurança no Brasil) “www.cert.br” é o Grupo de Resposta a Incidentes de Segurança para a Internet brasileira, É responsável por tratar incidentes de segurança em computadores que envolvam redes conectadas à Internet brasileira.

   
Abranet

A Abranet (Associação Brasileira de Internet) “www.abranet.org.br”  fundada em 07 de novembro de 1996 sem fins lucrativos tem como principais objetivos sociais o apoio às empresas brasileiras provedoras de acesso, serviços, informações, pesquisa, desenvolvimento e demais atividades profissionais relacionadas com Internet e Tecnologia da Informação, incluindo acadêmicos que atuam como pesquisadores nas áreas de Internet e Tecnologia da Informação no país.

   

PROTOCOLOS DE REDE

TCP= Transmission Control Protocol Protocolo de Controle de Transmissão
IP= Internet Protocol Protocolo de Internet
FTP= File Transfer Protocol Protocolo de Transferência de Arquivos
HTTP= Hypertext Transfer Protocol Protocolo de Transferência de Hipertexto
POP= Post Office Protocol Protocolo de Posto dos Correios
SMTP= Simple Mail Transfer Protocol Protocolo Simples de Transferência de Correio
IMAP= Internet Message Access Protocol. Protocolo de Acesso a Mensagem da Internet




Home

O domínio nada mais é que o endereço do site composto de uma cadeia de caracteres que identifica o endereço completo do site como visto anteriormente a URL.

Dominio

Correio eletrônico - e-mail

End_correio

 

Registrar um Domínio:

Domínio é o nome dado ao endereço de um site na internet. O registro deste domínio pode ser feito por pessoa jurídica, física e ou profissional liberal. Existem diversas empresas/sites do qual você pode verificar a disponibilidade e registrar um domínio, exemplo:

O mais usado e recomendado é fazer o registro diretamente no órgão responsável e que controla os registros de domínio no Brasil, o Registro.br “www.registro.br” do qual abaixo utilizaremos em exemplos de nossas aulas.

Custo de Domínio:

Desde setembro de 2007 o valor de manutenção de um domínio é de apenas, R$ 30,00 (Trinta reais) anual.

Desde 26/Set/2007

Registro R$ 0,00 (Zero) - Manutenção

NOM.BR: R$ 30,00 pelo período mínimo de 3 anos e R$ 9,00 para cada ano adicionado durante o processo de registro ou renovação.

.BR: R$ 30,00 pelo período mínimo de 1 ano e R$ 27,00 para cada ano adicionado durante o processo de registro ou renovação.

Exemplos de registros ou renovações:

De 23/Jan/2003 até 25/Set/2007
Registro R$ 0,00 (Zero) - Manutenção Anual R$ 30,00

De Jan/2001 até 22/Jan/2003
Registro R$ 40,00 - Manutenção Anual R$ 40,00

Até Dez/2000
Registro R$ 50,00 - Manutenção Anual R$ 50,00


É importante ressaltar que quando contratamos um domínio no objetivo de desenvolver o site a um cliente, este deverá ser registrado em nome deste cliente, bem como todas as taxas e custo é de responsabilidade do cliente.



Disponibilidade de Domínio

O desenvolvimento de um site começa com o registro do domínio, ou seja, o endereço do site na Web.


Para isso o primeiro passo é verificar a disponibilidade para registro para contratá-lo, caso o endereço desejado retorne como Domínio já registrado você receberá uma lista de sugestões de domínios disponíveis.

Site_registro


Quando se trata do primeiro registro de um CNPJ ou CPF este não terá conta cadastrada no sistema. Utilize então a opção de cadastre-se.



Provedor de Hospedagem:



Provedor é uma empresa especializada em fornecer serviços de hospedagem de sites na Internet, existem diversos provedores com diversos preços e serviços (planos).

Provedor_hospedagem

Os provedores possuem servidores que ficam 24 horas conectadas à Internet, disponibilizando seu site para qualquer pessoa que queira visualizá-lo.



Planos de Hospedagem:

Planos_hospedagem

Deve-se definir qual o melhor plano de hospedagem para o site do cliente.

Servidores:

Bandeira_windows

Windows para sites que utilizam a linguagem de programação ASP ou .NET

Obs.:
Ambos os planos mesmos os mais básicos suportam hospedagem de sites simples,
como os de HTML

Bandeira_linux

Linux para sites que utilizam a linguagem de programação PHP


A plataforma é o sistema operacional do servidor em que sua hospedagem será instalada. Para escolher a melhor opção, tudo depende da sua necessidade e da forma que você vai colocar o seu site no ar.

Além da plataforma o provedor de hospedagem dispõe de diversos serviços e vantagens em seus planos de hospedagem.



DNS:

DNS (Domain Name Server), de posse desta informação já poderá ir até o Registro.br e complementar a pendência de informação do seu domínio com os dois DNS

Pag_contrucao

Faça uma página básica constando Site em desenvolvimento junto com o logotipo da empresa, endereço e contato. Isso só vai permanecer enquanto você desenvolve o site.



Home

Desenvolvendo o site

Etapas do Processo Criativo:

Workflow:

É o fluxo de trabalho de produção para Web, é a primeira ação do processo de criatividade para o desenvolvimento de um projeto Website. Em resumo consiste em criar um roteiro de organização e planejamento.


Briefing:

Muito usado em comunicação e marketing é o levantamento das informações a serem utilizadas para o desenvolvimento de um projeto. No nosso caso um site é necessário as informações diretas do cliente, objetivo, concorrência direta ou indireta, requisitos tecnológicos e tendências.



Orçamento

Com as informações baseadas em um Briefing bem detalhado, temos dados o suficiente para apresentar um orçamento em forma de contrato. Para isso o detalhamento dos serviços a serem executados no projeto devem ser de forma clara e objetiva, descriminando quais as páginas a serem desenvolvidas, linguagem de programação, linguagem de leitura, versões compatíveis para navegadores, disponibilidade ou não do código fonte de arquivos, forma de pagamento, prazo de entrega entre outros.

Contrato

Arquitetura da Informação:

Levantamento de conteúdo como textos, imagens, multimídia, etc.

Conteúdo   é a alma de qualquer projeto, é o que motiva o acesso às informaçõese o que gera experiências positivas com a idéia que se quer transmitir no site. Assim, a produção de conteúdo tem que ser planejada e apresentar as   informações no tempo e lugar certos para criar fidelidade com o usuário.

Pesquisa de usabilidade de um site do mesmo segmento, onde usuários e profissionais expõe como usam o site e interagem com temas, menus e o que motivam a ter uma boa relação com as informações disponíveis no site.

Wireframe é o desenho simples do site com o objetivo de demonstrar o layout básico do site com os principais elementos de organização como o topo, menu, corpo do site, laterais e rodapé.

Uma boa apresentação de
Wireframe é preparar dois protótipos:

Protótipo de baixa fidelidade, onde é feito um rascunho dos elementos do site e fluxo das informações;

Protótipo de alta qualidade, depois de analisadas as melhores possibilidades da apresentação do site no protótipo anterior, apresente um desenho simulando os elementos do site com situações reais de uso e sua usabilidade.

Identidade Visual

Após a aprovação do Protótipo de alta qualidade, aplica-se o a arte gráfica de todos os elementos do site formando o Layout de aparência real do site em que dever ser também aprovado pelo contratante. Aqui também fica definido a tipografia e paleta de cores.

Estética da Web

É importante não seguir uma fórmula de estética, siga sua criatividade de inovação ou até mesmo ouse em ser pioneiro, mas mantendo o princípio da Pesquisa de Usabilidade e isso fará com que seu usuário volte a visitá-lo novamente e até mesmo indicar ou compartilhar.

Modelo 01 Modelo 02
Mapa_site_1 Mapa_site_2



Home

Linguagens de Desenvolvimento

HTML (HyperText Markup Language), Linguagem de Marcação de Hipertexto, esta é a principal linguagem de programação para a Web. Por ser a principal e simples, também é a mais importante, já que todas as outras linguagens mais avançadas dependem desta estrutura de página para complementar as páginas.

Figura_html

XHTML (eXtensible Hypertext Markup Language), caracteriza-se pela atualização de linguagem básica de programação, baseada em XML. Onde tags de HTML recebem novas regras da XML.
Figura_xhtml

XML (eXtensible Markup Language) linguagem de marcação estruturada onde é muito parecida com o HTML.
Figura_xml

CSS (Cascading Style Sheets) esta é usada para a personalização de documentos, ou seja, definição de layout e tudo o que for formatação repetida entre páginas. Figura_css

ASP (Active Server Pages - Páginas de Servidor Ativas) Programação que torna a página dinâmica, correspondendo com banco de dados simples como o Access. Figura_asp

ASP.NET(Active Service Pages.Net) Tem o diferencial da sua programação ser direcionada a orientação e eventos de objetos.

Figura_aspnet

PHP (Pre HyperText Processor / Personal Home Page) Hoje é uma linguagem universal e popular por ser uma linguagem gratuita, onde comunica com o banco de dados MySQL. Figura_php

JSP (Java Server Pages) semelhante ao ASP e PHP tem a vantagem de ser multiplatafoma, ou seja, trabalha tanto em servidor Windows ou Linux.
Figura_jsp

JavaScript esta linguagem é voltada a orientação a objetos. Suporta controle de interatividade com o usuário, por exemplo o comando if, muito usado na linguagem C.

Figura_javaScript

Software de Desenvolvimento:

Existem no mercado diversos softwares de desenvolvimento de Web, ou também conhecidos como editores de HTML. Porém estas ferramentas tem foco em desenvolvimento, alguns apenas para desenvolvimento em HTML, outros especialista em desenvolvimento de Blogs, etc.

Adobe Dreamweaver hoje na versão mais recente é o Adobe Creative Cloud CC é considerado sem dúvida nenhuma como o melhor software de desenvolvimento para Web por suportar várias línguas de programação e conexão com banco de dados, dentre elas estão: HTML, ActionScript, CSS, XML, ASP, ColdFusion, JSP e PHP.

Figura_DW

Outros softwares:

WordPress, Joomla, Drupal, PHP Editor, Nvu, KompoZer, FastHTML, WYSIWYG Web Builder, CoffeeCup, NotePad++, GoLive, entre outros vários existentes no mercado.


Resolução de Vídeo

A resolução de vídeo é um importante fator a ser planejado antes de desenvolver um site, já que hoje temos diversas resoluções de vídeo em utilização.

De acordo com a pesquisa da StatCounter, a resolução no Brasil é:

Predominante é 1366x768 com 33,15% seguido de 1024x768 com 18,61%, e depois 1360x768 com 7,31% que tecnicamente empatado com a resolução 1280x800.

Área do Browser

Área do browser é a área disponível dentro do navegador em que o site fica visível, porém existem diversos fatores que fazem com que esta área seja de diferentes tamanhos, dificultando assim a definição do tamanho do site com o objetivo que este não tenha barra de rolagem na horizontal.

Itens que fazem com que esta área seja de tamanhos diferentes:

Estes itens complica a vida do Web designer na hora de planejar um site em que seja alinhado e enquadrado dentro desta área.

Publicação do site

Após o término do desenvolvimento do site, este estará localmente no computador do Web designer e deverá ser publicado ou hospedado no provedor de hospedagem contratado para que todos possam visitar o site na internet.

Publicacao_site
Para isso usamos o FTP (File Transfer Protocol) que é o protocolo de transferência de arquivos usando as informações de Login e Senha fornecidos pelo provedor contratado Figura_nuvem

Pós-site

Neste primeiro momento o contrato foi apenas para o desenvolvimento do projeto Website e que após a publicação e aprovação do contratante o objetivo foi cumprido.

Site_portal




Mas em futuros momentos o site poderá ser atualizado e para isso deverá cobrar pelo serviço avulso ou se constante atualizações é recomendável um contrato de manutenção mensal.