Salve leitores (se vcs existirem de fato).
Bom, vai ser rápido…então, amanhã tem apresentação do primeiro Sprint do departamento de Pesquisa & Desnvolvimento do setor de Tecnologia da Informação da empresa a qual eu trabalho.
Vou apresentar a minha historia: Desenvolver a marca do projeto, pra tanto eu fiz uma apresentação de slides e postei no SlideShare…
Olá!
Se vc é um web designer/developer/usuário avançado que se preze, com certeza usa o firefox como seu navegador padrão né? Se não é bom você começar a usa-lo, pois além de ser um soft livre, ele ainda trabalha com sistema de extenções: Mais funcionalidades interessantes (ou não) podem ser adicionadas a ele.
Só pra constar: hoje ele ta na versão 3.0.8 .
Uma bela extenção pra firefox que eu uso aqui:
Ela permite dentre várias opções alterar o css online (sem salvar) e local (permite save), checagem de formulários, mas o que eu achei bem loko foi o menu tools – que valida css/html/feeds/links etc etc e etccc
Abs a todos os que lêm isso aqui (tem alguem ae?!?!?!)
Bjomeliga!
;D…
Olá,
Como todo designer que se preze, eu gosto das coisas bonitas. Não importa o significado: A coisa tem que ser BONITA! Porém ultimamente tenho gostado ainda mais do BONITO com SIGNIFICADO – Design de verdade.
Esse post vem falar exatamente disso…vamo falar de semântica em códigos HTML.
Imagem retirada do site wordpress, que significa exatamente isso. Fala da forma em que é encarada a programação, e no nosso caso: Marcação HTML
Mas o que é semântica??? :S
No que corresponde ao nosso caso é:
“O estudo das significações das palavras é um assunto na língua portuguesa exclusivo da Semântica.”
Por Sabrina Vilarinho
Graduada em Letras
Equipe Brasil Escola
Ou seja: semântica em html é você marcar o conteúdo com a tag que mais se aproxima de seu significado.
Cada tag HTML tem um propósito, às vezes, bem específicos. Pesquisando sobre isso achei uma lista no w3schools bemm interessante, saca só!
HTML 4.01 / XHTML 1.0 Reference – Ordered by Function
É isso ae, bons estudos e tenhamos boas práticas ao marcar o nosso conteúdo!
Olá homo sapiens!!
To muito empolgado em aprender css, aqui na nova empresa to usando bastante pra fazer algumas coisas legais e tal.
A pouco tempo atras, conheci essa técnica muito interessante Image Replacement, consiste em trocar o conteúdo de uma tag (por exemplo as de título: h1, h2,…, h6) por uma imagem. Veja a figura abaixo:
Exemplo de image - replacement
Isso é um exemplo clássico de troca do conteúdo de texto, por uma imagem com o mesmo texto – isso faz a parte do meu coração que é designer (a maior parte) suspirar de delirio …..
Ta bom, mas o que isso tem haver comigo? Porque utilizar essa técnica? Palma Palma, não priemos Cânico!
1° – Isso amplia as possibilidades artísticas de um site, que ao invés de utilizar fontes normais: Arial, Verdana, Times…poderá utilizar qualquer outra fonte, estilização, efeitos miraculosos e etc…(isso se faz especialmente a textos curtos, que não desprendam tanto processamento – ex: os títulos de página).
2° – Existe a possibilidade de usar a imagem diretamente no código HTML (<img src=”" alt=”" />), porém, imagine a situação: Derrepente o seu cliente se enche daquele estilo do site e decide de uma hora pra outra mudar o Design…dessa forma, vc terá de alterar a estrutura HTML e isso vai te encher o saco. Utilizando a técnica de IR vc apenas irá alterar o css. (fora que o seu site ficará com suporte a templates = alterou o css “alterou o site”).
Antes de demonstrar a técnica em si, quero destacar um texto que li no maujor que é muito interessante:
Ultimamente tenho notado uma espécie de ‘patrulhamento web standards’ normalmente adotado por pseudo-entendidos que tendem a contestar tudo quanto é código em nome da semântica, palavra que ouviram falar e nem sabem direito o que significa. Semântica é muito bonito, mas não deve servir de freio ao projeto Web.
Uma DIV ou um SPAN extra resolve um problema intricado no seu projeto?
Vá em frente! Use-a sem medo de ser feliz! Danem-se os xiitas!Maurício Samy Silva
Apesar de eu particularmente preferir um codigo limpo ( <h1>Título</h1>), não tenho nada contra se colocar algo a mais pra poder fazer alguma firula, porém acho desnecessário!
A prática leva a perfeição:
Existem várias técnicas de IR, vou destacar as que eu acho mais interessantes…
(FIR):Todd Fahrner membro do W3C, colaborador da WaSP, desenvolvedor e autor consagrado no universo Web Standards é inventor da técnica de substituir texto por imagem. A técnica inventada por Fahrner recebeu seu nome e é conhecida pelo acrônimo FIR iniciais para Fahrner Image Replacement.
<h1 id="topo"> <span>CSS para Web Design</span> </h1> CSS: h1#topo { width: 270px; height: 40px; background-image: url(cwd.gif); } h1#topo span { display: none; }
Stuart Langridge Image Replacement
A técnica de Stuart não usa o elemento extra SPAN e esconde o texto declarando padding igual a altura da imagem e height igual a zero. Devido ao box model quebrado do IE são acrescidas algumas regras CSS extras para aquele navegador.
HTML: <h1 id="topo"> CSS para Web Design </h1> CSS: h1#topo { padding: 40px 0 0 0; /* padding-top=altura imagem */ overflow: hidden; background: url(cwd.gif) no-repeat; height: 0 !important; height /**/:40px; /* height=altura imagem - hack IE5's */ }
Malarkey Image Replacement (MIR)
Na técnica de Malarkey também não aparece elemento extra SPAN e o texto é escondido com uso de letter-spacing muito grande e negativo.
É necessário um ‘hack’ para o Ópera que interpreta erroneamente a declaração letter-spacing.
HTML:
CSS para Web Design
CSS:
h1#topo {
letter-spacing : -1000em;
width:270px;
height: 40px;
background-image: url(cwd.gif);
}
/* Hack para Opera, esconde do MacIE */
/*\*/html>body #topo {
letter-spacing : normal;
text-indent : -999em;
overflow : hidden;
}/* Fim do hack */
Lindsay Image Replacement
Nesta técnica o texto é escondido declarando-se um tamanho de fonte muito pequeno, igual a 1px e fazendo a cor do texto igual a cor do fundo.
HTML: <h1 id="topo"> CSS para Web Design </h1> CSS: h1#topo { background: url(cwd.gif) no-repeat; width: 270px; height: 40px; font-size: 1px; color: #xxx; /* cor do fundo */
Então é isso, deliciem-se nessa grande jogada do mocotó!
Confira mais AQUI, AQUI e AQUI.
Ilare Ilare Ilare Ilare êê, ôôôô…….fui pro design flakes, junto com:
Abraço ao Rodrigo Louzada pela iniciativa!
“Você precisa entregar aquele site daquele cliente chato, seu chefe ta mordendo o seu pescoço, porém tudo vai bem. Até que na hora de testar a linda galeria de imagens (com ligntbox) que vc demorou uma semana pra fazer, da um pau desgraçado: O swf fica por cima da lightbox de todo o seu conteúdo.”
Acho que todo web designer que se preze ja teve um problema assim. Eu, por exemplo tive esse mesmo problema bizarro, mas vamos a solução.
Pra solucionar esse problema vc terá de ler a respeito da propriedade z-index e sobre parametros do flash player.
Layers com z-index
Confira abaixo também um exemplo basico de como isso pode ser feito:
<div id=’videos_content’>
<object width=’640′ height=’385′ codebase=’http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0′ classid=’clsid:d27cdb6e-ae6d-11cf-96b8-444553540000′>
<param value=’true’ name=’allowFullScreen’/>
<param name=”wmode” value=”transparent”>
<param value=’http://www.youtube.com/v/5VxZlWuFJLY&rel=0&color1=0xb1b1b1&color2=0xcfcfcf&hl=en&feature=player_embedded&fs=1′ name=’src’/>
<embed wmode=”transparent” width=’640′ height=’385′ allowfullscreen=’true’ src=’http://www.youtube.com/v/5VxZlWuFJLY&rel=0&color1=0xb1b1b1&color2=0xcfcfcf&hl=en&feature=player_embedded&fs=1′ type=’application/x-shockwave-flash’/>
</object>
</div>
<div id=”emCima”>
blablablablablablablablablablablablablablablablablablablablablablablabla
</div>
e o css:
#videos_content{ position:absolute; z-index:0}
#emCima{
color: #ffffff;
background-color:#000;
height:385px;
position:absolute;
z-index:1;
left: 154px;
top: 16px;
}
Bom, é só isso ae…também pode ser facilmente aplicado nos parametros da lightbox…
PS: Não se esqueça que a tag <embed> também deverá receber os parâmentros de wmode!
Bem vindo ao meu blog, se vc nao viu confira na página YO sobre mim e sobre o motivo pelo qual eu resolvi que teria um blog rsrs
|
