Desenvolvimento web

Desenvolvimento de site por R$150,00/Mês

Desenvolvimento Web responsivo com Melhor Custo-beneficio

Planos de desenvolvimento web com hospedagem Gratís
Arquivo de internet | LCF HOST

Tag: internet


Os melhores bancos de imagens (stock images) grátis

Lista com os melhores bancos de imagens grátis (free stock images) em uma compilação sensacional para usar imagens em qualquer projeto web.

Todos nós já fizemos uma busca por imagens no Google. Mas em função do acordo antipirataria antipirataria com a Getty Imagesa empresa decidiu remover o botão “Ver imagem”. Também pensamos que fosse algum topo de brincadeira de mal gosto, mas é a sério mesmo! Se você fizer uma busca por imagens neste exato momento, já vai notar a falta do amado botãozinho…

A opção de arrastar uma imagem para a barra de busca (“busca reversa”) continua lá — e para os que não descuidaram dos mistérios profundos do clique com o botão direito do mouse, o impacto pode não ser assim tão grande –, mas o grande público, com a ausência da opção, certamente vai começar a visitar muito mais sites do que fazia antes, se é que vocês me entendem.

Fazendo do limão que a Google nos deu uma deliciosa limonada, segue lista dos melhores sites para conseguir imagens grátis para serem usadas — as famosas stock photos. Isso mesmo: os melhores bancos de imagens grátis que podem ser usadas à vontade, imagens sem direitos autorais. E estamos falando de boas imagens, de alta resolução, para serem usadas em qualquer projeto web!

Pexels

Sem dúvida alguma, Pexels é um dos melhores serviços de banco de imagens de graça que existem atualmente. Grande parte das imagens “hero” aqui do desenvolvimento para web são de lá. Dê uma passeada pelos posts para ter uma amostra da qualidade das imagens que o site oferece.

Para virar fã de vez, todas as imagens estão sob a licença Creative Commons Zero (CC0), que, na prática, significa que são de domínio público e é permitido usá-las à vontade, para qualquer fim, com ou sem edição, inclusive comercialmente.

O objetivo do Pexels é oferecer “high quality and completely free stock photos“, quer dizer, fotos de alta qualidade e completamente grátis. Até o momento, estão conseguindo. Com louvor.

Foter

Uma outra excelente opção quando o assunto é banco de imagens gratis é o Foter. Ao oferecer “Premium Royalty-Free Stock Photos“, ele também é uma alternativa de peso que deve ser sempre altamente considerado ao se procurar boas imagens.

Mas qual é o segredo para ser um stock de imagens com mais de 220 milhões de opções? Eles usam a API do Flickr para buscar fotos licenciadas sob Creative Commons!

Fazer uma busca por algum termo do interesse/necessidade ou navegando pelas categorias do Foter, rapidamente você vai comprovar que ele também é uma das melhores opções de banco de imagens disponíveis atualmente.

Pixabay

A primeira coisa que pode ser lida ao entrar no Pixabay é: Imagens gratuitas de alta qualidade. Mas talvez você encontre algo a mais: vídeos! Para entender melhor, não é preciso mais do que as própria explicação que consta no site:

Imagens e vídeos gratuitos que você pode usar em qualquer lugar: Pixabay é uma vibrante comunidade de criativos, compartilhando imagens e vídeos livres de direitos autorais. Todos os conteúdos são lançados no Creative Commons CC0, o que os torna seguros de usar sem pedir permissão ou dar crédito ao artista — mesmo para fins comerciais.

Com quase 1,5 milhão de opções (e crescendo), talvez você se arrependa de não consultar o Pixabay quando estiver procurando por imagens.

Unsplash

Há 3 regras do Unplash que você deve saber:

  1. As imagens são grátis para uso pessoal e comercial;
  2. Nenhuma atribuição é necessária e;
  3. Novas fotos são adicionadas diariamente.

A empresa canadense oferece incontáveis opções de imagens para serem usadas à vontade que podem ser encontradas através de busca, categorias ou coleções próprias, organizadas e disponibilizadas também de maneira gratuita.

Acesse e navegue um pouquinho pela Unsplash para comprovar a qualidade. Realmente não fica devendo nada para qualquer outro serviço de stock image similar.

Visual Hunt

Se você entra em um stock de imagens e quer opções, qual é o número de opções de imagens disponíveis bom o suficiente? Se a resposta é algo em torno de 350 milhões de fotos grátis, então certamente este é o momento de conhecer o Visual Hunt.

High quality free photos in one place“. Esse é o lema do Visual Hunt. Para tanto, eles são uma espécie de agregado de vários stocks de imagens, coletando diversas fotos pela web à fora e as juntando em um só lugar — também usando aquela ajudinha marota da API Flickr.

A maioria das imagens têm licença CC0, são divididas por categorias e tags e a busca é bastante eficiente. Ah, e eles deixam fazer o embed diretamente do site!

StockSnap

Sendo um auto-denominado serviço de curadoria de imagens, a frase que o pessoal da StockSanap gosta de divulgar é: “StockSnap is the best place on the internet to find beautiful free stock photos”, ou, em outras palavras, o melhor banco de imagens grátis da internet. Para saber se é verdade ou não que seja “o melhor”, você mesmo vai ter que entrar para conferir.

Todas as imagens — que podem ser encontradas pela busca, categorias ou uma seção especial de “tendências” — também estão sob Creative Commons Zero. Use sem pudores!

Contribua com os bancos de imagens grátis

Certamente a lista de sites de stock photos apresentados no artigo não pretende ser uma completamente abrangente. Existem literalmente milhares de sites que disponibilizam bancos de imagens e seria uma maluquice querer colocar todos em uma só listagem.

Mas estes são excelentes sites, de renome e reconhecimento mundiais. E sabe como chegaram a este status? A maioria deles permite a contribuição de qualquer um que julgue que suas imagens sem realmente de qualidade e devam ser compartilhadas sem limites com o mundo.

Se você gosta de dar uns cliques e gostaria de ajudar com estes fabulosos serviços de banco de imagens, veja quais desses lhe agradam mais, faça seu login e comece a fazer do mundo das imagens grátis um lugar ainda melhor!


10 dicas que desenvolvedores web iniciantes devem saber

Conheça 10 dicas que desenvolvedores web iniciantes devem saber para começar e/ou continuar suas carreiras

Se você é um desenvolvedor iniciante, pode ser confuso sobre onde você deve começar no mundo do desenvolvimento web, já que o ramo é amplo e oferece muitas opções de escolha. Há muitas perguntas a serem feitas, tais como “Que linguagem de programação quero aprender?” ou “Eu deveria saber sobre front-end ou apenas back-end?”, e existem, literalmente, centenas de outras.

Mas, para que você não fique tão perdido, esta lista com 10 dicas que desenvolvedores web iniciantes devem saber realmente pode ajudá-lo a iniciar sua carreira como desenvolvedor ou, caso já tenha começado, servir de norte para a continuação dos caminhos a serem trilhados.

Decida quais habilidades você quer

Ao iniciar na carreira de desenvolvedor web, você realmente precisa se concentrar em alguma coisa e aceitar o fato de que não é possível ser um “generalista” — ou, como a garotada hoje em dia prefere chamar, um desenvolvedor full stack.

Acredite: mesmo dando muita vontade de atuar em vários e vários ramos do desenvolvimento web, isso é impossível para quem está começando. Afinal, é preciso saber atuar em várias frentes para ser um “full stack” e, quando se está começando, mal se tem o conhecimento para uma só. Faz sentido, certo?

Não há nada de errado em querer em ser excelente em vários campos, mas você realmente não poderá fazer isso no começo. O que você pode fazer é centrar seus esforços no aprendizado em uma habilidade e se tornar um perito nesse campo.

Pode ser PHP, Ruby, C#, etc., mas tem que ser bom no que faz. Depois de dominar um deles, você pode seguir em frente, mas não faça isso até que você tenha grande conhecimento nesse campo.

