Expressá-la

Outra suplementar memória da velha escola ...

Por que devemos permitir windos.status?
Javascripts poderia ser um pesadelo quando você tem algo para depurar. Firefox tem alguns addons úteis, como isso é Firebug torna nossa vida mais fácil e também, a votação para a técnica de depuração mais popular em Javascript deve ir para "alerta ()". Anywaz! Há poucos casos em que a adição de ALERTA não depurar seu mis-comportando Javascript é apenas uma idéia boa. Por exemplo! você tem o item dragble cuja posição precisa ser alertado .... NÃO NÃO! Não fazê-lo! ... Você só vai receber alertas infinitas ou você vai ser capaz realmente drap seu dragable. Bem! Há situações mais bons, onde você pode escrever textos fora de depuração para a barra de status, muito mais usful ... Acredite em mim! A sua experiência!

IE por padrão deixei você escrever na barra de status do navegador usando a sintaxe "" algo para depurar "window.status =", mas o Firefox não. Então, para permitir janelas mudança de status, você pode fazer uma das seguintes opções.

Abra about: config no navegador (digite "about: config" esta na barra de endereços) e procure por
dom. disable_window_status_change. Mude-o para false ... basta clicar sobre a entrada para alternar seu estado.

Ou, em alternativa

"Ferramentas → Opções → Conteúdo → Enable JavaScript / Advanced → Alterar texto da barra de status"

E também que ... a escrever na barra de status na sua Javascript, IE é apenas ok, se você usar um curto sintaxe estado ie = 'text algum debug', mas no FireFox, você tem que usar na íntegra ou seja, sintaxe window.status = ' algo para depurar '

Nem eu sou muito novo para User Interface (UI) de desenvolvimento, nem eu sou um veterano e como eu sempre disse, eu me encaixo no perfil de desenvolvedor de interface do usuário mais do que a de um designer, sem arrependimentos. Oh Well! O que eu estava escrevendo? Por um tempo ... (deve ser em anos não menos) Agora, de vez em quando, quando eu entrar um pouco de UI Design (quando o designer profissional foi em um feriado), eu não posso parar sempre pensando se meu projeto deve ser devidamente complient ou não (sinceramente, não que eu poderia achive 100% o cumprimento de normas, Se eu quisesse também). Então eu digo a mim mesmo, que porcaria! ... O projeto deve ser simples, agradável e principalmente parece útil, não deve fazer os visitantes fugir ... ou bounce (para ser técnico). Que bom seria um bom layout CSS tableless ser para o visitante, que está alheio a tudo o HIPERTEXTO inteligente e Cascading Style Sheet sob a pele da sua página ... Zilch!
Deve olhar agradável e ser fácil de usar ... depois vem a todas as coisas padrões.

Eu stumbbled accross esta entrada do blog por Jason Fried da 37 Signals (Para aqueles que não estão cientes de 37 sinais são os onces que criaram algumas aplicações web impressionantes como o Basecamp, Campfire etc) que escreveu algo similar em 2004 e, acreditem, quase 5 anos e não mudou muito desde que ... eu era feliz ao ler seu post, como eu concordo totalmente com o que ele tem a dizer e também o fato, ela não tem certeza sobre o que está dizendo sobre a sua intuição apenas a sua e assim é meu

Jason Fried: "Não há maneira muito falar sobre CSS e XHTML e Normas e Acessibilidade e não é suficiente falar sobre pessoas. CSS e Padrões de Código Compliant são apenas ferramentas - você tem que saber o que construir com essas ferramentas. Ótimo, eu estou feliz por sua interface não utiliza tabelas. Então o que? Quem se importa se ele ainda não deixa as pessoas a atingir seus objetivos. Web standards são grandes, mas os padrões das próprias pessoas incluem fazer as coisas (e que ainda é muito difícil de fazer em linha).

Designers de IU estão fazendo a mesma velha fundamental "esquecendo-se do ser humano sobre o outro lado" erros - só que desta vez o seu código fica melhor. Os seres humanos - não validadores de código - interfaces de usar ".

Artigo completo check-out Jason Fried

DISCALIMER: Isto não significa que não devemos se preocupar com padrões em tudo. Padrões são bons de ter e ficar com eles, tanto quanto possível. Nós só temos que entender que o design UI Bom nem sempre significa 100% cumprimento dos requisitos de Normas ou vice-versa ....

