Afinal de contas, como surgiu a internet?


Internet
 

Afinal de contas, como surgiu a internet?

O que você pode esperar de uma tecnologia tão expansiva e em contínua mudança?

É impossível acreditar que a invenção da Internet é de uma única pessoa. A Internet foi o trabalho de dezenas de cientistas, programadores e engenheiros pioneiros, cada um deles desenvolvendo novos recursos e tecnologias que eventualmente se fundiram para se tornar a “superestrada da informação” que conhecemos hoje.

Muito antes da tecnologia para realmente edificar a Internet, muitos cientistas já previram a existência de redes mundiais de informação. Nikola Tesla brincou com a teoria de um “sistema mundial sem fio” no início de 1900, e pensadores visionários porquê Paul Otlet e Vannevar Bush conceberam sistemas de armazenamento de livros e mídia mecanizados e pesquisáveis ​​nas décadas de 1930 e 1940.

Ainda assim, os primeiros esquemas práticos para a internet não chegariam até o início dos anos 1960, quando JCR Licklider do MIT popularizou a teoria de uma “Rede Intergalática” de computadores. Pouco depois, os cientistas da computação desenvolveram a concepção de “permutação de pacotes”, um método para transmitir dados eletrônicos de forma eficiente que mais tarde se tornaria um dos principais blocos de construção da Internet.

O primeiro protótipo viável da Internet surgiu no final dos anos 1960 com a geração da ARPANET, ou Rede de Agências de Projetos de Pesquisa Avançada. Originalmente financiado pelo Departamento de Resguardo dos Estados Unidos, a ARPANET usava permutação de pacotes para permitir que vários computadores se comuniquem em uma única rede.

Em 29 de outubro de 1969, a ARPAnet entregou sua primeira mensagem: uma notícia “nó a nó” de um computador para outro. (O primeiro computador estava localizado em um laboratório de pesquisa na UCLA e o segundo em Stanford; cada um era do tamanho de uma pequena mansão.) A mensagem – “LOGIN” – era curta e simples, mas derrubou a rede ARPA incipiente de qualquer maneira : O computador de Stanford recebeu exclusivamente as duas primeiras letras da nota.

A tecnologia continuou a crescer nos anos 1970 depois que os cientistas Robert Kahn e Vinton Cerf desenvolveram o Transmission Control Protocol e Internet Protocol, ou TCP / IP, um protótipo de notícia que estabelece padrões de porquê os dados podem ser transmitidos entre várias redes.

A ARPANET adotou o TCP / IP em 1º de janeiro de 1983, e a partir daí os pesquisadores começaram a montar a “rede de redes” que se tornou a Internet moderna. O mundo online portanto assumiu uma forma mais reconhecível em 1990, quando o investigador da computação Tim Berners-Lee inventou a World Wide Web. Embora seja frequentemente confundida com a própria internet, a web é, na verdade, exclusivamente o meio mais geral de acessar dados online na forma de sites e hiperlinks.

A web ajudou a popularizar a internet entre o público e serviu para dar um passo crucial no desenvolvimento do vasto pilha de informações que a maioria de nós acessa diariamente.

 

As melhores plataformas CMS

O que é uma plataforma CMS?

Uma plataforma CMS (Content Management System, ou em português, Sistema de Gerenciamento de Conteúdo  ) é um software que permite gerenciar facilmente e fazer um site profissional.

Normalmente, as páginas da web são escritas em linguagens de programação HTML, JavaScript e CSS. Se você fosse produzir um site sem uma plataforma CMS, seria necessário aprender essas línguas e digitar muito código.

As plataformas CMS resolvem esse problema, permitindo que você crie um site sem digitar código ou aprender programação.

Conheça as melhores plataformas para geração e gerenciamento de sites.

1. WORDPRESS.ORG

wordpress

O WordPress.org é a nossa escolha número um para a melhor plataforma CMS. É o software CMS mais popular do mundo e alimenta  35% de todos os sites na Internet.

É importante não confundir o WordPress.org com o WordPess.com . O WordPress.org é um CMS de código gratuito originalmente projetado para blogs, mas agora é usado por todos os tipos de sites / lojas online. WordPress.com é uma plataforma de hospedagem de blogs.

2. JOOMLA

joomla

O Joomla é outra popular plataforma CMS de código livre gratuita que vem com vários modelos e extensões diferentes. É gratuito, mas você precisará de hospedagem e um nome de domínio.

Foi lançado pela primeira vez em 2005, assim uma vez que o WordPress, já existe há anos. O Joomla está repleto de recursos e muitos hosts da Web oferecem uma instalação com 1 clique. No entanto, é realmente uma plataforma CMS ideal para desenvolvedores e criadores de sites experientes, portanto, não é uma boa opção para iniciantes.

3. DRUPAL

drupal