Não há nada de errado em querer em ser excelente em vários campos, mas você realmente não poderá fazer isso no começo.

Esta dica também é bom para front-end designers, que sempre começam com HTML e CSS, depois passam para JavaScript, muito comumente se especializando em frameworks, Node, ou quaisquer outros que estiverem interessados.

Claro, é possível aprender HTML e CSS ao mesmo tempo, mas isso é porque eles meio que trabalham em conjunto. Você não pode realmente dominar PHP e Ruby ao mesmo tempo — a menos que você gaste 20 horas de estudos por dia, o que, definitivamente, não é recomendado –, portanto, para quem possui QI abaixo de 130, o recomendado é adquirir as habilidades uma a uma.

Mas, já que você é um novato e, provavelmente, não deve saber muito sobre linguagens de programação hardcore, escolher uma área para começar pode ser complicado, mas há uma solução: pense no que você quiser desenvolver: se for temas para WordPress, então seu caminho é o PHP; se for sistemas de gestão personalizados, tente ASP.NET; jogos de iPhone, aprender Swift e assim por diante.

Aprenda direito

Outra dica para novatos é, independentemente da linguagem que você escolher, aprenda direito! Se você aprender HTML codificando layouts com tabelas, isso não é nada certo. Codificar usando os mais recentes padrões da web parece inútil para alguns, mas é realmente importante e é altamente recomendado a aprender assim, já que será mais fácil e fará mais sentido ante o cenário atual de desenvolvimento web.

Além do mais, inevitavelmente a situação de ter que pegar o código de alguém para compreender e/ou passar seu próprio código para ser compreendido acontecerá; quanto mais ambos estiverem alinhados com técnicas modernas de desenvolvimento, melhor será para todos.

Google é o seu melhor amigo

Realmente não importa que tipo de problema (relacionado a webdev) apareça, certamente o Google pode mostrar a direção certa para resolvê-lo.

Fóruns de programação são altamente recomendados também, mas, antes de postar uma pergunta em algum fórum, tente buscar uma solução no Google porque, na maioria das vezes, você vai encontrar uma resposta para sua pergunta — ou, pelo menos, uma resposta que irá guiá-lo para resolver a questão.

Analise o código alheio

Pegando o exemplo da área de front-end, às vezes, desenvolvedores têm conhecimentos de design de front-end e fazem seus próprios layouts antes de começar a codificá-los. É importante olhar outros sites para entender como eles são codificados. Se você gosta de algum estilo ou elemento de um site, olhe para o código fonte e o analise!

Atualmente, é praticamente considerado uma insanidade trabalhar com front-end sem usar a DevTools do Chrome. Antes de ela servir para ajudar no trabalho do dia-a-dia, certamente pode servir para ajudar a entender códigos de terceiros.

Entre numa rede de conhecimentos

Outra coisa importante é participar de uma rede dentro de seu campo de conhecimento. Nunca é demais conhecer outros desenvolvedores/designers. É muito interessante (e até gratificante) ter discussões sadias e trocas de informações/ajuda com pessoas da mesma área. Você pode até colaborar com seu colegas desenvolvedores em projetos maiores, já pensou?

Você está perto de conseguir um projeto mas não tem certeza se você pode lidar com o tipo de trabalho solicitado? Recomende um de seus colegas desenvolvedores! Ele(s) provavelmente irá(ão) executar o trabalho melhor do que você — se for(em) especialista(s) nessa área específica — e você pode fechar algum tipo de parceria em algum momento futuro.

Faça parte de uma rede e a mantenha ativa e sempre por perto. Há sempre a demanda por um desenvolvedor que esteja “ao redor”. Há um discussão interessante no GitHub sobre como encontrar projetos open source para colaborar que certamente vai ajudar bastante.

Entenda os designers

É altamente recomendado compreender designers, caso não tem ideia de como eles trabalham. E isso vale tanto para designers gráficos quanto para front-end designers.

É sempre bom para aprender como eles trabalham e porque eles podem entregar páginas estáticas que realmente não correspondem aos mais recentes padrões da web. Aprenda a conversar com eles e explicar o que está errado e saber pedir para corrigir seus próprios erros. Dessa forma, sua relação de trabalho será mais próxima e o resultado bem melhor.

Não se surpreenda, mas é até indicado que desenvolvedores devem participar do processo de design!

Use ferramentas profissionais

Apesar de HTML, CSS e JavaScript poderem ser feitos até com o Bloco de Notas, isso não é recomendado. E, se isso não é recomendado para front, é igualmente desaconselhado para back. Trabalhe com editores/IDEs profissionais/robustos. Use o que os profissionais usam, caso contrário você não será um deles!

Esse tipo de ferramenta verifica erros, tem autocomplete e dá sugestões durante a codificação. Há uma razão pela qual PhpStorm, VSCode, Neovim, Eclipse, NetBeans e outros são muito usados em todo o mundo: eles ajudam a fazer o trabalho e o fazem em grande estilo!

Deixe as coisas legais por último

Cada linguagem tem a sua própria “versão cool”. Por exemplo, HTML tem HTML5, CSS tem CSS3, JavaScript e AJAX tem jQuery/Zepto e assim por diante. É muito melhor se você aprender a linguagem básica e depois estudar mais até chegar no estágio cool.

Também, as coisas “cool” trabalham a partir dos elementos básicos, então você não será capaz de desenvolver e entender um controle deslizante com jQuery se você não compreender o JavaScript básico.

Mantenha-se informado e atualizado

É sempre bom se manter informado e atualizado sobre o que está acontecendo no mundo do desenvolvimento web, em especial da(s) área(s) que você atua. Você pode fazer isso através da leitura de feeds, livros “de verdade”, blogs, fóruns e screencasts. Fique atualizado e certifique-se de que você é um dos primeiros a oferecer produtos desenvolvidos com a tecnologia mais recente.

No começo, pode não funcionar muito (as pessoas podem querer manter o “velho” até que as novas tecnologias mostrem seu valor), mas, certamente, também há aquelas pessoas que querem ter um produto totalmente novo, desenvolvido com as mais recentes tecnologias — e isto lhe dará uma vantagem e fará você conhecido no ramo.

Não é surpresa para ninguém do ramo que os melhores e mais recentes conteúdos e tutoriais estão em inglês. Então comece a puxar da memória todas aquelas aulas sobre o verbo “to be” ou fixe uma aba do Google Tradutor no seu navegador, porque você vai precisar.

Continue com o processo de aprendizagem

Depois de se tornar um especialista no campo que escolheu, trilhe seu caminho rumo ao aprendizado de outras linguagens e/ou áreas de atuação. Fique de olho aberto nas linguagens mais importantes e aprenda aquelas que julgar serem as mais interessantes. Quando você domina duas, vá para a terceira e assim por diante.

E continue até que não haja muito mais para aprender dentro do que você escolheu. Acredite, compartimentar os estudos para não ficar sobrecarregado é o caminho.

Conclusão

É bastante comum que desenvolvedores iniciantes passem por tempos difíceis neste campo profundo do desenvolvimento web, mas estas dicas servem justamente para ajudar que cada um encontre seu caminho.

Nem sequer importa muito por onde começar, tudo o que importa é começar! Isso geralmente é o que leva mais tempo, então não desperdice estes dias preciosos e comece agora a estudar e a desenvolver a web!

Para ajudar, veste este (não tão recente, mas até que útil) vídeo sobre uma técnica de estudos que pode ajudar a não perder a sanidade ante tudo isso que queremos aprender sobre tecnologia:


URLs amigáveis (slug) à WordPress

Apenda a gerar URLs amigáveis como é feito no WordPress e implemente em seu sistema PHP

desenvolvimento web em WordPress é excelente! O CMS já vem com diversas funções e funcionalidades para facilitar a vida de desenvolvedores e, até mesmo, de pessoas que não tem o mínimo conhecimento em programação (um dos objetivos é esse, mesmo).

