Tag: internet

Produtividade e HomeOffice – Is it possible?

Comecei a escrever esse artigo na Campus Party 2011 – evento no qual só fui porque estava numa jornada home office, e pude trabalhar durante o evento – e só fui terminar agora, em 2014, pois foi quando voltei a ter essa jornada de trabalho. Em 2011 eu tive meu primeiro emprego home office e confesso, os universos são diferentes, entre um cotidiano empresarial normal e outro mesclado ao seu lar. É uma rotina viciante, desde que experimentei sempre quiz trabalhar assim, então em 2013 eu voltei a ter essa rotina em período integral e em 2014 tenho metade da minha jornada home office e a outra metade passo confinado em um escritório.

Esse post não tem objetivo de traçar um paralelo entre as duas rotinas de trabalho, mas apenas um pouco da minha experiência e das dicas que recebi enquanto trabalhava como home office. Até porque existem vários posts falando sobre isso, pois essa maneira de trabalhar está cada dia mais comum. Hoje, as principais formas de trabalho, no que se refere à disposição física, são:

  • Ambiente Corporativo: trabalhar em uma sala comum dentro de uma empresa
  • Home Office: fazer a mesma coisa que é feita dentro de uma empresa, só que em casa
  • Ambiente Coworking: mistura dos dois acima.  É como se vários home-officers se juntassem numa sala, transformando-se num ambiente corporativo mais light e heterogêneo

Quando você é um home officer, exitem alguns benefícios:

  • Não precisa atravessar a cidade pra estar na empresa às 8h00.
  • Não precisa estar em lugar algum as 8h00.
  • Não precisa estar de terno (ou qualquer roupa séria) às 8h00.
  • Flexibilidade nos horários de folga, almoço, banheiro, etc…
  • Flexibilidade nos horários de começar ou terminar o dia de trabalho
  • Menos custos (refeição, transporte, tempo)
  • Ninguém te pede pra arrumar a impressora (caso esteja sozinho em casa)
  • Menos interrupções, no geral (caso esteja sozinho em casa)
  • Mais próximo da família (caso não esteja sozinho em casa)

Existem também alguns incômodos nessa jornada:

  • Requer maior disciplina, pois ninguém está te vigiando
  • Você tem um trabalho mais solitário/anti-social, pois não tem experiências numa atmosfera corporativa diariamente.
  • É mais difícil explicar porque está atrasando um projeto, pois existe uma desconfiança do que você realmente está fazendo nas suas 8h/dia.
  • Existe uma geladeira TODA SUA à poucos metros de você
  • Existem coisas para se fazer em casa (lavar roupa, fazer comida, trocar lâmpada, trocar chuveiro, etc…)
  • Aquele trabalho da faculdade (ou da pós) pra fazer…
  • Uma TV com MILHÕES de canais.
  • Possíveis visitas de parentes/amigos
  • Sua vizinha de 12 anos chega da escola e põe Justin Bieber no último volume
  • As pessoas (geralmente vizinhos) pensam que você é um atoa! Isso pode gerar um foda-se da sua parte ou você pode ter que ouvir várias petições de favores.

É claro que existem alguns limites impostos pelas empresas que impedem algum benefício (como flexibilidade de horários) ou que dão maior benefício ou aumentam o conjunto de regras para se trabalhar em casa. Meu primeiro emprego home office não teve nenhuma exigência extra, então eu me sentia bem livre.

Percebendo minha inexperiência com a rotina de um escritório em casa, durante a Campus Party 2011, vi o  Jonny Ken, criador do Migre.me, passando e, como eu acompanhava seus tweets, percebi que ele tinha uma rotina home office também. Fui até o Jonny Ken, no 3º dia da Campus Party, e pedi uns conselhos. Os conselhos do Jonny Ken me incentivaram a criar esse artigo, na época, e hoje, que voltei a essa rotina, voltei a pesquisar sobre o assunto e retomar o artigo pra terminá-lo.

Em 2011 eu era solteiro e morei com minha irmã um tempo, depois fui morar sozinho. Hoje sou casado e moro com minha esposa, que nunca foi home officer. A questão é que sempre tive atividades domésticas pra fazer, o que me atrapalhava muito no trabalho. Com base na conversa que eu tive com o  Jonny Ken, e com base em alguns artigos que eu li, fiz um top five de dicas:

