Bem Bolado

Fonte: http://www.uhull.com.br/

Menu horizontal em lista com Imagens

Mostrei como fazer um bonito menu horizontal em lista usando imagens.
Dimensões:

Precisaremos da imagem abaixo:

HTML

<div id=”navigation”>
<ul id=”nav”>
<li id=”home”><a class=”current” href=”#”>Inicio</a></li>
<li id=”tutorials”><a href=”#tutorials” >Tutoriales</a></li>
<li id=”resources”><a href=”#resources”>Recursos</a></li>
<li id=”contact”><a href=”#contact”>Contacto</a></li>
</ul>
</div>

CSS

#navigation {
background: #FFF url(pix/bgMenu.gif) left repeat-x;
width: 450px; /* Ancho del contenedor de nuestro menú*/
height: 35px; /*Altura del contenedor de nuestro menú*/
margin:auto;
}

#navigation ul {
display: block;
list-style: none;
background: #FFF url(“pix/my_nav.png”) top left no-repeat;
margin: 0;
padding: 0;
width: 280px; /*Ancho de nuestro menú (la imagen)*/
height: 35px; /*Altura de la imagen*/
}

#navigation ul li {
float: left;
position: relative;
z-index: 100;
margin: 0;
padding: 0;
width: 70px; /*Ancho de cada item u opción de nuestro menú*/
height: 35px; /*Altura de cada item*/
}

#navigation ul li a {
display: block;
text-decoration: none;
text-indent: -999em;
width: 70px; /* Ancho de cada link de nuestro menú*/
height: 35px; /* Alto de cada link*/
}

#navigation ul li a:hover,
#navigation ul li a.current {
background-image: url(“pix/my_nav.png”); /* Estado activo*/
background-repeat: no-repeat;
}

#navigation ul li#home a:hover { background-position: 0px -35px; }
#navigation ul li#home a.current,
#navigation ul li#home a.current:hover { background-position: 0px -70px; }

#navigation ul li#tutorials a:hover { background-position: -70px -35px; }
#navigation ul li#tutorials a.current,
#navigation ul li#tutorials a.current:hover { background-position: -70px -70px; }

#navigation ul li#resources a:hover { background-position: -140px -35px; }
#navigation ul li#resources a.current,
#navigation ul li#resources a.current:hover { background-position: -140px -70px; }

#navigation ul li#contact a:hover { background-position: -210px -35px; }
#navigation ul li#contact a.current,
#navigation ul li#contact a.current:hover { background-position: -210px -70px; }

#navigation ul li a.current:hover { cursor: default; }

Exemplo

Fonte: http://www.infectedfx.net/

Slide Menu em CSS

Um efeito bem interessante para um menu em html

HTML

<script type=”text/javascript” language=”javascript” src=”focus_slide.js”></script>

<ul id=”mContainer”>
<li><a href=”#” title=”Item One”>Item One</a></li>
<li><a href=”#” title=”Item Two”>Item Two</a></li>
<li><a href=”#” title=”Item Three”>Item Three</a></li>
<li><a href=”#” title=”Item Four”>Item Four</a></li>
<li><a href=”#” title=”Item Five”>Item Five</a></li>
</ul>

JavaScript(salve em um arquivo com o nome focus_slide.js)

/******************************************************
Focus Slide
version 1.0
last revision: 12.17.2004
steve@slayeroffice.com

Should you improve upon or
modify this code, please let me know
so that I can update the version hosted
at slayeroffice.

PLEASE LEAVE THIS NOTICE INTACT!

******************************************************/

//window.onload = init;

var d=document;        // shortcut reference to the document object
var activeLI = 0;        // the currently “active” list element – value represents its index in the liObj array
var zInterval = null;    // interval variable

var SLIDE_STEP = 8;    // how many pixels to move the sliding div at a time
var SLIDER_WIDTH = 74;    // the width of the sliding div. used to calculate its left based on the width and left of the active LI element

function init() {
// bail out if this is an older browser or Opera which gets the offsets wrong
// the opera issue is fixable by subtracting the container UL’s width from the offsetLefts…but I dont care enough to do it
// this does NOT break opera, it just wont get the sliding thing

if(!document.getElementById || window.opera)return;

// create references to the LI’s
mObj = d.getElementById(“mContainer”);
liObj = mObj.getElementsByTagName(“li”);

// set up the mouse over events
for(i=0;i<liObj.length;i++) {
liObj[i].xid = i;
liObj[i].onmouseover = function() { initSlide(this.xid); }
}

// create the slider object
slideObj = mObj.appendChild(d.createElement(“div”));
slideObj.id = “slider”;

// position the slider over the first LI
x = liObj[activeLI].offsetLeft + (liObj[activeLI].offsetWidth/3 – SLIDER_WIDTH/3)-5;
y = liObj[activeLI].offsetTop-3;
slideObj.style.top = y + “px”;
slideObj.style.left = x + “px”;
}

function initSlide(objIndex) {
// return if the user is mousing over the currently active LI
if(objIndex == activeLI)return;
// clear the interval so we can start it over in a few lines to avoid doubling up on intervals
clearInterval(zInterval);

// set the active list item to the object index argument
activeLI = objIndex;
// figure out the destination for the sliding div element
destinationX = Math.floor(liObj[activeLI].offsetLeft + (liObj[activeLI].offsetWidth/3 – SLIDER_WIDTH/3))-5;
// start the interval
intervalMethod = function() { doSlide(destinationX); }
zInterval = setInterval(intervalMethod,10);
}

function doSlide(dX) {
// get the current left of the sliding div
x = slideObj.offsetLeft;
if(x+SLIDE_STEP<dX) {
// div is less than its destination, move it to the right
x+=SLIDE_STEP;
slideObj.style.left = x + “px”;
} else if (x-SLIDE_STEP>dX) {
// div is more than its destination, move to the left
x-=SLIDE_STEP;
slideObj.style.left = x + “px”;
} else  {
// div is within the boundaries of its destination. put it where its supposed to be
// and clear the interval
slideObj.style.left = dX + “px”;
clearInterval(zInterval);
zInterval = null;
}
}

CSS

#mContainer {
position:relative;
margin:0 auto;
height:25px;
background-color:#F1F1F1;
border-bottom:2px solid #E2E2E2;
text-align:center;
padding:5px 0 0 0;
}

#mContainer li {
position:relative;
display:inline;
margin:0 10px 0 12px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:0;
z-index:2;
}

#mContainer li a         {text-decoration:none;}
#mContainer li a:link    {color:#999;}
#mContainer li a:visited {color:#333;}
#mContainer li a:hover      {color:#DA0911;}

#slider {
position:absolute;
/*background-color:#CFDCFF;
border:1px solid #78919B;*/
border-bottom:3px solid #DA0911;
width:74px;
height:20px;
padding:0;
z-index:1;
}

Fonte: http://www.infectedfx.net/

Tabelas em Zebra

Você também acha muito trabalhoso ficar colocando cor um linha sim e outra não em uma tabela? Quem sabe esta dica o ajude

HTML

<table align=”center” id=”default” summary=”Ejemplo de tabla”>
<caption>
Autores en InfectedFX.net
</caption>
<thead>
<tr>
<th>Nombre</th>
<th>Ocupación</th>
<th>Website</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan=”3″>Total: 4 Usuarios </td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Infected-FX</td>
<td>Diseñador</td>
<td><a href=”http://www.infectedfx.net”>www</a></td>
</tr>
<tr>
<td>Zetta</td>
<td>Developer</td>
<td><a href=”http://www.zetaweb.net”>www</a></td>
</tr>
<tr>
<td>Zillah</td>
<td>A.I.</td>
<td><a href=”http://www.blogzillah.com”>www</a></td>
</tr>
<tr>
<td>Hecgo</td>
<td>Developer</td>
<td><a href=”http://www.hecgo.com”>www</a></td>
</tr>
</tbody>
</table>

CSS

#default {
border-collapse:collapse;
background-color: #E8E8E8;
width:100%;
}
#default caption{
background-color:#59819F;
border-bottom:3px solid #C2DBEF;
color:#FFF;
padding:10px;
text-transform:uppercase;
}

#default thead th{
background-color:#18394F;
border-bottom:3px solid #59819F;
color:#FFF;
padding:5px;
}

#default tbody tr td {
padding: 3px 8px;
}

#default tfoot tr td{
background-color:#59819F;
color:#FFF;
padding:4px;
text-align:center;
}

/*/////////////// TABLE DEMO GREEN //////////////////*/

#demoGreen {
border-collapse:collapse;
background-color: #E8E8E8;
width:100%;
}
#demoGreen caption{
background-color:#99CC00;
border-bottom:3px solid #669900;
color:#FFF;
padding:10px;
text-transform:uppercase;
}

#demoGreen thead th{
background-color:#333;
border-bottom:3px solid #000;
color:#FFF;
padding:5px;
}

#demoGreen tbody tr td {
padding: 3px 8px;
}

#demoGreen tfoot tr td{
background-color:#666;
color:#FFF;
padding:4px;
text-align:center;
}

/*/////////////// TABLE DEMO BLUE //////////////////*/
#demoBlue {
border-collapse:collapse;
background-color: #E8E8E8;
width:100%;
}
#demoBlue caption{
background-color:#50ADEA;
border-bottom:3px solid #1975D7;
color:#FFF;
padding:10px;
text-transform:uppercase;
}

