Utilizando ícones em forma de fontes FontAwesome no seu template do ZIBO Enterprise CMS

Screen Shot 2015-01-25 at 09.12.31

Um recurso muito interessante para utilização de ícones de redes sociais é a utilização destes ícones em formato de fontes. No repositório http://fortawesome.github.io/Font-Awesome/ você encontra uma opção fácil e robusta para utilização destas fontes envolvendo apenas CSS.

Neste post irei mostrar um exemplo de como utilizar esta família de fontes.

01) Primeiramente você deve baixar a biblioteca de fontes em http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.3.0.zip ;

02) Descompacte o arquivo e faça o upload para o local onde queira hospedar as fontes. No caso do Zibo Enterprise CMS o diretório padrão de templates fica em z.view/nome-do-template;

03) Depois de feito o upload você deve chamar o CSS padrão do FontAwesome utilizando o exemplo abaixo:

no caso do ZIBO entre com o seguinte código

 

04) Depois adicione as chamadas em seu CSS seguindo o exemplo abaixo:

 

 

05) Adicione a entrada da fonte no local que deseja aplicar:

OBS: Você consegue ter uma ideia geral dos códigos de cada ícone no link http://fortawesome.github.io/Font-Awesome/cheatsheet/

Confira alguns exemplos de aplicação em: http://fortawesome.github.io/Font-Awesome/examples/

Utilizando a tag vídeo do HTML 5 com autoplay e barra de progresso

Começando agora a nova fase de tutorials do blog estarei apresentando abaixo uma forma simples de adicionar vídeos OGV, MP4 e WebM utilizando a tag video do HTML5

  1. <html>
  2.     <head>
  3.     <script type=”text/javascript” src=”http://code.jquery.com/jquery-1.4.2.min.js”></script>
  4.     <script type=”text/javascript”>
  5.     $(document).ready(function(){
  6.        $(“#alcatelvideo”).bind(‘ended’, function(){
  7.            location.href=”http://alcatelonetouchevo7.com.br/”;
  8.        });
  9.     });
  10.     </script>
  11.     </head>
  12.     <body>
  13.     <video id=”alcatelvideo” width=”100%” height=”100%” autoplay>
  14.         <source src=”http://alcatelonetouchevo7.com.br/videos/EVO7_Tablet_H264_Youtube_640_360.oggtheora.ogv”type=”video/ogg” />
  15.         Your browser does not support the video tag.
  16.     </video>
  17.     <progress id=’alcatelvideo’ style=”width: 100%;”></progress>
  18.     </body>
  19. </html>

Faça o download clicando aqui