Mas muitos desenvolvedores, principalmente os ainda incipientes, esquecem que o WordPress nada mais é do que PHP! Claro, o WP é nada mais, nada menos, que um sistema feito em PHP, como você e eu poderíamos ter feito. Mas, por motivos que me fogem ao conhecimento, as pessoas esquecem isso… Talvez o nível de abstração em programação que o CMS proporcione seja o “culpado”, mas, sinceramente, não tenho certeza.

Então, se você tiver a curiosidade de vasculhar os arquivos PHP que fazem do WordPress o que ele é, vai ter uma grata surpresa e encontrar uma rica fonte de scripts, funções e funcionalidades que você sempre quis implementar e não sabia como!

URLs amigáves à WordPress

Por exemplo, muitos querem implementar uma estrutura de URLs amigáves (gerar os famosos “slugs”) em sistemas desenvolvidos do zero  – seja através de frameworks ou em PHPU (“PHP Unha”) -, mas não sabem como. Ora, se sabemos que o WordPress possui um ótimo sistema de geração de slugs e temos acesso a seu código-fonte, tudo o que é preciso é vasculhar o código-fonte e encontrar as funções certas.

Seguindo o exemplo de gerar slugs, procurando um pouco, é possível saber que as funções necessárias se encontram em /wp-includes/formatting.php. E, como era de se esperar, as funções estão devidamente documentadas com seu escopo, parâmetros e retorno. Precisa de mais?

Para gerar URLs amigáveis à WordPress, são necessárias 4 funções. 3 “preliminares” que são:

E, com essas funções devidamente estabelecidas, a função que gera os slugs, propriamente dita:

Então, para gerar um slug em seu próprio sistema depois de implementar as funções mostradas, basta escrever:

Achou o nome da função grande ou feio? Você tem o código, altere como bem entender!

Considerações finais

O WordPress é software livre (registrado sob a licença GPL), então você pode pegar essas 4 funções e implementar em seu site/sistema/softwares sem o medo de receber uma cartinha do advogado da equipe WordPress amanhã ou depois.

Fica uma pergunta: você tem um software livre à disposição e fica quebrando a cabeça em busca de soluções de código que já existem e estão implementadas nele? Vasculhe todo o código fonte (veja alguns recursos que ajudam no artigo sobre ferramentas e recursos para desenvolvimento web) e procure por aquilo que vai lhe ser útil!

Não seja tímido! 😉


HTTP 503: a maneira correta para SEO

Considerações a respeito do status code HTTP 503: o que significa, suas implicações de uso e como usar o HTTP 503 em períodos de manutenção de um site.

Você dá a devida importância aos códigos de status que são enviados nos cabeçalhos HTTPdas páginas de seu site? Saiba que enviar um cabeçalho de resposta HTTP com um código errado pode ser fatal… Principalmente quando alguma manutenção está sendo feita no site ou sistema. Neste artigo, breves considerações a este respeito e quais medidas tomar em relação ao status code 503 quando seu site entrar em manutenção.

Códigos de status HTTP e mecanismos de busca

Um mecanismo de busca constantemente verifica se o conteúdo que ele está indexando ainda existe e/ou não mudou. Geralmente, mecanismos de busca verificam 2 coisas:

  • Se o conteúdo está sendo “encabeçado” com o código HTTP 200;
  • Se o conteúdo ainda é o mesmo.

Um código 200 de HTTP significa: “Tudo está bem, aqui está o conteúdo que você pediu”. É o único status que indica que tudo está bem com o conteúdo. Se o conteúdo foi movido, você pode redirecioná-lo – permanentemente, com um HTTP 301 ou; temporariamente, com um HTTP 302 ou 307.

Se o servidor retorna qualquer outro código de status HTTP, significa que o mecanismo de busca já não pode encontrar o conteúdo. Se um servidor retorna um HTTP 200, mas a página é, de fato, um erro e diz algo como “Arquivo não encontrado” ou tem muito pouco conteúdo, o Google vai classificá-la como um “soft 404” no Google Webmaster Tools.

Como mecanismos de busca lidam com o tempo de inatividade do servidor (downtime)

Se, durante um rastreamento, um motor de busca encontra algum conteúdo que não existe mais, por exemplo, ele retorna um status code HTTP 404 que, geralmente, remove o conteúdo dos resultados de pesquisa até que o crawler possa voltar e verificar se ele está lá novamente. Se isso acontece, geralmente vai demorar um pouco para que o conteúdo volte a aparecer nos índices de busca novamente.

O que você deve fazer é garantir que um código de status HTTP 503 será retornado! Esta é a definição do código de status 503 da RFC (que define esses códigos de estado):

O servidor atualmente é incapaz de lidar com o pedido devido a uma sobrecarga temporária ou manutenção do servidor. A implicação é que esta é uma condição temporária que será aliviado após algum atraso. Se conhecido, o tempo de atraso PODE ser indicado em um cabeçalho Retry-After. Se nenhum Retry-After é fornecido, o cliente DEVE lidar com a resposta como seria para uma resposta 500.

Então, você tem que enviar um código de status 503 em combinação com um cabeçalho Retry-After. Basicamente, você está dizendo: “Espere! Estamos fazendo alguma manutenção, por favor, volte em X minutos”. Isso soa muito melhor do que um erro que diz: “Not Found”. Um código de status 404 literalmente significa que o servidor não pode encontrar qualquer recurso para retornar à URL acessada.

Como enviar um cabeçalho HTTP 503?

A maneira como se envia um código HTTP 503 como resposta a uma requisição depende da linguagem server-side que você está trabalhando. Por exemplo, em PHP, envia-se esse HTTP 503 assim:

O tempo de atraso do exemplo, 3600, é dado em segundos, de modo que 3600 segundos corresponde a 60 minutos (ou 1 hora). Você também pode especificar o tempo exato em que o visitante deve voltar enviando uma data em GMT ao invés do número em segundos. Algo como:

Quando preferir usar GMT, faça isso com muita cuidado e consciência! Especificar uma data errada pode causar resultados inesperadamente desastrosos!

“Meu site nunca está em manutenção, eu uso WordPress!”

Bobagem. Toda vez que você atualiza o core do WordPress ou quando você está atualizando plugins, o WP fornece uma página de manutenção. Essa página, por padrão, envia um cabeçalho HTTP 503 adequado.

Você pode substituir essa página de erro padrão com um arquivo maintenance.php na sua pasta wp-content, mas, se fizer isso, você tem que ter certeza de que o arquivo envia os cabeçalhos HTTP 503 apropriados! Na dúvida, você pode dar uma olhada no código da função wp_maintenance().

Se seu banco de dados caiu, o WordPress envia um erro interno do servidor usando a função dead_db(). Se você está fazendo uma manutenção planejada no banco de dados, é preciso criar uma página personalizada com uma mensagem de erro – usando o arquivo db-error.phpem ​​sua pasta wp-content, que envia o cabeçalho HTTP 503 adequado.

Cuidado com o cache!

Se você está trabalhando com algum tipo de sistema de cache, muito cuidado ao realizar essas mudanças! Tenha absoluta certeza de que o código HTTP 503 está sendo enviado corretamente durante o tempo em que a manutenção está sendo realizada.

Se não tomar cuidado, o código HTTP 500 (“Internal Server Error”, um erro genérico) pode ser enviado e, definitivamente, isso é algo que você não vai querer que aconteça.

HTTP 503 através do robots.txt

Segundo este post de Pierre Longe no Google+, se você enviar um código de status HTTP 503 para o arquivo robots.txt, o Google vai parar todo o rastreamento no domínio até que seja autorizado a rastrear o robots.txt novamente. Essa é uma forma muito útil de prevenir uma eventual sobrecarga no servidor ao fazer manutenções.

