Dreamweaver CS4 – Beta 1

Que o Adobe Dreamweaver é a mais popular ferramenta de desenvolvimento web, isso todos sabem. E acabam de liberar uma versão beta no novo Dreamweaver CS4, para que você possa baixar, experimentar e sugerir algumas melhorias…

Novidades
Há muitas coisas interessantes nesta nova versão, entre elas podemos destacar:

  • Live View
    Agora pode-se ver a página funcionando diretamente no Dreamweaver, inclusive executando JavaScript e interpretando CSS, sem a necessidade de utilizar o navegador.
  • Related Files
    Dreamweaver agora reconhece os arquivos associados a um determinado documento (css, js, php, xml) e mostra uma lista dos arquivos relacionados na barra superior do documentos, o que facilita a edição dos mesmos.
  • Code Navigator
    Esta opção permite mostar o código fonte para um elemento selecionado atualmente.
  • CSS best practices
    Agora o interpretador de propriedades CSS mostra os estilos para a seleção atual e mostra um tooltip com as regras das melhores práticas para o bloco CSS selecionado.
  • Code hinting for Ajax and JavaScript frameworks
    Esta é outra qualidade que muitos desenvolvedores reclamavam, o suporte de code hinting (Auto completar e códigos) para os Javascript e para os mais populares Frameworks Javascript que incluem jQuery, Prototype y Adobe Spry. Até o momento não tem suporte para Mootools.
  • Subversion integration
    É, agora não será mais preciso utilizar a famosa extensão de integração do Tortoise para Dreamweaver. Pois é uma das outras grandes novidades, a integração nativa com Subversion (Sistema Controlador de Versão).
  • Adobe® AIR™ authoring support
    Nativamente já é possivel desenvolver aplicações para Adobe AIR™.

Mais informações

Esta disponível uma série de vídeos com a explicação das novas características em Adobe TV .

A versão beta funciona por 48 horas, para ativar, deve-se ter a licença do Dreamweaver CS3 ou do Creative Suite 3, para gerar o serial do CS4 Beta, neste link:  https://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_dreamweaver_sn

Contratar profissionais por potencial

Acho que toda contratação de um novo profissional para uma empresa, a princípio teria que levar em conta o potencial e competência de cada um, e não necessariamente pelo conhecimento técnico que a pessoa possui.

Com vi recentemente em um artigo de uma vaga de Administrador de Redes:

“Normally, I’m pretty happy to hire inexperienced but bright people and let them learn on the job. Even for fairly important jobs, like, say, President of the United States.”

– Joel Spolsky – A propósito, não deixe de conferir como o cara sabe escrever anúncios de empregos !

Isso até lembra aquela piadinha do Programador Pop Star:

“Um programador mediano estava sendo entrevistado para um emprego em uma grande fábrica de software:

– “E quais são suas pretensões salariais?”, perguntou o entrevistador.

Depois de ouvir um longo papo do candidato sobre a sua própria capacidade e seu “score” numa provinha de certificação.

– “Aproximadamente uns vinte mil reais por mês, mais benefícios.”, respondeu, e com ar todo empertigado, arrematou: “Quais os benefícios que a sua empresa oferece?”.

E o entrevistador, depois de pouco pensar, responde:

– “Normalmente, férias de 6 semanas por ano, fundo de pensão para complementar sua aposentadoria, um carro novo a cada dois anos, cartões de crédito, título de um clube, plano de saúde integral para todos os dependentes e viagem aos Estados Unidos duas vezes por ano.”

“Você está brincando?” – pergunta o programador. “É claro! Mas foi você quem começou!”

E você, o que acha?

10 dicas rápidas (hacks) de CSS