#demoBlue thead th{
background-color:#F5F5F5;
border-bottom:3px solid #CCC;
color:#666;
padding:5px;
}

#demoBlue tbody tr td {
padding: 3px 8px;
}

#demoBlue tfoot tr td{
background-color:#E7E7E7;
color:#B7B7B7;
padding:4px;
text-align:center;
}

JavaScript

<script type=”text/javascript”>
// this function is needed to work around
// a bug in IE related to element attributes
function hasClass(obj) {
var result = false;
if (obj.getAttributeNode(“class”) != null) {
result = obj.getAttributeNode(“class”).value;
}
return result;
}

function stripe(id) {

// the flag we’ll use to keep track of
// whether the current row is odd or even
var even = false;

// if arguments are provided to specify the colours
// of the even & odd rows, then use the them;
// otherwise use the following defaults:
var evenColor = arguments[1] ? arguments[1] : “#F0F8FF”;
var oddColor = arguments[2] ? arguments[2] : “#C2DBEF”;

// obtain a reference to the desired table
// if no such table exists, abort
var table = document.getElementById(id);
if (! table) { return; }

// by definition, tables can have more than one tbody
// element, so we’ll have to get the list of child
// <tbody>s
var tbodies = table.getElementsByTagName(“tbody”);

// and iterate through them…
for (var h = 0; h < tbodies.length; h++) {

// find all the <tr> elements…
var trs = tbodies[h].getElementsByTagName(“tr”);

// … and iterate through them
for (var i = 0; i < trs.length; i++) {

// avoid rows that have a class attribute
// or backgroundColor style
if (! hasClass(trs[i]) &&
! trs[i].style.backgroundColor) {

// get all the cells in this row…
var tds = trs[i].getElementsByTagName(“td”);

// and iterate through them…
for (var j = 0; j < tds.length; j++) {

var mytd = tds[j];

// avoid cells that have a class attribute
// or backgroundColor style
if (! hasClass(mytd) &&
! mytd.style.backgroundColor) {

mytd.style.backgroundColor =
even ? evenColor : oddColor;

}
}
}
// flip from odd to even, or vice-versa
even = ! even;
}
}
}
</script>

<script type=”text/javascript”>
window.onload = function() {
stripe(‘default’);
stripe(‘demoGreen’, ‘#ECFFAF’, ‘#F3FFCF’);
stripe(‘demoBlue’, ‘#FFFFFF’, ‘#F6F6F6′);
stripe(‘demoRed’, ‘#FFEFEF’, ‘#EFC2C2′);
}
</script>

Exemplos

Fonte: http://www.infectedfx.net/

Formulario elegante

Vou mostrar como fazer um formulário ficar mas atraente usando css e algumas pequenas imagens.

Precisaremos:

• icon_user.gif
• icon_pass.gif
• bgForm.gif

HTML

<form action=”#” method=”post” name=”formLogin”>
<fieldset>
<legend>Acceso a usuarios </legend>
<p>

<label for=”username1″ accesskey=”n”>Username: </label>
<input id=”username1″ name=”username1″ tabindex=”1″ value=”" title=”username1″ type=”text”>
</p>
<p>
<label for=”password2″ accesskey=”e”>Password:</label>
<input id=”password2″ name=”password2″ tabindex=”2″ title=”password2″ type=”password2″>
</p>
<p>

<input value=”Ingresar” id=”submit3″ class=”button” tabindex=”3″ type=”submit”>
</p>
</fieldset>
</form>

CSS

.formLogin {
width: 250px;
margin:auto;
font-size:10px;
}

.formLogin fieldset {
background:#F9F9F9 url(pix/bgForm.gif);
border:1px solid #CCC;
padding: 10px;
margin: 0;
}

.formLogin fieldset legend {
color:#666;
}

.formLogin label {
display: block;
float: left;
padding: 0;
width:70px;
margin:5px 5px 5px 0px;
}

.formLogin fieldset label:first-letter {
color:#999;
}
.formLogin input {
width:50%;
border:1px solid #A0A0A0;
font-size:10px;
padding:3px 0px 3px 25px;
}
.formLogin input#username {
background:#FFF url(pix/icon_user.gif) no-repeat left;
}
.formLogin input#password {
background:#FFF url(pix/icon_pass.gif) no-repeat left;
}

.formLogin input.button {
width:95%;
background-color:#C2C7C0;
border:1px solid #A0A0A0;
padding:3px;
color:#FFF;
}

Fonte: http://www.infectedfx.net/

Este exemplo esta no link acima no arquivo compactado

Menu horizontal em lista

Aprendendo a fazer um Menu horizontal com listas

HTML

<div id=”menu”>
<ul id=”menuList”>
<li id=”active”><a href=”#”>Item 01 </a></li>
<li><a href=”#”>Item 02 </a></li>
<li><a href=”#”>Item 03 </a></li>
<li><a href=”#”>Item 04 </a></li>
<li><a href=”#”>item 05 </a></li>
</ul>
</div>

CSS

/* CONTENEDOR DEL MENU*/
#menu {
margin:25px 0px 0px 0px;
padding:0px;
border-bottom:4px solid #000;
}

/* LISTA DEL MENU */
#menuList {
list-style-type: none;
padding:0px 0px 24px 30px;
margin: 0px;
}

/* OPCIONES DEL MENÚ */
#menuList li {
float: left;
height: 24px;
margin: 0px 1px 0 1px;
}

/* LINKS GENERALES EN EL MENÚ*/
#menuList a {
float: left;
display: block;
text-decoration: none;
padding: 5px 15px 5px 15px;
}

#menuList a:link,
#menuList a:visited {
background-color:#CCC;
color: #333;
}

#menuList a:hover {
background: #333; color:#FFF;
}

/* OPCION ACTIVA */
#menuList li#active a:link,
#menuList li#active a:visited {
background-color: #000;
color:#FFF;
}

#menuList li#active a:hover {
background-color:#A90000;
color: #FFF;
}

Exemplo

Fonte: http://www.infectedfx.net

Pulldown apartir de uma lista

Para quem tem pouco espaço para um menu, uma boa dica é este pulldown

HTML

<a title=”Mi Lista” onclick=”show_list(); return false;”  href=”#”>
<img src=”pulldown.gif” width=”200″  height=”20″ alt=”" />

</a>
<div style=”visibility: hidden;” id=”myList” onmouseover=”show_list()” onmouseout=”hide_list()”>
<ul>
<li> <a title=”InfectedFX” href=”http://infectedfx.net/”>InfectedFX</a> </li>
<li> <a title=”KonceptoRadio” href=”http://konceptoradio.com/”>KonceptoRadio</a> </li>
<li> <a title=”Cinexcepcion” href=”http://cinexcepcion.com/”>Cinexcepci&oacute;n</a> </li>

<li> <a title=”Go2torials” href=”http://go2torials.com/”>Go2torials</a> </li>
<li> <a title=”Spiga” href=”http://spiga.com.mx/”>Spiga</a> </li>
</ul>
<p class=”close”>
<a title=”cerrar…” onclick=”hide_list(); return false;”  href=”#”>cerrar</a>

</p>
</div>
</div>

JavaScript

<script type=”text/javascript”>
function show_list () { document.getElementById(“myList”).style.visibility = “visible”; }
function hide_list () { document.getElementById(“myList”).style.visibility = “hidden”; }
</script>

CSS

<style type=”text/css” media=”screen”>
body {
margin: 0px;
padding: 0px;
background-color: #FFF;
font: 69% Verdana, Arial, Helvetica, sans-serif;
}

a    {outline:none; text-decoration:none;}

/* POSICION */

#pulldown {
margin:10%;
}

#pulldown img{border:none;}

/* LISTA */

#myList {
background-color: #fff;
border: 1px solid #dfdfdf;
display: block;
margin: 1px 0px 0px 0px;
padding: 0;
width: 200px;
}

#myList ul  {
list-style-type: none;
margin: 0;
padding: 0;
}

#myList ul li a {
display: block;
width: 190px;
padding:3px;
margin: 2px auto 4px auto;
border-bottom:1px solid #EEE;
}

#myList ul li a:link,
#myList ul li a:visited{
background-color:#FFFFFF;
color: #a80000;
}
#myList ul li a:hover {
background-color: #F7F7F7;
color: #000000;
}

/* BOTON CERRAR */
.close {margin:0px;}

.close a{
text-align:center;
display:block;
font-weight:bold;
padding:3px 0px;
}

.close a:link,
.close a:visited{
background-color:#EEE;
color:#333;
}

.close a:hover{
background-color:#990000;
color:#FFF;
}
</style>

Exemplo

Fonte: http://www.infectedfx.net/

Slides com JavaScript

Um ótimo recurso, segue abaixo

HTML

<!– CONTENEDOR –>
<div id=”slides_content”>
<!– LISTADO DE ITEMS –>
<ul class=”buttons”>
<li><a id=”current” href=”javascript:void(0)” onclick=”change(0,this);”>Slide 01</a></li><li><a href=”javascript:void(0)” onclick=”change(520,this);”>Slide 02</a></li>
<li><a href=”javascript:void(0)” onclick=”change(1040,this);”>Slide 03</a></li>
<li><a href=”javascript:void(0)” onclick=”change(1560,this);”>Slide 04</a></li>
</ul>