Usar essa técnica ainda exige que você envie um HTTP 503 para cada URL do site, incluindo as que apontam para recursos estáticos, mas, depois que o Google tiver acesso ao robots.txt novamente, provavelmente vai parar de martelar seu servidor por um tempo.

Conclusão: saiba que cabeçalhos HTTP você está enviando

Em suma, você deve ter ciência do que está acontecendo em seu site/sistema e saber, exatamente, quais códigos de status HTTP são enviados em quais situações e por quanto tempo.

tweet de Vanessa Fox reforça bem essa ideia:

It’s about more than number of pages crawled – you need to know about important pages & what response code they return @vanessafox

Quer dizer: É muito mais do que sobre o número de páginas indexadas – você precisa saber a respeito das páginas importantes e qual código de resposta elas retornam.

É a mais pura verdade!


Pixels, pixels ou pixels? Dicas de Web Mobile com viewport

Foi-se o tempo em que pixel significava apenas o menor ponto na tela. Bastava dizer que uma imagem tinha 200px, e então ela ocuparia 200 pontos, ou seja, 25% de uma tela de tamanho padrão 800×600.

Mas o mundo mobile mudou completamente o jogo e, hoje, o conceito de pixel pode significar várias coisas.

(Atualização: escrevi mais detalhadamente sobre esses aspectos dos pixels diferentes e viewport, incluindo telas retina, no meu livro A Web Mobile, publicado pela editora Casa do Código. Se você estuda design responsivo, sites mobile, e assuntos relacionados, vai gostar desse livro.)

Os primeiros Smartphones

Era muito comum que os smartphones da Nokia lá pelos idos de 2007 tivessem uma resolução de 240×320 pixels, como um N95.

Quando surgiu o primeiro iPhone, sem teclado e só touch, a Apple decidiu explorar um tamanho maior de tela, 320×480 pixels. Era o dobro dos pixels normalmente usados na época, com um tamanho físico mais ou menos também com o dobro do tamanho.

Esses valores representam o tamanho físico do aparelho, o número de pixels físicos existentes. Na prática, um iPhone conseguia exibir páginas com mais que 320 pixels de largura. O truque era trabalhar com a ideia de zoom.

Na imagem anterior, abrimos o site da Caelum, que tem 960px de largura, em um iPhone de 320px. Repare como, apesar de menor, o Site está sendo renderizado corretamente.

Mas nosso HTML e CSS não foi codificado pensando em 320px, e sim em 960px. Quando colocamos a imagem do logotipo, por exemplo, nosso HTML diz <img src=".." width="160" height="50">. E, obviamente, o logo não está sendo renderizado a 160px, senão ocuparia metade da tela de 320px do iPhone. Se você medir, verá que o logo está sendo renderizado em mais ou menos 52px, ou 1/6 da tela do iPhone.

CSS pixels e o layout viewport

Repare que usamos uma medida de pixels no HTML/CSS que difere do pixel real usado na tela. O navegador do iPhone, na verdade, se comporta como se tivesse 980px de largura, embora o aparelho tenha apenas 320px. Isso é feito para que o usuário possa ver páginas feitas para Desktop sem problemas.

Nossa página funciona como se tivéssemos 980px disponíveis. Quando escrevemos “245px” no CSS, estamos nos referindo a 1/4 dessa tela imaginária de 980px. Na hora de exibir, porém, os 980px serão encaixados nos 320px reais, aplicando um zoom out.

Essa tela imaginária de 980px é o que chamamos de layout viewport. É o tamanho com o qual trabalhamos no nosso HTML/CSS, sem nos preocuparmos com a renderização no aparelho. Repare que um pixel no layout viewport tem outro significado do pixel físico do aparelho. É comum chamá-lo de CSS pixel.

Zoom e o visual viewport

Mas navegar no celular nessa página gigante sem zoom é praticamente impossível. A grande diferença da navegação mobile com a Desktop é o frequente uso do zoom e o scroll em todas as direções.

Na imagem acima, demos um zoom para ver mais detalhes. Repare que a o layout da página continua o mesmo. Um elemento de “245px” continua ocupando 1/4 do total do nosso layout viewport. A diferença é que, agora, só estamos visualizando uma parte do layout viewport; o restante está fora da tela, e precisaríamos fazer scroll para ver.

Isso nos leva para outro conceito importante: o visual viewport, que representa o tanto do layout viewport que conseguimos visualizar no momento.

Geralmente não estamos interessados no tamanho do visual viewport. Lembre que os CSS pixels são sempre relativos ao layout viewport.

Sites mobile e a meta tag viewport

Abrir um site Desktop no celular é uma experiência pouco agradável. Frequentemente, vamos querer criar uma página otimizada para mobile, que não demande tanto zoom e já mostre o conteúdo em tamanho e formato interessantes para uma tela tão pequena.

Como fazer? Obviamente, não podemos deixar a página com layout fixo em, por exemplo, 960px. Podemos tentar um width:100% no elemento principal, pensando em se adaptar a diversos tamanhos de tela.

Nosso layout viewport é considerado como 980px e o site é mostrado como se fosse de Desktop, com zoom mínimo e conteúdo praticamente ilegível. Que tal colocar width:320px, o tamanho real do dispositivo?

O layout viewport continua em 980px mas o conteúdo fica em 320px. O usuário precisa dar zoom para visualizar e, pior, a página fica com um imenso espaço em branco.

O que precisamos é uma forma de redimensionar o layout viewport para que ele seja mais adequado a tela pequena do mobile. A Apple introduziu uma meta tag viewport no iPhone que, depois, foi adotada em praticamente todas as plataformas móveis – Android, Opera, Windows Phone etc.

<meta name="viewport" content="width=320">

Isso indica ao navegador que o layout viewport deve ser 320px. Agora, colocar width:100% vai significar 320px, deixando a visualização mais confortável.

Viewport flexível com device-width

Deixar “320” fixo na nossa tag de viewport pode não ser uma boa ideia. Há diversos aparelhos diferentes no mercado, cada um com tamanho diferente. E mobile agora também inclui tablets, como o iPad, que tem largura de 800px.

É possível deixar a meta tag viewport com tamanho flexível, baseado no tamanho do aparelho. Basta usarmos:

<meta name="viewport" content="width=device-width">

Isso assumirá o valor, por exemplo, de 320px no iPhone e 800px no iPad. Outros aparelhos poderão assumir outros valores.

Altíssimas resoluções

Antes de aparecerem os Androids de alta resolução e, depois, o iPhone 4, toda a história dos pixels se resumia a diferença entre os CSS pixels e os device pixels. Isso porque um device pixel no iPhone clássico significava um pixel físico na tela.

A retina display mudou isso. O iPhone 4 passou a vir com resolução de 640×960 pixels, melhorando a renderização de textos e imagens. Outros celulares foram até além. O Galaxy Nexus, por exemplo, tem resolução HD de 720x1280px.

Como ficam nossas páginas mobile então que assumiam uma resolução bem menor? Com resolução tão alta quanto um Desktop, os celulares mais modernos vão renderizar as páginas bem pequenas, como um site Desktop? Nossas páginas continuam funcionando porque esses dispositivos de alta resolução continuam reportando um device-width de 320px, pra manter a compatibilidade.

A ideia de reportar um device-width diferente do tamanho de pixels físicos surgiu no Android e depois foi copiada pelo iOS e outras plataformas.

Dessa forma, conseguimos evoluir a resolução da tela com densidades de pixels maiores (dpi) sem afetar a forma como o usuário usa nosso Site mobile, que continua otimizado para telas pequenas.

Os três pixels

Um pixel, pode então, representar três conceitos diferentes quando lidamos com mobile:

Pixel físico: número real de pixels na tela. Nos celulares modernos, é um número altíssimo, com ótima resolução, geralmente com densidade acima de 300 dpi.

Device pixel: é o número de pixels reportado pelo aparelho como sendo seu tamanho. É pensado pra ser um valor que ofereça conforto visual para o usuário olhando para aquele tamanho de tela. É comum que esse valor seja 320px em celulares, copiado do iPhone original.

