Tag Archives: CSS

Tecnologia, Web

Web – Coloque qualquer fonte em seu site, mesmo que o usuário não a tenha instalada

CSS
CSS

Desenvolvedores Web e Web Designers normalmente lidam com o fato de não poder usar qualquer tipo de fonte em seus layouts, já que não há a garantia que a fonte esteja instalada no computador que acessa o site, o que é necessário para sua renderização (ou seu usuário verá aquele texto lindo em Arial ou Verdana).

Ok, existem alguns truques para saber isso, mas nada saudáveis para a aplicação e muito menos recomendáveis.

A solução inevitável é produzir o texto com a fonte não padrão como uma imagem. Uma saída efetiva, mas não viável. Há porém uma solução desde o nascimento do CSS 2.0, mas que pouco vi ser utilizada.

Com a tag font-face, você pode declarar uma nova fonte que pode ser utilizado no seu CSS, e também, qual o arquivo de fonte respectivo. Por exemplo, o código abaixo declara a fonte Rugged Ride e aponta para um endereço do servidor onde ela está intalada:

@font-face {
    font-family: "Rugged Ride";
    src: url("http://www.tomasvasquez.com.br/fonts/Rugged Ride.ttf") format("truetype");
}

Depois dessa declaração, é possível fazer o seguinte:

<h1 style="font-family: 'Rugged Ride'">Texto com a Fonte Rugged Ride</h1>

Abaixo segue o HTML respectivo:

Texto com a Fonte Rugged Ride

Como é uma fonte pouco comum, existe uma grande chance de não tê-la instalada em seu computador, mas ela aparece corretamente. Lembrando que seu navegador precisa ter suporte a CSS 2.0, ou essa técnica não funcionará.

Claro que nem tudo são vantagens. Na primeira vez que o usuário acessar o site, ele vai precisar fazer o download da fonte. A depender de seu tamanho, o texto pode aparecer sem fonte até que ela seja baixada totalmente.

Agora é aproveitar essa vantagem de desenhar seus sites!

Abraços!

.NET, Desenvolvimento, Web

ASP.NET – Correspondência entre WebControls e elementos HTML

Sejamos sinceros. Configura o layout de uma aplicação Web feita em ASP.NET com WebForms e consequentemente seus WebControls é um desafio e tanto para os Designers. Isso acontece porque ainda é um mistério completo o que vai sair do “outro lado da linha”, ou seja, quais elementos HTML serão gerados na saída do navegador.

A engine de renderização do ASP.NET é inteligente o suficiente para promover mudanças no código gerado dependendo das capacidades do navegador. Mas como essas alterações são mais na questão do comportamento e geração de scripts, é possível estabelecer um padrão de geração de componentes HTML e WebControls para controlar melhor a configuração de estilos.

O pessoal do blog Nima Dilmaghani publicou uma tabela com a correspondência padrão entre WebControls e componentes HTML correspondentes tentar facilitar o mapeamento de estilos, que pode ser vista abaixo.

ASP.NET Control HTML Element
Label span
TextBox input type=”text”
TextBox TextMode=”MultiLine” textarea
TextBox TextMode=”Password” input type=”password”
Button input type=”submit”
LinkButton a href=”javascript:__doPostBack(’LinkButton1′,”)”
ImageButton input type=”image”
HyperLink a
DropDownList select
ListBox select size=”4″ gives you 4 rows
ListItem option
CheckBox input type=”checkbox”
RadioButton input type=”radio” seguido de um label para apresentar o texto
RadioButtonList um table com tr e td, sendo um td para cada item da lista. Em cada td, há um conjunto de controles equivalente ao RadioButton
Image img
ImageMap img and a map tag holding one or more of the following 3:
CircleHotSpot area shape=”circle”
PolygonHotSpot area shape=”poly”
RectangleHotSpot area shape=”rect”
Table table
TableHeaderRow tr
TableRow tr
TableFooterRow tr
TableHeaderCell th
TableCell td
BulletedList ul with each list item:
ListItem li
HiddenField input type=”hidden”
Literal Sem html correspondente.
Calendar table complexa
AdRotator a
FileUpload input type=”file”
Wizard uma table complexa. Isso se o estilo padrão for mantido. É possível definir templates customizados para os passos do Wizard, deixa no layout mais amigável a padronizado, facilitando a aplicação de estilos.
Xml <?xml version=”1.0″ encoding=”utf-8″?>
MultiView MultiView não gera elementos html diretamente. Apenas seu conteúdo e controles são gerados.
Panel div
PlaceHolder Placeholder não possui elemento html correspondente. O que será renderizado é referente aos controles que nele forem adicionados através do método PlaceHolder.Controls.Add() não sequência em que forem adicionados.
Substitution Sem html correspondente
Localize Sem html correspondente. O conteúdo é exibido diretamente
Validation controls span

