Sobre Ronaldo Junior

É possível usar condições no CSS?

Bem amigos, faz MUITO tempo que não escrevo aqui, mas hoje é feriado e nada melhor que abrir o Sublime para brincar com HTML e CSS não é mesmo?

O problema de hoje me foi apresentado pelo amigo Aldiran.
Ele precisava criar um menu com as seguintes condições:

  • O menu tem duas áreas, uma para um botão de pergunta e outra para uma caixa de pesquisa.
  • Essas duas áreas ficam uma do lado da outra.
  • Quando o botão de pergunta existir na tela, a caixa de pesquisa deve ficar ao lado dela com o background cinza.
  • Quando o botão de pergunta não existir na tela, a caixa de pesquisa deve ocupar 90% da largura da tela, ficar centralizada e receber uma borda vermelha.

Vamos ver isso melhor abaixo?

Esse é o menu completo, com as duas áreas:

menu com duas areas

Nesse caso, podemos usar algumas regras CSS que funcionam de forma parecida com um IF usado em programação.

Vamos lá.

Primeiro vamos criar uma área para o menu (#menu) e a área onde colocaremos a caixa de pesquisa (#cx-pesquisa).

O código deve ficar assim:

Feito isso, vamos criar alguns estilos básicos para organizar tudo. Eu vou usar somente o necessário para que os elementos fiquem em seus devidos lugares, não vou usar estilos para colorir ou ‘enfeitar’ o que veremos a seguir.

A primeira coisa é definir os estilos do #menu para que ele mantenha seus filhos #cx-pergunta e #cx-pesquisa lado a lado. Então vamos usar o ‘display: flex’.

Agora precisamos prestar atenção no que estamos fazendo. Primeiro vamos trabalhar os atributos padrão da nossa caixa de pesquisa, pois é ela que vai mudar quando a caixa de pergunta não existir. Portanto, vamos definir a largura dela como 90% e o margin como ‘margin:0 auto’, dessa forma, ela ficará centralizada naturalmente.

Uma coisa importante também, é definir o ‘display: flex’ do elemento #cx-pesquisa para que seus filhos, input de pesquisa (#input-pesquisa) e botão de pesquisa (#pesquisa), fiquem lado a lado.

Agora vamos definir a largura do input (#input-pesquisa) em 100% para que ele acompanhe a largura do pai dele (#cx-pesquisa).

Pronto, se você fez isso tudo deve estar com esse código:

E seu resultado no Browser deve ser esse:

Se você chegou até aqui, tudo vai ficar mais fácil agora.

Nós precisamos criar um botão de perguntas dentro da área de perguntas (#cx-pergunta) e definir a largura da área de perguntas como 30%. Eu vou usar 30%, mas você pode usar a largura que achar melhor pro seu projeto.

Então, adicionando a área de perguntas (#cx-pergunta) com o botão de perguntas (#pergunta) o código fica assim:

Agora vamos criar os estilos. Lembrando que vamos definir a largura da #cx-pergunta como 30%.

E agora o macete, o IF no CSS.

Como nós definimos a largura da #cx-pergunta como 30% , vamos criar um IF para que a #cx-pesquisa tenha 70% toda vez que as duas estiverem juntas dentro do #menu e para que ela não tente ficar centralizada, nós vamos substituir o ‘margin: 0 auto’ por ‘margin: 0 0’ e vamos mudar a cor da borda também.

Nós faremos isso usando um sinal + entre os dois elementos no CSS.
Dessa forma, toda vez que #cx-pergunta for um elemento irmão de #cx-pesquisa as novas regras vão se aplicar à #cx-pesquisa.

O código é esse:

Bem simples né?

Agora, quando você tiver a área de pergunta e a área de pesquisa dentro do menu, elas vão ficar lado a lado usando um IF no css.

O código final completo deve ser esse:

E o resultado final com as duas situações no Browser:

COM O BOTAO DE PERGUNTA:

SEM O BOTAO DE PERGUNTA:

Sep.26

Debug rápido com CSS

Essa dica vai te ajudar a enxergar os limites de cada elemento do seu projeto de maneira rápida e eficaz.

Tudo que você precisa é de três linhas de código:

*{
background-color:rgba(0,255,0,0.1);
}

Assim você seleciona cada elemento da página e dá a cada um deles um fundo ligeiramente mais escuro com ajuda do seletor *

Elementos dentro de outros elementos ficarão com o fundo cada vez mais escuro. Esse método ajuda muito quando precisamos saber como estão o margin e padding dos elementos.

Então, três divs dentro umas das outras devem aparecer assim:

div-css-exemplo

Gostou? Deixa um Like e compartilha com os amigos!

Sep.05

Borda dupla com CSS

Falai pessoal. Hoje vamos fazer uma borda dupla usando somente CSS.

Você vai precisar criar um link dentro de um elemento que pode ser uma Div, nesse caso a classe da Div é “testeBordaDupla”:

<div class="testeBordaDupla"><a href="#">Sou um link com borda dupla.</a></div>

Depois de criar o Html, você vai atribuir ao link dentro da Div algumas propriedades: Cor de fundo, Espaçamento interno de 10px, Borda de 5px e Display Block.

.testeBordaDupla a{
background:#fff;
padding: 10px;
border: 5px solid green;
margin: 0px;
display: block;
}

Feito isso, crie os estilos da Div que contém o link, coloque uma Borda de 5px, defina a largura máxima, a altura minima e para que ela fique centralizada (se você quiser) deixe a margem como ‘0 auto’.

.testeBordaDupla{
border: 5px solid red;
max-width: 250px;
min-height: 40px;
margin: 0 auto;
}

O código CSS completo fica assim:

.testeBordaDupla a{
background:#fff;
padding: 10px;
border: 5px solid green;
margin: 0px;
display: block;
}
.testeBordaDupla{
border: 5px solid red;
max-width: 250px;
min-height: 40px;
margin: 0 auto;
}

E pronto, ta ai seu botão com borda dupla.

 

Performance e Velocidade

Bom dia, boa tarde e boa noite.

Hoje vamos falar sobre um assunto importante, mas faremos de maneira rápida, pois existe um programa muito bom sobre isso no site do JovemNerd que você pode ouvir para aprender mais.

A velocidade de carregamento do site é importante tanto para seu posicionamento em buscadores (Google) quanto para experiência dos seus usuários.

  1. Para os usuários, é frustrante esperar um site carregar por muito tempo e geralmente, quando demora mais de 3 segundos o usuário abandona seus site.
  2. Para o Google, não é interessante apresentar aos seus usuários um site que provavelmente eles irão abandonar.

Código:

Minificar o código ou Minify code.
Essa é a prática de diminuir os arquivos Javascript e CSS, dessa forma somente um arquivo seria carregado gerando um acesso mais rápido. Fazendo isso, se você tiver 3 arquivos Javascript e 4 de CSS, você conseguiria reduzir para 1 Javascript e 1 CSS. Se você usar um CMS como WordPress e Joomla, existem componentes e Widgets que fazem isso automaticamente.

Compressão GZIP:

No painel de controle de alguns CMS’s você pode habilitar esta funcionalidade. A compressão GZIP faz que a página seja carregada mais rapidamente pois ela será comprimida antes de chegar ao navegador. É importante acompanhar o desempenho do servidor para ver se realmente está compensando o usar o GZIP.

Imagens:

Elas são importantes para o site e otimizá-las pode reduzir muito o tempo de carregamento das páginas. Em alguns casos podemos compactar imagens em até 60% sem perder qualidade. Duas ferramentas online para fazer esse serviço são o TinyPNG e o TinyJPG, eles limpam o ‘lixo’ das imagens e compactam.

Dica:
Você pode definir largura e altura das imagens no HTML, mas isso não quer dizer que uma imagem grande vai ficar pequena de verdade, por exemplo: Uma imagem de 400 X 400px em 20 X 20px. O tamanho em KBs será o mesmo.
Para melhorar o carregamento das imagens, já as deixe no tamanho que serão utilizadas.

Ferramentas online para comprimir imagens:

  1. https://tinypng.com/
  2. http://www.jpegmini.com/main/shrink_photo?test_cookie=1
  3. https://kraken.io/web-interface

WordPress:

Se o seu site foi feito em WP, temos algumas opções de automatização das otimizações citadas cima.
Dois plug-ins que vão nos ajudar:

  1. https://wordpress.org/plugins/tiny-compress-images/
  2. https://br.wordpress.org/plugins/autoptimize/

Links importantes:

NerdTech03 – Perfomance e Velocidade

Alura – Site com cursos na área de otimização

Corrigindo o Erro no MailAlert do Prestashop: Duplicate column name ‘id_lang’ – 2 Soluções.

E ai pessoal? Beleza?

Hoje vamos resolver esse problema que surge no módulo MailAlert do Prestashop.

O erro aparece quando você tenta atualizar o módulo MailAlert, a seguinte mensagem aparece na tela.

[PrestaShopDatabaseException]

Duplicate column name ‘id_lang’

1° Solução (eu testei)

Você precisa procurar o arquivo de atualização do Módulo que fica em ‘modules/mailalerts/upgrade/install-2.5.php’.

ALTER TABLE 'ps_mailalert_customer_oos'
ADD 'id_lang' INT( 10 ) UNSIGNED NOT NULL ,
DROP PRIMARY KEY ,
ADD PRIMARY KEY ('id_customer', 'customer_email', 'id_product', 'id_product_attribute', 'id_shop')

Quando encontrar o arquivo ‘install-2.5.php’, remova a linha:

"ADD 'id_lang' INT( 10 ) UNSIGNED NOT NULL , "

Salve o arquivo e a partir de agora você já consegue atualizar o Módulo MailAlert.

Obs.: Em alguns casos o módulo pode apresentar um segundo erro após essa modificação, dizendo que na atualização ele não encontra o campo ‘id_shop’ no seu banco de dados na tabela do MailAlert (mailalert_customer_oos).

Você vai precisar criar o campo ‘id_shop’ na tabela ‘mailalert_customer_oos’, ela deverá ser configurado como ‘INT(10) UNSIGNED NOT NULL’.

2° Solução (não testei)

Alguns amigos desenvolvedores, resolveram esse problema fazendo o seguinte:

Você precisa procurar o arquivo de atualização do Módulo que fica em ‘modules/mailalerts/upgrade/install-2.5.php’.

ALTER TABLE 'ps_mailalert_customer_oos'
ADD 'id_lang' INT( 10 ) UNSIGNED NOT NULL ,
DROP PRIMARY KEY ,
ADD PRIMARY KEY ('id_customer', 'customer_email', 'id_product', 'id_product_attribute', 'id_shop')

Quando encontrar o arquivo ‘install-2.5.php’, modifique a linha:

ADD 'id_lang' INT( 10 ) UNSIGNED NOT NULL ,

Para:

ADD 'id_shop' INT( 10 ) UNSIGNED NOT NULL ,

Salve o arquivo e a partir de agora você já consegue atualizar o Módulo MailAlert.

Espero ter ajudado.

Compartilhe e qualquer dúvida deixe um comentário.

Ilustrando as internets: saiba mais sobre essa tendência

Falai pessoal, beleza?

As ilustrações estão tomando conta da internet desde meados de 2015. Designers estão criando websites ilustrados de todas as formas, desde grandes ilustrações digitais até simples traços feitos à mão. Essa tendência só irá aumentar nos próximos meses, pois ilustrações ajudam muito a aumentar a sensação de design personalizado (mesmo quando o design não é).

Aqui vão algumas dicas de como usar ilustrações no seu design.

ILUSTRAÇÕES PARA SITES AULA 1

Ilustrações são uma forma versátil de criar um design personalizado. Desde imagens feitas à mão, elementos, letras, tudo que envolva uma imagem totalmente ilustrada ou simplesmente um rascunho já deixa o site com um layout único. Essa é uma das razões da popularidade das ilustrações.

concept

Mas existem muitas outras razões para os designers embarcarem nessa tendência:

  • Ilustrações permitem que os usuários se familiarizem com sua proposta, pois seu site não utiliza fotos de pessoas reais.
  • Existem detalhes que só podem ser atingidos através de um desenho.
  • Ilustrações conseguem juntar realidade e imaginação e criar um design extraordinário.
  • Personalizar fica mais fácil quando você está criando os elementos de arte.
  • Ilustrações são geralmente coloridas e isso já te coloca na tendência de sites grandes e chamativos.
  • Essa técnica é útil mesmo quando você não é um ilustrador graças à kits de designs que podem ser comprados e vem com muita coisa para ser usada em seu projeto.
  • Ilustrações podem assumir muitas variações de estilos, desde rascunhos até imagens mais elaboradas geradas em programas feitos para artistas digitais.

Continue reading “Ilustrando as internets: saiba mais sobre essa tendência” »

Redirecionar a Url do site com ou sem ‘www’ usando o .htaccess

Então você precisa que seu site seja acessado com ou sem o ‘www’?

Se você pensa que não precisa, pense de novo, pois não fazer isto leva os buscadores a considerar o site como dois lugares diferentes e isso pode gerar problemas.

O jeito mais rápido de resolver isso é fazer o redirecionamento para uma das opções. Na verdade não importa se usamos ou não o www, mas você precisa escolher.

Para quem usa servidor com Apache é possível usar o arquivo .htaccess para fazer estes redirecionamentos. Este arquivo fica no diretório raiz do servidor e você pode editá-lo com seu bloco de notas.

Os códigos são esses (lembrem de adicionar seu domínio):

Redirecionar de www a sem www

RewriteEngine On
RewriteCond %{HTTP_HOST} ^www.(.*) [NC] RewriteRule ^(.*) http://%1/$1 [R=301,L]

Redirecionar de sem www a com www

RewriteEngine On
RewriteCond %{HTTP_HOST} ^dominio.com
RewriteRule ^ http://www.dominio.com%{REQUEST_URI} [L,R=301]

Caso você use hospedagem Windows onde não há htaccess, vá até a página default.asp existente na raiz do seu site e coloque a seguinte instrução:

<% URL = Request.ServerVariables("SERVER_NAME") Select Case URL Case "nomedosite.com.br" Response.Redirect ("http://www.nomedosite.com.br/default.asp") End Select %>

Menu do Bootstrap não abre no Iphone. Como consertar – Atualizado

Então você resolveu usar o Bootstrap, mas descobriu que o menu no celular não abre.

Sem muitos rodeios, vamos direto ao que interessa.

O problema está nesse trecho de código do menu:

<a type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-ex-collapse">

Explicação:
Acontece que o Safari precisa que o link do botão tenha um ‘href’ para funcionar.

Então a solução é bem simples, insira um ‘href’ com o mesmo valor do ‘data-target’ e pronto, está resolvido.

Então a solução é bem simples, insira um ‘href’ com um # e pronto, está resolvido.

O código deverá ficar assim:

<a href="#" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-ex-collapse">

Agora seu menu voltou a funcionar e você já pode compartilhar esse post com os amigos desenvolvedores.

Taxa de Rejeição, como entender – Parte 1

E ai pessoal, beleza?

Eu ia fazer um único post sobre o assunto, mas infelizmente o texto ficou grande e não quero jogar muita informação para vocês absorverem. Então, hoje a gente vai tratar de uma parte importante sobre as Taxas de Rejeição: Como entender as taxas e identificar se elas são ruins.

Semana que vem vou postar a segunda parte mostrando como utilizar isso a seu favor.

Continue reading “Taxa de Rejeição, como entender – Parte 1” »