CSS pixel: é o que usamos no HTML/CSS como px, representando um tamanho dentro do layout viewport. Quando colocamos a meta tag viewport com valor width=device-width, estamos dizendo que nosso CSS pixel é igual a um Device pixel.

Hoje, no Desktop, esses três pixels são equivalentes**. Mas, em breve, teremos que lidar com esse tipo de diferença também no Desktop com a chegada das telas de alta densidade também aos computadores.

Lidando com zoom

Mesmo otimizando nossa página para 320px, o usuário ainda pode dar zoom na página. Em alguns cenários, pode ser interessante desabilitar o zoom, o que pode ser feito na tag viewport com user-scalable:

<meta name="viewport" content="width=device-width, user-scalable=no">

De maneira geral, é interessante deixar o usuário dar zoom caso queira, já que este é um gesto comum ao usar a Web no celular. Podemos, porém, controlar os níveis de zoom com as propriedades minimum-scale e maximum-scale:

<meta name="viewport" content="width=device-width, minimum-scale=0.5, maximum-scale=4">

O código acima indica que o usuário pode aumentar até 4x a página e diminuir até pela metade.

Podemos controlar também o nível padrão de zoom quando a página é aberta, com initial-scale:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

O valor 1.0 é muito comum quando trabalhamos com device-width e significa o zoom padrão. Se tivermos uma página Desktop não otimizada pro viewport de mobile, podemos usar essa propriedade para controlar o zoom inicial (lembre que o inicial é mostrar todo o layout viewport de 980px, o que pode não ser interessante).

Por fim, é importante citar um bug do iOS que afeta o zoom e o viewport quando rotacionamos o dispositivo em uma página com width=device-width que permita zoom. Se você abre a página no modo retrato, ele vai assumir o scale como 1.0, deixando o visual viewport igual ao layout viewport. Ao rotacioná-lo para modo paisagem, o dispositivo mantém o visual viewport no valor antigo, mas aumentando o layout viewport. Na prática, a página dá zoom automático e o lado direito da página não fica visível. O usuário, que não deu zoom, precisa diminuir o zoom para ver tudo.

É um bug famoso que acontece só no Mobile Safari do iOS, não existindo no Android e outras plataformas. A solução mais direta é desabilitar o zoom por completo, algo que é feito em diversos sites mobile por causa desse bug. Mas não é a solução ideal, já que poder dar zoom é uma feature que interessa ao usuário mobile. Existem alguns hacks para tentar resolver esse problema no iOS.

Conclusão

Trabalhar com telas diferentes é um grande desafio. O uso da meta tag viewport procura facilitar a padronização das páginas nos mais diversos tamanhos de telas e densidades de pixels. Compreender os diferentes significados de viewports e pixels é essencial para se desenvolver para mobile.

E, usando ainda media queries, podemos criar páginas que se adaptem facilmente a diversos dispositivos.

O curso WD-43 da Caelum, de desenvolvimento Web, trata também de tópicos de Web Mobile. Mostramos o uso do viewport e media queries para criação de uma página responsiva. Além disso, meu livro A Web Mobile, aprofunda em diversos assuntos de design responsivo e aspectos técnicos de sites para dispositivos móveis.

Referências

** No Desktop, quando damos zoom numa página, também temos a complicação dos viewports diferentes e a diferença entre CSS pixels e device pixels. Mas, na prática, todo mundo ignora e assume zoom de 100%, onde os CSS pixels são iguais aos device pixels.


Novo Firefox funciona como um coelho

Novas versões de versões dos navegadores não recebem o zumbido que costumavam obter, mas o Firefox Quantum é uma exceção.

A última versão do navegador da Fundação Mozilla, lançado na terça-feira, é tudo sobre desempenho. O Firefox é duas vezes mais rápido que o ano passado, afirmou a Mozilla. Não é apenas rápido na inicialização – permanece zippy mesmo quando tributado por várias abas.

“Temos um melhor equilíbrio de memória com o desempenho do que todos os outros navegadores”, disse o vice-presidente do Firefox, Product Nick Nguyen.

“Nós usamos 30 por cento menos memória, e o motivo disso é que podemos alocar o número de processos que o Firefox usa em seu computador com base no hardware que você possui”, disse ele à TechNewsWorld.

$ 1 milhão de experiência em US $ 300 para laptop

As melhorias de desempenho em Quantum podem ser uma bebida da fonte da juventude para muitos sistemas de usuários do Firefox. “Um número significativo de nossos usuários estão em máquinas com dois núcleos ou menos, e menos de 4 gigabytes de RAM”, explicou Nguyen.

O aumento de desempenho pode ser atraente para outros usuários também.

“Nós temos um ótimo navegador para você, mesmo que você não tenha o computador mais recente”, disse Nguyen. “Nós vemos uma grande oportunidade para pessoas com US $ 300 laptops ter uma excelente experiência moderna”.

O público-alvo da Quantum provavelmente é proprietário de PCs mais antigos que sentem a maior dor no momento, disse Rob Enderle, analista principal do Grupo Enderle .

“A geração atual de navegadores avançados é bastante intensiva em recursos, o que retarda as máquinas e cria atrasos que os usuários acham realmente irritantes”, disse ele à TechNewsWorld.

Além das melhorias sob o capô, a Mozilla redesenhou a interface do usuário do Firefox.

“Chamamos essa iniciativa” Photon “, e seu objetivo é modernizar e unificar tudo o que chamamos de” Firefox “, enquanto aproveitamos o novo e rápido mecanismo”, escreveu Mark Mayo, vice-presidente sênior do Firefox, em uma publicação online.

“Para criar o Photon, nossa equipe de pesquisa de usuários estudou como as pessoas navegavam na Web”, explicou. “Nós olhamos para o hardware do mundo real para tornar o Firefox ótimo em qualquer exibição, e nós nos certificamos de que o Firefox parece e funciona como o Firefox independentemente do dispositivo que você está usando”.

Momento fortuito?

Além de anunciar o lançamento da Quantum, a Mozilla informou na terça-feira que fez do Google seu provedor de busca padrão nos Estados Unidos e no Canadá.

As receitas dessa parceria devem beneficiar a Mozilla.

“Esperemos que ele ajude a continuar seus esforços de desenvolvimento e construir o motor Quantum”, disse Ross Rubin, analista principal da Reticle Research .

O lançamento de Quantum pela Mozilla foi uma jogada defensiva, ele disse à TechNewsWorld. “É para evitar uma nova erosão da base de usuários do Firefox, que teve um forte sucesso nos últimos anos”.

O Quantum poderia fazer mais por Mozilla do que simplesmente evitar defecções do Firefox, manteve Charles King, analista principal da Pund-IT .

“A Quantum parece ser projetada para trazer usuários anteriores, que abandonaram a Mozilla em última análise para o Google Chrome, de volta ao Firefox”, disse ele à TechNewsWorld.

“A chegada de Quantum também coincide com o que parece um crescente descontentamento entre os usuários do Google Chrome e o Microsoft Edge”, acrescentou King. “Em outras palavras, não poderia haver um tempo melhor para a Mozilla para apresentar um novo navegador inovador”.

Tough Browser Market

Mesmo com vantagens de desempenho, a Quantum terá dificuldade em conquistar o compartilhamento de navegador do líder Chrome, que possuía cerca de 47% do mercado de desktop a partir do mês passado, de acordo com números do NetMarketShare.

Com 6,53 por cento do mercado, o Firefox foi um terceiro distante, por trás do Microsoft Internet Explorer com 12,52 por cento.

“O novo Firefox Quantum é consideravelmente mais rápido, o que foi um grande problema para o antigo Firefox”, disse Greg Sterling, vice-presidente de estratégia e visão da Local Search Association .

“Comparado com o Chrome, o antigo Firefox era muito lento, então esta é uma melhoria real”, disse ele à TechNewsWorld.

