Arquivo da tag: Sites

Sites usando HTML5 e CSS3

Fonte: James Leme/cssextremo

O uso do HTML5, em combinação com CSS3, está realmente começando a decolar. Safari, Chrome e Mozilla estão dando mais suporte a cada nova versão de seus navegadores.

A melhor maneira de aprender novas técnicas é tentando. Atualmente você já pode começar a usar HTML5 apenas mudando o tipo de documento.

<! DOCTYPE HTML>

Ele vai validar com o seu código atual, mesmo se você estiver usando XHTML ou HTML.

Para você se inspirar e começar a usar HTML5 e CSS3, listei alguns dos melhores sites usando essas tecnologias.

Edgar Leijs

Vaullt

Ella Design

Qual a diferença do wordpress.org em relação ao wordpress.com?

Fonte: Gustavo D. Castro/CriarNet

Para que ainda não sabe WordPress é uma poderosa plataforma inicialmente utilizada apenas para montar blogs que se desenvolveu tanto que atualmente é utilizada para desenvolver qualquer tipo de sites. É comum vermos na internet citações dos sites: wordpress.com e wordpress.org, você pode até imaginar que se trata apenas de extensões de domínios diferentes, mas não é, são sites diferentes com uma enorme diferença entre um e outro.

Nesse post explicarei detalhadamente sobre qual é a diferença entre o wordpress.org e o wordpress.com para acabar de uma vez por todas com as dúvidas.

O que é wordpress.org

O site wordpress.org é o primeiro e principal site do grupo que desenvolve o famoso cms wordpress, é nele que encontramos o pacote de instalação do blog para que possamos fazer o download e instalar em nosso próprio servidor de hospedagem, nele também encontramos uma série de templates, plugins além de um fórum de suporte aos usuários do wordpress.

O que é o wordpress.com

O wordpress.com é um serviço grátis oferecido pela mesma organização responsável pelo wordpress.org porem bem semelhante a outros serviços como o blogspot, que permite ao usuário se cadastrar e rapidamente ter seu blog online porem de forma limitada, quem possui um blog na wordpress.com não pode editar o código fonte de seu blog, pode usar somente alguns plugins definidos pelo sistema, etc…

Porem não precisa se preocupar com questões mais técnicas como por exemplo, hospedagem, instalação, configuração etc… É ideal para quem não tem conhecimentos mínimos para realizar a instalação de um blog.

Para mim o WordPress.org só se tornou o que é hoje graças ao WordPress.com que acabou atraindo outras pessoas a usar o sistema que fez com que o wordpress ficasse conhecido mundialmente. O wordpress.com também trouxe novos rumos nos negocios da wordpress, já que no site é oferecido uma série de serviços, como por exemplo: auxilio a migração, para quem deseja migrar o blog do wordpress.com para o .org, taxa para usar domínio próprio, entre outros…

Princípios básicos para ser um blogueiro influente

Fonte: Jadson Barbosa/blogandocomfacilidade

Todos nos buscamos na web por informações, dicas e ajuda, enfim; estamos sempre vasculhando sites, blogs a fim de soluções para os problemas do dia-a-dia, buscando informações para poder estar atualizados sobre os fatos do cotidiano.

Nem sempre nos damos conta de que estamos sempre seguindo ou acompanhando um determinado site, jornal, autor ou blog varias vezes ao dia ou ao menos uma vez por dia.

Por que você visita este ou aquele site todos os dias? O artigo escrito é bom, a linguagem usada é agradável?

Estes são alguns dos pontos mais pensados e trabalhados por quem produz conteúdo, pensar no bem estar do leitor na maneira com que ele vai reagir ao seu trabalho é sim muito importante, pois se o leitor assim como você encontrar um artigo de fácil leitura e bem definido logo ele retornará em busca de mais conteúdo e divulgará entre seus amigos isso é fato! Portanto é sempre valido que você mantenha um padrão no processo de desenvolvimento do seu conteúdo.

Abaixo fiz um breve resumo de atitudes simples para que a produtividade em seu blog tenha um padrão de qualidade exclusivo.

Produção Conteúdo

Explore ao máximo as suas fontes de inspiração, trabalhe em cima da necessidade de seu leitor; e como fazer isso? Pergunte-o sobre o que ele gosta, abra enquetes conheça a opinião dele e foque na produção de conteúdo com base nessas informações. No artigo Ofereça ao seu publico o que ele deseja, você encontra algumas dicas de como focar nos temais que os leitores mais gostam em seu blog.

Periodicidade

Este é outro ponto fundamental para que os leitores acompanhe o processo de atualização do seu blog, mas vale salientar que não é só no blog que este padrão deve ser aplicado, mas sim em todas as redes sociais que seu blog estiver presente. Determine horários para publicar os artigos, para responder os comentários, e-mails entre outras atividades que são essenciais para garantir a qualidade do seu blog.