Da minha lista dos meus ensinamentos, sigo uma UI Design poucos e desenvolvimento de regras ouro ... Heres o TOP 10 ... não que você tem segui-los também ...

1. Cuide de seus usuários. Os usuários podem fazer ou quebrar seu site. DONOT fazer olhar do usuário como um idoit total, absolutamente incapaz de usar o seu site. Isso é ruim!

2. Mantenha simplicidade e facilidade de uso seus guidlines primários. Muitas coisas na tela, maior a probabilidade de que um usuário vai ficar confuso ou distraído de sua tarefa original.

3. Seja nos limites ... DONOT entrar muito em usabilidade, acessibilidade e padrões. Utilizar as normas de forma eficaz e torná-los entender para a equipe. Isto irá assegurar a consistência direita no produto

4. Protótipo o requisito. Desde então, estes dias, as interfaces usam são ricos, Prototipagem sempre é melhor do que apenas fazer wireframes simples e esta é nula de interações decentes, seria deixar de fornecer ao cliente uma imagem clara do produto final que está sendo desenvolvido. Sempre que é mais fácil para converter os protótipos em produtos finais. Também! prototipagem com quaisquer problemas de interação poderiam ser resolvidos mais cedo no ciclo de desenvolvimento.

5. Consistência no seu design e interação é muito importante. Donot confundir o usuário com interações imprevisíveis e gizmos.

6. Entenda o seu "Missão Design". Aways concentrar-se na ação primária da beign página projetada. Além disso, fazer uma lista de suas ações Secundária na página, e priorizá-los.

7. Fornecer informação adequada para os usuários do site. Com a maioria dos sites concebidos em torno de AJAX, fornecer dicas visuais ao usuário sobre mudanças para a página. O usuário tem que receber um aviso da realização de qualquer tarefa que ele executa. Donot fazer o usuário esperar e acho que, por exemplo. fornecer indicadores de progresso para uplaods arquivo.

8. Use os controles de forma adequada. Para uso por exemplo, Selecione na lista suspensa para listas apenas para pequenas, donot deixar o usuário escolher uma das 200 cidades que utilizam caixas de seleção. Entenda a diferença entre um botão e um link. Um link e botão têm finalidades diferentes, donot usar um para o outro. Fornecer o controle direito de fazer a interação com uma página mais fácil. Evite o uso de menus, que são mais que dois níveis de profundidade. Não reinvente a roda. Use os controles padrão, personalizá-los somente se muito necessária. Defina todos os controles personalizados necessários para a sua mão primeiro site, para que pudessem ser criados e testados de forma independente, pronto para uso local em frente.

9 Donot. ITERATE muito no design. Lembre-se! O produto consiste todo um projeto mais que por si só. Construa calendários apropriados em seu cronograma do projeto para iterações de projeto e cumpri-lo. Iteração nos ajuda a descobrir o que funciona eo que não, escolher os pontos problemáticos. Como uma boa interface leva tempo, dar tempo para as iterações no início do ciclo de desenvolvimento, de modo que iterações de projeto doesnot diretamente equivale a REWORK. O excesso de retrabalho poderia jeopradize prazos.

10. Sente-se e pensar como um usuário, às vezes.

Heres outro pedaço pouco de malandragem Javascript que eu tive que cavar em volta porque a situação commaned-lo. Em um dos meus sites da Web, eu tive esta situação onde eu tive que implementar "windows.onload" duas vezes. A primeira coisa que veio à mente um inexperiente como o meu (eu tenho que dizer honestamente que, uma vez que tenho vindo a utilizar frameworks JavaScript e bibliotecas, eu forgotton para fazer coisas simples no meu próprio ... triste mas é verdade), é o seguinte método ...

 window.onload = onloadfn1;
 window.onload = onloadfn2;
 window.onload = onloadfn3;
 etc ..

Desculpe dizer, mas, isso não vai funcionar ... não quero discutir a ciência execução de Javascript muito ... mas de acordo com minha experiência recente, apenas a função anterior (onloadfn3) vai realmente mal executada.

Em situações normais, ao contrário do meu (que eu vou falar um pouco mais tarde) ... você poderia fazer uma das seguintes opções para executar funções de onload mutliple ....

Ou algo assim

 doOnLoad function () {
         onloadfn1 ();
         onloadfn2 ();
         onloadfn3 ();
 }
 window.onload = doOnLoad;