“O desafio será conquistar os usuários que desertaram para o Chrome – além dos que são filosóficamente opostos ao Google”, afirmou Sterling. “Eu suspeito que veremos uma melhoria incremental no compartilhamento de mercado do Firefox, mas esse lançamento não mudará as coisas drasticamente”.


Campus Party 2018 traz fundador da Apple, discussão sobre bitcoin e batalha de drones

A 11ª edição do evento acontece entre 31 de janeiro a 4 de fevereiro, no Anhembi, em São Paulo; Neste ano, 12 mil pessoas acamparão no local.

Campus Party, o maior evento de tecnologia e cultura nerd da América Latina, levará para São Paulo de discussões sobre a tecnologia por trás do bitcoin e sobre como a tecnologia pode fazer a diferença na sala de aula, além de palestras de peso, como a de Steve Wozniak, que fundou a Apple com Steve Jobs. Uma das novidades neste ano para quem visita a área aberta do evento é a batalha de drones, em que os pilotos tentam derrubar as aeronaves dos rivais

A 11ª edição da Campus Party ocorre no Pavilhão de exposições do Anhembi, em São Paulo, entre 31 de janeiro a 4 de fevereiro. Neste ano, 12 mil pessoas acamparão no local.

A expectativa da organização é que o número de visitantes chegue a 100 mil. A capacidade total de conexão, um assunto sensível para campuseiros, será de 40 Gibabits por segundo. Pela primeira vez, haverá áreas com Wi-Fi e monitoramento para evitar ataques hacker.

“Aqui a gente monta a internet de uma cidade inteira em coisa de um dia”, brincou Franceso Farruggia, presidente do Instituto Campus Party.

Francisco Farruggia, presidente do Instituto Campus Party, durante apresentação da programação 2018 (Foto: Helton Simões Gomes/ G1)Francisco Farruggia, presidente do Instituto Campus Party, durante apresentação da programação 2018 (Foto: Helton Simões Gomes/ G1)

Francisco Farruggia, presidente do Instituto Campus Party, durante apresentação da programação 2018 

Bitcoin e Blockchain

Boa parte da programação de oficinas e palestras da Campus Party será dedicada a discutir o bitcoin, a moeda virtual que passou a chamar a atenção do mundo ao se valorizar mais de 1000% em 2017 e chegar próxima da cotação de US$ 20 mil. Só que o objetivo não será analisar se a criptomoeda enfrenta uma bolha especulativa ou não, debate que dominou o mundo financeiro em 2017.

O foco será a “blockchain”, a tecnologia por trás do bitcoin, que funciona como um livro contábil em que todas as transações com a moeda são registradas de forma segura e confiável. Don Tapscott, um dos principais palestrantes desse ano, subirá ao palco para falar sobre isso. Ele é autor do livro “Blockchain Revolution: How the Technology Underlying Bitcoin is Changing Business, Money and the World” (“Revolução Blockchain: Como a Tecnologia Sustentando o Bitcoin está Mudando Negócios, Dinheiro e o Mundo”).

Boné para tirar sono

Alguns dos eventos são levados à Campus Party por patrocinadores, como Petrobras, Visa, TV Globo e Ford. “Vocês poderiam se perguntar por que uma montadora de 115 anos está aqui. E eu poderia passar o dia inteiro falando disso. A gente veio porque aqui é um celeiro de tecnologia e inovação”, afirmou Fernão Silveira, diretor de comunicação para América Latina da Ford, que vai expor um Mustang 5.0 GT, modelo que a empresa começa a importar agora para o Brasil.

A montadora mostrará algumas de suas tecnologias, como seus serviços conectados para carros e até um boné que faz caminhoneiros que estiverem dirigindo ficarem acordados.

Drones, games e educação

Apesar de palestras e workshops serem feitos em uma área de acesso restrito aos campuseiros, há atividades na área aberta da Campus Party.

Em uma arena ocorrerá o campeonato brasileiro de drones, em que pilotos profissionais usam todas suas habilidades para correr mais rápido que os adversários. Lá também os visitantes do evento poderão participar de duelos de drones. Durante eles, a velocidade fica em segundo plano e o objetivo é derrubar a aeronave dos rivais.

Em outro espaço, ocorrerá torneios de games como “Dragon Ball Z”, “Counter Strike”, “Injustice 2”, entre outros.

Outra novidade de 2018 da Campus Party é uma nova área de atuação: a educação. Haverá oficinas de robótica para crianças e adolescentes e batalhas de robôs virtuais.

Simuladores

Também na área aberta, a Campus Party reunirá 8 simuladores, como asa delta a kart, por exemplo. O destaque fica por conta do MotionSphere, um simulador de sensações vivenciadas por pilotos de aviões super-rápidos. Ele é capaz de imitar acelerações, curvas e impactos de até sete vezes a força da gravidade.

Startups e universidade

Outra área a que os visitantes poderão ir e que já esteve presente em outras edições da Campus é a Startup & Makers. Nela, 120 empresas iniciantes de tecnologia mostrarão como funcionam seus negócios, em busca de parcerias e até de investidores.

Já na Campus Future, estudantes universitários expõem protótipos de novas tecnologias criadas a partir de suas pesquisas.


Os 11 pior pedaços de conselhos que você já ouviu (e o que fazer em vez disso)
O “2 centavos” de algumas pessoas deixa você com apenas isso.

Como instruções ruins, um conselho ruim pode orientá-lo fora da pista. Principais empresários e membros de The Oracles pesam sobre os piores conselhos que eles constantemente ouviram e o que fazer em vez disso.

Grant Cardone
Crédito da imagem: os oráculos

1. O sucesso é uma jornada, não um destino.

Quantas vezes você já ouviu a frase: “O sucesso é uma jornada, não um destino”? Por favor! O sucesso não é apenas uma “jornada”, é um estado sobre o qual você tem controle e responsabilidade. Nenhum clube da NFL conta a sua base de fãs que é a jornada que conta. Todo mundo sabe que é tudo sobre o anel: o Super Bowl. Um bombeiro que conduz um caminhão de bombeiros não está focado na jornada; Ele está focado em chegar ao fogo e colocá-lo fora.

Sua vida não é diferente. É o destino mais importante. As pessoas que dizem o contrário provavelmente correm um seminário ou tentam vender um livro. – Grant Cardone , especialista em vendas superior que construiu um império imobiliário de US $ 500 milhões e um autor de best-seller do NYT ; siga Grant no Facebook ou no YouTube

Tim Draper
Crédito da imagem: os oráculos

2. Recupere sua equipe.

Um conselho de consertos rápidos que ouço o tempo todo é: “acelerar sua equipe”. Na verdade, todo empresário deve manter seu time tão magro quanto possível até encontrar um produto forte ou um ajuste de mercado. Uma equipe maior não faz um melhor lucro.

Como mencionei no meu livro, Como ser o Startup Hero , uma vez que três grandes clientes estão pagando pelo seu serviço e estão dispostos a expandir sua compra, só então você pode “acelerar” o negócio. – Tim Draper , lendário VC, fundador da Draper Associates e DFJ

Michael Johnson
Crédito da imagem: os oráculos

3. Apenas seja positivo.

Na indústria do comportamento humano e otimização do potencial pessoal, as pessoas adoram dizer: “Apenas seja positivo”. Isso coloca as pessoas para um pesadelo de saúde mental! Ninguém é apenas positivo ou negativo; as pessoas mais bem sucedidas são equilibradas.

Se uma pessoa é excessivamente otimista, eles geralmente não consideram os riscos associados às suas ações ou aprendem através de tentativas e erros dolorosos. Muitos auto-proclamados “pensadores positivos” se espalha internamente por seus pensamentos negativos, ao mesmo tempo em que estabelecem expectativas irrealistas sobre se sentirem felizes ou pacíficas constantemente. É melhor ficar equilibrado: há uma hora e um lugar para todas as emoções. – Michael Johnson, “The Mojo Master”, palestrante e treinador de mentalidade para atletas profissionais e empresários de elite; siga Michael no Facebook

