Artigos com a tag 'HTML'


Web2.0: Adobe está tentando Apollo?

Apollo é o nome de código (por agora) de um projecto ambicioso no mundo para o Adobe RIA (Rich Internet Applications) e Web 2.0, incluindo Ajax. Alguém se lembra Macromedia Contribute, Macromedia Central para outra pessoa. Há, também, que vê em Apollo união simples - ou oportunidade - reunir elementos de Flash e PDF (algo que já foi possível com o Flash Paper)!

Leia mais ...

Esconde-me

Uma característica das folhas de estilos (os arquivos. Css) é que ele pode ser especificado dependendo do média de saída. As folhas de estilo permitem que você especifique a mesma classe, o mesmo da etiqueta de identificação mesmo, etc ... para diferentes mídias. Por exemplo, eu posso escrever um arquivo Css com a seguinte sintaxe.:

1
2
3
4
5
6
7
@ Media screen {
display : none } mybox # div {display: none}
}

@ Media print {
display : block } mybox # div {display: block}
}

non sarà visibile sul browser, sullo schermo, ma quando provo a stampare la pagina troverò un contenuto diverso da quello che mi aspettavo. O que vem no final, é que o conteúdo da DIV com id myBox não será visível na tela do browser, mas quando tento imprimir a página, encontrar um conteúdo diferente do que eu esperava.
Os motores de busca, spiders, crawlers e agregadores, normalmente (por enquanto) não resolvem o arquivo css. Eles estão interessados ​​em ver o conteúdo não a formatação. No entanto, esta técnica pode ter implicações interessantes até mesmo preocupante. Devido às características dos sistemas de indexação de uma situação como a mostrada abaixo seria no mínimo curiosa:

1
2
3
4
5
6
7
"visibile_a_video" > < div id = "visibile_a_video">
p > < p > Conteúdo visível para video </ p >
</ div >

"visibile_in_stampa" > < div id = "visibile_in_stampa">
p > < p > Conteúdo visível na impressão </ p >
</ div >

Correlacionada com um arquivo css como este.:

1
2
3
4
5
6
7
8
9
@ Media screen {
display : block } visibile_a_video # div {display: block}
display : none } # Visibile_in_stampa div {display: none}
}

@ Media print {
display : none } # Visibile_a_video div {display: none}
display : block } div visibile_in_stampa # {display: block}
}

Google, por exemplo, indicizzerebbe ambos os conteúdos do nosso HTML, mesmo se a tela seria capaz de ver apenas um. Se imprimir a página iria encontrar com o conteúdo novo da surpresa. O truque, no entanto, seria revelado, eliminando a aplicação de estilos em navegadores que suportam. Normalmente ninguém executa uma operação como esta quando a navegar na Internet. Tal investigação surgiria apenas depois de encontrar um descompasso entre o que é visível na tela eo que foi impresso!

Até o momento tenho visto nenhum caso deste tipo de manipulação descarada via CSS. Em um momento em que foi aumentando a sua visibilidade na Internet, introduzindo uma série de textos, palavras, da mesma cor que o fundo da página, assim como para fazer os olhos escuros de tal artifício navegadores. Até o momento os motores estão indexando advertiu contra "fraude" tal. Talvez seja a hora de antecipar algum palhaço antes de criar um precedente?

Atualmente, a folha de estilo são usadas para especificar um intervalo de tipo de mídia de saída. Para obter uma lista completa, veja o W3C .

Leia mais ...

Web Developer 1.1.3

Chris Pederick libera nova versão do Web Developer , conveniente add-on para Firefox e outros navegadores, que, juntamente com FireBug faz a vida melhor para os desenvolvedores web.
Tropeço este lançamento para a sua boa notícia em relação à versão muito fazer. Os ícones da barra de ferramentas foram redesenhados, agora muito mais eficaz. Aumentou o número de funções disponíveis no menu como magnificar acessível em tempo real, regras e orientações, a capacidade de editar o código HTML. Para ser instalado o mais rapidamente possível ...

Leia mais ...

Dinâmica Javascript e CSS Arquivo

Na Mensagem criar um leitor RSS em PHP e Javascript indiretamente encontramos uma técnica muito interessante que permitiu criar - na prática - um arquivo PHP Javascript.

Leia mais ...

Dynamic HTML com JavaScript

