Arquivo da tag: HTML

50 Tutoriais CSS3 úteis

English: CSS3 Styling
English: CSS3 Styling (Photo credit: Wikipedia)

Cada dia CSS3 torna-se cada vez mais popular entre os web designers e desenvolvedores web. Hoje muitas funções interessantes e recursos estão sendo feitos para CSS3, que proporcionam menor tempo de conclusão, mais flexibilidade e fácil de manutenção para páginas web. Neste post vamos oferecer-lhe uma grande coleção de 50 úteis CSS3 tutoriais, você sempre pode usar sempre que precisar. Continue lendo 50 Tutoriais CSS3 úteis

Wookmark jQuery plugin

jquery-plugin-example

Navegando acabei achando esse http://www.wookmark.com/, quem tem um layout bem interessante e descobri que ele disponibiliza um script para poder usar, Olhem abaixo. Continue lendo Wookmark jQuery plugin

Tags HTML5 para IE8

Como sempre, o IE é muito atrás em tecnologia. Este artigo explica como obter suas tags HTML5 trabalhando como se estivessem em Opera, Safari, Chrome ou Firefox.

Você pode obter etiquetas HTML5 trabalho no IE7 e IE8, incluindo este JavaScript na cabeça do seu documento. Para preformance incluí-lo depois de carregar o CSS.

<!--[if lt IE 9]>
 <script>
 document.createElement('header');
 document.createElement('nav');
 document.createElement('section');
 document.createElement('article');
 document.createElement('aside');
 document.createElement('footer');
 document.createElement('hgroup');
 </script>
 <![endif]-->

 

Firefox, Opera, Chrome, todos consegue reconhecer, mas o IE8 e as versões anteriores, não. Certifique-se de declarar qualquer novo elemento HTML5 como block em seu arquivo css, ou declarar in-line para todos os navegadores, pra não ter conflito futuro.

header,nav,section,article,aside,footer,hgroup { display: block; }

Se preferir, você pode puxar um mais elaborado html shiv do Google Code assim:

<!-- Pulled from http://code.google.com/p/html5shiv/ -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Fonte: http://www.nickyeoman.com/blog/html/118-html5-tags-in-ie8

 

Força downloads de arquivos em PHP

Pesquisando achei esse script que força a baixar qualquer tipo de arquivo.

Crie uma arquivo baixar.php copie o código abaixo.

&lt;?php

$arquivo = $_GET[&quot;arquivo&quot;];
if(isset($arquivo) &amp;&amp; file_exists($arquivo)){ // faz o teste se a variavel não esta vazia e se o arquivo realmente existe
 switch(strtolower(substr(strrchr(basename($arquivo),&quot;.&quot;),1))){ // verifica a extensão do arquivo para pegar o tipo
 case &quot;pdf&quot;: $tipo=&quot;application/pdf&quot;; break;
 case &quot;exe&quot;: $tipo=&quot;application/octet-stream&quot;; break;
 case &quot;zip&quot;: $tipo=&quot;application/zip&quot;; break;
 case &quot;doc&quot;: $tipo=&quot;application/msword&quot;; break;
 case &quot;xls&quot;: $tipo=&quot;application/vnd.ms-excel&quot;; break;
 case &quot;ppt&quot;: $tipo=&quot;application/vnd.ms-powerpoint&quot;; break;
 case &quot;gif&quot;: $tipo=&quot;image/gif&quot;; break;
 case &quot;png&quot;: $tipo=&quot;image/png&quot;; break;
 case &quot;jpg&quot;: $tipo=&quot;image/jpg&quot;; break;
 case &quot;mp3&quot;: $tipo=&quot;audio/mpeg&quot;; break;
 case &quot;php&quot;: // deixar vazio por seurança
 case &quot;htm&quot;: // deixar vazio por seurança
 case &quot;html&quot;: // deixar vazio por seurança
 }
 header(&quot;Content-Type: &quot;.$tipo); // informa o tipo do arquivo ao navegador
 header(&quot;Content-Length: &quot;.filesize($arquivo)); // informa o tamanho do arquivo ao navegador
 header(&quot;Content-Disposition: attachment; filename=&quot;.basename($arquivo)); // informa ao navegador que é tipo anexo e faz abrir a janela de download, tambem informa o nome do arquivo
 readfile($arquivo); // lê o arquivo
 exit; // aborta pós-ações
}
?&gt;


Agora crie o HTML index.php e coloque o código abaixo.

&lt;!--
Este será o link que apontará para o nosso script PHP.
Use no href &quot;baixar.php?arquivo=&quot; + caminho de seu arquivo;
No Exemplo abaixo utilizei uma imagem com o nome &quot;imagem.jpg&quot; que esta dentro da pasta &quot;arquivos&quot;.
--&gt;
&lt;a href=&quot;baixar.php?arquivo=arquivos/imagem.jpg&quot;&gt;Baixar Arquivo&lt;/a&gt;

Agora abra o arquivo index.php e clique no link “Baixar Arquivo”.

Fonte: http://www.devmedia.com.br/forcar-download-de-arquivos-com-php/17097

Colocar link “Leia mais” usando jQuery

O Plugin jQuery Expander é um script para mostrar/recolher o conteúdo de um texto grande.

Aqui está uma maneira simples de usar este plug-in seu HTML ou páginas ASP.NET

1. Declare uma Div ou ASP.NET Painel.

&lt;div class=&quot;readmore&quot;&gt;
   The Div Text Comes Here
&lt;/div&gt;

Continue lendo Colocar link “Leia mais” usando jQuery

jQZoom Evolution 2.3

Esse script pode ser modificado para exibir uma máscara sobre a imagem ou não mostrar uma janela de lupa.
Este plugin jQuery ajuda a inserir imagens detalhadas grandes em qualquer website.
O script pode ser aplicada a imagens únicas ou múltiplas na mesma página.

Nota: Atualizei o link que estava errado.

Imagens:

Este slideshow necessita de JavaScript.

Clique aqui para baixar.

Pegar informações dentro de uma TAG com Javascript

O código abaixo mostra como selecionar o valor de uma Tag, com javascript. O exemplo abaixo utiliza-se da tag span

Valor do Span aquiou
  alert(document.getElementById('creditototal').firstChild.data);

ou

 alert(document.getElementById('creditototal').innerHTML);

Outro exemplo:

function mostra(){
var altura = document.getElementById(&quot;img&quot;).height;
var largura = document.getElementById(&quot;img&quot;).width;
alert(&quot;Altura: &quot;+altura+&quot;nLargura: &quot;+largura);
}
window.onload = mostra;

Estrutura do HTML5

Olá pessoal,

Resolvi escrever sobre
o HTML5, a nova versão do HTML que promete revolucionar a
navegabilidade na web. O HTML passou vários anos sem atualizações,
o que é mortal para uma tecnologia em tempos de internet.
Finalmente, ele se renova e abre horizontes para navegadores modernos
e recursos multimídia. Continue lendo Estrutura do HTML5

Z-Screen Recorder


Z-Screen Recorder permite gravar vídeo diretamente da tela do seu aparelho para o SD. Ele é projetado para que você faça tutoriais ou para que simplesmente grave clipes para usar como ajuda. Continue lendo Z-Screen Recorder