Arquivo da tag: HTML

Mobilidade, Tecnologia

Android – Como ver o código fonte de uma página no Chrome

chrome-android

Desenvolvedores têm necessidades estranhas. Sério!

Algumas são até justificáveis, e espero que seja o caso dessa. Recentemente tive a necessidade de ver o código fonte de uma página durante uma reunião de trabalho. Em mãos, tinha um tablet com Android.

Fui direto ver se o Google Chrome tinha a mesma opção que no desktop. Necas! É um navegador mobile, porque teria? Mas desenvolvedor é teimoso, então, bora googlear para saber quais as opções.

Diante de algumas, até mesmo navegadores alternativos, surge uma dica no santo stackoverflow.com, que serviu como uma luva! Imagine-se acessando uma página no Chrome do Android (a do blog, claro!):

Chrome Android

Se procurar a opção visualizar código fonte, verá que ela não existe e nenhum menu. Porém, note que ao ativar essa opção no Chrome para desktop, ele produz uma nova aba como mesmo endereço do site, só que com a opção “view-source:” antes do endereço.

Pois então, basta fazer o mesmo no Chrome do Android:

Chrome Android View Source

No caso do blog, ficou: view-source:https://www.tomasvasquez.com.br/blog/

Lindo!

Fora o trabalho de digitar, é exatamente a mesma coisa que no desktop. Quem sabe não dá para ativar o devtools também? 😀

Bom proveito!

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

C# – Como remover tags HTML/XML de uma String

2 Comentários

Essa valeu de tão simples.

Na necessidade de precisar limpar as tags HTML de uma string para apresenta-la em um local que não um browser ou componente que pudesse interpretá-lo, precisei construir uma rotina para a tarefa. Como de costume, programador pensa sempre na solução mais difícil. Mas depois de um pouco de preguiça saudável, não foi complicado decidir que através de uma simples Regular Expression o trabalho poderia ser feito facilmente. Antes mesmo de precisar queimar neurônios pensando em uma, resolvi garimpar no um pouco na Web. Em poucos segundos, o resultado era o código abaixo:

public string Strip(string text)
{
    return Regex.Replace(text, @”<(.|\n)*?>”, string.Empty);
}

O autor da proeza é Ali Raza.

Bom proveito!

.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