CSS2 e CSS3 - Regras de Especificidade

Quem nunca se deparou com a situação de colocar uma propriedade no CSS, que você tem certeza que é a correta e ela não funcionar?

Aí você confere, confere e confere, começa a perder a paciência e começa a adicionar classes e id's pai até o CSS funcionar na marra. Por que isto acontece?

Bom, muita gente não sabe, mas seus navegadores têm um css próprio, tem o CSS do site e ainda por cima o CSS do usuário (quase ninguém utiliza, mas existe!). Alguma hora dá conflito entre as regras existentes no CSS e levanta a questão: Como esses conflitos são resolvidos?

Aí que entram as regras de especificidade, um conjunto de regras que determinam a prioridade de aparição do CSS.

Muitos web designers / frontend engineers desconhecem estas regras e isto acarreta em muitas horas de stress e vontade de abandonar a carreira dando uma carreira =].

A ordem básica é a seguinte:

• Declarações do navegador
• Declarações normais do usuário
• Declarações normais do autor
• Declarações !important do autor
• Declarações !important do usuário

Fora isso, temos uma tabela que dita a prioridade de declarações dentro dos nossos estilos. Didaticamente eu prefiro fazer um sistema de soma. É mais simples de entender. Então vamos lá:

• Estilos do navegador - O padrão do navegador, equivale a 0,1 pts.
• Seletor Universal (*) - Equivale a 0,5 pts
• tags HTML (h1,p,span,etc) - Equivalem a 1 pt
• Classes no HTML - Equivalem a 10pt
• ID's no HTML - Equivalem a 100pt
• Estilos inline (style="color: blue;" dentro da tag html) - Equivale a 1000pt
• !important - Superior a 1000 pontos. Dentro da propriedade no CSS, superam a inline comum do html.

Exceções:

• 10 id's não superam um inline 
• uma diretiva !important dentro de um estilo inline, tende a sobrepor um !importante dentro do CSS
• Um pseudo-elemento ou pseudo-classe com !important superam um !important de uma declaração comum

Desempate: Caso ainda assim, duas declarações possuem a mesma pontuação, quem estiver aparecendo por último será demonstrado.

Agora vocês já descobriram o segredo para um CSS menos complicado, evitem o uso da diretiva !important a menos que seja necessário.

Volume Light com MR Sun no 3DS Max

Olá galera,

Hoje vou abordar um tópico diferente do que eu faço normalmente, o 3D. Nem todos sabem, mas tenho um pezinho na Computação Gráfica, aproveitem e conheçam melhor meu trabalho neste link que leva ao meu portfolio.

Sou professora suplente na SAGA em Recife, no curso de maquete eletrônica e construção de cenários, o Marquise e uma dúvida comum dos alunos sobre mental ray é: Como aplicar luz volumétrica utilizando MR Sun na cena?

Resultado do projeto que veremos hoje:

Note que as como a luz está entrando marcada na cena, a janela mais próxima tem a luz marcada mais fraca onde só bate ela e a marcação da luz fica mais pesada de acordo com as luzes que se sobrepõe com as que estão atrás.

A maneira comum que se ensina na internet a fazer volume light, em resumo é como a do excelente site de tutoriais de onde peguei a cena de estudo deles para vocês utilizarem em inglês.

Se você tentar fazer da maneira comum no MR Sun, o resultado é o abaixo:

Se você tentar adicionar na cena com MR Sun uma luz comum e colocar o volume light, o resultado é o abaixo:

Perceba que a área de volume está escura, ao invés de clara. Acontece que o MR Sun não se dá bem com esta forma de aplicar volume light na cena.

Para resolver esta questão, temos que utilizar uma técnica diferente, que apesar de ser um pouco pesada para renderizar, é ideal para nós que criamos cenários realistas e não abrimos mão do nosso sol.

A cena que utilizaremos é uma que encontrei enquanto estudava volume light (VL). Disponho a cena com as luzes já posicionadas e setadas neste link.

Nota: Perceba que o arquivo está em polegadas. Como a documentação maior do 3D Studio é em inglês, eles utilizam este sistema métrico. É importante, no momento de configurar este shader, que coloque seu projeto temporariamente em polegadas, pois é como explicarei os valores a seguir. Na aba superior vá em "Customize" --> "Units Setup" e escolha decimal inches.