Escrever código dentro de uma página HTML é dinamicamente possível e útil. predisposto ad accettare codice inserito tramite innerHTML . A forma mais directa é usar e conhecido documenti.write() ou um contentor DIV preparado para aceitar o código inserido através de innerHTML . Alternativamente, você pode anexar a uma marca existente e usar o DOM para adicionar ou remover elementos dentro da página. Por exemplo immmaginiamo deseja carregar um novo arquivo sem usar server-side scripting Javascript e recarregue a página. As funções abaixo, por exemplo, adiciona um arquivo JavaScript em sua página como um parâmetro (incluindo o caminho).

1
2
3
4
5
6
s ) { função addScripting (s) {
document. createElement ( 'script' ) ; scriptNode var = documento createElement ('script').;
"head" ) [ 0 ] . appendChild ( scriptNode ) ; documento getElementsByTagName ("cabeça") [0] appendChild (scriptNode)..;
'javascript' ; scriptNode language = 'javascript'.;
s ; scriptNode src = s.;
}

Da mesma forma você pode adicionar uma folha de estilo para a nossa página, indicado pela variável cssfile :

1
2
3
4
5
document. createElement ( 'link' ) ; cssNode var = documento createElement ('link').;
'rel' , 'stylesheet' ) ; cssNode setAttribute ('rel', 'stylesheet').;
'type' , 'text/css' ) ; cssNode setAttribute ('type', 'text / css ").;
'href' , cssfile ) ; cssNode setAttribute ('href', cssfile).;
'head' ) [ 0 ] . appendChild ( cssNode ) ; documento getElementsByTagName ('head') [0] appendChild (cssNode)..;

Leia mais ...

Classes e ID em CSS

nei fogli di stile. Aqui estão algumas dicas breves sobre como usar class e id em folhas de estilo. Tenha em mente que uma vez que o uso de técnicas avançadas de JavaScript, como o uso de motores de Ajax, pode entrar em conflito com as recomendações feitas aqui! E no final vamos ver o porquê.

Leia mais ...

As maravilhas de CSS2.0 +

Devido à incompatibilidade de saída de estilo e, talvez - ainda - cross-browser, nem todos sabem sobre o vasto potencial de folhas de estilo. Queremos mostrar, portanto, algumas características da CSS sintaxe desconhecido para a maioria e para nos lembrar o quão pouco - muitas vezes - nós explorar plenamente as ferramentas que temos disponíveis.

Nota: Todas as amostras foram testadas no Firefox 1.5.0.5

Selecção por atributos

1
2
3
4
5
"myInput" > < div id = "myInput">
"submit" value = "invia" / > < input type = "submit" value = "submit" />
"button" value = "Pulisci" / > < input type = "button" value = "Clear" />
"button" value = "Annulla" / > < input type = "button" value = "Cancelar" />
</ div >
1
2
3
type = submit ] { color : #f00 } div # myInput input [type = submit] {color: # f00}
type = button ] { color : #0f0 } div # myInput input [type = botão] {color: # 0f0}
value = Annulla ] { color : #00f } div # myInput input {color: # 00F} [value = Cancel]

Esta característica, muitas vezes referido cone avançado CSS2, permite que as coisas strabiglianti, se refletirmos por um momento. A maior vantagem é o lado ottinene HTML, onde não há necessidade de distinguir entre classes ou etiqueta de identificação no CSS. É precisamente os atributos - ainda presente - na TAG para indicar qual o estilo associado. Além disso, qualquer atributo da marca pode ser tomado como um seletor: alt, título, accesskey, etc ...

Seleção para a profundidade

Este tipo de selecção é nada curta de espectacular, se considerarmos que pode ser adicionado ao anterior. Ele permite que você definir a hierarquia dos elementos. Olhando para o exemplo abaixo, vamos perceber imediatamente a extraordinária importância deste tipo de seleção, que mantém o HTML limpo e livre de indicadores desnecessários.

1
2
3
4
5
6
7
"myBox" > < div id = "mybox">
p > < p > § 1 º </ p >
p > < p > § 2 º </ p >
p > < p > Seção 3 </ p >
p > < p > § 4 º </ p >
p > < p > § 5 º </ p >
</ div >
1
2
3
p { color : #f00 } div # mybox {color: # f00}> p
p + p { color : #0f0 } div # mybox> p {color: # 0f0} + p
p :last-child { color : #00f } # Mybox div> p: {color: # 00F} filho última

e – fantastico – first-letter ! Na verdade, só para concluir este sobrevôo, bem como last-child existe first-child , e - incrível - first-letter ! Experimente.
Nós, obviamente, ter tocado o assunto, muito abrangente para dizer a verdade, que vê CSS como instrumento avançado para a definição de páginas layput. Há outros seletores e comportamentos, e uma grande notícia para a especificação do arquivo CSS para a geração futura.

Leia mais ...



Pare SOPA