Drupal é outra plataforma CMS de código livre. É o CMS por trás de alguns sites importantes, incluindo o site do The Economist e vários sites da universidade.

O Drupal é uma boa opção para desenvolvedores ou para pessoas capazes de contratar um desenvolvedor. É principalmente bom se você pretende gerar um site altamente personalizado que precise conter com muitos dados.

4. WOOCOMMERCE

woocommerce

O WooCommerce é a plataforma de comércio eletrônico mais popular do mundo . É realmente  fácil de gerenciar.

O WooCommerce não é tecnicamente uma plataforma CMS. Em vez disso, ele é executado tal comoum plug-in no WordPress, logo você precisará do WordPress no seu site para instalar o WooCommerce.

Se fosse uma plataforma CMS, teria 5,8% de participação no mercado, de convenção com a W3Techs . Essa é a porcentagem de todos os sites do mundo que o utilizam.

5. BIGCOMMERCE

bigcommerce

O BigCommerce é uma plataforma de comércio eletrônico totalmente hospedada, que às vezes é chamada de plataforma tudo-em-um. É fácil iniciar se você é iniciante.

O BigCommerce hospeda seu site para você, além de fornecer a própria plataforma CMS. Ele também lida com segurança e backups para você.

Afinal, o que é Podcast?

Podcast é como um programa de rádio por isso a  vantagem primordial é o conteúdo sob demanda, você pode ouvir o que quiser e na hora que bem entender.

Podcast é uma mídia relativamente nova, mas já muito utilizada no Brasil, é uma ferramenta fantástica que permite aumentar sua produtividade em momentos ociosos que poderiam estar sendo utilizados para se manter informado, ele se encaixa em um momento da vida urbana que ocorre num momento que todo mundo está muito ocupado no trânsito, fazendo uma corrida ou treinando.

Podcast é uma forma de você otimizar seu tempo tempo, que é a moeda mais preciosa e escassa hoje em dia, todo mundo tem a mesma quantidade de tempo, basta você saber utilizá-lo, para tirar o melhor proveito dele, o podcast é a ferramenta perfeita para te auxiliar nisso, permitindo que você esteja aprendendo ou se divertindo e se entretendo enquanto faz outra coisa, isto por si só já é brilhante além é claro de despertar sua imaginação e a sua criatividade.

Existem basicamente duas maneiras de se ouvir, a primeira delas é através do seu smartphone ou tablet, seja sua plataforma android, IOS ou até o windows phone, tudo o que precisa fazer é procurar a loja de aplicativos no seu aparelho e baixar um app indexador de podcast gratuito de sua preferência, os aplicativos mais usados encontrados na google places são podcast addict, podcast republic ou pocket cash, o IPhone tem aplicativos padrões para rodar um podcast.

Nas telas iniciais desses aplicativos você poderá ver diversos canais com os mais variados conteúdos de seu interesse, você também pode usar a função procurar no seu aplicativo onde você poderá digitar e buscar diversos tipos de conteúdos.

A partir daí você poderá fazer o download dos conteúdos que deseja escutar em seu aparelho mesmo enquanto estiver offline, você também poderá ouvir lo de maneira online ou seja através do stream enquanto você roda o nosso podcast online do seu aparelho numa conexão wifi ou uma conexão 3g ou 4g de sua preferência

Ao assinar os canais você também receberá notificações em primeira mão sempre quando forem lançados novos conteúdos, ou seja além de útil e prático o conteúdo é que chega até você e não o contrário.

Então, bem vindo ao maravilhoso mundo do podcast e divirta-se ou se mantenha informado, quando e onde quiser.

5 dicas importantes do Editor de Códigos Sublime

O Sublime Text é um editor de texto que foi projetado
para ser simples, rápido, flexível e fácil de usar. Não é à
toa que vem ganhando mais adeptos a cada dia, já que
muitas vezes os programadores, escritores e usuários em
geral acabam cansados e frustrados por ter que lidar
com IDEs pesadas e lentas ou editores de texto
sobrecarregados de recursos que nunca vão precisar.

GOTO ANYTHING

A maneira mais fácil e rápida de navegar entre arquivos
no Sublime Text é usando o recurso conhecido como
Goto Anything.
Para ativá-lo basta digitar o atalho Ctrl+P.
Ao fazer isso, surgirá uma lista para que você possa
escolher entre os arquivos abertos ou que fazem parte de
um mesmo projeto. Essa lista é filtrada à medida em que
você digita o nome do arquivo que quer abrir.
Na prática, você vai fazer o seguinte:
1. Digitar Ctrl+P
2. Começar a escrever o nome do arquivo que está
procurando
3. Selecionar o arquivo com as setas para cima ou
para baixo
4. Teclar Enter
Note que o conteúdo do arquivo que estiver em destaque
é mostrado na tela, para facilitar sua identificação.
Depois disso, tenho certeza que você vai se perguntar
como conseguiu viver até hoje sem o Goto Anything.

