RHOdesign

Dicas para manter o ambiente de trabalho limpo e organizado

Hoje, especialmente considerando que somos uma nação que trabalha entre a COVID 19, criar e manter ambientes de trabalho limpos e saudáveis ​​e seguros nunca foi tão importante.

A limpeza e desinfecção das instalações do local de trabalho constituem os dois principais tipos de trabalho de manutenção necessários para apoiar locais de trabalho seguros e saudáveis.

Onde a limpeza ajuda a remover toda a sujeira, fuligem, poeira e detritos, a desinfecção dos locais de trabalho é necessária para matar 99,9999% dos vírus e germes, reduzindo o risco de contaminação cruzada de departamentos e superfícies. Continue lendo “Dicas para manter o ambiente de trabalho limpo e organizado

Como começar a fazer anúncios nas redes sociais: Guia básico para iniciantes

Todo mundo já ouviu pelo menos uma vez a frase “a propaganda é a alma do negócio”. Além de ser muito famosa, ela também é uma das máximas dentro do mundo dos negócios. Afinal, de nada adianta ter um produto de qualidade se ele não tem alcance ao público. Sabendo disso, os anúncios nas redes sociais têm se tornado cada vez mais procurados.

Tendo em mente que vivemos na era digital, torna-se evidente que se valer dela para meios publicitários é não apenas uma dica, mas uma necessidade. Sendo assim, separamos aqui técnicas básicas para quem está ingressando no meio e deseja aprender sobre o ramo. Confira abaixo! Continue lendo “Como começar a fazer anúncios nas redes sociais: Guia básico para iniciantes”

Como fazer marketing digital para lojas de roupas (dicas rápidas)

Estratégia de Marketing Digital para Lojas de Roupas:

Atualmente, tudo acontece de forma muito dinâmica, ainda mais levando em consideração o avanço cada vez maior da tecnologia e da internet.

Por conta disso, ter uma loja virtual pode ser uma das melhores decisões para o seu caso em específico. Tenha sempre em mente que muitas vezes uma pessoa não consegue ir até uma loja física para comprar o que precisa, e nesse momento um e-commerce pode fazer toda a diferença. Continue lendo “Como fazer marketing digital para lojas de roupas (dicas rápidas)”

Como postar no Instagram pelo computador? Nova ferramenta Online do Facebook!

O Estúdio de Criação do Instagram, feito pelo próprio Facebook, é uma ferramenta de edição e postagem que funciona online, e pode ser acessada de qualquer computador ou laptop, onde podemos criar, publicar e medir resultados dos posts no Instagram.

Para você que gosta de editar as fotos no Photoshop ou fazer montagens no computador, agora ficou muito mais fácil publicar! Não precisa mais ter aquele trabalho todo de salvar “na nuvem” ou enviar as fotos para o email ou whatsapp, para depois baixar no telefone…

Para utilizar a ferramenta no computador, não precisa instalar nenhum programa. Continue lendo “Como postar no Instagram pelo computador? Nova ferramenta Online do Facebook!”

Negócio com marca registrada: entenda o passo a passo para registrar a marca do seu negócio

Registrar a sua marca é algo fundamental para proteger o seu negócio. Não deixe de registra-la, pois você pode se prejudicar ao não fazer o registro da sua empresa.

Entenda como fazer o registro e fuja desses futuros problemas que podem causar dor de cabeça. Continue lendo “Negócio com marca registrada: entenda o passo a passo para registrar a marca do seu negócio”

Cansou? Saiba como mudar de profissão em qualquer idade

Em determinada momento da vida você pensa: quero mudar de profissão! E agora? Como mudar de profissão e dar certo em uma nova carreira, assim, do zero?

Essa vontade de mudar de carreira pode surgir a qualquer instante da carreira profissional, seja uma carreira profissional de sucesso ou não, pois basta você perceber que não faz mais sentido continuar da forma que está.

Porém, na maioria dos casos, existe um elemento forte que faz com que muitos não sigam com a ideia de mudança e se tornem infelizes ou acomodados: o receio de mudar de profissão e dar certo.

“Atualmente, há um exagero de padrões: você precisa ganhar bem, ser conhecido, ser realizado”, diz a filósofa Bia Machado, professora da Casa do Saber, de São Paulo. “Quem não se enquadra fica desnorteado.” A saída, diz Bia, é fazer um processo de autoconhecimento e pensar a carreira no longo prazo. A pergunta a ser respondida é: “O que é bom para mim e só para mim?”.

Contudo, é preciso ter coragem para mudar de profissão. Será que seguir esse desejo de mudar e recomeçar em outra carreira não é arriscado demais? Continue lendo “Cansou? Saiba como mudar de profissão em qualquer idade”

Sites de Tutoriais de Photoshop, Webdesign e Inspirações Diárias

Tutorial de photoshop“, “webdesign tutorials” e “daily art inspiration” são palavras-chave muito utilizada nos sites de buscas.

Em meio a tantos milhões de sites, é difícil fazer uma filtragem dos melhores, ou até mesmo daqueles que possuem ATUALIZAÇÕES DIÁRIAS de tutoriais, principalmente aqueles que são gratuitos.

