Guia de Referência

Cheatsheets são pequenos guias de referências para desenvolvedores, com dicas e macetes em diversas tecnologias, onde você pode aprender ou tirar dúvidas rapidamente.

  • Escritos pelos melhores autores em cada uma das tecnologias;
  • Informações confiáveis sobre os grandes temas de desenvolvimento da atualidade;
  • Dicas úteis e exemplos de código fonte aberto.
  • PDF preparado para impressão.

Dentre as tecnologias, disponíveis você vai encontrar:

Fonte: http://www.dzone.com

Howto: Efeitos interessantes em CSS

Voltando a série HowTo, gostaria de dedicar este post ao ótimo artigo que li no excelente site StylizedWeb. Com certeza uma visita mais que recomendada para todos que trabalham com desenvolvimento web, ainda mais se você for a pessoa responsável pelo “FrontEnd – essa é velha” da aplicação.

01. Bordas arredondadas sem imagens

<div id=”container”>
<b class=”rtop”>
<b class=”r1″></b> <b class=”r2″></b> <b class=”r3″></b> <b class=”r4″></b>
</b>

<!– aqui vai o conteúdo –>
<b class=”rbottom”>
<b class=”r4″></b> <b class=”r3″></b> <b class=”r2″></b> <b class=”r1″></b>
</b>
</div>

.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

02. Lista ordenada estilizada

<ol>
<li>
<p>This is line one</p>
</li>
<li>
<p>Here is line two</p>
</li>
<li>
<p>And last line</p>
</li>
</ol>

ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}

ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}

03. Formulários sem tabelas

<form>
<label for=”name”>Name</label>
<input id=”name” name=”name”><br>
<label for=”address”>Address</label>
<input id=”address” name=”address”><br>
<label for=”city”>City</label>
<input id=”city” name=”city”><br>
</form>

label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}

label {
text-align: right;
width: 75px;
padding-right: 20px;
}

br {
clear: left;
}

04. Citação dupla

blockquote:first-letter {
background: url(images/open-quote.gif) no-repeat left top;
padding-left: 18px;
font: italic 1.4em Georgia, “Times New Roman”, Times, serif;
}

05. Texto com efeito gradient

<h1><span></span>CSS Gradient Text</h1>

h1 {
font: bold 330%/100% “Lucida Grande”;
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}

<!–[if lt IE 7]>
<style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’gradient.png’, sizingMethod=’scale’);
}
</style>
<![endif]–>

06. Centralizar verticalmente usando line-height

div{
height:100px;
}
div *{
margin:0;
}
div p{
line-height:100px;
}

<p>Content here</p>

07. Bordas arredondadas com imagens

<div class=”roundcont”>
<div class=”roundtop”>
<img src=”tl.gif” alt=”” width=”15″ height=”15″ class=”corner” style=”display: none” />
</div>

TEXTO

<div class=”roundbottom”>
<img src=”bl.gif” alt=”” width=”15″ height=”15″ class=”corner” style=”display: none” />
</div>
</div>

.roundcont {
width: 250px;
background-color: #f90;
color: #fff;
}

.roundcont p {
margin: 0 10px;
}

.roundtop {
background: url(tr.gif) no-repeat top right;
}

.roundbottom {
background: url(br.gif) no-repeat top right;
}

img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}

08. Múltiplas classes para um elemento

<img src=”image.gif” class=”class1 class2″ alt=”” />

.class1 { border:2px solid #666; }
.class2 {
padding:2px;
background:#ff0;
}

09. Centralizar horizontalmente

<div id=”container”></div>

#container {
margin:0px auto;
}

10. Letras capitulares

<p class=”introduction”> Este parágrafo tem a classe “introduction”. Se o seu navegador suporta a pseudo-classe “first-letter”, a primeira letra estará em estilo capitular. </p>

p.introduction:first-letter {
font-size : 300%;
font-weight : bold;
float : left;
width : 1em;
}

