Se você está procurando uma solução robusta e complexa de menu com abas (tabs), meu script certamente não é a solução. Mas então por quê eu cheguei a fazê-lo? Para suprir uma necessidade básica que o TABS do jQuery UI3 não atende.
Ao mínimo estranho alguém dizer isso né? Pois bem, se alguém ainda não conhece essa UI do jQuery vale a pena testá-la, ah, para um bom teste, abra a página de testes de abas com o Javascript do seu navegador desabilitado para ver o que acontece.
Simplesmente o conteúdo da Aba que deveria vir logo abaixo dela, não é carregado. E isso se explica porque este conteúdo é carregado de uma outra URL logo durante o carregamento da página e o DIV (onde entra o conteúdo) também é gerado dinamicamente, ou seja, sem JS posso te adiantar que teremos erro de layout no site. Para quem quiser testar: http://www.stilbuero.de/jquery/tabs_3/
Bom, a idéia aqui é criar um menu com abas superiores, que mesmo sem o JS ativo ele mantenha o seu layout correto, e ao menos, o conteúdo da primeira aba ativa seja carregado. Outra funcionalidade é que cada aba possa ter 2 classes independentes, uma para o estado Ativo e outra para o estado Inativo. Digo que são classes independentes para cada aba, justamente para você poder adicionar Imagens de Fundo diferentes em cada Tab. Além disso, você pode definir para cada aba, uma mensagem de “Loading” customizada, ou usar a mensagem padrão definida pelo html, para o carregamento das abas do menu em questão.
Vamos ao código:
XHTML:
<ul id=”tab_menu_1″ class=”tabs-nav” attrLoadingMessage=”Carregando…”>
<li class=”tab_cama_on”><a href=”www.exemplo.com/1″><span>Cama</span></a></li>
<li class=”tab_mesa_off”><a href=”www.exemplo.com/2″ attrLoadingMessage=”Carregando Mesa…”><span>Mesa</span></a></li>
<li class=”tab_banho_off”><a href=”www.exemplo.com/3″><span>Banho</span></a></li>
</ul>
<div class=”tabs-container”></div>
</div>
JAVASCRIPT - jQuery
$(”.tabs-nav li a”).livequery(’click’,function() {
/* Set Variables */
var URL = $(this).attr(’href’);
var TabMenu = $(this).parents(”li:first”).parents(”ul:first”).attr(’id’);
var CurrentTab = $(this).parents(”li:first”);
var ContentArea = $(this).parents(”li:first”).parents(”ul:first”).nextAll(”div:first”);
var LoadingMessageDefault = $(this).parents(”li:first”).parents(”ul:first”).attr(’attrLoadingMessage’);
var LoadingMessageCustom = $(this).attr(’attrLoadingMessage’);
/* Set Up the Loading Message */
if (typeof(LoadingMessageCustom) == “undefined” || LoadingMessageCustom == null)
{
var LoadingMessage = LoadingMessageDefault;
}
else
{
var LoadingMessage = LoadingMessageCustom;
}
var LoadingContent = ‘<div class=”tabs-loading”>’ + LoadingMessage + ‘</div>’;
/* Set All Tabs to the Inactive State */
$(”#” + TabMenu + ” > *”).each(function() {
var ActiveClass = $(this).attr(’class’).replace(’_off’,”_on”);
var InactiveClass = $(this).attr(’class’).replace(’_on’,”_off”);
$(this).removeClass(ActiveClass);
$(this).addClass(InactiveClass);
});
/* Set the Current Tab to the Active State */
var ActiveClass = CurrentTab.attr(’class’).replace(’_off’,”_on”);
var InactiveClass = CurrentTab.attr(’class’).replace(’_on’,”_off”);
CurrentTab.removeClass(InactiveClass);
CurrentTab.addClass(ActiveClass);
$.ajax({url: URL,
data: URL,
beforeSend: function() {
ContentArea.html(LoadingContent);
},
success: function(response){
ContentArea.html(response);
},
error: function(data) {
alert(’erro…’);
},
type: “GET”,
dataType: “html”
});
return false;
});
});
CSS:
/* Caution! Ensure accessibility in print and other media types… */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types… */
.tabs-hide {
display: none;
}
}
/* Hide useless elements in print layouts… */
@media print {
.tabs-nav {
display: none;
}
}
/* Skin */
.tabs-nav {
list-style: none;
margin: 0;
padding: 0px;
}
.tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
display: block;
clear: both;
content: ” “;
}
.tabs-nav li {
border: 1px solid #ccc; /* TAB ITEM */
border-bottom: 0px;
float: left;
margin: 0 0 0 0px;
min-width: 84px; /* be nice to Opera */
}
.tabs-nav a, .tabs-nav a span {
display: block;
padding: 0 10px;
background: url(tab.png) no-repeat;
}
.tabs-nav a {
position: relative;
top: 1px;
z-index: 2;
padding-left: 0;
color: #000 !important;
font-size: 12px;
font-weight: bold !important;
line-height: 1.2;
text-align: center;
text-decoration: none !important;
white-space: nowrap; /* required in IE 6 */
}
.tabs-nav .tabs-selected a {
color: #000;
}
.tabs-nav .tabs-selected a, .tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active {
background-position: 100% -150px;
outline: 0; /* prevent dotted border in Firefox */
}
.tabs-nav a, .tabs-nav .tabs-disabled a:hover, .tabs-nav .tabs-disabled a:focus, .tabs-nav .tabs-disabled a:active {
background-position: 100% -100px;
}
.tabs-nav a span {
width: 64px; /* IE 6 treats width as min-width */
min-width: 64px;
height: 18px; /* IE 6 treats height as min-height */
min-height: 18px;
padding-top: 6px;
padding-right: 0;
}
*>.tabs-nav a span { /* hide from IE 6 */
width: auto;
height: auto;
}
.tabs-nav .tabs-selected a span {
padding-top: 7px;
}
.tabs-nav .tabs-selected a span, .tabs-nav a:hover span, .tabs-nav a:focus span, .tabs-nav a:active span {
background-position: 0 -50px;
}
.tabs-nav a span, .tabs-nav .tabs-disabled a:hover span, .tabs-nav .tabs-disabled a:focus span, .tabs-nav .tabs-disabled a:active span {
background-position: 0 0;
}
.tabs-nav .tabs-selected a:link, .tabs-nav .tabs-selected a:visited, .tabs-nav .tabs-disabled a:link, .tabs-nav .tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor… */
cursor: text;
}
.tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active { /* @ Opera, we need to be explicit again here now… */
cursor: pointer;
}
.tabs-nav .tabs-disabled {
opacity: .4;
}
.tabs-container {
border: 1px solid #ccc;
padding: 1em 8px;
background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */
min-height: 150px;
}
.tabs-loading {
padding: 0 0 0 20px;
background: url(/images/loading.uitabs.gif) no-repeat 0 50%;
}
/* Tabs Customization - ready to use image backgrounds to each tab */
.tabs-nav .tab_cama_on {background-color: #FF6600; border:1px solid #FF6600;}
.tabs-nav .tab_mesa_on {background-color: #FF6600; border:1px solid #FF6600;}
.tabs-nav .tab_banho_on {background-color: #FF6600; border:1px solid #FF6600;}
.tabs-nav .tab_cama_off {background-color: #FF9966; border:1px solid #FF9966;}
.tabs-nav .tab_mesa_off {background-color: #FF9966; border:1px solid #FF9966;}
.tabs-nav .tab_banho_off {background-color: #FF9966; border:1px solid #FF9966;}
Filed under: Javascript, jQuery | 0 Comments
Tags: jQuery, menu tab, jquery tab, ajax tab, menu abas, menu jquery, menu lista horizontal, menu ajax
PHP Class Header Files Handle
Escrevi uma classe para manusear a inclusão dos arquivos CSS e Javascript no cabeçalho das páginas. Ele funciona da seguinte maneira:
Imagina que você tenha 10 arquivos CSS, e queira substituir estas 10 inclusões (http_requests) por apenas 2 inclusões. Ou seja, 2 arquivos CSS onde cada um deles tenha embutido, o conteúdo de 5 dos arquivos anteriores. Bom, legal, se fosse só pra isso, bastaria você utilizar uma classe de PHP Minify por exemplo a do VulgarisOverIp.
Mas a grande jogada aqui está no agrupamento dos arquivos, ou seja, você conseguir definir quaise arquivos estarão juntos em cada Package (para fazer o balanceamento de requests x peso por arquivo). E flexibilizar o REBUILD de cada package específico, caso 1 dos arquivos do pacote seja atualizado no futuro (não sendo necessário assim, re-criar todos os pacotes).
O resultado final desta classe PHP é:
<link rel=”stylesheet” type=”text/css” href=”http://www.exemplo.com/css/style.pk0.min_v.1.0.css” media=”screen”/>
<link rel=”stylesheet” type=”text/css” href=”http://www.exemplo.com/css/style.pk1.min_v.1.0.css” media=”screen”/>
<!– EMBEDED SCRIPTS JAVASCRIPT ******************************************** –>
<script type=”text/javascript” src=”http://www.exemplo.com/js/javascript.pk0.min_v.1.0.js”></script>
<script type=”text/javascript” src=”http://www.exemplo.com/js/javascript.pk1.min_v.1.0.js”></script>
<script type=”text/javascript” src=”http://www.exemplo.com/js/javascript.pk2.min_v.1.0.js”></script>
Olhando um pouco mais de perto, a estrutura funciona assim:
//Include the header files handle class file
include(PATH_CLASSES .’/class.headerfiles.php’);
$hFiles = new HeaderFiles;
$hFiles->path_root_CSS = ‘root/www/site/css’;
$hFiles->path_root_JS = ‘root/www/site/js’;
$hFiles->path_public_CSS = ‘http://www.example.com/css’;
$hFiles->path_public_JS = ‘http://www.example.com/js’;// Setting the 2 packages of CSS files - do not use the enxtension file: .css (if the name is: style.css, just use style)
define(’VERSION_CSS’, ‘1.0′);
define(’SCRIPTS_CSS’, serialize(array(
‘0′=>array(’file1′,
‘file2′,
‘1′=>array(’file3′,
‘file4′,
‘file5′)
)));
define(’REBUILD_CSS’, serialize(array(’*')));// Generating Embeded CSS
$EMBEDED_SCRIPT_CSS = $hFiles->SetIncludeFiles(unserialize(SCRIPTS_CSS),’css’,VERSION_CSS,’site’,unserialize(REBUILD_CSS));// Generating Embeded Javascript
// $EMBEDED_SCRIPT_JS = $hFiles->SetIncludeFiles(unserialize(SCRIPTS_JS),’js’,VERSION_JS,’site’,unserialize(REBUILD_JS));echo $EMBEDED_SCRIPT_CSS;
// result: <link rel=”stylesheet” type=”text/css” href=”……
Para o caso do CSS, esta classe faz a função de MINIFY, retirando comentários e espaços em branco desnecessários dos arquivos CSS de origem. Porém, para os arquivos Javascript, ela apenas agrupa os arquivos dentro dos pacotes, sem fazer nenhuma alteração neles (reduzindo apenas o número de requisições HTTP).
O quê pode melhorar?
- Incluir a chamada de alguma classe de MINIFY de Javascript, a fim de reduzir o tamanho (Kb) dos pacotes gerados.
Abaixo está o código completo da classe:
/**
* Project: headerFiles
* File: class.headerfiles.php
*
* Description:
*
* This class is used to manage CSS and JAVASCRIPT files in the header of the page.
* The main feature is not to compress or minify CSS and JS (but this class also do it).
*
* I was focused on really manage this files, what I mean is: Imagine that you
* have a set of 10 CSS files and 10 JS files, and you want to JOIN them into
* 2 packages of 5 files each. (CSS: pk0 , pk1 - JS: pk0, pk1)
*
* When you should to update one of these 5 files (of each pack), you can just
* rebuild the package number what it is inside (not the both package).
*
* With this class you can MINIFY some CSS files and JOIN JS files into some packages containing
* a certain number of files inside it.
*
* More practical:
define(’VERSION_CSS’, ‘1.0′);
define(’SCRIPTS_CSS’, serialize(array(
‘0′=>array(’file1′,
‘file2′,
‘1′=>array(’file3′,
‘file4′,
‘file5′)
)));
define(’REBUILD_CSS’, serialize(array(’*')));
*
* This will generate 2 Packages (pk0 and pk1), with these CSS files inside it, without comments - minify version)
* The parameter ‘*’ is used to rebuild ALL Packages or generate it at the first time.
*
* If someday you update your ‘file2.css’, just rebuild the package 2 [ serialize(array('2')) ]
* or if you need to Rebuild more than one package, use: [ serialize(array('2','3','4')) ]
*
* @link http://hlibco.wordpress.com/
* @author Felipe Hlibco <hlibco at gmail dot com>
* @package Header
* @version 1.0.0
*/
/**
* USAGE EXAMPLE
* ————-
//Include the header files handle class file
include(PATH_CLASSES .’/class.headerfiles.php’);
$hFiles = new HeaderFiles;
$hFiles->path_root_CSS = ‘root/www/site/css’;
$hFiles->path_root_JS = ‘root/www/site/js’;
$hFiles->path_public_CSS = ‘http://www.example.com/css’;
$hFiles->path_public_JS = ‘http://www.example.com/js’;
// Setting the 2 packages of CSS files - do not use the enxtension file: .css (if the name is: style.css, just use style)
define(’VERSION_CSS’, ‘1.0′);
define(’SCRIPTS_CSS’, serialize(array(
‘0′=>array(’file1′,
‘file2′,
‘1′=>array(’file3′,
‘file4′,
‘file5′)
)));
define(’REBUILD_CSS’, serialize(array(’*')));
// Generating Embeded CSS
$EMBEDED_SCRIPT_CSS = $hFiles->SetIncludeFiles(unserialize(SCRIPTS_CSS),’css’,VERSION_CSS,’site’,unserialize(REBUILD_CSS));
// Generating Embeded Javascript
// $EMBEDED_SCRIPT_JS = $hFiles->SetIncludeFiles(unserialize(SCRIPTS_JS),’js’,VERSION_JS,’site’,unserialize(REBUILD_JS));
echo $EMBEDED_SCRIPT_CSS;
*
*
*
*/
class HeaderFiles {
var $path_root_CSS;
var $path_root_JS;
var $path_public_CSS;
var $path_public_JS;
/* Public: Include CSS and Javascript files in the header */
/*
PARAMETERS:
$filenamePool: (string | array)
$fileType: (string) ‘css’ | ‘js’
$version: (string)
$pack : (integer) [0] Does not exists a default package [1] Exists a default package
$rebuild: (integer) [0] Do not rebuild ths script [1] Rebuild the script
*/
function SetIncludeFiles($packageFiles, $fileType, $version = ‘1.0′, $object = ’site’, $rebuild = 0)
{
/* Validate Version */
if (empty($version)) { $version = ‘1.0′; }
/* Add file type default settings */
if ($fileType == ‘css’)
{
$preName = ’style’;
$pathPublic = $this->path_public_CSS;
$pathRoot = $this->path_root_CSS;
}
elseif ($fileType == ‘js’)
{
$preName = ‘javascript’;
$pathPublic = $this->path_public_JS;
$pathRoot = $this->path_root_JS;
}
/* Identifying Object */
if ($object != ’site’)
{
$pathPublic .= ‘/’ . $object;
$pathRoot .= ‘/’ . $object;
}
/* Get the files parsed */
if (!is_array($filenamePool) && !empty($filenamePool))
{
$filenamePool = array($filenamePool);
}
/* For each file parsed into package, loop */
foreach($packageFiles as $package=>$files)
{
/* Generate the filename for each object type */
if ($object == ’site’)
{
$filename = $preName . ‘.pk’ . $package . ‘.min_v.’ . $version . ‘.’ . $fileType;
}
else
{
/* Just allow 1 script file per object (film / filmclub / theater) */
$filename = $packageFiles[0] . ‘.’ . $fileType;
}
/* Validate rebuild activation */
if (!is_array($rebuild)) { $rebuild = array(); }
/* Rebuild some specified package or Re-generate all packages ‘*’ */
if (in_array($package,$rebuild) || in_array(’*',$rebuild))
{
/* Handle Files from diferent way */
if ($fileType == ‘css’)
{
foreach($files as $file)
{
$content = file_get_contents($pathRoot . ‘/’ . $file . ‘.’ . $fileType);
$packageContent .= str_replace(’; ‘,’;',str_replace(’ }’,'}’,str_replace(’{ ‘,’{',str_replace(array(”\r\n”,”\r”,”\n”,”\t”,’ ‘,’ ‘,’ ‘),”",preg_replace(’!/\*[^*]*\*+([^/][^*]*\*+)*/!’,”,$content)))));
}
}
elseif ($fileType == ‘js’)
{
foreach($files as $file)
{
$packageContent .= file_get_contents($pathRoot . ‘/’ . $file . ‘.’ . $fileType);
}
}
$fp = fopen($pathRoot . ‘/’.$filename, ‘w+’);
fwrite($fp, $packageContent);
fclose($fp);
unset($packageContent);
}
/* Generating Tag */
if ($fileType == ‘css’)
{
$outputTag .= ‘<link rel=”stylesheet” type=”text/css” href=”‘ . $pathPublic . ‘/’ . $filename . ‘” media=”screen”/>’ . “\r\n”;
}
elseif ($fileType == ‘js’)
{
$outputTag .= ‘<script type=”text/javascript” src=”‘ . $pathPublic . ‘/’ . $filename . ‘”></script>’ . “\r\n”;
}
}
/* Return the content */
return $outputTag;
}
}
?>
Filed under: php | 0 Comments
Tags: php, class, header handle, header files, header css, header javascript, php handle header, php header files
PHP Cookie Handler Class
Descobri hoje um BUG na classe COOKIE HANDLER CLASS. Para os que usam cookies com arrays serializados, e estão tendo problemas para resgatar os dados dos cookies utilizando esta classe, acredito que possam estar com o mesmo problema que eu estava.
Para fazer download da classe vá em: http://www.phpclasses.org/browse/package/2671.html
A consideração que tenho a fazer é no método ReadCookie:
$sCookie = unserialize($_COOKIE[$name]); // Forma original
$sCookie = unserialize(stripslashes($_COOKIE[$name])); // Minha modificação (estou usando PHP5.1)
Esta classe é bem simples, porém muito eficiente. A documentação dela é bem resumida, mas dá pra entender. Quase com certeza você irá precisar criar suas próprias extensões para ela, mas as 4 operações básicas com os Cookies, pode deixar por conta dela.
Filed under: Desenvolvimento, php | 0 Comments
Tags: php, cookie, php cookie class, cookie handler, php cookie class error, serialized cookie
Web 2.0 vida colaborativa
Hoje aconteceu um fato engraçado comigo que por 60 segundos me deixou muito feliz por estar conseguindo colaborar com alguém de uma forma mais pessoal.
Muito se têm falado de Web 2.0, WiKi, foco no consumidor, Internet colaborativa, etc. A colaboração em questão na maioria das vezes é no formado de 1 para n ou n para n. Dificilmente você acha uma colaboração ponto a ponto.
E foi exatamente o que aconteceu comigo ainda há pouco. Um tal de Eduardo de Campos do Jordão (SP), me ligou pelo Skype. Sujeito super gentil e educado, parece ser uma ótima pessoa. Bom, mas por quê ele me ligou? Simplesmente para testar o Skype. Meu nome apareceu na primeira busca que ele deve ter feito, e como a idéia era testar o programa, qualquer pessoa servia.
Isso é que eu chamo de colaboração ponto-a-ponto, ele escolheu uma pessoa para ajudá-lo, e pronto, 1 minutos depois já sabia que o programinha funcionava bem.
Grupos de e-mails, fóruns, WiKis, Blogs, Podcasts, Feeds… Tudo isso é muito legal como meio de troca de informação e colaboração, mas você poder se sentir útil ali diretamente, de forma simples, rápida, levanta o astral.
Filed under: Outros | 0 Comments
Tags: colaborativa, web 2.0
Google Gears, iniciando
Hoje lembrei do Google Gears, que havia lido algumas coisas há bastanet tempo, mas nunca tinha tido um propósito para criar algo que usasse suas funcionalidades. Até que hoje eu identifiquei que um dos serviços que estou desenvolvendo para a “moviemobz” poderia se beneficiar do Google Gears. Então, lá fui eu.
A primeira coisa que fui atrás foi saber se o IE para Windows Mobile suportava AJAX, e a resposta é… SIM! Mas se a versão for Windows Mobile 5.0, não existe o document.getElementById(), (na versão 6.0 existe!), mas para contornar isso, existe o document.all.
Achei muito bacana a documentação deles referente a limitações do Windows Mobile 5.0 e 6.0, vale uma conferida.
Abaixo estão alguns passos que percorri para executar meu Hello Word:
Passo 1 - instalar o google gears na máquina, http://gears.google.com/
Passo 2 - instalar e configurar o Windows Mobile Device Emulator no computador: http://code.google.com/apis/gears/mobile.html#env_setup
Passo 3 - ler as seções Getting Started e Tutorial (http://code.google.com/apis/gears/design.html)
Passo 4 - ir direto aos Samples, pra quê ler a documentação né? Calma que essa hroa vai chegar! http://code.google.com/apis/gears/sample.html
Passo 5 - trabalhar em cima do exemplo mais simples, jogando os arquivos num servidor de desenvolvimento e testar no smartphone, acoselho este exemplo aqui: http://code.google.com/apis/gears/samples/hello_world_resourcestore.html
Deu certo! Super simples de configurar. Meu próximo passo será criar uma aplicação que permita gravar dados locais offline e quando o usuário se conectar à internet, a aplicação transmita os dados.
Filed under: mobile | 0 Comments
Tags: ajax, google gears, mobile, smartphone
Tenho certeza que não sou o único desenvolvedor PHP que vive com esta pergunta no fundo da alma.
Abaixo vou colocar uma lista com algumas das IDEs que já testei, outras que baixei mas não usei ainda, e alguns editores, agradeço se vocês comentarem dizendo quais IDEs usam e seus motivos (pontos fortes e fracos)
Zend Studio - ótima interface, PHPDoc embutido, hide/expand os métodos, mas o FTP é bem ruim…
HTML-Kit - Editor muito leve, FTP ótimo, muitas opções de configurações e plugins, não te deixa na mão, mas peca na interface. Adicionando vários plugins ele fica bem legal, e bem pesado também.
jEdit - Simples demais, passei uns 10 minutos usando, mas achei que faltava muita coisa, me parecia estar usando a calculadora básica do windows, mas sem o botão de “scientific mode”.
Aptana Studio - visual cool, apesar da minha primeira experiência com ele foi de cara uma tela de erro do windows com relação ao Java, é muito interessante, com recursos similares ao Zend Studio. Uma feature legal é um grid com as tarefas que você pode adicionar e depois validando como realizada ou não. Isso evita você ficar perdido no projeto.
PHPed - usei há muito tempo atrás, teve várias mudanças, será que alguém é a favor?
Não mencionei aqui IDE nem editores pra MAC, I´m sorry.
Conto com a participação de vocês para dizer quais IDEs usam e porquê.
Filed under: Desenvolvimento | 0 Comments
Tags: aptana, php, ide, zend-studio, html-kit, jedit, PHPed
RSS, RDF, ATOM, todos feeds?
Na hora de gerar conteúdo XML para ser disponibilizado para outros aplicativos através de APIs, qual formato de feeds escolher? RSS, RDF, ATOM, ou algum outro?
Digamos que você é o provedor de conteúdo, e você mesmo irá desenvolver um 3rd part component para ler este conteúdo o qual poderá ser instalado em serviços como Netvibes, iGoogle, Live, Orkut, Desktop, entre outros, a flexibilidade é grande e a escolha muito importante.
Visto que se no futuro você resolver não mais disponibilizar a informação no formato X, mas sim no formato Y, deverá ter que re-codificar o componente e suas funcionalidades, ou seja, re-trabalho e mais investimentos ($ e tempo).
Podemos dizer a grosso modo que RDF refere-se a versão 1.0 do padrão RSS e possui a possibilidade de agregar mais informações (mais extensível) que o RSS 2.0 que é uma versão mais simples de trafegar informações a serem sindicalizadas.
Como o propósito deste Blog é apresentar as soluções que tomei quando me deparei com certos problemas e o porquê delas terem sido tomadas, lá vai: Há algumas semanas desenvolvi um módulo (gadget/widget) para o Netvibes e iGoogle, que iria consumir (ler) informações de um XML que o site “moviemobz” fosse gerar. Nesta hora tive que decidir qual formato adotar, optei pelo RSS 1.0 RDF, pois teria a flexibilidade de enviar mais conteúdo para o módulo de forma mais organizada e o tempo de desenvolvimento para executar os ajustes necessários nele seria menor.
Porém, não discarto a possibilidade de gerar feeds RSS 2.0 para outros leitores ou para ser sindicalizado de outra forma, esta opção foi tomada dado que além de gerar o feed, eu terai que criar o agregador também. Caso contrário, aconselho dar preferência ao RSS 2.0 pela sua simplicidade e maior adoção no mercado.
O Atom nem foi considerado pois possui a menor participação no mercado, sendo lido em menor escala se comparado com os padrões RSS e apesar de ser originado da iniciativa da IETF a fim de criar normas e padrões para sindicalização, ainda não é um “standard”.
Filed under: Feeds e formatos | 0 Comments
Tags: rss, rdf, atom, feeds, rss 1.0, rss 2.0
CSS e Javascript minify
Apesar de eu ter criado minha própria classe de Minify de CSS, não irei postá-la aqui neste momento, mas sim, irei indicar alguns sites e classes que fazem o Minify de CSS e outros que trabalham com Javascript.
MINIFY JAVASCRIPT
http://www.compressjavascript.com/
http://fmarcia.info/jsmin/test.html
MINIFY CSS (usando PHP)
http://www.vladimirated.com/web-development-minify-css-using-php-and-cssmin-class
MINIFY JAVASCRIPT e CSS
http://code.google.com/p/minify/wiki/UserGuide
MINIFY JAVASCRIPT, CSS e HTML (usando PHP)
http://aciddrop.com/2008/01/21/boost-your-website-load-time-with-3-lines-of-code/
Já que não sou expert na área de Tunning e Boost Performance, será que alguém pode explicar o caso de uso abaixo?
Dado que possuímos 5 arquivos JS já minificados, cada um possuindo 50Kb, temos 5 HTTP-Request e a transferência de 250Kb totais. É mais válido manter esse número de requests (comprometendo o load time), ou unir todos estes arquivos em 1 só de 250Kb, e comprometer toda a página já que arquivos grandes ficam mais vulneráveis a falhas de transferência de pacotes?
Minha grande dúvida é: Existe algum tamanho ótimo de arquivo JS e de CSS? (Sem ser os recomendados pelo Web Site Optimization - os quais considero difícies de serem atingidos)
Filed under: Javascript, Performance, css | 0 Comments
Tags: Javascript, minify, css
Um recurso bem simples de Javascript é o Replace de strings dentro de outras strings. Abaixo está um exemplo bem simples de como fazer isso usando o jQuery.
Nosso objetivo é pegar o valor do campo de texto (Input Text) de Id=”campoTexto”, e substituir a palavraVelha pela palavraNova sempre que a palavraVelha aparecer.
var palavraVelha = ‘casa’;
var palavraNova = ‘apartamento’;
$(”#campoTexto”).val($(”#campoTexto”).val().replace(palavraVelha,palavraNova));
Desta forma, o conteúdo do campoTexto será sempre seu conteúdo original, mudando a palavraVelha pela palavraNova.
Para ver como efetuar replaces de substrings usando expressões regulares aconselho dar uma olhada no fórum Guiadohardware.net na resposta do usuário GPR2K no seguinte link:
http://www.guiadohardware.net/comunidade/replace-javascript/44829/
Filed under: jQuery | 0 Comments
Tags: Javascript, jQuery, replace
Back to Press
Olá pessoal,
depois de um bom tempo sem escrever, por falta de tempo, acreditem, estou reformulando o blog, fazendo alguns ajustes para que fique fácil a navegação e eu consiga me organizar para disponibilizar um bom conteúdo para vocês sobre PHP, MySQL, AJAX, jQuery, JSON, Javascript, UML e Gestão de Projetos de TI. Além de algumas coisas que considero interessante sobre Marketing (online e offline), mídia em geral, tecnologia e entretenimento. Pode parecer muita coisa, mas não é, no fundo está tudo relacionado.
Filed under: Outros | 0 Comments