<!– ELEMENTOS –>
<div id=”elementos” style=”width:2100px; margin:0 0 0 0;”>
<!– SLIDE 01 –>

<div class=”slide 1″>
<h2>Title Content Slide 01</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque consequat tincidunt libero. Aenean euismod. Aenean tempus. Praesent purus dui, aliquam congue, aliquam eget, mattis vitae, libero. Integer sagittis magna quis mi. Donec iaculis odio vel purus. Morbi erat. Nam et libero. Proin eleifend elit quis enim. Vivamus sagittis nibh nec tellus. Donec lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
<p>Cras scelerisque mi auctor orci. Nullam laoreet. Sed gravida. Donec tellus arcu, hendrerit eu, fermentum consequat, accumsan at, dui. Sed a ipsum. Praesent sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed eu massa vitae nibh dictum mollis. Aliquam viverra. Suspendisse id enim. Mauris lobortis ante nec tellus. Aliquam interdum nisi vel nisl. Integer congue augue. Sed justo. Donec dui mi, imperdiet non, molestie sit amet, tristique ut, dui. Donec interdum elit ac nisl. Sed vitae lacus sed pede molestie placerat. Aenean faucibus consectetuer pede. </p>
</div>
<!– SLIDE 02 –>
<div class=”slide 2″>

<h2>Title Content Slide 02</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque consequat tincidunt libero. Aenean euismod. Aenean tempus. Praesent purus dui, aliquam congue, aliquam eget, mattis vitae, libero. Integer sagittis magna quis mi. Donec iaculis odio vel purus. Morbi erat. Nam et libero. Proin eleifend elit quis enim. Vivamus sagittis nibh nec tellus. Donec lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
</div>
<!– SLIDE 03 –>
<div class=”slide 3″>
<h2>Title Content Slide 03</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque consequat tincidunt libero. Aenean euismod. Aenean tempus. Praesent purus dui, aliquam congue, aliquam eget, mattis vitae, libero. Integer sagittis magna quis mi. Donec iaculis odio vel purus. Morbi erat. Nam et libero. Proin eleifend elit quis enim. Vivamus sagittis nibh nec tellus. Donec lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>

<p>Cras scelerisque mi auctor orci. Nullam laoreet. Sed gravida. Donec tellus arcu, hendrerit eu, fermentum consequat, accumsan at, dui. Sed a ipsum. Praesent sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed eu massa vitae nibh dictum mollis. Aliquam viverra. Suspendisse id enim. Mauris lobortis ante nec tellus. Aliquam interdum nisi vel nisl. Integer congue augue. Sed justo. Donec dui mi, imperdiet non, molestie sit amet, tristique ut, dui. Donec interdum elit ac nisl. Sed vitae lacus sed pede molestie placerat. Aenean faucibus consectetuer pede. </p>
</div>
<!– SLIDE 05 –>
<div class=”slide 4″>
<h2>Title Content Slide 04</h2>
<p>Cras scelerisque mi auctor orci. Nullam laoreet. Sed gravida. Donec tellus arcu, hendrerit eu, fermentum consequat, accumsan at, dui. Sed a ipsum. Praesent sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed eu massa vitae nibh dictum mollis. Aliquam viverra. Suspendisse id enim. Mauris lobortis ante nec tellus. Aliquam interdum nisi vel nisl. Integer congue augue. Sed justo. Donec dui mi, imperdiet non, molestie sit amet, tristique ut, dui. Donec interdum elit ac nisl. Sed vitae lacus sed pede molestie placerat. Aenean faucibus consectetuer pede. </p>
</div>

</div>
<!– TERMINA ELEMENTOS –>
</div>
<!– TERMINA EL CONTENDOR –>

JavaScript

/*//////////////////////////////////////////////////////////
/////////////Codigo original: Azer Koçulu//////////////////
/////////////Modificado: Infected-FX//////////////////////
/////////////////www.infectedfx.net//////////////////////
///////////////////////////////////////////////////////*/

function change(x,item)
{
document.getElementById(“current”).id = “”;
item.id = “current”;
if((x * (-1))<(getElementPosition(“elementos”).left – 10)){
distance = (x + getElementPosition(“elementos”).left) / 5;
start = getElementPosition(“elementos”).left;
for(i=0; i<=distance; i++){
setTimeout(“document.getElementById(\”elementos\”).style.margin = \”0 -” + ((start * (-1)) + (i*5)) + “px\”", i*5);
if(i==distance){
setTimeout(“document.getElementById(\”elementos\”).style.margin = \”0 -” + x + “px\”", i*5);
}
}
}else if((x * (-1))>(getElementPosition(“elementos”).left)){
distance = ((x + getElementPosition(“elementos”).left) / 5) * (-1);
start = getElementPosition(“elementos”).left;
for(i=0; i<=distance; i++){
setTimeout(“document.getElementById(\”elementos\”).style.margin = \”0 -” + ((start * (-1)) – (i*5)) + “px\”", i*5);
if(i==distance)
setTimeout(“document.getElementById(\”elementos\”).style.margin = \”0 -” + x + “px\”", i*5);
}
}
}

function getElementPosition(object){
var position = new Object;
position.left = parseInt(document.getElementById(object).style.marginLeft)
position.top = parseInt(document.getElementById(object).style.marginTop)
return position;
}

CSS

/*///////////////////
///// SLIDES JS /////
///////////////////*/

/* GENERALES*/

body {
font:12px Arial, Helvetica, sans-serif;
color:#818181;
}

a {
outline:none;
text-decoration:none;
}

a:link,
a:visited {color:#006699;}
a:hover {color:#00CCFF;}

.center {text-align:center;}

/* CONTENIDO GLOBAL*/
#slides_content {
width:520px; /* ANCHO DEL CONTENEDOR*/
overflow:hidden;
margin:auto;
}

/* HEADERS */
#slides_content h2 {
font:24px Arial;
letter-spacing:-1px;
font-weight:bold;
margin:5px;
color:#FF6600;
}

/* SLIDE */
#slides_content .slide {
float:left;
width:500px; /* ANCHO DE CADA SLIDE */
height:300px; /* ALTURA DE CADA SLIDE */
padding:10px;
border-top:5px solid #7596B7;
}

/* LISTA DE ITEMS */
.buttons{
text-align:center;
width:500px; /* ANCHO DEL MENU */
clear:both;
display:block;
list-style:none;
white-space: nowrap;
padding:0px;
margin:0px 0px 0px 0px;
}

.buttons li{
display: inline;
list-style-type: none;
}

.buttons li a{
text-align:center;
margin:0px 3px 0px 0px;
padding:8px 14px;
line-height:31px;
}

.buttons li a:link,
.buttons li a:visited{
background-color:#B5CADF; color:#000;
}

.buttons li a:hover{
color:#FFFF00;
background-color:#7596B7;
}

.buttons li a#current{
background-color:#7596B7;
color:#FFF;
}

Exemplo

Fonte: http://www.infectedfx.net/

Codificador de endereço de e-mail

Está eu não conhecia, estava eu navegando pelo Stumble e pimba, dei de cara com o E-mail Address Encoder, basta colocar o endereço de e-mail clicar no botão “encode”, prontinho teu endereço de e-mail codificado

Gerador de listras

Para aqueles iguais a mim que sempre tem alguma dificuldade em fazer uma imagem em listras, eis aqui a solução, Stripe Generator

Confira dicas para evitar spams e outras pragas virtuais

Com o início do ano os piratas cibernéticos preparam novas ameaças para usuários de e-mail em todo o planeta, entre elas spams, vírus e ataques de phishing e malwares. Confira algumas dicas que ajudam a evitar essas pragas virtuais.

1) Não abra

Sempre que possível não abra spams. Essas mensagens normalmente vêm acompanhadas de softwares que permitem que o seu criador saiba quantos e quais endereços receberam e abriram a mensagem. Um email suspeito quase sempre é um spam.

2) Não responda

A melhor forma de lidar com e-mails de endereços suspeitos ou desconhecidos é excluí-los ou deixar que um filtro antispam coloque-os em quarentena. Se responder a um spam, mesmo solicitando sua remoção da lista, você estará confirmando ao remetente que esse é um endereço válido e provavelmente sua caixa de correio será alvo de mais spams. Na dúvida sobre a legitimidade de uma mensagem solicitando informações, entre em contato com a empresa ou digite o URL da companhia no seu navegador.

3) Não clique

Se clicar em um link (mesmo em “unsubscribe”) da mensagem, poderá infectar seu computador com um spyware ou vírus. Exclua o email imediatamente. Caso a mensagem pareça ser do seu banco, operadora de cartão de crédito ou qualquer outra empresa solicitando a validação das suas informações, não o faça. Eles já possuem informações sobre sua conta, portanto não precisam de qualquer tipo de validação ou confirmação. Exclua a mensagem. Se estiver em dúvida, ligue diretamente para a empresa.

4) Não compre

Os spams existem porque são lucrativos. Não custa praticamente nada para o criador do spam enviar milhões de mensagens. Se uma das pessoas cair, ele já está no lucro. Nunca compre nada anunciado em spams e peça para os seus amigos e familiares fazerem o mesmo, por mais atraente que a oferta possa parecer.

5) Não use seu endereço de e-mail principal