COMMAND PALETTE

Já imaginou se você pudesse fazer uma busca pelos
comandos do editor do mesmo jeito que pequisa texto
dentro de um arquivo?
O Sublime Text deixa você fazer isso com o recurso
Command Palette.
Com ele, você tem como pesquisar os próprios comandos
do Sublime Text por meio do atalho Ctrl+Shift+P.
O procedimento é similar ao do Goto Anything: ao
acionar o comando, surge uma lista de seleção que é
filtrada ao digitar os caracteres da descrição (em inglês)
da funcionalidade que procuramos.
Aprendendo apenas esse comando, é possível encontrar
praticamente qualquer funcionalidade, sem precisar
navegar pelos menus ou decorar atalhos de teclado.
Então, não esqueça! Na dúvida, apele para o
Ctrl+Shift+P.

SELEÇÃO MÚLTIPLA

A capacidade de selecionar trechos de texto de forma
flexível é um dos recursos mais úteis do Sublime Text.
A seleção múltipla torna possível manipular texto
usando mais de um cursor e mais de uma região
selecionada. Falando assim pode não parecer, mas o
número de diferentes situações nas quais o uso desse
recurso nos poupa bastante tempo é surpreendente.
Para incluir linhas acima ou abaixo à seleção de texto
atual, usamos Shift+Alt+Para cima ou
Shift+Alt+Para baixo, respectivamente.
Perceba que cada linha incluída na seleção possui seu
próprio cursor.
Quando selecionamos um trecho de texto (uma palavra,
por exemplo), pressionar Ctrl+D faz com que a próxima
ocorrência desse trecho também seja selecionada. Do
mesmo modo, um cursor é criado na posição
correspondente.

VISUALIZAÇÃO DA INTERFACE

No menu View encontramos a maioria das opções de
visualização mais importantes. Nesse menu podemos
habilitar e desabilitar a barra lateral (View > Sidebar >
Show/Hide sidebar), as abas dos arquivos abertos (View >
Show/Hide tabs), a barra de status (View > Show/Hide
status bar), o mini-mapa (View > Show/Hide minimap) e o
console de linha de comando (View > Show/Hide
console).
O Sublime Text também possui um recurso muito útil
para quem precisa se concentrar quando está
escrevendo um texto. Digitando Shift+F11 você aciona
o modo sem distrações (distraction-free mode) do editor,
cuja função é remover da sua tela tudo o que não for a
área de edição de texto

OPÇÕES DE LAYOUT

O Sublime Text permite que você organize seus arquivos
abertos em várias disposições na tela. Você pode agrupálos em colunas, linhas ou em formato de grade. Essa
funcionalidade é muito útil quando trabalhamos com
arquivos que são relacionados entre si. Imagine
visualizar uma página HTML e sua respectiva folha de
estilos CSS em colunas lado a lado, por exemplo.
Para fazer isso, vá em View > Layout > Columns: 2 (ou use
o atalho Alt+Shift+2). Será criada uma nova coluna
para o qual podemos arrastar qualquer aba de arquivo
aberto ou movê-la por meio do atalho
Ctrl+Shift+<número_do_grupo> (no caso,
Ctrl+Shift+2).
Os layouts possíveis são:
• 2, 3 ou 4 colunas (Alt+Shift+<2, 3 ou 4>)
• 2 ou 3 linhas (Alt+Shift+<8 ou 9>)
• Grade 2 x 2 (Alt+Shift+5)
Para retornar ao layout de painel único, basta digitar
Alt+Shift+1.

As tecnologias e linguagens que você deve conhecer para se tornar um desenvolvedor completo

1 – WordPress

A mais popular plataforma de gerenciamento de conteúdo do mundo é utilizada em 30% das páginas ativas na internet. O WordPress facilita a criação e gerenciamentos dos conteúdos dentro de um site, sendo muito popular entre blogs, e-commerces e portais de notícias.

Criado para democratizar o desenvolvimento de sites, o CMS dispensa o conhecimento em códigos e linguagens. Então você pode utilizá-lo facilmente e isso não quer dizer que não seja possível construir sites incríveis na plataforma.

Se você conhecer as tecnologias de edição de um site WordPress (como HTML, CSS, JavaScript e PHP) também é possível personalizar layouts e funções para ter páginas ainda mais completas, como é o caso de sites gigantes como o da Forbes.

2 – Criador de Sites

Lançado em 2017 pela HostGator, o Criador de Sites é uma ferramenta que facilita e simplifica muito o processo de desenvolver um site do zero. Com ele, mesmo quem não tem conhecimento de programação ou experiência na gestão de CMS pode criar sites, blogs e lojas virtuais sem grandes dificuldades.