Originalidade

Mais um ponto fundamental que deve ser levado mais do que a sério, além de ter boas ideias, atitude e determinação você precisa criar para inovar a fim de destacar-se em meio a tantos outros que produzem para a web. Busque ser único, sagaz, pense sempre em sair na frente produzindo o seu conteúdo com originalidade.

Por que será que você assiste todos os dias aquela novela, jornal ou serie?

Porque os produtores pensam em você, em sua opinião; e buscam traçar metas para poder fazer daquele um programa relevante, e é exatamente desse jeito no mundo dos blogs, pare de pensar em ganhar dinheiro com seu blog, você precisa e para e pensar no que as pessoas que acompanham seu trabalho estão pensando sobre o seu blog.

Você analisa o comportamento dos seus leitores?

Já analisou o seu comportamento perante a sua produtividade, conte-nos o que você determina como fundamental para alcançar as metas determinadas para seu blog.

Como adicionar Propagandas em um Site no Wix

Fonte: Celso Lemes/CriarSites

Está criando um site no Wix e gostaria de ganhar dinheiro com ele? Pois saiba que é possível adicionar propagandas fornecidas por programas de afiliados como é o caso do Google Adsense, Mercado Sócios ou Cursos 24 Horas.

Mas o que é o Wix

O Wix é um serviço que oferece um construtor de sites grátis baseados em Flash, que permite criar um site com aparência profissional, cheio de cores e animações. A administração do site é feita através de um painel de controle online, onde é possível configurar a aparência, editar e adicionar páginas, adicionar textos, imagens e vídeos e etc.

Como adicionar propagandas

Para adicionar qualquer tipo de código HTML ou Javascritp que são utilizados para exibir as propagandas, você deve adicionar um Widget HTML na página. Repare que os passos descritos aqui também podem ser utilizados para adicionar contadores de visitas, botões de redes sociais, chats e etc.

Para fazer isso, posicione o ponteiro do mouse no botão “Adicionar“, em “Widgets” e em “HTML” como mostra a imagem abaixo.

Na nova janela que se abre, clique sobre o botão “Blank HTML“.

Um novo campo HTML será adicionado a página, você deve arrastá-lo até o local em que deseja que a propaganda ou seja lá o que você pretende adicionar a página. Depois clique no link “Configurações” que aparece no menu de navegação do lado direito da página.

Agora é só colar o código do banner no campo “Inserir código HTML“, configurar o tamanho que o widget deverá ter (de acordo com o tamanho do banner) e salvar.

Pronto, seu banner já estará inserido na página. Agora basta publicar as alterações para que os visitantes o vejam.

Ainda não tem um site em Flash no Wix? Clique aqui e crie o seu ou saiba mais lendo o artigo “Crie um site profissional em Flash no Wix“.

Vantagens e Desvantagens de criar um site totalmente grátis

Este é um guest post escrito por Felipe Silva, autor do blog Quero Criar um Blog, onde escreve sobre tudo o que envolve a criação e monetização de blogs.

Fonte: CriarSites

Criar um site totalmente gratuito pode ser uma vantagem para muitos internautas, pois não será necessário nenhum tipo de investimento e nenhuma dificuldade na criação do site, já que a maioria dos serviços e ferramentas disponíveis são simples e fáceis de manusear, não exigindo conhecimentos em linguagens. São diversos serviços e ferramentas, os quais você pode conhecer aqui no Criar Sites.

Essas são algumas vantagens, de muitas outras de criar um site totalmente gratuito, mas, como qualquer outro serviço, tanto na web, quanto fora dela, tem suas desvantagens, as quais podem ser prejudiciais. Neste artigo, apresento as vantagens e desvantagens de criar um site totalmente gratuito.

Vantagens

Grátis: umas das vantagens dos serviços e ferramentas é por serem gratuitos, disponíveis para qualquer tipo de usuários, principalmente aqueles que desejam criar um site e não possuem dinheiro para comprar programas avançados e/ou contratar um profissional da área.

Simplicidade e qualidade: alguns serviços são excelentes, o que nos permite criar um site de muita qualidade, mesmo sendo gratuitos. São simples, o que não complica na hora de mexer em temas, páginas, conteúdo e muitos outros.

Dominios e hospedagens grátis: Muitos dos serviços são online, o que não necessita de hospedagens. Com isso, os dominios costumam ser gratuitos, o que é outra vantagem para quem deseja criar um site totalmente gratuito.

Desvantagens