Fornecer seu endereço principal em qualquer lugar na web é um grande risco e ótimo para os criadores de spam. Para transações on-line, use um segundo endereço.

6) Confiras as políticas de segurança

Cuidado ao fornecer informações em newsgroups, preencher formulários na web ou fornecer seu endereço eletrônico em sites. Confira as políticas de segurança do site para garantir que seu email não será compartilhado com outras empresas.

7) Verifique se o seu provedor possui proteção contra spams, vírus e spyware

Os spams normalmente contêm vírus, daí a importância da proteção antispam e antivírus . As mensagens de spam freqüentemente possuem links para sites com spywares ou malwares. Verifique junto ao seu provedor ou departamento de TI se há proteção contra esses tipos de ameaças. A proteção contra spams, vírus e malwares no gateway podem fazer toda a diferença.

Use seu bom senso

Se para você parece spam, provavelmente deve ser. Exclua.

Fonte: http://wnews.uol.com.br

Usando o IE6 e o IE7 juntos(standalone)

Neste vídeo irei mostrar como usar o microsoft internet explorer 6(ie6) e o 7(ie7) no mesmo pc, sem a necessidade de um “emulador”.

Segue o Vídeo

Arquivos necessários

1. Baixe o IE7-WindowsXP-x86-enu.exe ( ou pela site Internet Explorer 7 download page).
2. Baixe o Internet Explorer 7 standalone program only (149KB)

Artigo compelto

Min-Height para Internet Explorer

Não sei por que cargas d’água M$ internet explorer não lê corretamente o “min-height”, bom procurei no google e achei um esquema legal, que funcionou, segue abaixo:

Cascading Style Sheet
/* for understanding browsers */
.container {
width:20em;
padding:0.5em;
border:1px solid #000;
min-height:8em;
height:auto;
}
/* for Internet Explorer */
/*\*/
* html .container {
height: 8em;
}
/**/

Fonte: http://www.cssplay.co.uk/boxes/minheight.html

Robots.txt – Controlando o que os mecanismos de busca NÃO devem indexar

O arquivo robots.txt já é um padrão utilizado no mundo inteiro para declarar aos mecanismos de busca o que eles não devem indexar em um site. Esta é uma técnica “antiga”, mas ainda muito útil e que mesmo assim, muitos ainda desconhecem. Este texto é uma compilação das anotações que tenho feito sobre a utilização de robots.txt e que podem ser úteis para qualquer pessoa que queira esconder qualquer coisa que esteja disponível na web mas que por uma razão ou outra deve ser privada e não indexada pelos mecanismos de buscas.

A primeira coisa que você deve saber é que robots.txt não é usado para indicar o que os mecanismos de buscas DEVEM indexar e sim o que NÃO DEVEM! Você vai precisar usar robots.txt, por exemplo, em uma intranet que funcione na web e que pode conter informações que dizem respeito exclusivamente a uma empresa. Áreas restritas, documentos pessoais que são armazenados no seu servidor em uma determinada pasta e que só estão lá por backup ou para compartilhar informações entre um pequeno grupo etc, são contextos possíveis em que os mecanismos de buscas não devem indexar o conteúdo.

Se você quer que o Google ou qualquer outro mecanismo de busca indexe todo o seu conteúdo, você não precisa usar robots.txt. Mesmo que isso pareça óbvio, muitas pessoas se enganam sobre a utilização deste recurso.

Você precisa tomar alguns cuidados ao criar um arquivo de robots.txt como:

robots.txt é apenas um arquivo de texto que pode ser criado no notepad ou qualquer outro editor de texto ASCII e que salve com a extensão .txt. Lembre-se que não pode ser um html, tem que ser um txt.

Este arquivo deve ficar na raiz do seu site.

O nome do arquivo deve ser todo em letras minúsculas (lowercase) e nunca com letras maiúsculas. Ou seja, para qualquer site que queira implementar ele deverá se chamar robots.txt

Basicamente existem duas regras a serem declaradas neste arquivo. O User-Agent e o Disallow.

A regra “User-Agent” é usada para declarar um user agent específico. Um user-agent neste contexto é um mecanismo de busca como por exemplo o Googlebot:

User-Agent: Googlebot

Se quiser que todos os user agents (e não somente o robô do Google) indexe o conteúdo, use asterisco como valor de User-Agent. Dessa forma você informa que todos os mecanismos de busca não devem indexar:

User-Agent: *

A regra Disallow é usada para indicar quais os locais onde os mecanismos de busca não devem “entrar”.

Para bloquear um site inteiro use uma barra como no exemplo abaixo:

Disallow: /

Para bloquear um diretório específico, use o nome do diretório entre barras como no exemplo:

Disallow: /private_directory/

Para bloquear uma página específica, use uma barra e o nome do arquivo.

Disallow: /private_file.html

Você pode usar quantas regras Disallow você quiser. Basta apenas iniciar outra linha. Lembre-se que urls são case sensitive. Se você tem um arquivo de html chamado Teste.html e no valor de Disallow coloca “teste.html”, o mecanismo de busca não vai considerar ambos como sendo o mesmo arquivo.

Em alguns casos, você pode querer declarar para os mecanismos de busca que não sigam determinada página na própria página utilizando a meta tag nofollow da seguinte maneira:

<meta name="robots" content="nofollow">

Com robots.txt você tem controle do que não deve ser indexado em uma escala maior do que a meta tag nofollow. De qualquer maneira ambas as soluções tem exatamente o mesmo objetivo: impedir com que mecanismos de busca indexem o conteúdo referenciado.

Todas as informações neste texto foram retiradas das referências abaixo!

RobotsTXT.org

Google Support

Google Blog: Robots Exclusion Protocol

Controlling how search engines access and index your website

 

Autor: Henrique Costa Pereira

Fonte: http://www.imasters.com.br/

TENHA UM CSS DIFERENTE PARA CADA HORA DO DIA

É o que propõe em seu site Katherine Angela Gallia, ela utiliza 6 folhas de estilo diferentes em seu site para determinados horários do dia somente utilizando JavaScript, ela utiliza-se do seguinte código:

<script language="JavaScript">
<!-- Begin
function getCSS()
{
datetoday = new Date();
timenow=datetoday.getTime();
datetoday.setTime(timenow);
thehour = datetoday.getHours();

if (thehour > 20)
display = "tree_twilight.css";
else if (thehour > 17)
display = "tree_sunset.css";
else if (thehour > 14)
display = "tree_afternoon.css";
else if (thehour > 11)
display = "tree_noon.css";
else if (thehour > 7)
display = "tree_morning.css";
else if (thehour > 4)
display = "tree_sunrise.css";
else if (thehour > 1)
display = "tree_twilight.css";
else
display = "tree_sunset.css";

var css = '< '; css+='link rel="stylesheet" href=' + display + ' /'; css+='>';

document.write(css);
// End -->
}
</script>
<script language="javascript">getCSS();</script>

Onde:

• Das 5 ás 8 da manhã: Ela utiliza o tema sunrise.
• Das 8 da manhã até o Meio-dia: Ela utiliza o tema morning.
• Do Meio dia ás 3 da tarde: Ela utiliza o tema noon.
• Das 3 ás 6 da tarde: Ela utiliza o tema afternoon.
• Das 6 da tarde ás 9 da noite: Ela utiliza o tema sunset.
• E das 9 da noite ás 5 da manhã: Ela utiliza o tema twilight.

Caso o usuário navegue com o JavaScript desabilitado, ela utiliza o tema sunset:

<noscript>
<link rel="stylesheet" href="tree_sunset.css" type="text/css">
</noscript>

Até me deu vontade de fazer isso aqui no meu blog agora.

Autor: Pedro Rogério
Fonte: http://www.pinceladasdaweb.com.br/

SEO como otimizar seu site para ficar no topo das buscas

Bem, com este POST, pretendo passar um pouco de minha experiência em divulgação de sites.

Muitos me perguntam, como deixar meu site no topo das buscas?

Bem, esta tarefa não é facil, você não conseguirá da noite para o dia [ a não ser que tenhas um site de conteudo adulto ], digo que em uns dois meses, você, com muito trabalho conseguirá ficar no topo das buscas.

Como? 

Simples, estudando.

Vou tomar por exemplo um site meu, para poder exemplificar e passar o conhecimento. odns.com.br

Primeiro passo:

Qual o segmento, assunto mais falado no site?

No meu caso do odns.com.br o assunto mais falado nele, e o proposito do site é. Hospedagem gratuita de arquivos, imagens e videos.

Pronto, ao definir sobre o que meu site falará, já posso definir quais palavras irei “ranquear” nele. Neste caso, vou ranquear.

Hospedar arquivos

Hospedar imagens

Hospedar vídeos

Hospedagem gratuita .

Lembre-se, nem sempre você será a primeira posição, mas estando na primeira pagina, você tem 50% de chances de ganhar uma visita com estas buscas.

Após escolher as palavras chave de nosso site, vamos coloca-las nas meta-tags, no titulo e na descrição de nosso site, para quem não sabe, estas são as tags que ficam no <head> do documento.

<META Lang="pt" NAME="Description" content="" />
<META NAME="Keywords" content="" />
<META Lang="pt-br" NAME="Keywords" content="" />
<META Lang="pt-br" NAME="Keywords" content="" />
<META NAME="abstract" CONTENT="">
<META NAME="Generator" CONTENT="" />

