Recomendações de livros

Postado por: Pedro Rogério em
  • 29 jun
  • 7

Nesse post vou tentar mostrar alguns ótimos livros que recomendo para aqueles que querem ingressar no mundo do desenvolvimento web, pois, quem trabalha nesse ramo sabe que deve devorar informação, seja ela de sites, blogs ou livros. Alguns deles já são bem conhecidos pelas pessoas, outros não, mas fica aqui a dica:

Construíndo sites com CSS e (x)HTML

Construíndo sites com CSS e XHTML

Esse foi o primeiro livro totalmente nacional, lançado pelo Maujor sobre CSS, para quem quer aprender CSS esse deve ser ser livro de cabeceira. Este livro aborda a técnica de construção de sites baseada nas Web Standards do W3C, cujo princípio básico é separar a marcação (X)HTML da apresentação visual. De forma didática, são apresentadas as razões da criação das Web Standards e suas vantagens, a sintaxe (X)HTML e CSS, as propriedades CSS e a criação de layouts fixos e elásticos multicolunares. Os assuntos tratados são ilustrados com códigos, exemplos e figuras que mostram a renderização no navegador. No site de apoio, o leitor encontrará os códigos para download e informações complementares sobre o livro.

Continuar lendo »

Central Server

Barra de progresso com CSS

Postado por: Pedro Rogério em
  • 22 jun
  • 3

Você por um acaso alguma vez já tentou desenvolver uma barra de progresso e não obteve sucesso como queria? Hoje acabei encontrando uma maneira muito simples e funcional de se obter resultados satisfatórios de barra de progresso com CSS no site de Ben Ogle’s.

Basicamente você deve fazer o uso de três divs: uma div que atuará como container, outra que será a cor do progresso e a última para o seu texto. Tanto a div container quanto a div com o progresso devem conter uma imagem de fundo. A imagem utilizada é uam png transparente para que seja mostrada a cor de fundo da div.

HTML

A estrutura do HTML é muito simples:

<div class="meter-wrap">
    <div class="meter-value" style="background-color: #0a0; width: 40%;">
        <div class="meter-text">
            Texto aqui!
        </div>
    </div>
</div>

Continuar lendo »

CSS Margin Collapsing

Postado por: Pedro Rogério em
  • 17 jun
  • 3

Você provavelmente já deve ter passado por esse tipo de situação, onde as margens do elemento (top e bottom) se fundem formando uma só margem. Esse fenômeno é chamado de Margin Collapsing. Se você não entendeu o fenômeno, observe a imaghem abaixo, duas divs em seu fluxo normal no documento HTML:

CSS Margin Collapsing

Continuar lendo »

CSS: Alternative Style Sheets

Postado por: Pedro Rogério em
  • 15 jun
  • 3

Você sabia que um documento HTML não precisa necessariamente ter uma única folha de estilos? Você pode proporcionar ao usuário várias outras folhas de estilo em um único documento HTML para que o mesmo possa escolher a que melhor se adequa a seu gosto, ou partindo para o lado da acessibilidade, criar folhas de estilo de alto contraste que facilite a leitura de usuários com baixa visão.

Criar folhas de estilo alternativas não exige muito esforço e não tem segredo algum, você só vai encontrar dificuldade devido a alguns browsers que não suportam essa opção, mas, por exemplo, no firefox você pode ir até Exibir > Estilos da página e trocar as folhas de estilo dentre as disponíveis, se é que o site disponibiliza essa opção.

Para incluir folhas de estilos extras em seu site, basta utilizar da tag HTML <link>, com o atributo REL que deve conter o valor alternate e o atributo title:

<link rel="stylesheet" type="text/css" href="default.css" title="Default CSS" />
<link rel="alternate stylesheet" type="text/css" href="simple.css" title="Simple CSS" />
<link rel="alternate stylesheet" type="text/css" href="dark.css" title="Dark CSS" />

A primeira folha de estilos foi a que eu defini como padrão, as outras duas a seguir são as folhas de estilo alternativas, pois como podem observar, elas possuem o atributo re=”alternate stylesheet” e só serão carregadas se o usuário alterá-las no browser. Para que vocês entendam como isso funciona, dêem uma olhada no exemplo que criei para esse tutorial.

Style Switcher com jQuery

Postado por: Pedro Rogério em
  • 9 jun
  • 2

A jQuery proporciona uma forma muito simples de você desenvolver Style Switchers (troca de folhas de estilo) em seu site sem ter que digitar várias linhas de código. O exemplo que vou mostrar aqui ainda faz o uso de Cookies para que aquele CSS escolhido pelo usuáro possa ser carregado novamente quando o mesmo voltar a página.

Primeiramente você deve fazer o uso da biblioteca jQuery, e após criar suas folhas de estilo como desejar. Nesse exemplo vou utilizar 3 arquivos CSS que somente irão efetuar uma alteração na cor de fundo do layout, mas você pode definí-las como quiser.

<link rel="stylesheet" type="text/css" href="estilos.css" title="normal" />
<link rel="stylesheet" type="text/css" href="estilopreto.css" title="preto" />
<link rel="stylesheet" type="text/css" href="estilovermelho.css" title="vermelho" />

É muito importante você definir um título para suas folhas de estilo pois futuramente iremos chamá-las no JavaScript através do title das mesmas. O passo seguinte é o nosso HTML:

<ul>
	<li><a href="#" rel="normal" class="styleswitch">Estilo 1</a></li>
	<li><a href="#" rel="vermelho" class="styleswitch">Estilo 2</a></li>
	<li><a href="#" rel="preto" class="styleswitch">Estilo 3</a></li>
</ul>

Continuar lendo »

Páginas:«1...567891011...24»