RHOdesign Blog | Webdesign

Abaixo, falarei de um código simples em javascript muito utilizado para chamar páginas “index” diferentes, quando identificada a resolução do monitor.

Como exemplo, crie 3 páginas homes nos diferentes tamanhos, uma ajustada para 1024×768, outra para 800×600 e uma para servir de página mestra.

Salve-as como:

index.html (mestra)
index_1024x768.html (layout ajustado para 1024×768)
index_800x600.html (layout ajustado para 800×600)

Abra o código HTML da página mestra e insira este código logo abaixo do head:

<script language="JavaScript">
function resolucao_img_sk(){
if (screen.width == "800" && screen.height == "600"){
window.location.href="index_800x600.html";
}
if (screen.width == "1024" && screen.height == "768"){
window.location.href="index_1024x768.html";
}
}
resolucao_img_sk();
</script>

A partir desse código, você poderá modificar o script para abir páginas de outras resoluções. Basta adicionar mais “IFs” e criar novas páginas na resolução desejada.

Abaixo vou explicar como criar um CD auto-executável muito utilizado para apresentações em flash. É muito simples!

No primeiro frame do arquivo da animação finalizada em flash você insere o seguinte comando:

fscommand("fullscreen", true);

Salve o arquivo e publique da seguinte forma:

Clique em File > Publish Settings e na aba Formatos habilite a opção Windows Projector(.exe). Clique em Publicar.
Será criado um arquivo executável com a sua animação feita em flash.

A partir disso, para carregar automaticamente a animação quando o CD for inserido, você deverá criar uma arquivo chamado autorun.inf, com alguns códigos, e colocá-lo na raiz do cd com os seguintes dados.

Para criar o arquivo autorun.inf, que abrirá o executável do CD automaticamente, siga os passos:

1. Abra o bloco de notas do windows.
2. Escreva o seguinte código no arquivo em branco:

[Autorun]
OPEN=arquivo.exe

3. Salve o arquivo como autorun.inf

Agora, basta gravar no CD/DVD os arquivos autorun.inf e o arquivo .EXE do executável criado. Simples!

Tutorial de photoshop‘, ‘webdesign tutorials‘ e “daily art inspiration‘ são keyphrases muito utilizada nos sites de buscas.

Porém, em meio a tantos milhões de sites, é difícil fazer uma filtragem dos melhores, ou até mesmo daqueles que possueam ATUALIZAÇÕES DIÁRIAS de tutoriais, pricipalmente 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:

Esses são apenas alguns exemplos de sites da minha lista de mais de 20 sites que abrem automaticamente quando inicio meu firefox! 🙂

ACESSE: www.rhodesign.com.br

Não basta ter uma “paginazinha” na internet ou um “folhetinho” de xerox com as informações de sua empresa. Você quer um site que te dê retorno, seja financeiro ou apenas de divulgação, certo? Quer um folheto que faça as pessoas sentirem vontade de ir à sua loja, ou até acessar o seu site e fazer um pedido, certo? E já imaginou ter seu site na primeira página da Google, Yahoo!, Cadê, entre muitos outros???

Diferente de muitas agências e escritórios que “dizem que sabem”, a RHOdesign tem a real solução para essas e muitas outras questões, pois nós somos treinados e estudamos diariamente as transformações do mercado, seja online ou offline.

WEBDESIGN:
Está em busca da criação de site para sua empresa?
Precisa aumentar as vendas da sua loja? Que tal criar e-mails marketing?
Ou quem sabe um hotsite para sua banda? Ou Um site e blog pessoal?

DESIGN GRÁFICO IMPRESSO:
Você já tem cartão de visita?
Cadê o panfleto e o cartaz de divulgação da sua loja?
Que tal fazer um flyer bacana para sua festa?

Entre no site www.rhodesign.com.br e veja alguns de nossos trabalhos.

Solicite um orçamento!
Nosso diferencial é criar soluções que realmente funcionam.

Pessoal,

para vocês que estão antenados no processo de desenvolvimento web atual, utilizando AJAX, JQuery, MooTools, entre outras bibliotecas de javascript, segue um link com uma ótima seleção feita pelo site WebDesignerWall.

O link da matéria com mais de 20 efeitos, entre eles: galerias, zoom, image popup, scroll to anchor, slideShow, Carousel, Navegação com Guias[tabs], toolTips, accordion… … … é:
http://www.webdesignerwall.com/general/javascript-in-modern-web-design/

Vamos agora falar sobre alguns atalhos “secretos” do Photoshop. Pois é, os atalhos do photohop não são apenas aqueles mostrados nos cantinhos dos menus… existem muitos outros muito mais funcionais!