Sim, tem diferença de pt, pt-br, en, dentre outros, isso informará ao nosso buscador, que em, por exemplo uma busca por portugues brasil, ele use a tag pt-br. Crie alguns textos descritivos no seu site, e coloque por exemplo no rodape. [ nada de texto escondido, isso só suja você ]

Criando links para estas palavras, apontando para áreas diferentes de seu site [ mas que aponte para o conteudo desejado, e apontado pelo link, lembre-se estamos trabalhando a favor, e não, contra o usuário ]

Exemplo?

odns.com.br trabalha para você hospedar arquivos, hospedar imagens gratuitamente, e também trabalha para você hospedar site free [ grátis ] em seu computador, você não precisa gastar nada, não precisa pagar mensalidade, não precisa pagar anuidade, para hospedar arquivos, hospedar imagens, hospedar site, basta você efetuar cadastro gratuitamente no odns, para enviar arquivos, hospedar imagens sem limite de tamanho, ou quantidade diária, utilize o odns.com.br para enviar arquivos, enviar imagens, criar seu serviço de dns totalmente gratuito na internet, você não pagará nada para efetuar o cadastro no odns.com.br. Cadastre-se agora, para Compartilhar imagens, Criar álbum de foto e muito mais, serviços que você somente encontrará Enviando imagens, Enviando arquivos para o odns.com.br.

Veja que tenho no meu texto, todas e mais algumas palavras que desejo ranquear, nas palavras que desejo ranquear, coloquei links para elas, apontando para a área desejada do site.

Muito bom, afinal, alem de ranquear nossas palavras em nosso site, estamos mostrando para o buscador que nosso conteudo é relevante para nós, afinal temos muitos links para nós mesmos Porém o feitiço vira contra você caso você exagere. 50 links por página está de bom tamanho.

Bem, esta é a parte facil. Apenas precisamos de tempo, e saber mecher em nosso html.

Agora vem nosso trabalho “braçal”

Vamos efetuar estas buscas no buscador, por exemplo, busque por “hospedar arquivos”.

Quem aparece onde você deseja aparecer? Se for algum fórum, você está com sorte. Cadastre-se no forum [ eu falei que era trabalho braçal, mas nada vem do nada ] Poste neste forum um texto explicando seu serviço apontando para seu site. [ não faça spam, um está bom ]

A proxima vez que o buscador passar por ali ele vai ver que aquele site que estava em primeiro, tem um link para você. Ponto para você. Se você conseguir fazer isso em 10 sites que estejam em primeiro, [ primeiro antes que você ] a proxima vez você será mais importante no resultado da busca.

Bem, explicado o principio do traballho braçal, no proximo post explicarei tecnicas menos braçais, com ótimos resultados.

Autor: ‘Luis Otávio’
Fonte: http://ajaxbox.com.br/

Esqueça o outsourcing. O negócio agora é o crowdsourcing

Claro, estou exagerando. Há alguns meses um artigo na revista Wired chamado The Rise of Crowdsourcing mostrou como a multidão pode ajudar organizações a completar tarefas e diminuir custos. O crowdsourcing é o “novo lugar da mão-de-obra barata: pessoas no dia-a-dia usando seus momentos ociosos para criar conteúdo, resolver problemas e até mesmo para pesquisa e desenvolvimento”.

Netflix
A Netflix é uma locadora de DVD’s dos EUA que aluga filmes pela internet e entrega pelos correios. Quebrou paradigmas e fez a Blockbuster rever seu negócio. Mas o que traz a Netflix para este artigo é que acabam de anunciar um prêmio de US$ 1 milhão a quem (sim, qualquer pessoa) desenvolver um algoritimo 10 % melhor no quesito sugestão de filmes do que o sistema atual deles. Já que exploram a Cauda Longa dos filmes, querem que as sugestões atinjam de forma mais certeira os gostos pessoais de cada um. É a essência do crowdsourcing: colocam a multidão para trabalhar e se alguém conseguir resultados, pagam.
Google
Recentemente o Google lançou um jogo on-line chamado Google Image Labeler. Um claro exemplo de crowdsourcing. As duplas precisam dar nomes às imagens que vão aparecendo na tela. Ganha-se pontos se os dois (desconhecidos entre si, localizados em diferentes partes da Terra) derem o mesmo nome à figura. Parece algo idiota mas é na verdade uma grande sacada. Ao invés de contratar pessoas para identificar as imagens, o Google resolveu usar o poder da multidão para completar a tarefa. Pessoas aleatórias ao redor do mundo jogam em duplas e ganham pontos. Essa é a recompensa delas. Dessa forma o Google consegue identificar milhões e milhões de imagens de forma rápida e barata.
DARPA
Não, nada a ver com o seriado Lost. Lá a sigla onipresente é DHARMA. O DARPA é um órgão militar do governo americano que faz pesquisas. E não é que eles usam o crowdsourcing para melhorar essas pesquisas? Desde 2004 organizam uma competição de carros robôs guiados por inteligência artificial. No ano passado finalmente um carro totalmente controlado por computadores conseguiu terminar a prova realizada no deserto. O próximo desafio é um carro inteligente conseguir trafegar em vias urbanas. Claro, os vencedores ganham um prêmio.
Juntando as peças
A Netflix e o DARPA procuram soluções para seus problemas. Mas investir internamente ou contratar outra empresa para realizar pesquisas sairia muito caro. A solução encontrada é deixar a multidão pensar. Centenas, milhares, talvez milhões de pessoas em um brainstorm. Uma ou outra idéia boa deve surgir, mas quase tudo é lixo. A vantagem: só se paga por resultado, ou seja, o custo pode parecer alto, mas dividido pela quantidade de cérebros envolvidos, acaba sendo um ótimo negócio.

O Google não paga em dinheiro, e sim em pontos. Dos pontos surge um ranking que gera satisfação para os que lá figuram. Tarefa realizada. E melhor: nada de problemas trabalhistas.

 

Autor: Alexandre Fugita
Fonte: http://www.techbits.com.br/

Saiba quando seus amigos do orkut estão online.

 

Você gostaria que o seu orkut tivessem alertas que nem o MSN? Já imaginou, saber ‘no exato’ momento que um de seus amigos ficou online no orkut? Ou então, receber quase que imediatamente um aviso de que há novos scraps a serem lidos????

Isso agora é possível com HiNew Scrap! Mas para isso é necessário que vc use o programa “Mozilla Firefox” que é um navegador de internet quase que idêntico ao “Internet Explorer”, só que MUITO MAIS SEGURO.

INSTALAÇÃO

•Para instalar a extensão Greasemonkey clique aqui. Veja as imagens a seguir:

Quando terminar de baixar a extensão ele pedira que você reinicie o Firefox, é só fechar todas as janelas e abrir o Firefox novamente.

Note que na barra de status do navegador apareceu o icone de um macaco (Lado inferior direito, logo acima do relógio), quando ele esta cinza a extensão está desativada, se clicar sobre o icone ele ficará colorido, ou seja, Ativado!

Se estiver tudo Ok vamos para o script.

INSTALAÇÃO

•Clique aqui para instalar o HiNew Scrap, veja a seguir como proceder:>

Observe que ao lado do icone aparece escrito que, “o script foi instalado com sucesso”.

Agora entre no seu orkut, note que foi adicionado um link no menu lá de cima ( | Notícias | HiNew | ? ) Clicando ali você configura o script.

Assim que um contato seu acessar o orkut ou quando alguém deixar um scrap pra você, você será avisado com uma plaquinha igual a do MSN, quando entra um contato.

Por enquanto é isso, qualquer duvida, reclamação ou problema deixe seu recado na comunidade do autor do Script: http://www.orkut.com/Community.aspx?cmm=9282113

Fonte: http://corumbabaca.wordpress.com/

Carregue seu site rapidamente, ou seu concorrente o sugará!

Introdução

Quando um visitante chega a seu site, o mesmo decide em quantos segundos que ele ficará ou se vai. A primeira impressão é a chave do sucesso! .

Pré-Requisitos

Noções de desenvolvimento para interpretação, uma tijela com Profilteróles e se possível um suquinho de manga

Objetivo

Entender o motivo pelo qual seu site com conteúdo pode ou não ser visitado por novos usuários com maior frequência, e não apenas os “paraquedistas” (aqueles visitantes que te encontram pelo google, pousam em seu site, e nunca mais retornam)

Conteúdo
Quando um visitante chega a seu site, o mesmo decide em quantos segundos que ele ficará ou se vai. A primeira impressão é a chave do sucesso!

Uma página que carrega rapidamente te ajuda a dar uma boa primeira impressão e faz com que seus visitantes fiquem mais tempo navegando em seu site. Por sua vez, aumenta as possibilidade de que eles possam começar a “cultivar o conteúdo” de seu site, retornando inúmeras vezes, e quem sabe você poderá converte-los em possíveis clientes.

Se seu site não carrega rapidamente, qualquer oportunidade que tiver de apresentar o seu conteúdo não se sobressairá.

Tenha em conta que quando seus visitantes estão cientes de que sua conexão a Internet é lenta (Dial-up por exemplo, conexão por telefone) e que tem que ser paciente, esperar a hora de navegar na rede, não esperam muito tempo para poder ver seu site. Se seu site não é exibido nos primeiros 8 a 10 segundos, o mais provável é que eles cliquem no botão “voltar” do browser, e busquem outro site com conteúdo do gênero, que possam visualizar rapidamente, com isto você estará perdendo um visitante e seu concorrente ganhando um.