Abram o arquivo no 3DS Max 2011 ou superior e lembrem-se:

Não pode haver objetos por onde a luz vai entrar. Se você tem janelas de vidro na cena, escondam as faces do vidro da janela na hora de renderizar.

As explicações que se seguem são baseadas no tutorial de Jeff Patton em inglês.

Render da cena de estudo sem volume light

Primeiro, assumo, que vocês tenham um conhecimento prévio de Mental Ray, MR Sun e 3DS Max.

Vamos aprender a aplicar um shader na câmera, o Volume Parti. Este shader é aplicado na cena inteira, mas você pode também dizer quais luzes será afetadas por ele.

Para aplicar este efeito, vá em "Rendering" --> "Render Setup" (F10) no menu superior do 3D Studio.

Clique na aba "renderer"

Desça a rolagem até quase o final

1. Em câmera shaders, na linha de volume, clique em "None"

2. Selecione "Maps", "Parti Volume"

3. Clique "OK" 

4. Abra o editor de materiais, apertando a letra "M" do teclado

5. Clique e arraste o mapa para um slot livre do editor de materiais
6. Deixe marcado "instance" e clique OK

Explicarei para que serve cada uma destas configurações abaixo

Mode: Fills Entire Volume (aplica volume à cena toda) ou Fills Only Below Lights (Aplica volume apenas da altura X para baixo). Neste caso utilizaremos a primeira opção 95% das vezes, a de volume por altura é perfeito para uma cena onde você tem, por exemplo uma neblina rasteira, fumaça ou um gelo seco na cena, onde a luz só tem volume numa altura específica.

Mantenha "Fills Entire Volume"

Scatter Color: Cor do volume. Se você coloca vermelha, o volume será vermelho e também atua na intensidade de maneira indireta. É normal colocar uma cor bem escura, quase preta. Aí, nesse caso, ele vai pegar a cor do sol. 

Clique no retângulo cinza e coloque "0,031" nos valores de R,G,B

Extinction: Controla a quantidade de luz que será absorvida ou dispersa. Quanto mais alto o valor, mais escura a cena fica de maneira geral.

Mantenha o valor padrão de "0,001"

r, g1 e g2: São os valores de dispersão. Não é meu lugar, explicar tudo sobre dispersão para vocês, mas sim, passar valores comuns para esta operação. R entre 0 e 1, G1 entre -1 e 0, G2 entre 0 e 1.

Para esta imagem, utilizei os valores de Rayleigh, r (0.50), g1 (-0,46) e g2 (0,46). Para mais referências sobre os valores de dispersão, consulte esta página (em inglês)

Non-Uniform: É a "mistura de poeira" na cena, se o volume é uniforme ou não e varia de 0 a 1, sendo 1, como se fosse realmente denso, como uma nuvem. Um valor entre 0 e 1, cria um meio termo.

Coloque "0,05" para nossa cena

Height: Determina a altura máxima da nossa VL, só é relevante caso a opção "Fills Only Below Heights" esteja marcada. Deixe a nossa em 0.

Nota: Para quem não sabe, este efeito de volume só é perceptível aos olhos quando a luz atinge um aglomerado de partículas, como poeira e é a reflexão da luz direta absorvidas nessas partículas que dão este efeito de volume na luz.

Minimun e Maximum Step Lenght: A precisão de dispersão da luz nas nossas "partículas". Quanto menores, mais lento e melhor nosso render.

Ajuste para "0,005" o valor do mínimo e "1" o valor máximo.

No GI where Direct: Esta opção diz para o Max não calcular GI onde a luz é direta, faz sentido marcar, pois, onde a luz é absorvida pelas partículas, quase não há propagação de luz indireta. Faz o render ser mais rápido, marcar.

Marque esta opção.

Por fim, Clique em "Lights". Marcar esta opção, permite que você escolha quais luzes possuirão volume light. Clique em "Add" e clique no MR Sun. Preste atenção, clique no sun, não no MR Sky.

Renderize.

Resultado Final

Perceba que você adicionar mapas em todas as opções, mas, fiz um exemplo simples para vocês entenderem.