Para a minha situação atual, eu não posso usar qualquer um dos acima ...
Por que eu preciso chamar windows.onload duas vezes, ao invés de chamar duas funções dentro de uma função onload único? Aqui é rápido olhar para a minha declaração do problema ...

"Páginas de meu site são estruturados como o tema do WordPress .... ou seja, há um header.php e footer.php comuns que é incluído em todas as páginas do site. Há uma implementaion função onload nos footer.php para fazer algumas funções onload comuns. E há poucas páginas que precisam de algo de sua própria OnLoad, além daqueles feitos pela função onload comum. Se eu atribuir função de callback diretamente para o manipulador de window.onload, ele irá sobrepor-se callbacks previamente designados nos footer.php "

.... O meu problema entendido ?

Bem! existem poucas soluções que eu encontrei. Todos eles são muito semelhantes e, principalmente, implementions de uma solução dada por Simon Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Solução:

Basta adicionar este código javascript para o site ...

 addLoadEvent função (func) {
     var oldonload = window.onload;
     if (typeof window.onload! = 'função') {
        window.onload = func
     Else {}
        window.onload = function () {
            if (oldonload) {
                   oldonload ()
           }
           func ()
        }
    }
 }

E chamá-lo de vez da "windows.onload" usual

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (function () {
 / * Mais código para ser executado no carregamento da página *
 }); 

As vantagens deste trecho de código ...
1. Primeiramente, Ele permite que você tem eventos windows.onload múltiplos, chamados de partes separadas do seu código, sem overridding a definição anterior
2. É muito discreto. Pode ser colocado em um arquivo com seus outros scripts ou em um arquivo separado.
3. Ele funciona mesmo window.onload já foi definido.

Pensei que este será um doodle para encontrar no google, como muitos que nós escritores da interface do usuário e script precisa fazer isso em uma base do dia a dia, que é incluir um pouco de pedaço de trecho de código PHP (. Php) em um Smarty Template (. tpl). Percebi que o mais fácil / popular consulta o seu, ainda mais difícil encontrar a resposta exata ... um milhão de resultados de busca, mas a maioria deles reffered para "arquivo" inclui, em Smarty ... que tem a seguinte sintaxe

{Include file = "include / header.php"}

Isso realmente inlcuded o arquivo bem, mas como texto, que eu queria era o resultado do arquivo incluído. (Note acima é usada incluem modelo dentro de um arquivo de modelo). Finalmente com um persiverance pouco .... Me deparei com uma sintaxe levemente modificado, que era a resposta para a minha obrigação ... isso aqui é ... se você havn't encontrado um já

{Include_php file = "include / header.php"}

Outra tut rápido. Aqui é algo simples e agradável usando o poder do CSS ... mas foi concieve difícil (e certamente não era eu), para começar. Adicionando Dropshadow, pode ser um pedaço de bolo para muitos de nós, usando algumas ferramentas de edição de imagem como o Photoshop anf fogos de artifício etc
A razão pela qual, optei por sombra usando CSS é que, geralmente durante a criação de um design de página / html de um aplicativo, os requisitos de manter a iteração. O que quero dizer é, em um site já existente, com muitas imagens, como as que exibem freinds lista ou uma galeria de imagens, será difícil para o reprocessamento de toda a carga de imagens que já haviam sido descarregadas para adicionar ou remover as sombras, para que matéria.
Então, se você fez um pouco de pensamento frente ao criar os htmls para adicionar essas divisões extras ou geralmente a situação é que você tem uma lógica de loop gerando esses ícones / Miniaturas em XSL, PHP. JAVA ou qualquer linguagem de programação / scripting outro, você pode adicioná-la a qualquer momento, então é apenas a questão de mostrar e esconder essas sombras usando a propriedade Display CSS, como por os clientes em constante mudança requisitos ... Eu havn't feito esse tipo de visão de futuro antes disso ... mas ahev começou agora!