Este artigo é extremamente importante!, principalmente se o seu site estiver focado ao público brasileiro e/ou latino, onde são maiores os casos de conexão dial-up.

Alguns “conselhos simples ”.

Uma maneira de fazer com que seu site carregue rapidamente é utilizar CSS (Cascading Style Sheets) no layout de suas páginas. Se você utiliza CSS, não inclua no código em cada uma de suas páginas, faça um arquivo externo e “chame-o” em suas páginas que utilizem o mesmo estilo que você definiu. Isto é bom por questões de usabilidade, mas também ajuda em termos de otimização para robôs de busca (principalmente para o mais cobiçado, Google!)

Evite a utilizaçãode imagens em demasica na mesma página, e se assegure de que todas as páginas que utilizem, estejam otimizadas para web.

Lembre-se de que a utilização de vídeo e áudio também aumentam o tempo de carregamento de seu site. O mesmo vale para as animações em Flash.

Também é importante de que seu site seja fácil de navegar, pois afinal, de que vale um site com um layout lindo, que carregue rapidamente, sendo que o usuário não encontra o que necessariamente procura?

 

Considerações Finais

Para as considerações finais deixo-lhes uma pergunta simples e objetiva que serve para se refletir:
“De que adianta o seu site ter conteúdo, se o visitante não o encontra com facilidade?”

Autor: Maurivan Luiz Padilha- Colunista deUsabilidade do Portal MXSTUDIO
Fonte: http://www.mxstudio.com.br/

Perolas#20 – Sem Parar

Sem Parar

iiiiiiiiéééééééé!!!!

Criação: Ricardo Yakamura

Produção: Ricardo Yakamura

Data: 04-07-2005

Fonte: http://www.desencannes.com/

Perolas#19 – KY

KY
Sabe quando entala? Eu não sei, mas sei que com KY isso não acontece. Agora, as crianças podem se divertir, sem choros, traumas e com a visão de uma futura adolescência menos irritadiça e sem processos judiciais a astros da música.

Criação: Edgar Linton
Produção: Edgar Linton
Data: 27-09-2005

Fonte: http://www.desencannes.com/

Perolas#18 – Jontex

Jontex
Uma pequena distração e pumba. Sua vida vai abismo abaixo. O álcool ajuda a errar, mas não serve como desculpas. Lembre-se: o airbag infla na barriga mas o peso que fica para a vida inteira é nas costas.

Criação: Marcos Santana
Produção: Marcos Santana
Data: 27-09-2005

Fonte: http://www.desencannes.com/

Perolas#17 – Brasil – Portugal

Brasil – Portugal
Tapados…

Criação: Luciana Lopes e Marcelo Anache
Produção: Luciana Lopes e Marcelo Anache
Data: 11-09-2006

Fonte: http://www.desencannes.com/

Perolas#16 – Finalmente um indecente decente.

Finalmente um indecente decente.
Quando lançaram o filme, o Desencannes foi atacado com inúmeras peças homenageando os cowboys de Brokeback Mountain. Esta foi a única que veio com jeitinho e delicadeza. Por isso, entrou.
Como diriam os próprios criadores da peça:
‘Um toque de humor para o lançamento de um filme tocante.’

Criação: Marcos e Hiram
Produção: Hiram e Marcos
Data: 09-11-2006

Fonte: http://www.desencannes.com/

Perolas#15 – Lactopurga

Lactopurga
Em caso de uso excessivo, reutilize a rolha.

Criação: Fabio Abrão
Produção: Fabio Abrão
Data: 17-11-2006

Fonte: http://www.desencannes.com/

Perolas#14 – Faça Fei

Faça Fei
Depois de biologia, química e física, português não é mais pré-requisito para entrar em algumas faculdades.

Criação: Ricardo S.Chiesa
Produção: Ricardo S.Chiesa
Data: 26-11-2006

Fonte: http://www.desencannes.com/

E-mail marketing em HTML

Este artigo é quase uma continuação do artigo anterior, intitulado Boas Práticas de E-mail Marketing. Após sua publicação, recebi algumas dúvidas quanto ao que seria, exatamente, um e-mail marketing em HTML. Por isso, primeiro, vamos definir o que é um e-mail sem formatação e um e-mail em HTML.

E-mail sem formatação é o tipo de e-mail a que estamos mais habituados: mensagens em texto puro que não requisita nenhuma informação do servidor (imagens, por exemplo) para ser elaborado. Você simplesmente escreve na tela de edição de mensagens e envia o e-mail. Ele chega para o destinatário também na forma de texto e sua aparência pode variar conforme a configuração da aplicação de e-mail de quem o recebeu.

E-mail em HTML é aquele que apresenta elementos da linguagem de hipertexto, como links e imagens que são exibidas diretamente no corpo do e-mail, sem estar em anexo à mensagem. Podemos exemplificar com aquelas enxurradas de e-mail que recebemos com promoção de assinatura de revistas, oferta de livros, aparelhos eletrônicos etc. Você abre a mensagem e, no corpo, pode ver imagens e textos diagramados de uma forma diferenciada, como se fosse um planfleto ou mesmo uma página da Web. É possível, ainda, utilizar CSS para formatar a aparência dos elementos.

Ao trabalhar com e-mail marketing, a grande maioria das empresas opta pelo e-mail em HTML, que confere maior liberdade de criação e a mensagem é, visualmente, mais atraente. É possível exibir logotipos, fotos de produtos, textos em fontes diferenciadas e distribuir os elementos da forma desejada na tela. Tudo isso sendo exibido diretamente no corpo da mensagem, e não como um anexo. Arquivos anexos aumentam sensivelmente o tamanho do e-mail, além de poderem ser barrados por algumas aplicações de e-mail, mesmo que sejam apenas imagens. Ao inserir imagens em um e-mail HTML, não inserimos o arquivo da imagem propriamente dito, mas sim, a tag HTML de imagem <img>, que fará referência ao arquivo do servidor. Portanto, para que você possa desenvolver um e-mail marketing em HTML utilizando todos os recursos visuais possíveis, é necessário possuir acesso a um disco virtual ou servidor web (se você possui um site ou domínio), que armazenará os arquivos de imagens.

Vamos ver, na prática, como construir um e-mail marketing em HTML. Como exemplo, vou criar um cartão que convide os usuários a visitarem o site do iMasters. Para isso, vou utilizar um software gráfico qualquer que me permita criar uma imagem. Utilizando o Adobe Illustrator (mas poderia ser também o Corel Draw, o Photoshop ou qualquer outro a que você esteja familiarizado), criei esta arte:

Para que um e-mail marketing seja visualizado corretamente na aplicação de email do cliente, pode-se trabalhar com: (X)HTML, CSS, JPEG, GIF estático e GIF animado. As aplicações de e-mail não interpretam conteúdo dinâmico (asp, php), flash ou javascript. Sobre o formato de imagem PNG, houve uma grande melhora nas novas versões de navegadores e de clientes de e-mail, que passaram a suportá-lo. Algumas versões mais antigas não conseguem exibir este formato, portanto, se não qusier arriscar, fique com o JPEG e o GIF.

Para que minha arte seja visualizada corretamente num e-mail, a transformei em imagem. Meu software permite que eu salve uma cópia otimizada para a web, ou seja, com 72 DPI de resolução e cores RGB, com a possibilidade de definir sua qualidade. Utilizei o formato GIF que, por possuir “apenas” 256 cores, mantém o tamanho do arquivo reduzido. E para que todos aqueles que receberem meu e-mail possam visualizar a imagem, preciso enviá-la para a Internet, armazenando o arquivo em um disco virtual ou dentro do servidor onde meu site está hospedado. É o mesmo processo de enviar os arquivos de um site para a web, de modo a disponibilizá-lo online. Neste caso, vou utilizar o porta-arquivos do Yahoo, que é gratuito e basta ter uma conta no Yahoo para usar. Seguindo as instruções do porta-arquivos, fiz o upload de minha imagem, cujo endereço depois de enviada ao disco virtual é http://us.f13.yahoofs.com/bc/45b0d469_114f2/bc/convite.gif?bfnpx3FBIy93hbLi. Se você clicar neste link poderá visualizar minha imagem. Para saber o endereço de sua imagem na Internet, basta clicar com o botão direito sobre o link do nome do arquivo e clicar na opção Copiar atalho ou Copy Link Location, isso, após enviá-la para o disco virtual, claro. Guarde este endereço.

Agora, vamos começar a construção do e-mail. Vou utilizar o Outlook Express, que me permite inserir código HTML na edição de mensagens. O Microsoft Outlook não oferece esta opção. Para enviar uma mensagem de e-mail a partir do Outlook Express, é preciso que você tenha uma conta de e-mail configurada com seus respectivos POP3 e SMTP (endereços do servidor por onde as informações irão trafegar e chegar até os destinatários). Se você tem uma conta no Gmail, pode configurar seu programa de e-mail para receber e enviar mensagens. Para ver as instruções, acesse sua conta do Gmail e, no canto superior direito da tela, clique em Configurações e na aba Encaminhamento e POP. Nesta aba, há um link de instruções no item 3.