Michael Alden
Crédito da imagem: os oráculos

4. Siga o exagero.

Nova tecnologia gera exagero e desinformação. Recentemente, investei muito tempo e recursos em cryptocurrency. Eu estudei como se eu preparasse para o exame de bar. Ao analisar as tendências da corrente criptográfica, eu aprendi que você sempre deve fazer sua pesquisa. Não basta investir em algo porque seu amigo envia um texto dizendo: “Compre isso agora”. Atuar cegamente na histeria é uma receita para o desastre.

Em vez disso, faça perguntas. Leia sobre isso. Os bons empreendedores se adaptam e atuam rapidamente. Mas o melhor ato com informações confiáveis ​​para aumentar seus negócios e patrimônio líquido. Michael Alden , autor de best-seller e CEO daCloiXonné

Sharran Srivatsaa
Crédito da imagem: os oráculos

5. Não seja uma “aberração de controle”.

Todo empreendedor alto provavelmente foi criticado como um “freak de controle” em algum momento. No entanto, tendo em conta as inúmeras distrações diárias que os empresários encontram, se você quer fazer “um trabalho profundo” com um impacto abrangente, você tem de controlar o seu tempo para fazer cada dia uma obra-prima.

Meu “dia da obra-prima” é composto por seis categorias: comer, mover, dormir, trabalhar profundamente, servir e desenvolver pessoal. Cada categoria tem uma ação que eu posso realizar nesse dia, seja 30 minutos de exercício (mover) ou fazer uma chamada de inspiração 5am ​​Club (serviço). Para alcançar seu potencial, exerça controle sobre sua vida. – Sharran Srivatsaa , investidor-anjo e presidente da corretora (região ocidental) em Douglas Elliman; cresceu Teles Properties 10X em cinco anos

Steve Griggs
Crédito da imagem: os oráculos

6. Faça o que você ama e o dinheiro seguirá.

Durante anos, eu acreditei: “Faça o que você ama e o dinheiro vai seguir”. Eu perderia dinheiro em projetos e me dizia: “Não se preocupe, o dinheiro vai seguir”. Eu tive que desaprender esta lição do jeito difícil .

Em qualquer empreendimento, certifique-se de entender as finanças. Não se sinta culpado por fazer lucro. O lucro é a linha de vida de qualquer negócio. Em vez de apenas “fazer o que você ama”, eu digo, “seja justo, honesto e obtenha lucro”.

Outro conselho que eu ouvi dizer é “ficar sob o radar”. Não tenho certeza de como eu consegui isso embutido na minha cabeça; não faz sentido. Se as pessoas não o conhecem, elas não comprarão de você. – Steve Griggs , fundador e CEO da Steve Griggs Design ; O premier designer de paisagens da NYC transformou os quintais e os jardins do telhado em fugas privadas

Jared Goetz
Crédito da imagem: os oráculos

7. Sempre triturar.

Muitos empresários glorificam “o grind”. Não me interpretem mal: sou um grande proponente de trabalhar duro e fazer as coisas, mas acho que é tão importante, se não mais, ter equilíbrio.

Muitas vezes, os empresários ficam tão apanhados na moagem que não conseguem ver que o que eles estão trabalhando não os impulsiona. Trabalho inteligente. Concentre-se no seu bem-estar. Reserve tempo pessoal. Reflita. Estas práticas terão efeitos maciços e positivos sobre o seu sucesso. – Jared Goetz , empresário em série e especialista em comércio eletrônico; co-fundador de quatro empresas multimilionárias em cinco anos

John Hanna
Crédito da imagem: os oráculos

8. As decisões empresariais devem basear-se na lógica, e não nas emoções.

O conselho de fazer decisões comerciais lógicas soa racional, mas é falho. A neurociência provou que é impossível tomar decisões sem emoção. Todos entrámos em um campo de negócios armado com fatos, números e pesquisas independentes, pensando que nossa proposta é à prova de balas, apenas para receber um “No.” definitivo.

Isso porque a semente da motivação está no coração. Se você aplicar apenas lógica a negócios, você estará condenado a falhar porque a tomada de decisões é principalmente emocional. A paixão, a resistência e o zelo são impulsionados pelas emoções. Lógica, sabedoria e razão são ferramentas que a mente alavanca para que as decisões baseadas em emoções sejam bem-sucedidas. – John Hanna , autor de ” Way of the Wealthy ” e CEO doFairchild Group

Nafisé Nina Hodjat
Crédito da imagem: os oráculos

9. Seja um buldogue.

O pior conselho que recebi como advogado é: “Seja um buldogue”. Todos querem um advogado feroz e implacável. No entanto, um advogado de defesa criminal implacável e feroz sem uma estratégia holística só será efetivo em uma pequena porcentagem de casos.

Bruce Lee disse uma vez: “Seja como a água”. Resolvi muitos casos em favor dos meus clientes, adaptando a estratégia do caso e sendo aberto a abordagens não convencionais. Se sua única estratégia é ser bulldog no negócio, você vai sentir falta oportunidades para crescer e servir seus clientes de forma eficaz. -Nafisé Nina Hodjat, fundadora e advogada da Firma SLS

Shaun Rawls
Crédito da imagem: os oráculos

10. Fale até que você faça isso.

“Fake to till you make it” é uma estratégia de negócios em papel para novatos e um jogo de tolos para profissionais reais. Você nunca vai enganar aqueles que você quer conquistar, e você pode apenas prejudicar sua reputação em ascensão no processo.

Quanto ao “fazer”, o conhecimento é poder. Quanto mais você sabe, mais você cresce. Saiba tudo o que puder dos melhores líderes em sua indústria. Entrevistá-los; leve-os para o almoço; estudá-los. O melhor atalho para o sucesso é aprender com os melhores. Combine este conhecimento com autenticidade, e você terá uma proposição de valor única que o serve ao longo de sua carreira. – Shaun Rawls , empresário permanente, fundador e CEO da Rawls Consulting

Joe Kakaty
Crédito da imagem: os oráculos

11. Faça isso, como sempre, foi feito.

Os “especialistas” adoram pregar sobre como algo sempre foi feito. Seus métodos experimentados pelo tempo invariavelmente trabalhavam em “insert-mega-company-company-name-here”, e é por isso que ele vai funcionar para você. Mas apenas porque uma estratégia funcionou para uma grande marca corporativa não significa que ela funcionará em uma cultura inicial ou pode ser copiada para obter os mesmos resultados.

Se você está em uma indústria em rápida mudança como o negócio de mídia, sugiro recrutar uma mistura de especialistas experientes, bem como tipos de produtos em bruto, quebram o molde, que gostam de inovar. Quando resolver problemas, não fique preso em como algo já foi feito antes. Descubra o que funciona melhor para você. – Joe Kakaty , co-fundador e presidente da Poker Central

Siga The Oracles no Facebook .

 


6 CEOs de equívocos comuns sobre o desenvolvimento da Web

Lembre-se do seu último projeto de desenvolvimento web ? Você passou pelo orçamento, ultrapassou os prazos e ficou frustrado com quase todos os envolvidos em algum momento.

As más notícias? Foi difícil.

A notícia realmente ruim? Provavelmente foi culpa da sua equipe.

A maioria dos CEOs tem sérios equívocos sobre desenvolvimento web. Este é um problema porque as empresas são mais confiantes do que nunca em sua presença online.

CEOs em empresas de todos os tamanhos lutam com isso. Aqui estão seis mitos que a maioria dos CEOs luta com:

1. O desenvolvimento do site é fácil.

Os clientes geralmente solicitam um site “simples” de 20 páginas com uma configuração de log-in, pagamento on-line, um blog e outros widgets.