No exemplo abaixo, a imagem original é a sombra livre e as dropshadows são aplicados como necessário! Além disso, eu ter ido um pouco mais, usando os truques da minha Tut anteriores (Well! estes são, provavelmente, menor variedade de tutoriais, por isso só se justifica chamá-los de "Tut" 's) sobre Usando CSS propriedade do clipe para mostrar apenas

Imagem Original

Dropshadow Resultados CSS

Veja o Demo | Download de SourceFiles

Por que eu quero entender isso?? Humm ...!!

A maioria dos escritores CSS concordaria que o CSS propriedade Clip é provavelmente uma das propriedades não-utilizados CSS. Era tão verdadeiro para mim também e foi mais feliz para negligenciá-lo, até que comecei a modificar o MooTools DOIS Knob componente Slider (pino) (com indicador de Range) .

Houve uma boa sugestão de um dos utilizadores de componentes para modificar o componente deslizante utilizando imagens recortadas backgroud (contra uma divisão de largura variável) para indicar a gama deslizante. Assim chegou a minha hora de entrar na diversão, mas un fretado (para mim é claro) águas da propriedade Clip CSS.

Bem! quão difícil pode ser? Não muita coisa ... SIM e NÃO. A sintaxe a utilizar a propriedade Clip CSS é muito vertical, mas o significado / usuage é um pouco croocked. Com uma memória como a minha, toda vez que eu sento para retocar a minha Script Slider ... Tenho tokeep referindo-se ao uso desta propriedade CLIP, para me lembrar a lógica que eu criei no meu script .... DAÍ! pensado para pen-lo para baixo, com uma esperança de lembrar que o futuro (e também para o benefício daqueles que parecem boggled pela propriedade Clip CSS)

O que Clipe CSS fazer?

Clipe é parte do módulo de efeitos visuais do CSS 2,1. Simplificando, seu trabalho é colocar uma janela visível em cima de um objeto que está sendo cortada, portanto, recorte de imagens e criação de miniaturas sem ter que criar arquivos adicionais (Já coloquei este recurso para melhorar o uso do componente Slider )

Usando a propriedade Clip CSS, você pode criar um recorte usando a forma rect. Como muitas outras propriedades CSS (como margem de preenchimento etc,), utilizando rect requer quatro coordenadas superior, inferior, direita, esquerda (TRBL). A natureza croocked desta propriedade reflete quando você dar uma olhada no clipe como calcula a região de corte, usando essas quatro coordenadas (envia cérebro em um lance por um tempo). Agora, para confundi-lo do fundo começa a partir do topo, eo direito começa a partir da esquerda. . Você vê o que eu disse? .... Por isso este post ...

Esta pequena confusão pode facilmente desaparecer, com esta explicação visual da propriedade CSS Clip / rect como abaixo!!

Clipe Requisitos CSS

A tarefa que temos começado é para cortar a imagem em miniatura a seguir em uma imagem mais quadrada olhando (e também uma imagem de grande-angular)

Thumbnal Original / Imagem	Requisitos Clipe para Sqaure Thumbmail

Clipe Resultados CSS

Veja o Demo | Download de SourceFiles

Esta questão passou pela minha cabeça algumas vezes antes, quando eu estava trabalhando em locais anteriormente também, que usou o WordPress para mostrar blogs ou novo tipo de conteúdo em alguma parte do site / portal.Being um novato em PHP e em torno de WordPress, eu mantive procastinating, pensando "isto não é o meu pedaço de bolo". Finalmente! essa exigência veio até o meu nariz, quando começou a cavar em torno de um bit para a solução.
Fiquei surpreso ao descobrir que ele realmente era mais fácil do que eu realmente pensei que era, para exibir uma lista de títulos ou a última mensagem em qualquer outra página fora da seção WordPress-powered, usando apenas um pouco de PHP e da API do WordPress .

Aqui está o que fazer: -
Por razões de explicação, suponha que seu site é http://www.inchembur.com/ e você tem a seção de notícias deste site em http://news.inchembur.com/ (que está executando WordPress). Agora, a exigência é para mostrar o mais recente post de http://news.inchembur.com/ na página inicial do site principal, ou seja, http://www.inchembur.com/index.php

Passo 1: No seu index.php adicionar o seguinte pedaço de código, incluir o WordPress arquivo API. Você pode adicionar esta para o topo da página que você deseja que o seu post para aparecer.

<? Php
'WP_USE_THEMES' , false ) ; // Disbable use of WordPress Theme define ('WP_USE_THEMES', false); uso / / Disbable de Tema WordPress
require ('/ var / news.inchembur.com / wp-blog de ​​header.php'); / / Incluir WordPress API
; // Get Latest Post query_posts ('showposts = 1'); / / Pega Última Mensagem
?>

No pedaço acima de inclusão, estamos recebendo apenas a postagem mais recente single. se você quiser experimentar variações mais sinta-se livre para cavar, query_posts() documentação .