Outlook configurado, vamos compor a mensagem. Clique no botão Criar E-mail. Nesta tela de composição de mensagens que foi criada, veja que, na parte inferior da janela, existem 3 abas: Editar, Origem e Visualizar. Se você não vê nenhuma aba, clique em Exibir > Editar código-fonte para que elas apareçam. Para inserir nosso código HTML, vamos usar a aba Origem. Note que, nesta aba, já existe a estrutura básica de um documento HTML:

Vou acrescentar códigos para inserir a imagem de meu convite, deixá-lo centralizado na tela e com um link para o site do iMasters. O código abaixo já está com a tag chamando a imagem do disco virtual e com o link. Se quiser, copie este código e cole-o na aba Editar do Outlook Express, substituindo aquela estrutura básica exibida acima.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2900.3020" name=GENERATOR>
<STYLE></STYLE>
</HEAD>
<BODY bgColor=#ffffff>
<DIV style="text-align:center">
<a href="http://www.imasters.com.br" title="Este link abre o site do iMasters em uma janela de seu navegador">
<img src="http://us.f13.yahoofs.com/bc/45b0d469_114f2/bc/convite.gif?bfflPsFBmgNmhbLi" alt="Visite o iMasters!">
</a>
</DIV>
</BODY>
</HTML>

Depois, ao clicar na aba Editar, podemos ver a imagem exibida diretamente no corpo da mensagem, da forma como o usuário visualizará em seu e-mail. Este procedimento de inserir uma imagem através de código HTML no e-mail faz com que o tamanho da mensagem seja reduzido. Note que meu arquivo GIF original tem 30,1 Kb, mas ao inserir apenas a tag HTML chamando a imagem que está no disco virtual, minha mensagem fica com apenas 2 Kb, porque é composta apenas de código. Assim, você pode enviar a mensagem para diversos destinatários sem sobrecarregar o servidor, já que a imagem será carregada no momento em que o usuário abrir. E, assim, eu visualizo a imagem, que está sendo “baixada” lá do disco virtual:

Se você não tem familiaridade com a linguagem HTML, pode desenvolver sua mensagem em um editor como o Microsoft Frontpage ou o Dreamweaver. Eles têm interface amigável e, ao longo do desenvolvimento, geram o código do que foi criado através de simples cliques em botões. Selecione o código, copie e cole na aba Origem do Outlook Express.

E está pronto nosso e-mail em HTML! Basta inserir os destinatários na mensagem e enviar. Este foi um exemplo simples de e-mail formatado em HTML. Você pode construir layouts mais complexos e que utilizem outros recursos do HTML e do CSS. Apenas lembre-se das recomendações para o desenvolvimento de um bom e-mail marketing. Se você pretende enviar a mensagem para muitas pessoas, considere trabalhar com ferramentas próprias para e-mail marketing – que não o Outlook -, pois elas trazem também recursos para medir o impacto de sua campanha nos usuários: quantos abriram a mensagem, quantos clicaram, quais e-mails falharam etc.

Recapitulando, para o desenvolvimento do e-mail marketing, temos:

• um arquivo da arte original (neste caso, em Illustraor);
• um arquivo GIF da arte (gerado a partir do Illustrator mesmo);
• o envio da imagem para a Internet (disco virtual do Yahoo);
• a construção do código HTML utilizando o endereço da imagem na Web;
• inserção do código HTML no aplicativo de e-mail;
• envio da mensagem;

Espero que tenha ficado claro, mas, quaisquer dúvidas, estou à disposição!

Boa sorte e sucesso!

Autor: Juliana Padron
Fonte: http://www.imasters.com.br/

Conhecendo a estrutura de diretorios do GNU/Linux

Carnaval chegando… vai começar a folia… e eu, antes de curtir minhas merecidas férias (estou enganando quem? vou viajar carregado de manuais para a prova da LPI), deixarei um artigo sobre a estrutura de diretórios do Linux. É um assunto chato para a maioria das pessoas… afinal, quem quer saber sobre diretórios? A grande jogada é só instalar e usar certo? Mas o Linux tem suas diferenças e temos que respeita-las. Dê um crédito para o pingüim, não custa nada aprender um pouco mais sobre esse belo sistema operacional .

Bom, esse artigo é voltado para o leitor que está migrando ou começou agora a utilizar o Linux e ainda está perdido no meio de uma centena de diretórios, e como acontece em quase todos os meus artigos, eu adiciono uma leve pitada de linguagem técnica.
Antes de começar-mos, eu gostaria de esclarecer que o conceito é basicamente o mesmo, muda-se alguns nomes mas a idéia de diretório é a mesma em vários sistemas operacionais.

Introdução:

O sistema de arquivos (File System, em inglês) é uma estrutura composta de Arquivos e Diretórios. O sistema de arquivo, pelo menos teoricamente, é infinito. O limite é imposto somente pelo tamanho do disco rígido. O Linux utiliza um sistema hierárquico onde cada tipo de dados tem seu lugarzinho específico para ser guardado. Essa hierarquia é conhecida como “estrutura de árvore invertida” (aposto uma cerveja como muitos não sabiam dessa!), e o topo é chamado de diretório raiz, que é representado por “/”.

Essa conversa poderia se estender a: “tipos de arquivos” e então teríamos “arquivos simples”, “arquivos-diretório”, “arquivos especiais”. É um assunto tão infinito quanto a teoria da própria estrutura.

Até aí tudo bem?

Habitua-se!

Quem cai de paraquedas no mundo do Linux fica em choque se perguntando se existe alguma coisa parecida com o Windows. No Windows, os arquivos do sistema ficam no diretório “Windows” e os programas em “Arquivos de Programas”. O Linux lida com isso ao contrário, no diretório raiz só existe as pastas do sistema e os seus arquivos pessoais são guardados dentro do diretório home, que é criada para cada usuário.

Dentro do Linux as partições, pendrivers, cdrom não aparecem como: C:\ , D:\ , E:\… Tudo faz parte do diretório raiz, ou seja, para o sistema todo mundo é diretório independente do dispositivo.

Uma descrição básica dos diretórios:

“Trecho retirado do meu livro: Ubuntu, Guia Pratico para Iniciantes que será lançado este mês”

Vamos conhece-los de acordo com a FHS (Filesystem Hierarchy Standard):

Todos os diretórios abaixo então dentro do diretório raiz, ou seja, “/”.

/bin : Arquivos e programas do sistema que são usados com freqüência pelos usuários.

/boot : Arquivos necessários para a inicialização do sistema.

/cdrom : Ponto de montagem da unidade de CD-ROM.

/dev : Arquivos usados para acessar dispositivos do computador.

/etc : Arquivos de configuração do computador.

/floppy : Ponto de montagem de unidade de disquetes

/home : Diretório que contém os arquivos de cada usuário.

/lib : Bibliotecas do sistema.

/lost+found : Local de arquivos e/ou diretórios recuperados pelo sistema.

/mnt : Ponto de montagem temporário.

/proc : Sistema de arquivos do Kernel.

/root : Diretório do usuário root, o administrador do sistema.

/opt : Local para aplicativos opcionais serem instalados.

/media : Ponto de montagem de mídia removível, câmeras digitais, pendrives

/sbin : Diretório de programas usados pelo superusuário (root) para administração e controle do funcionamento do sistema.

/tmp : Arquivos temporários criados por programas.

/usr : Diretório dos aplicativos. A maioria estará instalada neste diretório. Curiosidade: usr não quer dizer “User” e sim “Unix System Resources”.

/var : Diretório contém arquivos que são gravados com freqüência pelos aplicativos do sistema, como: e-mails, cache, spool de impressora.

Essa estrutura que mostrei acima, é considerada padrão. Encontrará a mesma se estiver utilizando a distribuição da Red Hat, SuSe ou o Ubuntu.

Duvidas? Voltarei a falar sobre o tema em breve.

Autor: Marcellino Junior
Fonte: http://marcellino.wordpress.com/

Compartilhando arquivos e pastas entre maquinas Linux com o NFS

Eu vejo em muito sites e artigo na internet, autores sempre falando sobre o compartilhamento entre maquinas Windows e Linux. Ironicamente, no mundo Linux é mais difícil você encontrar alguma informação que fale exclusivamente de compartilhamento entre máquinas Linux do que Windows x Linux. É como se todo mundo usasse o Linux apenas naquele computador velhinho do canto da sala e o colocassem em um ambiente totalmente Microsoft.