11. Prevenir quebras de linha em links

a{
white-space:nowrap;
}

12. Mostrar barras de rolagem do Firefox, removê-las de áreas de texto no IE

html{
overflow:-moz-scrollbars-vertical;
}

textarea{
overflow:auto;
}

13. Div Centralizada

Para posicionar uma div no centro da tela basta usar este código:

#centro {
position:absolute;
top:50%;
left:50%;
width:500px;
height:500px;
margin-left:-250px;
margin-top:-250px;
}

Referência:Most used CSS tricks.

Como trocar o Splash de abertura do Eclipse

Veja como é fácil personalizar o splash de abertura de seu Eclipse:

Edite o arquivo chamado splash.bmp.

o Arquivo encontra-se na pasta onde você tem o Eclipse instalado, dentro da sub-pasta plugins e na sub-pasta org.eclipse.platform_x.x.x (onde x.x.x é o número da versão que você esta usando).

Só, não esqueça de manter o mesmo nome do arquivo, e o formato .BMP

Só isso…

Implementação de Servidores com GNU/Linux

“Implementación de Servidores con GNU/Linux” é um livro escrito pelo Mexicano Joel Barrios Dueñas ond eo mesmo pretende cobrir um grande quantidade de aspectos relacionados com GNU/Linux, desde a instalação, comandos básicos, até a configuração e implementação de servidores para diferentes finalidades

O livro é baseado em uma das melhores distribuições da atualidade voltada a servidores, o CentOS.

Confira o índice do livro:

Read More

Importar JavaScript dentro de outro JavaScript

Dúvida: Tem como importar um arquivo JavaScript dentro de outro arquivo JavaScript? Como é feito em arquivos .CSS, por exemplo:

Podemos ter várias folhas de estilo: layout.css, tipografia.css, print.css
E na hora de carregar, chama-se todos esses arquivos em apenas um arquivo, no caso estilos.css.

O codigo da página estilos.css ficaria assim:

@import “layout.css”;
@import “tipografia.css”;
@import “print.css”;

E a chamada na página ficaria assim:

<link rel=”stylesheet” type=”text/css” href=”estilos.css” />

Agora, como fazer isso com arquivos JavaScript?

Bem, da pra fazer assim:

em seu arquivo principal.js você pode importar os outros arquivos, simplesmente colocando assim:

document.write(‘<script type=”text/javascript src=”arquivo.js”></script>’);

Há, da pra fazer em PHP também assim: crie uma pagina php, chamada por exemplo, scripts.php, coloque isso:

  1. <?php
  2. header(“Content-Type: text/javascript”);
  3. include “script1.js”;
  4. include “script2.js”;
  5. ?>

Ai na pagina que vai chamar, você coloca assim:

  1. <script type=“text/javascript” src=“scripts.php”></script>

Também funciona que é uma maravilha…

Em Java, seria algo mais ou menos assim:

  1. <%@page contentType=“text/html”%>
  2. <%@ include file=script1.js %>
  3. <%@ include file=script2.js %>

Fontes:
http://roadfork.narod.ru/JavaScript.htm
http://www.velocityreviews.com/forums/t155619-import-javascript-like-css.html

 



							

Estudos sobre Fibras Ópticas

Meu amigo Ricardo Moraes esteve fazendo um estudo sobre o uso de Enlaces de fibra óptica entre prédios localizados no mesmo terreno.

Constatou que apesar de caros, são sempre a melhor alternativa por possuirem características únicas de operação.

Embora Enlaces sem fio são mais baratos (ele mesmo é um defensor das “WLans”), dependendo do tipo de uso que se propõe neste tipo de rede ele pode se tornar inviável mesmo a curtíssimas distâncias.

Assim, ele compartilha conosco este estudo que pode servir de orientação e consulta sobre a utilização de fibras ópticas, seus tipos e aplicabilidades.

Bons estudos…

Read More