10 dicas rapidinhas de CSS:

  1. Vertical align div
    http://stylizedweb.com/2008/02/01/vertical-align-div/

  2. Min-Height

    selector {
    min-height:500px;
    height:auto; !important
    height:500px;
    }

  3. PNG transparency

    http://stylizedweb.com/2007/12/30/png-transparency-issues/

  4. Autoclear

    .container:after {
    content: “.”;
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }.container {display: inline-table;}
    /* Hides from IE-mac \*/
    * html .container {height: 1%;}
    .container {display: block;}
    /* End hide from IE-mac */

  5. Reset CSS

    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,
    h5,h6,pre,form,fieldset,input,p,blockquote,th,td {
    margin:0; padding:0;
    }table {border-collapse:collapse;border-spacing:0;}
    fieldset,img {border:0;}
    address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;font-weight:normal;
    }

    ol,ul {list-style:none;}
    caption,th {text-align:left;}
    h1,h2,h3,h4,h5,h6 {font-size:100%;}
    q:before,q:after {content:”;}

  6. Scrolling Render IE

    html {
    background : url(null) fixed no-repeat;
    }

  7. Opacity

    #transdiv {
    filter:alpha(opacity=75);
    -moz-opacity:.75;
    opacity:.75;
    }

  8. PRE Tag

    pre {
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    }

  9. Li Background Repeat IE

    <!–[if lt IE 7]>
    <style>
    #leftnav li { zoom: 1;} /* haslayout=true */
    </style>
    <![endif]–>

  10. Good to know

    @charset “UTF-8″;
    /* ———————————————————————-
    WinIE7
    ———————————————————————- */
    *:first-child+html selector{property:value;}
    /* ———————————————————————-
    WinIE6 & Mac IE
    ———————————————————————- */
    * html selector{property:value;}
    /* ———————————————————————-
    WinIE6
    ———————————————————————- */
    /*\*/
    * html selector{property:value;}
    /**/
    /* ———————————————————————-
    MacIE
    ———————————————————————- */
    /*\*//*/
    selector{property:value;}
    /**/

Ferramentas para Desenvolvedor Web

Pegando carona no post do colega Rafael Cunha, republico aqui algumas ferramentas que qualquer pessoa que trabalha com Desenvolvimento Web deve ter instalado:

  • Para nosso amigo Firefox:
  1. Firebug : Ferramenta para debugar, monitorar e editar em tempo real no site, CSS, HTML e Javascript, ferramenta muito poderosa.
  2. YSlow : Ferramenta que analiza o site e traz estatística se o site esta com performace baixa ou alta, baseada nas regras do Yahoo!.
  3. HttpFox : Ferramenta que monitora e analiza entrada e saída do protocolo HTTP do website, muito importante para visualizar controles em Ajax.
  4. Web Developer tool bar :  Ja dito ateriormente neste post, ferramenta com multiplas ferramentas para web.
  • Para nosso inimigo amigo IE:
  1. Developer ToolBar : Igual ao firebug, porém com menos recursos.
  2. MultiplesIEs : Ferramenta para poder testar o site em diversas versões do IE.

Valeu Rafael….

Ms Office será compatível com formatos concorrentes

É, defendido por unhas e dentes pelo meu amigo Dharis, o Open Document Format (ODF) parece que realmente ganhou a briga, pois a Microsoft afirmou que pretende adicionar novos formatos para o Office 2007, incluindo o Open Document Format (ODF), Portable Document Format (PDF), e XML Paper Specification (XPS).

O ODF é um rival do formato de documento nativo do Office (docx), e tornou-se muito popular em governos e escolas mundo afora. Microsoft, que não é boba nem nada, resolveu reconhecer os pedidos de compatibilidade com ODF, e então liberou um conversor para permitir que os usuários do Word, possam abrir documentos nesse formato. Já um começo!!!

Link: http://odf-converter.sourceforge.net/download.html

Bloquear duplo submit

Já falamos sobre este assunto aqui, porém, estamos reeditando o tópico para acrescentar uma outra lógica, para o mesmo problema, ou seja, evitar que o usuário dê um duplo submit em nossos formulários. Isso é muito comum acontecer, principalmente quando você tem uma baixa largura de banda, o usuário clica em enviar, e por impaciência acaba clicando várias vezes, resultando em vários registros inseridos. Ok, vejamos como proceder de duas formas.

Criando o Formulário
Suponhamos que temos um formulário no qual registramos o nome e email de um visitante:

<form method=“post”onsubmit=“return checkSubmit();”>
Nome:<br />
<input
name=“nome” type=“text”id=“nome” /><br />
Email: <br />
<input
name=“email” type=“text”id=“email” /><br />
<input
type=“submit” id=“btsubmit”value=“Registrar” />
</form>

Note que temos um evento onsubmit (o qual se executa ao enviar o formulário) que chama a função checkSubmit (a qual iremos criar mais adiante).

Metodo I: Verificar o envio
O que faremos é armazenar em uma variável a indicação que o formulário foi enviado, e então mostraremos a mensagem indicando que o formulário esta sendo preocessado. Assim, nossa função checkSubmit teria esta forma:

var
statSend = false;
function checkSubmit() {
if
(!statSend) {
statSend = true;
return true;
} else {
alert
(“O formulário esta sendo enviado…”);
return false; }
}

Metodo II: Desabilitar o botão enviar.
Neste caso, uma vez pressionado o botão enviar, realizamos a sua desabilitação e trocamos o texto “Enviar” para “Enviando dados…”

function
checkSubmit() {
document.getElementById(“btsubmit”).value = “Enviando dados…”;
document.getElementById(“btsubmit”).disabled = true;
return true;
}