Baixe o arquivo finalizado aqui

Mercado de trabalho para web designers em Recife

Em aproximadamente uma década de análises minhas sobre a área de trabalho e vou dar a minha visão sobre a área de web design (aka front-end) atual.

Desculpem o post bíblia, mas é importante lê-lo todo.


1- Os padrões se elevaram (não há gente qualificada)
     Recife finalmente está sendo reconhecido como potência na área de TI e seus padrões estão se igualando à São Paulo. Neste caso, os profissionais pernambucanos vacilaram e se mantiveram no nível que eu não considero bom nem como estagiário.

As faculdades da cidade têm seus cursos desatualizados, deficientes, professores não-capacitados e fora do mercado (acredito que isso provém do fato que é exigido uma formação para os professores darem aula e a maioria dos grandes profissionais, estudam por livros e materiais em inglês e não se formam, pela carência de cursos superior de qualidade). Percebeu o problema? Ou você faz cursos pontuais ou paga a faculdade, então, ou você se forma medíocre ou você fica muito bom e sem tempo posterior para faculdade.

Para resolver isto, acredito que se houvesse um treinamento pedagógico, poderia se contratar profissionais não-formados para dar aulas nas faculdades e até mudar as cadeiras. Até porque, não se contrata professores para faculdade por ter feito pedagogia, então a falta de conhecimento acadêmico para dar aulas "não" é o problema.

Até hoje, não entendo como uma cadeira de mais de 60h são piores do que cursos pontuais de 32h, 48h.

Os níveis de salários de profissionais medianos se equiparam ao sudeste (R$ 1.200 em média no Brasil TODO). A diferença Recife/Sudeste é apenas para os profissionais que se destacam, neste caso, é média de R$2.000,00 a R$2.500,00 no Recife e R$ 3.500,00 no Sudeste.


2 - O mercado de sobrinhos está em queda! SIM! finalmente em declínio.
     Os clientes cansaram de tanto re-trabalho, pagar, não receber o produto, acordos que os deixam desprotegidos, resultados ridículos, prazos não-cumpridos. Sim, eles estão dispostos a pagar mais.

3- O mercado não está mais tão prostituído
     As empresas estão cansando da rotatividade de bons profissionais, isto é prejuízo, precisam de pessoas qualificadas o tempo todo, para garantir a entrega de projetos competitivos com a concorrência e atender as exigências dos clientes.
Com isso, aumentou salário, lugares legais de trabalhar, flexibilidade, bonificações.


4- O mercado de freelancers está em alta
    Não sobrinhos, freelancers, pessoas com experiência, portfolio, fazendo nome no mercado. As empresas têm contratado freelancers para projetos específicos e preencher vagas temporárias, simplesmente porque não há profissionais disponíveis para contratação imediata.

5- Exigências do mercado
    Me orgulho em dizer que só fiquei sem emprego, quando estava sem qualificações ou doente, após me reciclar, nunca mais me faltou e procuro sempre me manter à altura do mercado futuro (pense sempre um passo à frente, estude tendências, seja o primeiro, experimente). Estas são as exigências que agora são pedidas como diferenciais, mas que na verdade, é o padrão.

• Photoshop
• HTML5 (quem sabe esse, sabe o 4, é o pensamento do contratante)
• CSS3 (quem sabe esse, sabe o "normal", é o pensamento do contratante)
• Javascript (pode ser Jquery)
• Saber utilizar algum CMS (de preferência o wordpress ou Joomla!)
• Saber inglês (motivo oculto: saber que pessoa é capaz de se reciclar com os melhores materiais do mercado)
• Falar e escrever corretamente
• Pró-ativo e dinâmico
• Auto-motivável (encontre a alegria para ir trabalhar sozinho)
• Autodidata (sabemos das deficiências do mercado. É necessário alguém que aprenda sozinho a resolver os problemas que surgirem)

Diferencial de verdade

• Noções de SEO
• Noções de  Acessibilidade e usabilidade
• Noções de  Portabilidade (experiência em layouts adaptáveis, multi plataforma, multi dispositivo)
• Phonegap ou alguma plataforma de conversão mobile
• Noções de programação (sabe pelo menos como não estragar o código e editar bobagens)
• Flash (o básico, para dar manutenções e criar banners), talvez nem faça diferença mais saber flash