De forma intuitiva, a ferramenta oferece diversas opções de templates responsivos, o que já te livra da preocupação com a navegação por dispositivos móveis. Além disso, o Criador de Sites oferece banco de imagens e integração com ferramentas de SEO!

Criando sites estáticos
Muitos profissionais e empresas precisam de sites com um bom layout e que apresente de forma rápida as suas informações, como dados de contato, serviços prestados e portfólio, por exemplo. Para isso, os sites estáticos podem ser muito úteis!

Com a vantagem de ter uma boa velocidade de carregamento e menor custo de investimento, esse tipo de site não utiliza sistemas de gerenciamento do conteúdo e banco de dados.

Sendo assim, para desenvolver um site estático é necessário conhecimento em basicamente 3 tecnologias que permitem trabalhar no seu site profissional:

3 – HTML

Sendo uma linguagem de marcação, o HTML é um conjunto de regras e códigos que vão definir como os elementos do seu site serão exibidos na tela.
Para facilitar o trabalho, existem alguns free templates disponíveis no HTML5, oferecendo flexibilidade e liberdade para criar um site moderno.

Porém, é fundamental que o profissional responsável entenda como isso acontece para realizar melhorias e correções quando necessário. Um curso de HMTL5 nesse caso pode ser muito útil.

4 – CSS

Muito usado em conjunto com o HTML, o CSS é uma linguagem de estilos responsável pela apresentação de design e estilo do seu site.

Assim, enquanto o HTML serve para estruturar conteúdos, o CSS ajuda a formatá-los.

5 – JavaScript

O JavaScript é utilizado em muitas das páginas web no mundo, sendo responsável pelos scripts que garantem certos comportamentos e funções nos sites – como por exemplo, ao passar o mouse sobre um item de menu e abrirem as opções. É a linguagem que dará dinâmica à sua página web, podendo criar interações e efeitos visuais, ordenar tabelas, autocompletar termos e muito mais.

O JavaScript não é usado apenas em páginas, como possui também um papel importante na criação de plataformas web com grandes quantidades de informações atualizadas em tempo real, como redes sociais e portais de notícias.

Resumindo: ao começar a criar sites, o HTML estrutura a página, o CSS a deixa mais bonita e atrativa e o JavaScript faz tudo funcionar!

Usando outra linguagens e back-end para desenvolver sites incríveis
Agora que já conhecemos as tecnologias base para criar páginas na web, o próximo passo seria adicionar outras linguagens de programação, bibliotecas de código e bancos de dados para desenvolver sites ainda mais incríveis, dinâmicos e completos!

São diversas as opções no mercado, variando para o que você deseja ter em um site e do conhecimento do desenvolvedor envolvido no projeto. Separamos algumas das principais, confira:

6 – Java

O Java é uma linguagem de programação orientada a objetos muito popular no desenvolvimento web, já que é gratuita e ajuda a manter um sistema modular, flexível e extensível.

A linguagem está em toda parte, pois além de páginas web, também é usada para criar aplicações para smartphones, veículos, pequenos robôs e até mesmo em máquinas. Outro fator que impulsiona o uso do Java por desenvolvedores web é a sua relativa facilidade de aprendizado.

7 – PHP

Mais usada no back-end de sites, o PHP (Hypertext Preprocessor) fica responsável pela comunicação com o servidor. Com ele, é possível realizar a interação com o banco de dados e outras aplicações, implementando funções dinâmicas e complexas em websites.

É uma linguagem simples para iniciantes, de código aberto, e que permite criar variados elementos que vão desde imagens e arquivos em PDF, até sistemas de pagamento para e-commerces. O PHP é a linguagem base de grandes sites como o Facebook, Wikipédia e o próprio WordPress citado acima.

8 – Python

Criado para ser uma linguagem para escrever programas intermediários, o Python passou por diversas mudanças já que é uma plataforma livre e de código aberto. Hoje é uma linguagem multiplataforma que permite desenvolver aplicações mobile, desktop e web. Além disso, ainda é capaz de integrar diversos serviços e sistemas de forma rápida e eficaz. Também é usada como base de sites de grandes empresas como Netflix, Youtube e Google.

9 – MySQL

O MySQL é um dos bancos de dados relacionais mais utilizados no mercado, principalmente em sites criados em PHP. Também é uma tecnologia open source, permitindo o desenvolvimento personalizado para as necessidades da empresa e do site. Além disso, o MySQL é fácil de usar e compatível com diversos sistemas operacionais, garantindo seu lugar como o sistema de gerenciamento de banco de dados mais popular do mundo.

O que é Bootstrap e como utilizar

Se você é um desenvolvedor de páginas web, sabe o quão árduo era começar um site do zero toda vez que se pegava um novo projeto para fazer. Era (no passado)! Isto, porque está disponível, desde 2011, o Bootstrap. Trata-se de um framework front-end que veio para facilitar e agilizar o trabalho, oferecendo padrões para HTML, JavaScript e CSS.