Limitado: por ser gratuito, os serviços são limitados, não tendo todos os recursos possíveis e que são oferecidos em versões pagas. Essa é uma das desvantagem de quem gostaria de ter um site completo, sem ter a necessidade de gastar nenhum dinheiro. Alguns serviços oferecem recursos incríveis, em versões gratuitos. Caso do Webnode.com.br.

Erros constantes: utilizando um serviço gratuito você corre um grande risco de o mesmo parar de funcionar. As vezes, as empresas não dedicam o tanto que dedicam aos planos pagos, então qualquer problema que ocorrer, quem sofre é seu site.

Domínios padrões: ao utilizar um serviço como o Webnode, que citei acima, o domínio é padrão do serviço, como seusite.webnode.com.br. Isso pode ser complicado e prejudicial para o seu site, pois devido a alguns site que você utiliza, o visitante não vai conseguir lembrar ou decorar seu endereço, levando-o a deixar de visitar sua página.

Opinião Felipe Santos

Existem diversas vantagens e desvantagens em criar um site totalmente gratuito. Cada um pode definir uma, mas essas citadas acimas são as principais. Criar um site totalmente gratuito pode ser bom para quem deseja começar mais devagar, quem é mais iniciante no assunto, entre outros. Se você deseja utilizar um serviço gratuito, devido a falta de conhecimento na área, mas com o desejo de ter um site bem sucedido, poderá optar por uma versão paga do serviço que irá utilizar. É bom sim, criar sites gratuitos através destes programas, mas não é uma coisa boa para quem deseja algo mais, com o mesmo.

A&R Consultoria e Engenharia – Site

RECURSOS TÉCNICOS

  1. Sistema de gerenciamento – Permite ao usuário administrar de forma fácil e integrada o WEB Site e suas funcionalidades. Todos os recursos descritos neste documento são acessados/gerenciados através deste sistema.
  2. Estatísticas – Índice de visitas por período, índice de visualizações de cada página, tempo de permanência no site, índice de novas visitas, origem geográfica da visita, palavras-chave, páginas mais visitadas, entre muitas outras.
  3. Gerência de comentários – Permite gerenciar os comentários dos visitantes. Os comentários serão exibidos mediante aprovação feita através deste módulo.
  4. Anti-spam – Barra automaticamente comentários com características de spam;
  5. Otimização para ferramenta de buscas (SEO) – Desenvolvimento do site de forma a este ser indexado e encontrado de forma mais fácil pelas ferramentas de busca (Google);
  6. Em português – Todas as ferramentas oferecidas estarão em português;
  7. Funcional em todos os navegadores modernos;
  8. Suporte e treinamento no uso das ferramentas oferecidas;
  9. Formulário de contato;
  10. Email – Até 10 contas de email, cada uma com 7Gb de espaço, com endereço @ nomedaempresa.com.br. Até 20 redirecionadores com endereço @nomedaempresa.com.br.
  11. Cadastro no Google Maps – Visa melhorar a visibilidade da empresa e de seu site.

RECURSOS FUNCIONAIS:

  1. Publicação de conteúdo de forma fácil e rápida;
  2. Cada membro da equipe tem uma página no site da empresa, onde serão divulgados os respectivos currículos.
  3. As publicações tem botões para o visitante facilmente recomendar as mesmas, seja por email, orkut, facebook ou twiiter;
  4. Comentário moderados nas publicações.
  5. Área para os membros da equipe publicarem conteúdos específicos dos seus ramos de atividades, objetivando atrair visitas e aumentar o ranking do site nas ferramentas de pesquisa (Google).

Diferenciais da Empresa:

  1. Qualificação da Equipe;
  2. Especialização dos serviços prestados;

Linha criativa:

  1. Clean;
  2. Moderna;
  3. Destaque para a equipe;
  4. Destaque para os serviços prestados;

Portfolio image slider com CSS e JQuery

Comentário SWX: Na medida do possível, tentamos melhorar a tradução padrão “google translator”

Depois do lançamento do IPAD e sua falta de suporte para flash, que despertou uma série de debates sobre o futuro do flash. Com isto em mente, eu acredito que é prudente criar widgets simples como o controle deslizante de imagem usando HTML / CSS / Javascript, e deixar aplicações mais interativas para o flash, se necessário.

HTML

Comece com um div chamado main_view,  e duas seções aninhada chamadas image_reel e paging . O image_reel irá conter as imagens deslizantes e paging contém os controles de paginação. Dê uma olhada na imagem abaixo.