5- Se prepare como se fosse sair de casa

Uma coisa legal a se fazer quando se trabalha em casa, é fazer tudo como se fosse ir ao trabalho do outro lado da cidade, menos ir pra lá. Então você acorda, toma banho, toma café com a família, arruma as coisas do seu quarto, põe uma roupa bacana só que em vez de sair de casa, vá pro seu local caseiro de trabalho. Lá dentro, você não conversa com ninguém da casa, ponha em sua mente que está longe de casa, até você acreditar nisso. Só aceite conversas como: “Vem almoçar!!!” ou, em casos mais sérios: “Um ratoooo!!”, nada de: “Vem trocar a lâmpada” ou “Vem puxar o sofá aqui pra mim”  ou até mesmo “Vá buscar o Junior na escola”…

4- Tenha um pouco de rotina:

Contrariando a idéia que você fica mais livre no seu home office, é interessante que você tenha hora marcada para tudo no seu dia-a-dia, isso te ajudará a manter o foco. Não precisa ser rígido, mas apenas organizado. Mesmo que, segunda você trabalhe das 8h às 18h, terça você trabalhe das 14h às 22h, faça isso de forma rotineira, sem alterar muito. Rotina ajuda a manter o foco também, e existe outro benefício. Quando você segue uma rotina, seu número de escolhas diárias caem, assim seu cérebro gasta menos energia sobrando mais para a criatividade. É muito importante que você tenha uma hora só para trabalhar, e outra hora na qual o trabalho não venha à tona.

3- Vá a eventos/encontros para sua área:

Como você se torna um “homem das cavernas”, com pouquíssimo contato com o mundo externo, é bom que encontre pessoas que pensam parecido com você. Atualizar-se, informar-se a respeito do seu ramo de trabalho é muito bom. Eu já peguei várias dicas de colegas de trabalho, então adoro estar nos eventos, sempre que posso, para aumentar minha rede de contatos. Existe aquele lance do “Eu não sei mas conheço quem sabe”, ou seja, sempre que surgir alguma dificuldade no seu trabalho, você sabe quem pode te ajudar.

Outro lance bacana de eventos, é que você fica por dentro das atualidades do seu ramo de trabalho. Quais são os melhores equipamentos, a melhor tecnologia, a melhor plataforma etc. Além de ficar sabendo quais são as empresas mais legais ou o que as empresas estão fazendo, qual a maior tendência, enfim, muita informação boa.

2- Faça lista de tarefas. PLANEJE:

Todo mundo fala que planejar é muito importante (é porque é verdade). Eu sempre tenho uma lista do que vou fazer, quanto tempo eu acho que vou levar para fazer e quanto tempo eu realmente gastei. Há algum tempo eu estou implementando na minha casa, um planejamento semanal para eu e minha esposa. Comprei um quadro branco e fazemos um brainstorm todo fim de semana sobre o que fizemos na semana e o que precisa ser feito na semana seguinte. Depois traçamos um cronograma dos horários que temos disponíveis no dia e o que faremos.

1- Faça um acordo com quem mora com você:

Você precisa deixar bem claro, para as pessoas que moram com você, que você está ali trabalhando!! É totalmente possível que marido e mulher trabalhem home office, assim como você somente. Porém quem fica em casa com você não pode te atrapalhar, seja pra lavar louça ou trocar um chuveiro, atividades não-trabalho precisam ser realizadas em horas não-trabalho.

Se tiver crianças em casa, tente driblar o tempo com elas para concentrar no trabalho. A maioria das pessoas não fala que “trabalha em casa”, mas sim que “tem um escritório em casa” ou “perto de casa”. É uma maneira mais elegante de falar, não transmite informalidade e evita um pouco as situações como essa: “Cara, já q você trabalha em casa, tem como buscar meu filho na escola, levar minha tia no hospital e trazer o cachorro que tá no pet shop”

Conclusão

Aderir a essa nova rotina pode ser desgastante no início, mas nada que uma auto-disciplina para resolver isso. Existem apps que ajudam no nosso dia-a-dia, hábitos (como o de usar agenda) e técnicas como a de pomodoro, onde você estipula pequenos intervalos (25 à 40 minutos) de alta concentração no trabalho e depois descansa por 5 minutos. Mas o fator principal que proporcionará sua produtividade é, sem dúvida, sua disciplina.