Como surgiu o Bootstrap?

Ele foi desenvolvido por Jacob Thorton e Mark Otto, engenheiros do Twitter, como uma tentativa de resolver incompatibilidades dentro da própria equipe. O intuito era otimizar o desenvolvimento de sua plataforma através da adoção de uma estrutura única. Isto reduziria inconsistências entre as diversas formas de se codificar, que variam de profissional para profissional. E a tentativa deu tão certo que eles perceberam o grande potencial da ferramenta, lançando-a no GitHub como um software livre.

O slogan “Projetado para qualquer um em qualquer lugar” não veio do nada: com interface bastante amigável, o Bootstrap oferece uma enorme variedade de plugins e temas compatíveis com o framework. Além disto, possui integração com qualquer linguagem de programação. E o melhor de tudo, é free! Isto, graças ao seu código aberto, que em pouco tempo após o seu lançamento já recebeu a contribuição de inúmeros desenvolvedores de todo o planeta, tornando-o o software livre mais ativo do mundo.

Em seu site oficial, vemos a seguinte frase: “Bootstrap torna o desenvolvimento front-end mais rápido e fácil. Ele é feito para pessoas de todos os níveis de habilidade, dispositivos de todos os formatos e projetos de qualquer tamanho”. Temos aí um “resumão” dos benefícios agregados que ele oferece aos desenvolvedores.

Em que ele pode ser aplicado?

Na prática, a principal aplicação do Bootstrap seria na criação de sites responsivos (mobile). Com o Bootstrap, o profissional já não tem mais que perder tanto tempo digitando toda uma linha de CSS novamente. Esta facilidade se deve ao fato de que ele possui vários plugins em JavaScript (jQuery) que tornam o seu dia-a-dia muito mais fácil. Com inúmeras bibliotecas prontas disponíveis, o trabalho que o desenvolvedor tem é de, praticamente, só as incluir em seus projetos.

A ferramenta ajuda o profissional a implementar recursos como o menu dropdown, carousel, modal, slideshow, etc., que são aplicados com muito mais facilidade. De acordo com o site oficial, o Bootstrap “usa CSS tradicional, mas seu código fonte utiliza os dois pré-processadores CSS mais populares, Less e Sass”.

Como usar o Bootstrap?

É bem simples: faça o download do Bootstrap no site oficial da ferramenta. Adicione os arquivos “bootstrap.min.css” e “bootstrap.min.js” nas pastas correspondentes a eles dentro do seu site. Depois, é só chamar o CSS e o JS dentro da tag <head> do HTML. É importante lembrar que o Bootstrap acessa a biblioteca jQuery para ativar o comportamento de seus plugins. Portanto, lembre-se de inseri-lo em sua página para que tudo funcione perfeitamente.

Para facilitar o seu entendimento sobre o Bootstrap, há no site uma área onde você consegue ver exemplos dos recursos disponíveis para você customizar o seu site. Para isto, basta acessar a Coleção de Exemplos. Lá, você encontra modelos de temas, layouts de tabelas, barras de navegação, etc.

Além disto, existe também uma sessão onde você pode ver alguns belos, criativos e funcionais projetos já realizados com o Bootstrap. Entre em Explorar Expo e inspire-se. Agora é só mergulhar nas infinitas opções que o Bootstrap oferece e deixar sua criatividade fluir, criando projetos com muito mais praticidade e em muito menos tempo.

Como criar um site passo a passo

1. Registre seu domínio

Acesse o site registro.br para poder escolher o nome de seu site.

Essa etapa é muito importante, porque quando você compra um domínio, evita que outras pessoas utilizem o mesmo nome que você.

Para isso, basta acessar o registro.br, digitar o domínio desejado no espaço indicado e clicar em Pesquisar para ter certeza de que o nome que você escolheu não foi usado ainda.

Como criar um site - imagem do site registro.br mostrando se o domínio escolhido está disponível para registro

Caso o nome escolhido por você não tenha sido utilizado ainda, clique em Registrar e preencha os campos seguintes com suas informações pessoais para comprar esse domínio. Ao final disso, você receberá um e-mail para prosseguir com seu cadastro e escolher a forma de pagamento.

2. Contrate um serviço de hospedagem

O serviço de hospedagem é quem colocará seu site no ar e o manterá funcionando.

Existem muitas opções no mercado para essa finalidade, tanto gratuitas quanto pagas. Porém, o grande problema de escolher um serviço de hospedagem gratuito é que eles apresentam muitas restrições e podem ser instáveis, o que pode fazer com que seu site saia do ar.

Já para serviços pagos, você tem várias outras opções, como o HostGator e o King Host, que possuem planos a partir de R$12 por mês. O importante aqui é pesquisar e escolher aquele que mais compensar para você.

3. Escolha um construtor de sites