Passo 2: Agora, na parte da página Index / Home onde você quer mostrar o mais recente de pós WordPress http://news.inchembur.com , use o seguinte código. Escusado será dizer que, se sentir livre para ad suas divisões de estilo, vãos e classes como por suas necessidades do projeto.

Passo 3: Não há Etapa 3 ... É isso ... está pronto!

Como mostrar uma página específica de pós / ao contrário da última mensagem: -
Isto pode ser facilmente conseguido se alterar os argumentos para query_posts() para incluir a identificação da página ou página slug

) ; query_posts ('page_id = 7');
) ; query_posts ('pagename = sobre');

ou Você pode controlar o número de mensagens:
) ; query_posts (showposts = 3);

Às vezes, para manter o pageweight baixo ... nós dividimos nossos scripts em fragmentos ... Estes fragmentos javascript pode ser carregado como e quando necessário (em um evento ou ao clicar em um link ou botão, etc.)

Javascripts Carregando dinamicamente é simples e muito para a frente como abaixo ...

= “text/javascript” > <Tipo de script = "text / javascript">
função loadNewScript (fonte) {
var s = document.createElement ('script');
s.setAttribute ('type', 'text / javascript');
s.setAttribute ('src', fonte);
document.body.appendChild (s);
}
</ Script>

e você pode ter o link seguinte chamada em qualquer lugar do corpo, ou você pode ter este script "onLoad" do documento em si ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a > <A href = "javascript: loadNewScript ('myDynamicScript.js');"> Script Carga Dinâmica </ a>

ou

<body onload="loadNewScript('myDynamicScript.js');">

Se você é uma pessoa css, você sabe a dor na obtenção de seus layouts de trabalho cross-browser. IE8 é mais uma chave inglesa nos trabalhos para os desenvolvedores de nós. Anywaz! se você bater em cima desta questão, como eu fiz ontem, onde o seu CSS funcionando perfeitamente no IE7 (e anterior) e Firefox tem de repente começou a birra no IE8, tente este ... É bem parecia resolver os meus problemas para o momento ....

Usando declaração Meta, podemos especificar o motor de renderização que gostaria de usar o IE8. Então, para forçar o IE8 para renderizar como IE7 ... Insira o Tag Meta seguinte na cabeça de seu documento: -

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Por padrão Meta IE seria: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
o que tornaria o IE8 renderizar a página usando o modo padrão novo.

Se necessário, esta sintaxe poderia ser usado para acomodar para outros navegadores como abaixo:

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />

Mais sobre doctypes:

Se você ainda não familiarizados com o tipo de animal chamado "Doctype" ... está aqui alguma leitura rápida
Quais são DOCTYPES? Quais são Peculiaridades BROWSER e modo estrito?
Definir o DOCTYPE no XSL

Para um mais profundo entendimento sobre DOCTYPES, tente visitar esses links ...
A List Apart: Fixe seu site com o DOCTYPE direito!
A List Apart: Beyond DOCTYPE: Web Standards, compatibilidade e IE8

Nota: Embora muitos de nós HTML / CSS pessoas têm negligenciado a importância de decleration DOCTYPE em nossos documentos, Definir o DOCTYPE correto, é geralmente a resposta a problemas com o navegador mais transversais.

A redefinição CSS é / são CSS para definir um número de estilos de elementos para uma linha de base específica que cria consistência entre vários navegadores.

Todos nós temos sido através dos pesadelos de escrever CSS cross-browser do. Então, quando começamos a escrever nosso CSS, É uma prática para redefini-la primeiro para remover / redefinir as inconsistências cross browser. Redefine CSS, são simples linhas de CSS que você começa o seu CSS com, dando-lhe uma base limpa para começar a construir o seu em cima.

O redefine CSS que normalmente tendem a usar esta aparência

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}

ul, ol {
list-style: none;
}

h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}

Redefinir o tamanho da fonte navegador
Além disso, note a reposição que tem sido aplicado ao tamanho do navegador de fonte na linha seguinte ...

html {font-size: 76%;}

O CSS acima redefine o tamanho da fonte navegador para 10 pixels, o que torna possível trabalhar com tamanhos de fontes relativos (que é todo importante a partir de um acordo WAI prespective)
Por exemplo, na seguinte definição, tamanho da fonte em um período é definido como 10 pixels e que na do n ° é definida como 14 pixels ...

span {font-size: 1em;}
p {font-size: 1.4em;}