<div class="main_view">
 <div class="window">
 <div class="image_reel">
 <a href="#"><img src="reel_1.jpg" alt="" /></a>
 <a href="#"><img src="reel_2.jpg" alt="" /></a>
 <a href="#"><img src="reel_3.jpg" alt="" /></a>
 <a href="#"><img src="reel_4.jpg" alt="" /></a>
 </div>
 </div>
 <div class="paging">
 <a href="#" rel="1">1</a>
 <a href="#" rel="2">2</a>
 <a href="#" rel="3">3</a>
 <a href="#" rel="4">4</a>
 </div>
 </div>

CSS

Dê uma olhada nos comentários abaixo para uma explicação dos estilos.

/*-- Container Principal --*/
 .main_view {
 float: left;
 position: relative;
 }
 /*--Janela / Masking Estilos--*/
 .window {
 height:286px;	width: 790px;
 overflow: hidden; /*--Hides anything outside of the set width/height--*/
 position: relative;
 }
 .image_reel {
 position: absolute;
 top: 0; left: 0;
 }
 .image_reel img {float: left;}

 /*--Paginação de Estilos--*/
 .paging {
 position: absolute;
 bottom: 40px; right: -7px;
 width: 178px; height:47px;
 z-index: 100; / *-- Garante a paginação fica na camada superior - * /
 text-align: center;
 line-height: 40px;
 background: url(paging_bg2.png) no-repeat;
 display: none; / *-- escondido por padrão, será mostrado mais tarde com jQuery - * /
 }
 .paging a {
 padding: 5px;
 text-decoration: none;
 color: #fff;
 }
 .paging a.active {
 font-weight: bold;
 background: #920000;
 border: 1px solid #610000;
 -moz-border-radius: 3px;
 -khtml-border-radius: 3px;
 -webkit-border-radius: 3px;
 }
 .paging a:hover {font-weight: bold;}

Etapa 3.  jQuery

Para aqueles que não estão familiarizados com jQuery , fazer check-out o seu primeiro site e obter uma visão geral de como ele funciona. Eu compartilhei um alguns truques que eu acumulei ao longo do caminho, você pode verificar os para fora também.

Etapa inicial – Chame o arquivo jQuery

Você pode optar por baixar o arquivo do site do jQuery, ou você pode usar o que está hospedado no Google.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

Logo após a linha onde você linkou o seu jQuery, iniciar uma nova tag < script > com o evento $(document).ready. Isso faz seu código jQuery ser executado somente após o DOM estar pronto para ser manipulado. Todo o código que você vai escrever no próximos passos estará aqui dentro.

$(document).ready(function() {
       //Code goes here
 });

Etapa 4. Trazendo-a para a vida – jQuery

O script a seguir contém comentários explicando que ações JQuery estão sendo realizadas.

Configurando a imagem do Slide

Comece mostrando a paginação e ativando o primeiro link. Então vamos calcular e ajustar a largura do image_reel de acordo com quantos slides existem.

//Paginação e Função Slider
 rotate = function(){
 var triggerID = $active.attr("rel") - 1; //Obtém o número de vezes para deslizar
 var image_reelPosition = triggerID * imageWidth; Determina a distância que a image reel precisa de slides
  
 $(".paging a").removeClass('active'); //Remove a classe CSS active de todos os links de paginação
 $active.addClass('active'); //Adicionar classe ativa ($active é declarado na função rotateSwith)
  
 //Slider Animação
 $(".image_reel").animate({
 left: -image_reelPosition
 }, 500 );
  
 };
  
 //Rotação e Tempo de eventos
 rotateSwitch = function(){
    play = setInterval(function(){ //temporizador - isso vai se repetir a cada 7 segundos
    $active = $('.paging a.active').next(); //Mover para proxima paginação
    if ( $active.length === 0) { //Se a paginação acabar...
      $active = $('.paging a:first'); //voltar para a primeira.
    }
    rotate(); //Dispara o paging e função deslizante;
    }, 7000); //velocidade Timer em milissegundos (7 segundos)
 };
  
 rotateSwitch(); //lançamento

Clique Hover e Eventos

No caso de o usuário desejar exibir o slide por um longo período de tempo, permitirá o controle deslizante parar. Outra coisa a considerar é que devemos zerar o cronômetro a cada vez que a paginação for clicada. Isto irá prevenir mudanças inesperado e permitir uma experiência mais suave.

//On Hover
 $(".image_reel a").hover(
     function() { clearInterval(play); //Stop the rotation }, 
     function() { rotateSwitch(); //Resume rotation timer  }
  );  
 //On Click
 $(".paging a").click(
     function() { $active = $(this); //Activate the clicked paging
                 //Reset Timer
                 clearInterval(play); //Stop the rotation
                 rotate(); //Trigger rotation immediately
                 rotateSwitch(); // Resume rotation timer
                 return false; //Prevent browser jump to link anchor
                }
 );

Fonte: Thauan Braga/OficinadaNet