Depois de ter seu domínio e um bom serviço de hospedagem, o próximo passo é construir seu site.

Mais uma vez, há várias opções para você, inclusive, os próprios construtores de site dos serviços de hospedagem contratado.

Para decidir qual é o melhor, veja se é possível customizar o site, escolher um template relacionado a seu negócio e incluir vídeos e imagens para deixar as páginas com sua identidade.

O lado bom desses construtores é que a maioria deles é bem autoexplicativo, assim, fica fácil criar um site com a ajuda dessas ferramentas.

Mas caso você não tenha como investir nenhum capital inicial na criação de seu site, há uma outra maneira de fazer isso, que é por meio de construtores de sites gratuitos que já incluem o serviço de hospedagem.

Porém, como dissemos anteriormente, o problema desse tipo de site é que você não terá um domínio exclusivo para sua marca, o que pode prejudicar o rankeamento de seu site nos buscadores.

Nós escolhemos o Google Sites, que disponibiliza integração com lojas online, Google Maps, além de ser mobile friendly, por exemplo. Mas você pode escolher outra ferramenta, caso prefira.

Google sites

1. Crie uma conta Google. Caso você já tenha, use a sua mesmo.

2. Na barra de pesquisa, digite Google Sites. Assim que abrir a página principal, clique em Criar no canto direito da tela. Você terá duas opções: no Google Sites Clássico no novo Google Sites. Selecione a segunda opção.

Como criar um site - imagem da primeira página do Google Sites clicando no botão "Criar"3. Assim que você selecionar a opção no novo Google Sites, uma nova janela será aberta já com a página inicial de seu site.

Como criar um site - imagem da primeira tela do site que está sendo criado com opções para colocar título da página

Essa será a primeira imagem que as pessoas verão assim que acessarem seu site. Por isso, é importante que você invista tempo para deixar uma boa primeira impressão e, principalmente, para que essa página tenha a identidade da sua marca.

Você pode customizar essa página da maneira que achar melhor e de forma que os visitantes olhem e saibam que aquele site é seu.

4. Acrescente seu logo no canto esquerdo da tela, em Digitar o nome do site, e o Título da sua página, com o nome de sua marca ou até mesmo uma frase que resuma seu negócio.

Em Título da sua página você pode inclusive Alterar imagem e escolher entre Fazer upload ou Selecionar imagem. Na primeira opção, caso você tenha um banner com a identidade de sua marca, é possível acrescentá-la em seu site. Mas se você não tiver nada específico ainda, você pode utilizar o banco de imagens disponibilizados pelo Google e escolher uma que reflita o nicho de seu empreendimento.

Como criar um site - imagem da primeira página do site criado com uma figura representando a categoria do site, ensinando como personalizar as páginas do site

5. Acrescente textos, imagens, incorpore uma URL (caso você tenha um blog ou até mesmo suas redes sociais) e faça upload de arquivos, como vídeos, para incrementar ainda mais a página inicial de seu site. Para isso, basta escolher a ação que você desejar no canto direito da tela, logo abaixo de Inserir.

Como criar um site - imagem do Google sites com destaque para os botões que permitem adicionar textos, imagens, URLs e fazer uploads de arquivos no site

Se seu negócio tiver uma sede ou uma loja física, você pode clicar em Mapa e acrescentar o endereço. Além disso, clicando em YouTube é possível colocar vídeos de seu canal nessa rede na primeira página de seu site.

6. Clique em Temas para escolher o estilo de letra e cores dos textos e em Páginas para adicionar outras páginas ao seu site.

Como criar um site - imagem do Google site com destaque para os botões de adicionar outras páginas e temas em seu site

7. Acrescente quantas páginas você achar necessário para criar uma vitrine de seu negócio. Cada vez que você acrescentar uma Nova página, o título escolhido para ela aparecerá no canto superior da página principal de seu site. Lembre-se de customizar todas as novas páginas de forma a deixar o site sempre com sua identidade.

Como criar um site - imagem mostrando como fica o topo do seu site quando você adiciona outras páginas

É possível criar botões com call to actions em todas as páginas de seu site. Basta que você acrescente a página de destino para onde o visitante de seu site será encaminhado.

8. Quando você tiver acrescentado todas as páginas, textos, imagens e vídeos em seu site, clique em Publicar no canto direito da tela.

Escolha o nome de seu Endereço da Web. Caso o nome já tenha sido usado, o Google informará para que você mude o nome de seu site.

Como criar um site - imagem mostrando como publicar seu site na web e acrescentar seu domínio à página

9. Clique em Visualizar para ver como seu site ficou. Você pode fazer alterações sempre que necessário.

Como criar um site - imagem mostrando como seu site ficará depois de publicado na web