Enquanto o SAMBA é capaz de compartilhar arquivos entre Windows x Linux e Linux x Linux na mesma rede, o NFS é uma opção só para ligação entre máquinas Linux, porém, o considero muito mais prático e estável para esse serviço (você não pode deixar de estuda-lo, é um recurso muito importante e tenho certeza que irá precisar um dia .

Assim como o SAMBA, o NFS terá que ser habilitado manualmente. Algumas distribuições ja vem com ele instalado e as vezes, até com uma interface gráfica para sua configuração. Mas para eu me isentar de qualquer responsabilidade de escrever várias versões deste artigo para cada uma de suas diferentes “abordagens”, eu vou partir para o modo-texto (ou shell, se preferir), que será comum a todos.

No Debian/Ubuntu e seus derivados, o primeiro passo é instalar os pacotes necessários para iniciarmos a configuração da rede.Os pacotes são: nfs-kernel-server e nfs-common portmap.

Em outras distribuições, apenas “nfs”.

Para instalar utilize o seguinte comando:

sudo apt-get install nfs-kernel-server nfs-common portmap

É bastante pequeno, não demorará 1 minuto para ser baixado.

Configurando o servidor

O próximo passo é editar o arquivo “exports”, ele se encontra em:

/etc/exports

Farei o exemplo, utilizando meu editor favorito, o VI. No comando abaixo, substitua o editor VI por um de sua preferência.

sudo vi /etc/exports

Dentro do arquivo, adicione o endereço da pasta que deseja compartilhar e o IP da máquina que irá acessar o compartilhamento seguindo o modelo a seguir:

/home/usuario 192.168.0.100(rw,async)

Simples não?

Se desejar que toda a faixa de IP de sua rede acesse o compartilhamento, ao invés de 1 computador em particular, faça:

/home/marcellino 192.168.0.*(rw,async)

Descrevendo as opções

r = Read, permissão de leitura da pasta.

w = Write, estou dando permissão de escrita no compartilhamento.

E se deseja compartilhar como apenas leitura, use: “ro” no lugar de “rw”

Ja a opção “async” é muito útil em redes locais por que permite que o NFS transfira arquivos de forma “assíncrona”, sem precisar esperar pela resposta do cliente. Sem essa opção a taxa de transmissão em uma rede de 100MB/s fica em torno de 6/7 MB/s, e se ativada, vai para 11 MB/s. Fica limitada apenas à velocidade da rede e obviamente aos HDs do servidor e dos clientes.

Iniciando os serviços

Ja com as devidas alterações feitas no arquivo exports, digite o comando abaixo para fazer com que o arquivo anteriormente editado, seja lido pelo Kernel.

exportfs -a

e inicie os serviços NFS e Portmap com os comandos:

sudo /etc/init.d/portmap start
sudo /ect/init.d/nfs-kernel-server start

Configurando o Cliente

A parte de configuração na máquina cliente é extremamente simples, abra o terminal ou até mesmo graficamente e crie um diretório para ser usado para montarmos o compartilhamento. Por exemplo:

mkdir /home/marcellino/nomedocompartilhamento

e depois monte com o comando:

sudo mount -l nfs 192.168.0.616:/home/usuario /home/marcellino/nomedocompartilhamento

Explicando o procedimento passa-a-passo

mount = Comando usado para montar o compartilharmento.

IP = Espefique o IP do servidor que configurou anteriormente.

/home/usuario = Pasta que foi compartilhada no servidor.

/home/marcellino/compartilhamento = Pasta criada para receber a montagem do compartilhamento.

Na teoria, este tutorial consumiu muitas linhas para exemplificar o uso do NFS, mas a medida que o leitor pega a prática, a velocidade na qual é feita um compartilhamento é incrível. Eu mesmo me peguei inumeras vezes levantando um compartilhamento em questão de pouquíssimos minutos… Experimente!

Autor: Marcellino Junior
Fonte: http://marcellino.wordpress.com/

Remover vírus do Windows usando pendrive com Linux

Otimo artigo Kleber Povoação de como remover virus no windows apartir de um boot pelo pen drive com linux e antivirus.

Introdução

Na área da informática as vezes precisamos de um dinheiro extra, eu quase sempre, e normalmente o jeito mais rápido para mim é arrumando computadores. A maioria dos usuários domésticos como se sabe utiliza Windows e um dos problemas mais frequentes que eu tenho é com vírus. Muitos tem antivírus, mas não fazem update dele ou o desligam, afinal, de uma forma ou de outra, pegam vírus.

A maioria dos meus clientes domésticos utilizam banda larga, Windows XP, micros com USB e CD-ROM e não possuem uma rede doméstica.

A melhor alternativa custo/benefício para resolver este problema para mim foi procurar uma maneira de dar o boot no micro por um CD-ROM ou USB e passar um antivírus.

Optei pelo boot USB, pois poderia facilmente atualizar o antivírus no pendrive, é mais prático e a maioria dos computadores já conseguem dar o boot pelo USB.

Preparando o pendrive

Comprei um pendrive e optei pelo Linux para o boot. Instalei a distribuição Slax nele.

Site do Slax:

* http://www.slax.org

Como instalar Slax no pendrive:

* http://www.slacklife.com.br/article.php?sid=1540

Reinicie o micro pelo pendrive para terminar a configuração.

Agora precisamos instalar o antivírus no Slax em nosso pendrive. A maneira mais fácil no Slax de instalar algum software é utilizando módulos do Slax.

Segue explicação do próprio site do Slax sobre módulos:

“Software adicional para SLAX é distribuído na forma de módulos comprimidos. O uso é muito simples, apenas adicione seu módulo baixado no diretório /modules/ do CD para incluir ele permanentemente no SLAX ou use o comando “uselivemod” no SLAX para ativar o módulo “on the fly” quando o sistema já está ativo”.

Como antivírus optei pelo Clamav. Vamos instalar o modulo do Clamav no SLAX.

Baixei aqui o módulo do Clamav:

* http://www.slax.org/modules.php?category=security

Copiei para a pasta “modules” conforme dito acima e pronto.

Você pode reiniciar o micro novamente para verificar se está carregando automaticamente o módulo do clamav.

Quando acessei o SLAX ele montou automaticamente meu pendrive no diretório /mnt/sda1_removable.

Agora com SLAX e clamav funcionando, nos resta atualizar as definições de vírus e fazer as verificações no micro de algum usuário e ajustar algumas configurações do clamav, pois quando desligamos o sistema perdem-se algumas configurações.

Script e configurações

Para isso fiz um script bem simples. Você criará um diretório:

# mkdir /mnt/sda1_removable/scripts

Colocará o script dentro dele e os arquivos de configuração do clamav, que são dois: clamd.conf e freshclam.conf.

Agora segue o script e os dois arquivos de configuração que estou utilizando para serem colocados no diretório /mnt/sda1_removable/scripts:

clamav.sh

clear
echo Adicionando grupo e usuário clamav ao sistema…
groupadd clamav
useradd -g clamav -s /bin/false -c “Clam Antivírus” clamav

echo Ajustando arquivos de configuração…
cp *.conf /etc/clamav/
mkdir /var/lib/clamav
cp *.cvd /var/lib/clamav
touch /var/log/clam-update.log
chown -R clamav:clamav /var/log/clam-update.log /var/lib/clamav

echo “Você quer atualizar antivírus agora ? [S/N] “
read A
if [ $A = "S" -o $A = "s" ] ; then
echo Atualizando Clamav…
freshclam -l /var/log/clam-update.log
cp /var/lib/clamav/*.cvd $PWD
echo Arquivo de log de atualizado esta em /var/log/clam-update.log
fi

echo Para visualizar as partições montadas aperte ALT+F2 e para voltar aperte ALT+F1
cat /etc/mtab > /dev/tty2

echo “Se você tem e quer montar partição NTFS como leitura e gravação para remover vírus digite Sim aqui . Se responder não ela ficara como somente leitura[S/N] “
read NT
if [ $NT = "S" -o $NT = "s" ] ; then
echo Em qual dispositivo esta a partição NTFS ? ex: /dev/hda1
read DEV
umount $DEV
mkdir /ntfs
ntfs-3g $DEV /ntfs
echo A partição NTFS foi montado em /ntfs
fi

echo “Você quer passar o anti vírus agora ? [S/N] “
read B
if [ $B = "S" -o $B = "s" ] ; then
echo Digite a partir de qual diretório você quer procurar por vírus
read DIR
clamscan –bell -v –stdout –remove -r $DIR –exclude /var/lib/clamav
fi

umount /ntfs && rmdir /ntfs

echo Script feito por Kleber Povoacao e licenciado pelos termos da GPL versão 2

clamd.conf

# Comment or remove the line below.
#Example
LogFile /tmp/clamd.log
LocalSocket /tmp/clamd
FixStaleSocket
User clamav
ScanPE
ScanOLE2
ScanHTML
ScanArchive
ScanRAR
ArchiveMaxRecursion 0
ArchiveMaxFiles 0

freshclam.conf

# Comment or remove the line below.
#Example
DatabaseDirectory /var/lib/clamav
DatabaseOwner clamav

DNSDatabaseInfo current.cvd.clamav.net
DatabaseMirror db.br.clamav.net
DatabaseMirror database.clamav.net

MaxAttempts 1
Checks 12
# Proxy settings
# Default: disabled
#HTTPProxyServer myproxy.com
#HTTPProxyPort 1234
#HTTPProxyUsername myusername
#HTTPProxyPassword mypass

Considerações finais

Observações: Se for passar o antivírus em partição NTFS e ao utilizar o script você for montar como leitura e gravação a partição do WINDOWS, não utilize dentro do KDE, utilize no Fluxbox ou somente no terminal.

Utilizando o antivírus:

1. boot pelo pendrive
2. acessar o diretório onde está montado seu pendrive, ex.:
   # cd /mnt/sda1_removable/scripts
3. rodar o script:
   # sh clamav.sh

Pronto!!! Seu sistema com boot e antivírus para ser passado em qualquer micro. Você pode adicionar outros softwares no pendrive e torná-lo melhor ainda. Depende da sua imaginação.

Autor: Kleber Povoação
Fonte: http://www.vivaolinux.com.br/