Abaixo segue uma lista dos Sites de Tutoriais e Inspiração que acampanho diariamente em busca de novidades e aperfeiçoamento profissional:

Lista de Sites de Art, CSS e Flash Inspiration:

Você gosta de algum outro site? Diga qual nos comentários…

Tutorial: Como Criar e Inserir Patterns no Photoshop

Como Montar Seu Negócio Online e Ganhar Dinheiro na Internet

Como criar Patterns no Photoshop?

As Custom Patterns no Photoshop são pequenas imagens que são repetidas infinitas vezes, inseridas lado a lado automaticamente, para formar aqueles fundos simétricos (background patterns) que utilizamos nos fundos dos documentos criados.

Neste artigo, vou ensinar-lhes passo a passo a criar padrão no Photoshop, fazer um custom photoshop pattern simples, que servirá como ponto de partida para os seus próprios patterns (fundos simétricos personalizados).

Essa matéria tutorial está dividida em 3 partes:

Então, vamos começar com as instruções passo-a-passo.


Ex.: Criando um Photoshop Pattern para fundo listrado cinza (6 passos):

1. Crie um novo arquivo no photoshop  com 3 x 3 pixels e 72 pixels/inch,  com fundo transparente e em RGB.

Passo 1 p/ criar Patterns Photoshop = Criando um novo arquivo de fundo

Continue lendo “Tutorial: Como Criar e Inserir Patterns no Photoshop”

Janela Modal com jQuery Lightbox para HTML, Video ou IMG

» Explicação retirada do Blog do Maujor (Vale acompanhar!)

Tutorial: técnica para criar uma janela modal com jQuery.

O script desse efeito, seleciona todos os elementos a (links) cujo atributo name tenha sido definido com valor “modal” e mostra em uma janela modal(estilo lightbox) o conteúdo do DIV cujo id tenha sido definido no atributo href do link. jQuery realmente simplifica e torna fácil as coisas. Dê uma olhada nos exemplos que eu desenvolvi para demonstrar a técnica. Eles me parecem bem interessantes.

btnDemonstracao Download

Não sabe o que é uma janela modal lightbox?

Explico: sabe quando entramos em algum site e abre automaticamente uma “janelinha” por cima do conteúdo, as vezes com um texto simples, outras vezes com um formulário, outras com uma chamada ou um banner de desconto, ou alguma promoção? Então, essa janelinha que abre é uma janela modal, também chamada de lightbox.

Caso você não saiba o que é uma janela modal, você pode visualizá-la na página de demonstração acima.

O autor usa no seu website o facebox (inspirado no facebook). Outros, tais como, lightbox, thickbox, multibox, litebox…… e muitos outros destinam-se a obter a janela modal, cada um deles com suas funcionalidades particulares.

Vamos ao nosso exemplo. Eu mostrarei como criar uma janela modal para apresentar o conteúdo do div cujo id é definido no atributo href do link, conforme dito anteriomente.

Os objetivos são :

  • Procurar em todo o documento o(s) elemento(s) a (link) com o atributo name="modal"e a ele(s) atribuir o evento click para disparar a ação de mostrar, em uma janela modal, o conteúdo do div cujo id é definido no atributo href do link.
  • Criar uma máscara que preencha toda a tela.
  • Criar uma janela modal que seja simples e fácil de modificar.

1. Marcação HTML e atributos do elemento a

<!-- #dialog é o id do DIV definido como mostrado a seguir  -->
<a href="#dialog" name="modal">Janela Modal Simples</a>

<div id="boxes">

<!-- #personalize sua janela modal aqui -->

<div id="dialog">
<b>Teste de Janela Modal</b>

<!-- Botão para fechar a janela tem -->
<a href="#">Fechar [X]</a><br /><br>Janela Modal Simples<br />  <br>Aqui vai o conteúdo da sua Janela Modal Simples.<br></div>

<!-- Não remova o div#mask, pois ele é necessário para preencher toda a janela -->
<div id="mask"></div>
</div>

2. CSS

<style>/* O z-index do div#mask deve ser menor que do div#boxes e do div.window */
#mask {position:absolute;
z-index:9000;  
background-color:#000; 
display:none;
}

#boxes .window {
position:absolute;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}

/* Personalize a janela modal aqui. Você pode adicionar uma imagem de fundo. */
#boxes #dialog {
width:375px;
height:203px;
</style>
}
/* posiciona o link para fechar a janela */
.close {
display:block; 
text-align:right;
}  
</style>

3. JavaScript