Pronto! Você acabou de criar um site usando o Google Sites. Porém, como você pode perceber, sua URL aparecerá sempre com sites.google.com antes do nome de seu negócio. Então, essa não é uma opção muito recomendada, porque, como já dissemos, você não terá autoridade de domínio.

E aí? Percebeu que é possível criar um site sozinho?

 

O que você precisa para ser um programador front-end

O desenvolvimento web se divide em duas partes: back-end e front-end. A primeira está mais voltada para as linguagens de programação e códigos, enquanto a segunda se preocupa mais com a interface exibida para o usuário. Vamos apresentar aqui alguns conceitos, conhecimentos necessários e sugestões de como se capacitar para ser um programador front-end. Aproveite as dicas e comece logo a se especializar!

Primeiros passos para ser um programador front-end

Se você quer ingressar nesta área a primeira coisa que precisa fazer é desmistificar alguns pré-conceitos. Um deles é de que desenvolvedor front-end e não mexe com design e designer não entende de lógica de programação. O ideal é que esses profissionais procurem entender e desenvolver novos conhecimentos a fim de aprimorar suas atividades.

É natural que um desenvolvedor não tenha total domínio sobre design, mas ao menos precisa conhecer o básico sobre legibilidade e usabilidade de sites. Assim como o web designer precisa entender como funciona o back-end de um site e compreender lógica de programação. O profissional que está disposto a ampliar o seu campo de atuação tende a encontrar melhores oportunidades no mercado de trabalho.

Lógica de programação

Esse é um dos requisitos básicos para quem quer ingressar no universo do desenvolvimento de sites. Comece fazendo um curso de algorítimos, tem muita coisa gratuita na internet, pesquise.

HTML

Qualquer um que queira aprender a programar precisa conhecer HTML. Portanto, se você realmente deseja ser um programador front-end vai precisar começar pelo HTML. Essa é a linguagem usada para estruturar todo o conteúdo de um site. O recomendado é que você aprenda os fundamentos de HTML, coloque os conhecimentos em prática criando uma página na web. Além disso, também é importante dar atenção à semântica (que simplifica a leitura do código e o SEO) e acessibilidade.

CSS

Outra linguagem que todo programador front-end precisa conhecer é o CSS, que significa Cascading Style Sheets, para o português poderíamos traduzir como folhas de estilo em cascata. Na prática o CSS pode ser considerado um complemento para o HTML, pois organiza melhor as linhas e adiciona novas possibilidades ao código. Com essa linguagem você pode mudar praticamente todo o visual de um site, por isso é fundamental conhecê-la.

JavaScript (jQuery)

Quando ingressar no universo do desenvolvimento web você vai ouvir muito falar em Java e JavaScript. Mas é importante saber que elas não são a mesma coisa. O JavaScript também pode ser considerado um complemento ao HTML e ao CSS, pois é uma linguagem responsável por algumas funções e comportamentos que tornam os sites mais dinâmicos. Já o jQuery é uma biblioteca que ajuda a sintetizar o código, reduzindo suas linhas e mantendo a mesma função.

Bootstrap

O Bootstrap é um framework muito popular, voltado para a criação de sites responsivos. Seus recursos são muito usados por programadores front-end, pois a ferramenta oferece componentes e recursos que simplificam e tornam mais ágil o desenvolvimento web. É importante destacar que o Bootstrap é gratuito, oferece modelos e estilos editáveis que facilitam a criação de layouts responsivos.

Tudo o que apresentamos até aqui é só o básico para você se tornar um programador front-end. Além destes conhecimentos também é fundamental ter noções de design, isso vai simplificar a distribuição do conteúdo.

Também é importante ressaltar que o programador front-end pode assumir um papel intermediário entre o cliente o back-end. Por isso é importante usar a empatia e procurar entender ambas as partes, juntos vocês poderão encontrar alternativas para solucionar eventuais contratempos.

 

Front-end e Back-end, entenda a diferença

Front-End

Programadores front-end têm a preocupação em desenvolver soluções focadas no uso do cliente, ou seja, na criação de telas que serão usadas pelos usuários.

É muito comum que esse tipo de profissional desenvolva aplicações focadas em usabilidade, design e interação para que seja feito um trabalho estético que entregue modernidade e facilidade a quem usa o sistema.

Geralmente, as linguagens de programação mais comuns usadas por esses profissionais são HTML (linguagem de marcação), CSS (linguagem focada em criação de estilo) e JavaScript (responsável pela criação de interações, animações, uso de lógica, etc).

Ter o domínio dessas três linguagens é fundamental para um bom trabalho como desenvolvedor web, pois se trata do básico da estrutura web.

Back-End

Enquanto o front-end se preocupa com a criação de aplicações visuais, o back-end é responsável pela interação com bancos de dadosregistro de informações e envio delas para que o front-end mostre os resultados.

É um trabalho mais voltado aos bastidores, mas não menos importante. Todo tipo de aplicação que necessita do registro de informações precisa de um profissional que tenha um conhecimento sobre essa área.