Gente, é muito sério isso, chegam vagas ao meu conhecimento, pelo menos uma vez por mês. Estas vagas, perseguem não-preenchidas. Eu espalho em grupos, facebook, mas NÃO HÁ gente capacitada.

Em Recife, indico a Especializa Treinamentos (porque é a que eu conheço o curso e professor), garanto pelo menos essa.

Veja um pouco do meu portfolio em http://www.facebook.com/JenniferPayneWeb3D

Grupo Joomla Recife no Facebook

Bom gente,

Já não era sem tempo, resolvi criar o tão pedido grupo de Joomla de Recife. O grupo por enquanto só existirá no FaceBook, porque para mim é mais fácil para gerenciar, divulgar e compartilhar.

Apesar de ser o Joomla Recife e a razão pela qual escolhi este nome, é porque meu foco é no mercado pernambucano, nada impede de pessoas de outros estados participar do grupo.

Sempre que vir algum material bacana na net e eu mesma publicar conteúdo novo, postarei no grupo, além da vantagem de que há materiais postados e compartilhados por outros membros do grupo.

Este é o link para entrar no grupo.

Divulguem por aí.

Menu com Drop Down Joomla 1.5, Joomla 1.6, Joomla 1.7, Joomla 2.5

Nesta fase de transição do Joomla, é importante utilizar extensões compatíveis entre as versões do Joomla e que permita maior portabilidade futura entre projetos.

Esta extensão que vocês irão aprender hoje é perfeita, porque funciona em basicamente todos os navegadores, geralmente não dá conflito com outros javascripts, é fácil de configurar e o CSS pode ser adicionado no próprio módulo.

A extensão é a ARI Ext Menu e este é seu link de download. Claro, como todas as extensões que ensino, é free e aceitas em todos os Joomlas, exceto o 1.0.

Você pode visualizar um demo desta extensão através deste link.

Para este módulo funcionar perfeitamente, você deve ter sub-menus.

Para adicionar um sub-menu, na área administrativa, clique em Menus --> Main Menu (ou outro menu à sua escolha), clique no link que deseja tornar como sub-menu (se não houver nenhum, crie), na edição deste link, selecione do lado esquerdo Item Pai: Escolha o link que será o "pai" deste e clique em "Salvar"

Pronto! Você notará que o link que você alterou agora tem uma identação diferente e um símbolo que o liga ao seu item pai.

Instale a extensão e a acesse em Extensões --> Administrar Módulos. Ela é instalada por padrão com o nome ARI Ext Menu.

Habilite o módulo na posição desejada.

Abaixo imagem da área administrativa, onde explicarei os principais itens.

Menu Name: Qual menu que ele utilizará

Menu Direction: Direção do menu, H0rizontal ou Vertical

Hightlight current menu item: Se coloca cor diferenciada no link atual

Load ExtJS library: Deixe "yes" e só mude caso dê conflito com outro JavaScript

Auto width: Largura automatica

Animate: Se o drop será animado

Delay: Tempo de retardo para iniciar a animação do sub menu

Transition type: Tipo de transição: Fade para transparência e Slide para sair de trás do menu

Transition duration: Tempo de duração da animação

z-Index: para colocar o menu na frente de outros elementos HTML

Main menu items styles - Estilos de cores, tamanhos e fontes para o menu

Background color

Text color

Hover background color

Hover text color

Current background color

Current text color

Font size

Font weight

Text align

Text transform

Sub-menu items styles - Estilos de cores, tamanhos e fontes para o sub-menu

Use main styles (repetir estilo do menu principal?)

Background color

Text color

Hover background

Hover text color

Current background

Current text color

Font size

Font weight

Text align

Text transform

CSS Styles - Modifique o CSS do menu

Salve e teste seu módulo até alcançar o efeito desejado.

Como alterar o CSS de um site em Joomla sem utilizar o template

O que acontece com o Joomla é que muitas vezes o CSS está inserido dentro dos módulos e componentes que instalamos e muitas vezes, mesmo que a gente adicione as classes dentro de nosso template, as alterações são sobrepostas por outros CSS's.