Referências:

Personalizar página inicial do WordPress

Esse tutorial é fruto de uma frustração, pois ao pesquisar diversas vezes por maneiras de sair do padrão de página inicial do wordpress para ter algo mais personalizado, encontrei informações esparramadas em vários posts, nenhum conteúdo objetivo ou compilado para esse devido fim, portanto resolvi criar esse tutorial, pois talvez possa ajudar outras pessoas.

Se você conhece algum tutorial que ensina esse assunto, por favor cite nos comentários, para que possamos editar esse post com mais links interessantes, dando maior completude na informação a ser passada.

Diferença entre Home e Front Page no WordPress

Quem já desenvolveu ou alterou um tema no wordpress sabe que o arquivo principal é o index.php, e que caso não houver outro arquivo mais específico, na hierarquia, o index.php será executado. Por padrão, o wordpress mostra uma listagem de posts na página inicial, porém existe também a possibilidade de exibir uma página estática, e isso é definido em Configurações > Leitura.

Quando a opção de mostrar posts recentes está marcada, o arquivo procurado pelo wordpress no seu template é o home.php, no entanto, quando a opção de página estática está marcada, o arquivo em questão é o front-page.php. Tendo isso em mente fica mais fácil implementar a página inicial personalizada. Existe uma maneira de verificação fornecida pela API do wordpress: as funções is_home() e is_front_page()

Ajustando configuração da página inicial

O primeiro passo da nossa página inicial personalizada então, é setar a configuração no wordpress. No meu caso, eu deixei a opção de página estática marcada. Sendo assim, na pasta do tema, precisamos criar/editar o arquivo front-page.php. Em seguida, definiremos um layout padrão para a página inicial, algo como isso:

Exemplo de Layout

Codificando o front-page.php

O código inicial da nossa página inicial será mais ou menos assim:

<?php get_header(); ?>
	<div id="home-content" class="content-area">
		<div class="banner"></div>
		<div class="boxes">
			<div class="thebox"></div>
			<div class="thebox"></div>
			<div class="thebox"></div>
		</div>
	</div>
<?php get_footer(); ?>

Bom, o slider de banners pode ser muito facilmente configurado através do WP Nivo Slider, portanto não colocarei aqui essa parte, pois o interessante é colocar os 3 widgets logo abaixo.

Adicionando área de widgets

Precisamos adicionar o código que informa ao WordPress as áreas dinâmicas. Edite o arquivo front-page.php, na parte das boxes com o código abaixo

<div class="boxes">
	<div class="thebox first">
	    <?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('left_box')) : else : ?>  
	        <p><strong>Widget Pronto</strong></p>  
	        <p>Essa left_box é uma área dinâmica! Adicione widget no painel do Administrador.</p>  
	    <?php endif; ?>  
	</div>
	<div class="thebox">
	    <?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('center_box')) : else : ?>  
	        <p><strong>Widget Pronto</strong></p>  
	        <p>Essa center_box é uma área dinâmica! Adicione widget no painel do Administrador.</p> 
	    <?php endif; ?>  
	</div>
	<div class="thebox">
	    <?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('right_box')) : else : ?>  
	        <p><strong>Widget Pronto</strong></p>  
	        <p>Essa right_box é uma área dinâmica! Adicione widget no painel do Administrador.</p> 
	    <?php endif; ?>  
	</div>
	<div class="clear"></div>
</div>

Agora a página inicial já está quase pronta, porém precisamos registrar as áreas dinâmicas, como você provavelmente já deve ter feito com a sidebar. Edite o arquivo functions.php adicionando o código abaixo:

if (function_exists('register_sidebar'))
{
    register_sidebar(array(  
        'name' => 'Left Box',  
        'id'   => 'left_box',  
        'description'   => 'Widget area para primeira caixa de conteúdo da página inicial',  
        'before_widget' => '<div id="%1$s" class="widget %2$s">',  
        'after_widget'  => '</div>',  
        'before_title'  => '<h4>',  
        'after_title'   => '</h4>'  
    ));  
    register_sidebar(array(  
        'name' => 'Center Box',  
        'id'   => 'center_box',  
        'description'   => 'Widget area para segunda caixa de conteúdo da página inicial',  
        'before_widget' => '<div id="%1$s" class="widget %2$s">',  
        'after_widget'  => '</div>',  
        'before_title'  => '<h4>',  
        'after_title'   => '</h4>'  
    ));  
    register_sidebar(array(  
        'name' => 'Right Box',  
        'id'   => 'right_box',  
        'description'   => 'Widget area para terceira caixa de conteúdo da página inicial',  
        'before_widget' => '<div id="%1$s" class="widget %2$s">',  
        'after_widget'  => '</div>',  
        'before_title'  => '<h4>',  
        'after_title'   => '</h4>'  
    ));  

}

Pronto, agora você pode adicionar widgets em Aparência > Widgets, como aparece na imagem ilustrativa abaixo:

widgetsEditando os estilos

Como é possível perceber, na parte de baixo da página inicial foi utilizado o plugin Flexible Posts Widget para exibir informações de alguns conteúdos na página inicial. Você pode utilizar de diversas técnicas CSS para estruturar a informação da página inicial, porém segue abaixo um pouco do código que servirá de base inicial para desenvolvimento do seu tema:

.home-content {
    width: 80%;
    margin: 0 auto;
    min-width: 1000px;
}

 .boxes {
 	width: 1000px;
 	min-height: 200px;
 	margin: 50px auto;
 }
 .thebox {
 	float: left;
	width: 300px;
	min-height: 200px;
	background: rgba(255,255,255,0.1);
	margin-left:50px;
}
.thebox.first {
	margin: 0;
}

Dica Rápida: Desafio CSS (iMasters) – Especial Cone

 

cone

Há alguns dias atrás foi lançado no iMasters um desafio de css, criar um cone usando somente uma div, no html. No artigo do desafio, o Bernard de Luna estabeleceu algumas regras, dentre elas, que o único código HTML dentro do body seria este

 <div class="cone"></div>

GITHUB

Com intuito de inaugurar/divulgar o Github da Tribo do CI nós disponibilizamos a nossa implementação do Cone CSS no GitHub, feito por mim: Sheldon Led. Vamos explicar um pouco do código.

Algumas explicações sobre o código.

Se você observar a figura acima, com um olhar mais analítico, perceberá que o cone nada mais é do que um triângulo com a base arredondada em cima de um losango com uma borda arredondada e mais escura. O código CSS está bem dividido nessas 2 partes, o “triangulo” é o .cone:after e o “losango” é o

  • Pseudo-classes: Existe um artigo bem completo no Tableless sobre Pseudo-classes. Uma pseudo-classe, ou pseudo-elemento, nada mais é do que alguns comportamentos/padrões de elementos HTML em CSS. Para o cone, utilizamos a pseudo-classe :after, que em uma interpretação a grosso modo, interpreta um elemento depois do elemento em questão, que no caso é a div da classe cone.
  • Bordas: Tanto no .cone quanto no .cone:after controlamos cada borda separadamente. Existe uma explicação legal sobre bordas em CSS no site do Maujor.
  • Transform: Novamente, existe um artigo bem detalhado e com exemplos de CSS Transform no site do Tableless. No nosso cone utilizamos o transform para rotacionar o elemento. É possível utilizar vários efeitos inclusive simultaneamente com o transform, porém como ainda não é uma especificação definida, é preciso utilizar prefixos.
  • Prefixos: Os prefixos são propriedades de CSS que funcionam especificamente para um navegador, pelo fato de ainda não ser uma especificação W3C ou por ser uma especificação em teste. No cone utilizamos os prefixos: -webkit (Chrome, Safari e Opera mais recente),  -moz (Firefox, Iceweasel), -ms (Internet Explorer), -o (Opera). Utilizamos os prefixos no css transform e border-radius.
  • Box Shadow: O box-shadow é uma propriedade do CSS3 que desenha uma sombra atrás de um elemento. Ele foi utilizado para desenhar a borda mais escura da base do cone.

Você pode ver o código, no  Github da Tribo do CI e tentar fazer sua própria implementação de exemplo, e ver abaixo (caso seu navegador estiver atualizado) nosso exemplo sendo executado.

 

 

 

 

 

 

 

 

OBS: Usei como base de conhecimento para produzir o cone, esses Exemplos de figuras geométricas em CSS.