É bom lembrar que a partir da versão 2.0, o ASP.NET dispõem do recurso de Themes. Este permite um mapeamento entre WebControls e classes CSS, o que em teoria despreocupa os Designers, já que não é mais necessário saber o que será gerado no HTML final. O desenvolvedor mapeia através de um arquivo .skin os controles e as respectivas classes CSS que serão aplicadas e estes. Como sugestão, pela experiência que tive, vale a pena gastar um tempo explicando para os Designers como funciona o arquivo .skin para que a partir daí, ele tenha controle total da aplicação de estilos em páginas aspx baseadas em WebForms.

De resto, é só orientar os desenvolvedores a não poluir demasiadamente o HTML gerado para não atrapalhar a aplicação dos estilos.

Adicionalmente, os colegas do blog ainda listaram 10 regras para a boa utilização e aplicação de css em páginas ASP.NET:

http://nimad.wordpress.com/2007/10/02/10-rules-for-effective-use-of-css-in-aspnet/

Bom divertimento!

Tomás

Desenvolvimento, Tecnologia, Web

Web -Recomendação de artigo: Seletores Complexos do CSS

W3C

Mais uma vez o pessoal do tableless mandando bem!

Desta vez a dica é para o uso de Seletores Complexo em CSS. A técnica é para especificar o estilo a ser aplicado a um elemento HTML, parametrizando seu atribuito, e não somente o próprio elemento.

Por exemplo, suponha que dentro de uma div ou table você tenha vários elementos <input> de vários tipos, text, button, radio, checkbox, enfim. Como em CSS definir um estilo particular para somente os <input type=”button”> sem precisar definir uma classe específica para ele?

Acompanhe o artigo abaixo e divirta-se!

http://www.tableless.com.br/seletores-complexos-do-css

Abraços

Tomás

Desenvolvimento, Web

Vídeos – Aprendendo a programar para a Web… e bem!

Antes do comunicado “oficial”, vou falar um pouco sobre o assunto.

É fato. Programar para a Web jáse tornou algo corriqueiro para qualquer profissional de tecnologia. Mesmo que ele passe longe de um servidor web ou linguagem de programação, ele tem idéia do que é HTML, Javascript, CSS e outras coisas que compõem o mundo da programação para a Web.

Mesmo profissionais que não são da área de tecnologia tem que se render a um entendimento mínimo de como as páginas web são construídas, isso claro se quiserem tirar algum proveito que vá além da simples rolagem, leitura e cliques no links.

Conclusão: qualquer um que tenh algum contato um pouco mais “intenso” com tecnologia no dia a dia já sabe e cria seu próprio site, html, ou qualquer coisa que possa ser publicada.

Isso tem gerado uma classe de programadores Web, se é que podemos nomeá-la assim, que tem gerado “produtos” de qualidade sofrível por motivos que não vem ao caso neste momento, mas que comentarei em outra oportunidade, espalhados por vários futuros posts/artigos.

O objetivo desse post além da divulgação promovida pelo título é, como obter um diferencial no desenvolvimento Web já que há tantos detentores deste conhecimento, o que resulta na seguinte verdade:

É fácil achar programadores web. Difícil é achar bons programadores web. Percebo isso em cada processo seletivo que passo e em conversas com colegas no ramo.

Talvez seja por isso que a Visie, uma consultoria de treinamento para desenvolvimento Web tem disponibilizado uma série de materiais para ensinam e orientam como desenvolver aplicações para a Web dentro do padrões estabelecidos pelo W3C. Tá, mas o que isso significa?

Significa desenvolver sites com um padrão de qualidade exigido pela maioria dos navegadores, o que significa que seu site funcionará bem, independente de qual browser seja utilizado. Mas o mais importante é que, seguir estes padrões Web significa que seus sites serão bem vistos pelos mecanismos de busca. Isso agrega um valor altíssimo a seu conhecimento pois todo site construído nestes padrões estará sempre um ponto a frente de outros que disputem o mesmo público, mas que não seguem estas boas práticas. Isso sem falar que seu código será mais limpo, legível, reaproveitável e leve.

Os tutoriais são disponibilizados em formato texto e vídeos. Para acessá-los, os endereços são:

http://visie.com.br/campus

http://www.tableless.com.br/

Há planos de acesso para conteúdo restrito e pago, mas tem muita coisa disponível gratuitamente e de ótima qualidade.

Desejo a todos bons estudos!

Abraços

Tomás