As linguagens de programação mais usadas são:

  • PHP
  • Node.Js
  • Ruby on Rails
  • C#
  • Java
  • Entre outras

O profissional de back-end tem que se preocupar principalmente com a segurança de um sistema, com a velocidade da entrega e processamento das informações, além da lógica feita de forma correta para que a aplicação consiga executar da melhor maneira possível.

Alguns sinais que você é um profissional que gostaria mais de trabalhar com back-end:

  1. Você gosta de criar estruturas lógicas
  2. Segurança é algo com que você se preocupa
  3. É do tipo de pessoa que gosta de Banco de Dados, inclusive SELECT * FROM é um dos comandos que você mais executa na frente do computador
  4. É do tipo de pessoa que gosta da interação entre os dados e a criação da estrutura do sistema

Também existem tecnologias que conseguem desenvolver ambas as partes (front-end e back-end).

Os melhores editores de código da atualidade

#1 Visual Studio Code

Ao contrário da plataforma Visual Studio, o Visual Studio Code é simplesmente um editor de texto que oferece um conjunto vasto de funcionalidades.

Este editor é multi-plataforma, gratuito e é direccionado para programadores que procuram um simples IDE, leve mas ao mesmo tempo completo.

Visual Studio Code


#2 – Notepad++

O Notepad++ é um poderosíssimo editor de texto que combina uma série de funcionalidades que facilitam o trabalho de qualquer pessoa que trabalhe com texto digital.

Este editor é bastante leve e reconhece a sintaxe de aproximadamente 40 linguagens de programação (C, C++, HTML, XML, ASP, JAVA, SQL, Perl, Python, HTML5, CSS entre outras).

Notepad++


#3 – Atom

O Atom, o popular editor de código do Github, é um dos preferidos dos programadores devido às funcionalidades que oferece.

Este editor permite que os programadores acedam à semântica de várias linguagens de programação, à integração com o Git e (claro) com o próprio Github, a temas completamente personalizáveis e o acesso a uma comunidade que está a desenvolver e a criar módulos e extensões para o Atom.

Atom


#4 – Komodo Edit

O Komodo Edit  é um excelente editor de texto open source que combina a rapidez, “inteligência” e  simplicidade de operação.

Este editor é multi-plataforma e suporta o reconhecimento de sintaxe de algumas linguagens de programação como são o caso do PHP, Python, Ruby, JavaScript, Perl, Tcl, XML, HTML 5, CSS 3.

Komodo Edit


#5 – Sublime Text

Sublime Text é um editor de texto e código-fonte multiplataforma, escrito em linguagem C++, que foi inicialmente pensado para ser uma extensão do vim. Este editor oferece recursos extraordinários e um desempenho simplesmente surpreendente.

Uma das características mais fantásticas deste editor é a função “multi-caret editing” que permite escrever a mesma coisa em diversos sítios

Sublime Text


#6 – Brackets

Considerado como o substituto do gedit (editor de texto com interface gráfica), o Brackets é um editor de texto código, muito versátil, leve e pode ser facilmente artilhado através das mais diversas extensões disponíveis.

Brackets


#7 – UltraEdit

Tal como o Sublime Text, o UltraEdit é também um editor muito completo em termos de funcionalidades. Este editor pode ser facilmente personalizado e até podemos configurar ligações FTP, SSH, Telnet para trabalhar em código que está do lado do servidor.

UtraEdit


#8 – Light Table

Light Table é considerado um editor de texto altamente moderno e inovador. Este editor pode ser facilmente personalizado, podemos embeber gráficos e ver em tempo real o resultado de um determinado código. Vale a pena experimentar.

Light Table


#9 – BlueFish

Bluefish é um poderoso editor de texto, recomendado para programadores e webdesigners. Com muitas opções disponíveis, permite desenvolvimento em HTML, XHTML, CSS, XML, XML, PHP, C, Javascript, Java, SQL, Perl, JSP, Python, entre outros.

O Bluefish foi criado por Chris Mazuc e Olivier Sessink em 1997, com o objectivo de facilitar o desenvolvimento web a profissionais que tivessem como sistema operativo o Linux.

BlueFish


#10 – Emacs

O GNU Emacs é um editor de texto extremamente extensível e personalizável. É considerado o “canivete suiço” de escritores, programadores e analistas. Foi desenvolvido originalmente em 1976 no MIT pelo activista do software livre Richard Stallman. A versão actual, o GNU Emacs, foi escrita em 1984 e ainda continua a ser ativamente desenvolvida.

O Emacs é muita das vezes designado de “um sistema dentro de outro sistema”.

Emacs

No segmento dos editores de texto existem várias opções disponíveis e fiáveis. Estes são dez dos mais populares e também dos mais funcionais para quem trabalha com código.