Há um módulo gratuito chamado HD-Custom CSS que pode ser baixado neste link.

Este módulo após instalado, permite que você insira o CSS através de módulo e nisto há diversas vantagens.

• Você pode escolher em quais páginas aquele código será aplicado e mesmo se só será alterado após o login.
• Você centraliza, independente de template os códigos mais importantes para você
• Você não precisa ter acesso a ftp para buscar arquivos de dentro dos módulos e componentes
• Você pode apenas despublicar o módulo caso queira voltar ao original
• Você pode ter vários módulos do CSS abrindo em páginas diferentes

Isto te dá basicamente controle total sobre o CSS do site.

DICAS:

• Sempre coloque este módulo na última posição do seu template. Normalmente é a debug ou footer. Caso não saiba qual é, logue na área administrativa, vá em Extensões --> Administrar Templates, selecione o template desejado e clique em pré-visualização. Isto mostrará todas as posições do seu template
• Caso ainda assim o CSS não esteja sobrepondo, adicione !important no CSS.

Ex: body{

color: blue !important;

}

Até a próxima.

Novidades no Joomla 2.5

Olá amigos,

segue resumo das novidades do Joomla 2.5 (security release) que foi lançado esta semana.

Traduzi os trechos mais importantes do site oficial para vocês. Segue link para texto completo e original (em inglês).

http://community.joomla.org/blogs/community/1533-new-features-in-joomla-25.html

Nova Função de Pesquisa

Agora o recurso de pesquisas vem com auto-complete e stemming - Stemming é um recurso que busca a raiz da palavra escrita e facilitará nas buscas de termos que não sejam em inglês.

Novas Bases de Dados (Em andamento)

Joomla dá suporte a MySQL e MS SQL e dará também a PostgreSQL, Oracle, SQLite e PDO.

Notificação de Update

O Joomla poderá ser atualizado através de um clique no painel de controle que também acusará se precisa ou não fazer o update. Os desenvolvedores de extensões também poderão oferecer este benefício.

Botão de correção de Base de Dados

Verifica se sua base de dados está atualizada e oferece um botão para corrigir.

Captcha por padrão

Os formulários Joomla virão com captcha de segurança.

Linkar novos menus com módulo

Antes, toda vez que você criava um menu, um módulo era criado automaticamente. Agora você pode escolher se o módulo será criado ou não.

Padronização de layouts para artigos e blogs

Você pode definir imagens padrão para textos introdutórios e textos completos, além de 3 links. Esta mudança ajudará principalmente quem utiliza o Joomla como sistema de notícias.

Escolher se os administradores irão receber e-mail quando um usuário se cadastrar.

Nota em um item de menu

Na versão 1.7 é possível adicionar um comentário sobre o porque você instalou o módulo e sua função/configuração. Agora é possível fazer isto também com itens de menus.

Filtro de Texto personalizado

Você pode dizer quais tags cada grupo de acesso pode ter, facilitando permissões na hora de escrever tags HTML como iframe, por exemplo.

Maior flexibilidade ao filtrar por categoria no Administrador de Artigos.

Gerenciador para sobrepor idiomas

Facilita na hora de traduzir apenas determinados pontos no Joomla, como tool tips.

Observações sobre usuários

Funciona como o Nota em um item de menu, mas para usuários.

Ordem de Newsfeed flexível.

Opção de imagens para site offline

Antigamente uma logo do Joomla era mostrada automaticamente. Hoje, você pode "upar" a sua imagem.

Colocar site como offline após instalação automaticamente

Melhor performance na edição de menu, que só será carregado quando você precisar editar a página.

Status no backend melhorado.

Filtro de grupo adicionado no módulo "Quem está online".

Checagem de suporte nativo a zip na instalação.

Texto do label do Syndicate Feeds mais flexível.

Meta tags alternativas para sites com múltiplos idiomas.

Itens de menu agora podem ter o mesmo apelido em sites com idiomas múltiplos.

Melhorias no SEO: novo plugin languagecode

Este plugin permite que você diga qual o idioma do seu site para mecânismos de pesquisa.

O Plugin de debug agora com formatação.

Autoloader para o Joomla

Os desenvolvedores não precisam se preocupar onde vão colocar seus arquivos ou classes.