1. Arrastar a seleção
Com a ferramenta de seleção, arraste uma forma indefinida qualquer no documento (não solte o mouse ainda), e agora pressiona a tecla de espaço. Isso lhe permitirá arrastar a seleção indefinida enquanto estiver com o speca pressionado.

2. Navegue para direita ou esquerda no documento.
Seu documento é maior que a tela de seu computador e você quer atalhos para ir para a direita ou esquerda, sem usar o scroll lateral. O que fazer?
Pressione CTRL + Scroll do mouse para cima(direita) ou para baixo(esquerda).

3. Mude o tamanho da fonte no texto selecionado.
Selecione a palavra que você quer alterar o tamanho da fonte e pressione:
crtl + shift + > para aumentar a fonte
crtl + shift + < para diminuir a fonte

4. Aumentar e diminuir zoom com scroll do mouse
Pressione ctrl + alt + mouse scroll (“rodinha do mouse”) para cima ou para baixo.

5. Ajustar automaticamente o Zoom para 100%
Um duplo clique no botão da ferramenta de Zoom irá ajustar o zoom do documento para 100%.

6. Expandir ou Fechar TODOS os grupos de camada juntos
Para abrir ou fechar todas as pastas (de um mesmo nível), basta segurar o CTRL e clicar em qualquer ícone “triângulo” do grupo de camadas. Apertando CTRL + ALT + click em qualquer triângulo irá fechar ou abrir todas as pastas de todos os níveis.

Continua no próximo post… aguarde!

Dicas traduzidas de: http://www.webdesignerwall.com/tutorials/photoshop-secret-shortcuts/

Texto extraído de: http://www.badboy.ro/

If vertical align is a snap using tables, it can prove quite troublesome with CSS layouts. But you shouldn’t let such a small thing discourage you. I, for one, don’t like to see a perfectly valid CSS layout mingled with some tables just for this purpose. So, if you want to know how you can achieve vertical-align functionality the right way, read on.

Primeira Opção — One line vertical-align:middle

Esse é muito simples. Você inseriu um texto dentro de um container (uma div, um parágrafo, um cabeçalho… etc) e esse texto ficou automaticamente alinhado no topo, certo? Para alinhar o texto centralizado na vertical, basta dizer no CSS que a “line-height” do seu texto deve ter a mesma altura especificada para o container e colocar “vertical-align:middle” nesse texto também.

Ou seja, em outras palavras:
se o seu texto está inserido em um <p class=”texto”> que está dentro de uma <div id=”container”> que tem 100px de altura, você estipulará:
#container {… … height: 100px; …}
.texto {… line-height:100px; vertical-align:middle; … }

See a full working example.

Step 2 — Multiple lines (one line) vertical-align:bottom

An absolute positioned div inside a relative positioned one can basically be placed anywhere you want inside the parent div. So we’ll just use this setup and absolute position a div with bottom:0 within a relative positioned one. The relative positioned div inherits its height from its parent.

See a full working example.

Step 3 — Multiple lines vertical-align:middle

This must be the trickiest part of the vertical-align functionality to be achieved with CSS. If we were to just use the trick from Step2 and set the absolutely aligned div to top:50% or bottom:50%, this would align the top part of the text (or its baseline) at the middle — so its not really middle vertically aligned. We could use the actual vertical-align property but it only works for inline elements, so we should use display:table and display:table-cell for the enclosing divs.

All nice and easy but for one problem: IE — it doesn’t recognize display:table. Nevertheless that shouldn’t stop us. We’ll use this setup and achieve the desired result even though only for last-generation browsers.

So, how can we trick IE in vertically aligning the text? We’ll use its bugs against it. IE has some issues with rendering relative and absolute positioned elements. I won’t go into details on this specific bug right here as I don’t want to complicate things even more. The important thing to remember is the solution to this practical problem: positioning a relative div into an absolute one into a relative one once again. Weird, huh? Let me try and explain a bit better: we already have the relative positioned container from the last setup where we want to vertically align the text. Inside it we’ll place an absolute positioned div at top:50%, and inside this one another div relatively positioned at top:-50%. Ta da! It works even for IE.

So now, let’s combine the two solutions and create one that works on every browser. We’ll use the attributes for the modern browsers in a way that IE can’t read them (with some help from the direct child selector), and then, also add the code for IE.

See a full working example.

That’s it. Have fun working with vertical align and CSS layouts, and always remember: there’s not been yet a layout that couldn’t be coded with CSS.

Ganhe dinheiro agora! Resultados em 1 mês!