<script type="text/javascript">
$(document).ready(function() {

//seleciona os elementos a com atributo name="modal"
$('a[name=modal]').click(function(e) {
//cancela o comportamento padrão do link
e.preventDefault();

//armazena o atributo href do link
var id = $(this).attr('href');

//armazena a largura e a altura da tela
var maskHeight = $(document).height();
var maskWidth = $(window).width();

//Define largura e altura do div#mask iguais ás dimensões da tela
$('#mask').css({'width':maskWidth,'height':maskHeight});

//efeito de transição
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);

//armazena a largura e a altura da janela
var winH = $(window).height();
var winW = $(window).width();
//centraliza na tela a janela popup
$(id).css('top',  winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//efeito de transição
$(id).fadeIn(2000);
});

//se o botãoo fechar for clicado
$('.window .close').click(function (e) {
//cancela o comportamento padrão do link
e.preventDefault();
$('#mask, .window').hide();
});

//se div#mask for clicado
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>

Os códigos são diretos e de fácil entendimento. Não se esqueça de linkar para a biblioteca jQuery ao documento.

btnDemonstracao Download

4. Conclusão

É isso, e somente isso, que você precisa saber para criar uma janela modal simples. Neste tutorial eu ensinei como apresentar o conteúdo de um div dentro de uma janela modal. Você pode aplicar os conceitos aqui mostrados para criar o efeito de mostrar uma galeria de imagens dentro de um iframe.

Para aqueles que estão em busca de uma janela modal totalmente personalizável, esta técnica que eu mostrei é perfeita. Dúvidas e contribuições? Poste nos comentários. Obrigado por ler.

Créditos: Author: Kevin Liew | Tradução: Maujor
URL do artigo original em inglês: https://www.queness.com/post/77/simple-jquery-modal-window-tutorial

5. Mais Efeitos Adicionais Abaixo


Modal centralizado na vertical e horizontal

Olá galera. Verifiquei uma coisa chatinha nesse script jquery, é que se a pagina tiver barra de rolagem e o link estiver na parte inferior da pagina. Eu tinha resolvido isso trocando o atributo position da div #boxes de absolute para fixed. Funcionou perfeitamente no Firefox e outros navegadores de compilação similar, porém no Internet Explorer ainda assim apresentava erro na aparição da janela modal. Seguindo o conselho Fernando e do Adriano Mota, adaptei o script para que acontecesse o seguinte.
Quando clicado no link, irá aparecer na tela a janela modal centralizada verticalmente e horizontalmente, idependente do navegador e independente da posição do link na página, quando a janela modal estiver aberta e você rolar a pagina para baixo, ela permanecerá em vista acompanhando a rolagem da página, e ao clicar fora da janela modal ou no botão fechar dela, um efeito fadeOut acontecerá.

O script completo ficou assim:

$(document).ready(function() {$(‘a[name=modal]’).click(function(e) {e.preventDefault();var id = $(this).attr(‘href’);var maskHeight = $(document).height();var maskWidth = $(window).width();$(‘#mask’).css({‘width’:maskWidth,’height’:maskHeight});$(‘#mask’).fadeIn(1);$(‘#mask’).fadeTo(“slow”,0.5);var left = 0;var top = 0;var winH = $(window).height();var winW = $(window).width();var dialogHeight = $(“#dialog”).height();var dialogWidth = $(“#dialog”).width();if ($.browser.msie) {left = document.body.scrollLeft || document.documentElement.scrollLeft;top = document.body.scrollTop || document.documentElement.scrollTop;} else {left = window.pageXOffset;top = window.pageYOffset;}var topW = top + winH/2- dialogHeight/2;var leftW = left + winW/2- dialogWidth/2;$(id).css(‘top’, topW);$(id).css(‘left’, leftW);$(id).fadeIn(1000); });$(‘.window .close’).click(function(e){e.preventDefault();$(‘#mask’).fadeOut(1000);$(‘.window’).fadeOut(1000);});$(‘#mask’).click(function(){$(this).fadeOut(1000);$(‘.window’).fadeOut(1000);});});

Lembrando que na folha de estilo css você deve alterar a div #boxes .window, para o seguinte:

#boxes .window {
position:fixed;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}

E a div #boxes .dialog , e indico controlar o tamanho da janela modal nesta div, com os atributos

#boxes #dialog {
width:375px;
height:203px;
padding:10px;
background-color:#ffffff;
}

Em Width e Height você controlará o tamanho, indico usarem porcentagem.


Como abrir janela lightbox ao entrar na página do site

Código para iniciar a página sem o uso de um botão, carregando a modal ao entrar na página:

function openModal(id) {

//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();

//Set heigth and width to mask to fill up the whole screen
$(‘#mask’).css({‘width’:maskWidth,’height’:maskHeight});

//transition effect
$(‘#mask’).fadeIn(1000);
$(‘#mask’).fadeTo(“slow”, 0.8);

//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();

//Set the popup window to center
$(id).css(‘top’, winH / 2 – $(id).height() / 2);
$(id).css(‘left’, winW / 2 – $(id).width() / 2);

//transition effect
$(id).fadeIn(2000);

$(‘.window .modalClose’).click(function (e) {
e.preventDefault();

$(‘#mask’).hide();
$(‘.window’).hide();
});

$(‘#mask’).click(function () {
$(this).hide();
$(‘.window’).hide();
});

}

$(document).ready(function() {

$(‘a[name=modal]’).click(function(e) {
//Cancel the link behavior
e.preventDefault();
openModal($(this).attr(‘href’));
});

openModal(‘#dialog’);

});

Acompanhar a tela se a pessoa mexer no scroll:

Mudar a div para:

#boxes .window {
position:fixed;
bottom: 0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}