Sites como Facebook e Craigslist podem parecer simples, mas o trabalho de desenvolvimento necessário é demorado e complicado. O estranho é que quanto mais simples o design, muitas vezes o mais caro é o site. Alguns pedidos que parecem pequenos podem envolver um trabalho de desenvolvimento complicado e exigem dias de programação.

2. Todos devem estar envolvidos.

Ao invés de empacotar toda a equipe em uma sala de conferências para mostrar idéias envolvem apenas as pessoas que estarão fazendo o trabalho.

Compile sua estratégia de conteúdo, ativos de marca, objetivos de negócios e fluxos de usuários. Não gaste tempo medindo planejamento técnico profundo, arquitetura de banco de dados, layouts, projetos ou widgets.

3. Os sites são uma mercadoria.

Com o advento de modelos,  sites como 99designs e desenvolvimento offshore, muitos empresários mantem a percepção errônea de que o design web é uma mercadoria barata.

Aproveitar os modelos já criados pode funcionar para algumas empresas, mas para aqueles que são sérios sobre sua marca e presença on-line, tais alternativas não serão suficientes a longo prazo.

Considere seu site um investimento e consiga recursos apropriados para isso. Encontre uma equipe de designers que entenda seu negócio, faça as perguntas corretas e tenha clientes felizes. Uma boa equipe irá ajudá-lo a gerenciar seus objetivos junto com seu orçamento e encontrar soluções ótimas. Pode parecer caro, mas o retorno sobre o investimento valerá a pena.

4. Uma vez que um site é construído, está feito.

O desenvolvimento da Web não é uma atividade única. Uma vez que seu site é lançado, ele precisará ser mantido. Muitas empresas do midmarket têm equipes 24 horas atualizadas monitorando seus sites para garantir que permaneçam sem falhas.

Mesmo que o seu site não lide com um alto volume de tráfego, você ainda precisa de alguém atento à funcionalidade. Você também precisará atualizações de segurança e conteúdo fresco para fins de SEO .

5. Qualquer pessoa pode criar uma excelente experiência de usuário.

Você não pode construir o site você mesmo. Concentre-se em liderar seu negócio e melhorar seus produtos. Seu estagiário, primo ou cara de TI também não podem construir isso. Muito mais do que um conhecimento básico do design web, especialmente ao construir sistemas de pagamento e garantir a integração com os sistemas internos da empresa.

Existem ferramentas gratuitas de criação de sites que podem ser ótimas para inicialização iniciada ou executar um site de pequenas empresas. Mas eles não são robustos o suficiente para as necessidades dos negócios mais estabelecidos.

Para o seu site, você pode precisar de uma equipe para projetar principalmente a partir do zero, o que requer um conjunto de habilidades específicas. Deixe a empresa de design web contratada fazer o que faz melhor, mas certifique-se de que seus funcionários estão fazendo as perguntas certas sobre o público-alvo antes de começar.

6. É seu site, então você determina o design.

É natural querer micromanager o site da sua empresa. Infelizmente, a menos que você seja um web designer, este não é o trabalho para você. Você precisa confiar no seu web designer se desejar que os visitantes do site se tornem clientes pagantes.

Os designers da Web entenderão sua visão, mas você precisa deixá-los projetar. Eles conhecem a estrutura e o que ajuda os visitantes a se converterem em clientes.


5 IDEIAS DE NEGÓCIOS DIGITAIS PARA VOCÊ COMEÇAR DO ZERO

Quem não sonha em ter seu próprio negócio e faturar muito dinheiro sem sair de casa? E o melhor de tudo, sem ter que investir muito dinheiro. Muitos brasileiros sonham em deixar de ser assalariado, e os negócios digitais são uma ótima alternativa para tornar esse sonho, realidade.

Pois saiba que a internet oferece várias opções, basta você escolher o negócio que melhor se encaixa no seu perfil. Justamente por isso o meu objetivo no post de hoje é lhe apresentar algumas ideias de negócios online para te ajudar nessa escolha.

VEJA AGORA 5 IDEIAS DE NEGÓCIOS DIGITAIS PARA VOCÊ COMEÇAR DO ZERO

1 # Criação de Blogs

Atualmente esse é um dos negócios digitais mais rentáveis da internet. Você já deve ter visto vários blogueiros de sucesso que ganham muito dinheiro nesse meio. Quantas vezes você já se perguntou como eles conseguem faturar com uma página na internet?

Na verdade, o lucro está nos anúncios exibidos na página. Quando o usuário clica, o webmaster já está ganhando.

Além disso, hoje muitos blogueiros faturam alto promovendo produtos de outras empresas, marcas e até mesmo pessoas comuns, tudo isso através do Programa de Afiliados, conforme veremos mais a diante.

Mas o primeiro passo é buscar um nicho de mercado que seja rentável e que ao mesmo tempo lhe traga satisfação pessoal. Isso porque a motivação é muito importante para conseguir dar sequência as estratégias de marketing digital necessárias para gerar tráfego no blog e ter sucesso no mercado dos negócios online.

Quando falamos em marketing digital, é importante salientar que se trata de um processo que requer planejamento e tempo.

É fundamental que o nicho de sua escolha seja um tema que você tenha certo domínio ou interesse, para que assim essa experiência não seja monótona e cansativa, isso garante maior facilidade para tratar dos assuntos referentes ao blog.

Além disso, é preciso estudar muito o mercado e o público com quem você vai trabalhar no blog. Alguns empreendimentos digitais de sucesso tratam de temas referentes a dieta, fitness, culinária, beleza, negócios, etc.

2 # Criação de Vídeos para a internet

O primeiro passo para montar um bom vídeo é planejar e definir um assunto interessante e pesquisar seus detalhes. O conteúdo precisa ser original e relevante para atrair a atenção do público.

Organize a estrutura do vídeo como se fosse um roteiro de filme, com começo, meio e fim. O ideal é colocar tudo no papel para as ideias ficarem mais claras.

A criação de vídeos para a internet é um dos negócios digitais mais rentáveis atualmente, isso porque os internautas acessam diariamente milhões de vídeos no Youtube. Inclusive esse canal é o mais famoso para expor gravações.

Uma boa dica é ver outros vídeos que tratem do assunto que você deseja abordar.

Observe quais são os mais visualizados e se inspire. Pode ser vídeos engraçados, tutoriais, cursos, etc. Quanto mais criatividade e habilidade você tiver na criação de vídeos, melhor será o desempenho da sua publicação.

Realizar vídeos com imagens e áudio também é uma boa opção para prender a atenção dos visitantes.

Outra tendência em negócios pela internet é desenvolver vídeos institucionais animados para exibir produtos, uma teoria ou um conceito com criatividade e relevância. Para isso basta ter familiaridade com programas de animação para criar bons vídeos de divulgação.

 

3 # Comércio eletrônico

Mais uma ideia de negócios digitais é abrir uma loja virtual para vender algum produto pela internet.

Atualmente existem também Franquias Virtuais que permitem que você tenha o seu próprio negócio com um baixo investimento, como esta que eu fui franqueado e super recomendo Clicando Aqui.

Mas, caso você não pretenda correr o risco de investir em um empreendimento de alto nível, você pode abrir uma loja virtual de forma gratuita.

Primeiro, selecione os produtos que pretende comercializar e desenvolva um catálogo online. Organize as fotos e a descrição dos produtos para tornar a página mais completa e atraente aos usuários.

É essencial oferecer bastante dados sobre o produto e as maneiras de entrega. Seja específico ao determinar o conteúdo da loja para ganhar espaço nesse mercado de comércio eletrônico.

Assim como outros negócios online, trata-se de um mercado competitivo que exige estratégias bem definidas para o empreendedor conseguir alcançar seus objetivos em venda.

Lembre-se de estabelecer um planejamento para conseguir atingir suas metas. Acesse o site da LCF Host para saber mais sobre loja virtuais e Blogs desenvolvimento seguro e profissional clique aqui


Página 1 de 212