Expresa-la

Outra adicional memoria da vella escola ...

Por que debemos permitir windos.status?
Javascripts podería ser un pesadelo cando tes algo para depurar. Firefox ten algúns addons útiles, como iso é Firebug fai a nosa vida máis fácil e tamén, a votación para a técnica de depuración máis popular en Javascript que ir a "alerta ()". Anywaz! Hai poucos casos en que a adición de alerta non depurar o seu mis-comportándose Javascript é só unha boa idea. Por exemplo! ten o elemento dragble cuxa posición debe ser avisado .... NON NON! Non facelo! ... Só recibirá alertas infinitas ou vai ser capaz realmente drap seu dragable. Ben! Hai situacións máis bos, onde podes escribir textos fóra de depuración para a barra de estado, moito máis usful ... Pensa en min! A súa experiencia!

IE por defecto deixei escribir na barra de estado do navegador usando a sintaxe "" algo para depurar "window.status =", mais o Firefox non. Entón, para permitir fiestras cambio de estado, pode facer unha das seguintes opcións.

Abre about: config no navegador (escriba "about: config" esta na barra de enderezos) e procure
don. disable_window_status_change. Cambia-lo para false ... só tes que premer sobre a entrada para cambiar o seu estado.

Ou, no seu lugar

"Ferramentas → Opcións → Contido → Enable JavaScript / Advanced → Cambiar texto da barra de estado"

E tamén que ... a escribir na barra de estado na súa Javascript, IE é só ok, se usa un curto sintaxe estado ie = 'text algún depuración', pero en Firefox, tes que usar completa ou sexa, sintaxe window.status = ' algo para depurar '

Nin eu son moi novo para User Interface (UI) de desenvolvemento, nin eu son un veterano e como sempre dixen, me encaixa no perfil de desenvolvedor da interface de usuario máis que a de un estudio, sen arrependimentos. Oh Well! O que eu estaba escribindo? Por un tempo ... (debe ser en anos non menos) Agora, de cando en vez, cando entrar un pouco de UI Deseño (cando o estudio profesional foi en unha festa), non podo deixar sempre a pensar se o meu proxecto debe ser debidamente complient ou non (sinceramente, non que eu podería achive 100% o cumprimento de normas, Se eu quixese tamén). Entón eu digo a min mesmo, que porco! ... O proxecto debe ser simple, agradable e sobre todo parece útil, non debe facer os visitantes fuxir ... ou Bounce (para ser técnico). Que bo sería un bo esquema CSS tableless ser para o visitante, que está alleo a todo o hipertexto intelixente e Cascading Style Sheet baixo a pel da túa páxina ... Zilch!
Que mirar agradable e ser fácil de usar ... despois vén a todas as cousas patróns.

Eu stumbbled accross esta entrada do blog por Jason Fried da 37 Signals (Para os que non son conscientes de 37 sinais son os onces que crearon algunhas aplicacións web impresionantes como o Basecamp, Campfire etc) que escribiu algo similar en 2004 e, crean, case 5 anos e non cambiou moito desde que ... eu era feliz ao ler o seu post, como eu estou de acordo totalmente co que ten que dicir e tamén o feito, non está seguro sobre o que está dicindo sobre a súa intuición só a súa e así é o meu

Jason Fried: "Non hai xeito moi falar CSS e XHTML e Normas e Accesibilidade e non é suficiente falar sobre persoas. CSS e patróns de Código compliant son só ferramentas - ten que saber o que construír con estas ferramentas. Gran, eu estou feliz pola súa interface non utiliza táboas. Entón o que? Quen se importa se non deixa a xente a acadar os seus obxectivos. Web estándares son grandes, pero os patróns das propias persoas inclúen facer as cousas (e que aínda é moi difícil de facer en liña).

Deseñadores de IU están facendo a mesma vella fundamental "esquecendo-se do ser humano sobre o outro lado" erros - só que esta vez o seu código está mellor. Os seres humanos - non validadores de código - interfaces de usar ".

Artigo completo check-out Jason Fried

DISCALIMER: Isto non significa que non hai que preocuparse estándares en todo. Patróns son bos de ter e estar con eles, na medida do posible. Nós só temos que entender que o deseño UI Bo non sempre significa 100% cumprimento dos requisitos de normas ou viceversa ....

Da miña lista dos meus ensinanzas, sigo unha UI Deseño poucos e desenvolvemento de regras ouro ... Heres o TOP 10 ... non que ten segui-los tamén ...

1. Coidar dos seus usuarios. Os usuarios poden facer ou romper o seu sitio. DONOT facer mirar de usuario coma un idoit total, absolutamente incapaz de usar o seu sitio. Iso é malo!

2. Manteña simplicidade e facilidade de uso seus guidlines primarios. Moitas cousas na pantalla, maior a probabilidade de que un usuario vai ficar confuso ou distraído da súa tarefa orixinal.

3. Sexa dentro dos límites ... DONOT entrar moito en usabilidade, accesibilidade e patróns. Utilizar as normas de forma eficaz e facelos entender para o equipo. Isto asegura a consistencia dereita no produto

4. Prototipo o requisito. Desde entón, estes días, as interfaces usan son ricos, prototipado sempre é mellor que só facer wireframes simple e esta é nula de interaccións decentes, sería deixar de proporcionar ao cliente unha imaxe clara do produto final que está a ser desenvolvido. Sempre que é máis doado para converter os prototipos en produtos finais. Tamén! prototipado con os problemas de interacción poderían ser resoltos antes no ciclo de desenvolvemento.

5. Consistencia no seu deseño e interacción é moi importante. Donot confundir o usuario con interaccións imprevisibles e Gizmos.

6. Entender o seu "Misión Design". Aways concentrarse na acción primaria da beign páxina proxectada. Ademais, facer unha lista das súas accións Secundaria na páxina, e prioriza-los.

7. Proporcionar información adecuada para os usuarios do sitio web. Coa maioría dos sitios concibidos en torno a AJAX, proporcionar consellos visuais ao usuario sobre o cambio para a páxina. O usuario ten que recibir un aviso da realización de calquera tarefa que executa. Donot facer o usuario esperar e creo que, por exemplo. proporcionar indicadores de progreso para uplaods arquivo.

8. Use os controis de forma adecuada. Para o seu uso por exemplo, seleccione na lista de correo para listas só para pequenas, donot deixar o usuario escoller unha das 200 cidades que utilizan caixas. Entenda a diferenza entre un botón e unha ligazón. Unha ligazón e botón teñen finalidades diferentes, donot usar un para o outro. Facilitar o control dereito a efectuar a interacción con unha páxina máis fácil. Evite o uso de menús, que son máis que dous niveis de profundidade. Non reinvente a roda. Use os controis estándar, personalizar-los só moi necesaria. Define todos os controis personalizados necesarios para a súa man primeiro sitio, para que puidesen ser creados e probado de forma independente, listo para o seu uso local fronte.

9 Donot. ITERATE moito no deseño. Teña en conta que! O produto consiste todo un proxecto máis que por si só. Constrúe calendarios adecuados no seu programa do proxecto para iterações de proxecto e cumprir-lo. Iteração nos axuda a descubrir o que funciona eo que non, escoller os puntos problemáticos. Como unha boa interface leva tempo, dar tempo para as iteracións no inicio do ciclo de desenvolvemento, de xeito que iterações de proxecto doesnot directamente equivale a REWORK. O exceso de retraballados podería jeopradize prazos.

10. Sent-se e pensar como un usuario, ás veces.

Heres outro anaco pouco de malandragem Javascript que eu tiven que cavar ao redor porque a situación commaned-lo. Un dos meus sitios web, eu tiven esta situación onde eu tiven que aplicar "windows.onload" dúas veces. O primeiro que veu á mente un inexperto como o meu (teño que dicir honestamente que, unha vez que teño benvida a empregar frameworks JavaScript e bibliotecas, eu forgotton para facer cousas simples no meu propio ... triste pero é certo), é o seguinte método ...

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

Sentímolo dicir, pero, iso non vai funcionar ... non quero discutir a ciencia execución de Javascript moi ... pero segundo a miña experiencia recente, só a función anterior (onloadfn3) vai realmente mal executada.

En situacións normais, ao contrario do meu (que eu vou falar un pouco máis tarde) ... podería facer as seguintes opcións para realizar funcións de onload mutliple ....

Ou algo así

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

Para a miña situación actual, non podo utilizar calquera dos anteriores ...
Por qué me teño chamar windows.onload dúas veces, en vez de chamar dúas funcións dentro dunha función onload único? Aquí é rápido ollar para a miña declaración do problema ...

"Páxinas do meu sitio web son estruturados como o tema do WordPress .... é dicir, hai un header.php e footer.php comúns que está incluído en todas as páxinas do sitio web. Hai unha implementaion función onload nos footer.php para facer algunhas funcións onload comúns. E hai poucas páxinas que precisan de algo da súa propia OnLoad, ademais daqueles feitos pola función onload común. Se eu asignar función de callback directamente ao manipulador de window.onload, ha sobrepasar-se callbacks previamente designados nos footer.php "

.... O meu problema entendido ?

Ben! existen poucas solucións que podo atopar. Todos eles son moi semellantes e, sobre todo, implementions dunha solución dada por Simon Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Solución:

Basta engadir este código javascript á páxina web ...

 addLoadEvent función (func) {
     var oldonload = window.onload;
     if (typeof window.onload! = 'función') {
        window.onload = func
     Else {}
        window.onload = function () {
            if (oldonload) {
                   oldonload ()
           }
           func ()
        }
    }
 }

E chama-lo de vez da "windows.onload" usual

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (function () {
 / * Máis código para ser executado na carga da páxina *
 }); 

As vantaxes deste fragmento de código ...
1. En primeiro lugar, permite que ten eventos windows.onload múltiples, chamados de partes separadas do seu código, sen overridding a definición anterior
2. É moi discreto. Pode ser instalado nun arquivo con seus outros scripts ou nun ficheiro separado.
3. Funciona mesmo window.onload xa foi definido.

Penso que este será un doodle para atopar en Google, como moitos que escritores da interface de usuario e guión que facelo nunha base do día a día, que é incluír un pouco de peza de fragmento de código PHP (. PHP) nun Smarty Template (. TPL). Entender que o máis fácil / popular consulta o seu, aínda máis difícil atopar a resposta exacta ... un millón de resultados de busca, pero a maioría deles reffered para "arquivo" inclúe, en Smarty ... que ten a seguinte sintaxe

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

Isto realmente inlcuded o arquivo ben, pero como texto, que eu quería era o resultado do ficheiro incluído. (Ten en conta por riba é usada inclúen modelo dentro dun arquivo de modelo). Finalmente cun persiverance pouco .... Me deparei cunha sintaxe levemente modificado, que era a resposta á miña obrigación ... iso aquí é ... se havn't atopar un posto

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

Outra tut rápido. Aquí é algo sinxelo e agradable usando o poder do CSS ... pero foi concieve difícil (e por suposto non era eu), para comezar. Engadido Dropshadow, pode ser unha peza de bolo para moitos de nós, usando algunhas ferramentas de edición de imaxe como Photoshop ANF fogos de artificio, etc
A razón pola que, optei por sombra usando CSS é que, xeralmente durante a creación dun deseño de páxina / html dunha aplicación, os requisitos de manter a iteração. O que quero dicir é, en un sitio xa existente, con moitas imaxes, como as que exhiben freinds lista ou unha galería de imaxes, será difícil para o reprocesando de toda a carga de imaxes que xa foran descargadas para engadir ou eliminar as sombras, para que materia.
Entón, se fixo un pouco de pensamento fronte ao crear os htmls para engadir esas divisións extras ou xeralmente a situación é que ten unha lóxica de loop xerando eses iconos / Miniaturas en XSL, PHP. Java ou calquera linguaxe de programación / script outro, pode engadir-la en calquera momento, é só a cuestión de mostrar e ocultar esas sombras usando a propiedade Mostrar CSS, por clientes en constante cambio requisitos ... Eu havn't feito este tipo de visión de futuro antes diso ... pero ahev comezou xa!

No seguinte exemplo, a imaxe orixinal é a sombra libre e as dropshadows son aplicados polo que sexa! Ademais, eu ir un pouco máis, a usar os trucos da miña Tut anteriores (Well! estes son, probabelmente, menor variedade de tutoriais, por iso só se xustifica chamalos de "Tut" 's) sobre Usando CSS propiedade do clip para mostrar só

Imaxe orixinal

Dropshadow Resultados CSS

Vexa o Demo | Descargar SourceFiles

Por que quero entender iso? Humm ...!

A maioría dos escritores CSS acordo que o CSS propiedade Clip é probablemente unha das propiedades non utilizados CSS. Era tan certo para min tamén e foi máis feliz para negligencia-lo, ata que empecei a modificar o MooTools DOUS Knob compoñente Slider (Pino) ​​(con indicador de Range) .

Houbo unha boa suxestión dun dos usuarios de compoñentes para modificar o compoñente deslizante usando imaxes recortadas backgroud (contra unha división de ancho variable) para indicar a variedade deslizante. Así chegou a miña hora de entrar na diversión, pero un fretado (para min é claro) augas da propiedade Clip CSS.

Ben! quão difícil pode ser? Non moita cousa ... si e non. A sintaxe a empregar a propiedade Clip CSS é moi vertical, pero o significado / usuage é un pouco croocked. Cunha memoria como a miña, cada vez que eu sento para retocar a miña Script Slider ... Teño tokeep referíndose ao uso desta propiedade CLIP, para me lembrar a lóxica que eu creei no meu guión .... De aí! pensado para pen-lo para abaixo, cunha esperanza de lembrar que o futuro (e tamén para o beneficio dos que parecen boggled pola propiedade Clip CSS)

O que Clip CSS facer?

Clip é parte do módulo de efectos visuais do CSS 2,1. Simplificando, o seu traballo é poñer unha fiestra visible enriba dun obxecto que se está cortada, polo tanto, recorte de imaxes e creación de miniaturas sen ter que crear arquivos adicionais (Xa coloquei este recurso para mellorar o uso do compoñente Slider )

Empregando a propiedade Clip CSS, pode crear un recorte usando a forma rect. Como moitas outras propiedades CSS (como marxe de recheo, etc,), utilizando rect require catro coordenadas superior, inferior, dereita, esquerda (TRBL). A natureza croocked desta propiedade reflicte cando un ollo no clip como calcula a rexión de corte, utilizando esas catro coordenadas (envía cerebro nun lance por un tempo). Agora, para confundir-lo do fondo comeza dende o principio, eo dereito comeza a partir da esquerda. . Vostede ve o que eu dixen? .... Por iso este post ...

Esta pequena confusión pode facilmente desaparecer, con esta explicación visual da propiedade CSS Clip / rect como a continuación!

Clip Requisitos CSS

A tarefa que temos comezado é para cortar a imaxe en miniatura a seguir unha imaxe máis cadrada mirando (e tamén unha imaxe de gran-angular)

Thumbnal Orixinal / Imaxe	Requisitos clip para Sqaure Thumbmail

Clip Resultados CSS

Vexa o Demo | Descargar SourceFiles

Esta cuestión pasou pola miña cabeza algunhas veces antes, cando estaba a traballar en lugares anteriormente tamén, que usou o WordPress para mostrar blogs ou novo tipo de contido nalgunha parte da web / portal.Being un novato en PHP e ao redor de WordPress, eu mantiven procastinating, pensando "isto non é o meu anaco de pastel". Finalmente! esa esixencia veu ata o meu nariz, cando comezou a cavar en torno a un bit para a solución.
Quedei sorprendido ao descubrir que realmente era máis fácil do que realmente penso que era, para amosar unha lista de títulos ou última mensaxe en calquera outra páxina fóra da sección WordPress-powered, usando só un pouco de PHP e da API do WordPress .

Aquí está o que facer: -
Por razóns de explicación, supoña que o seu sitio é http://www.inchembur.com/ e ten a sección de noticias desta web en http://news.inchembur.com/ (que está executando WordPress). Agora, a esixencia é para mostrar o último post de http://news.inchembur.com/ na páxina principal do sitio principal, é dicir, http://www.inchembur.com/index.php

Paso 1: No seu index.php engadir o seguinte anaco de código, incluír o WordPress arquivo API. Podes engadir esta a parte superior da páxina que quere 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'); / / Engadir WordPress API
; // Get Latest Post query_posts ('showposts = 1'), / / Pega Última mensaxe publicada
?>

No anaco enriba de inclusión, estamos recibindo só a mensaxe máis recente single. se quere probar variacións máis Sinto-se libre para cavar, query_posts() documentación .

Paso 2: Agora, na parte da páxina Index / Home onde queiras mostrar o máis recente de post WordPress http://news.inchembur.com , use o seguinte código. Escusado será dicir que, se sentir libre para ad súas divisións de estilo, ocos e clases como polas súas necesidades do proxecto.

Paso 3: Non hai Paso 3 ... É iso ... está preparado!

Como mostrar unha páxina específica de post / a diferenza da última mensaxe: -
Isto pode ser facilmente conseguir modificar os argumentos para query_posts() para incluír a identificación da páxina ou páxina Slug

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

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

Ás veces, para manter o pageweight baixo ... nós dividimos os nosos scripts en fragmentos ... Estes fragmentos javascript se fixo nada e no momento precisos (nun evento ou ao premer nunha ligazón ou botón, etc.)

Javascripts Cargando dinámica é sinxela e moi cara diante como a continuación ...

= “text/javascript” > <Tipo De script = "text / javascript">
función loadNewScript (fonte) {
var s = document.createElement ('script');
s.setAttribute ('type', 'text / javascript ");
s.setAttribute ('src', fonte);
document.body.appendChild (s);
}
</ Script>

e pode ter a ligazón seguinte chamada en calquera lugar do corpo, ou pode que este script "onLoad" do documento en 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 é unha persoa CSS, vostede sabe a dor na obtención dos seus esquemas de traballo cross-browser. IE8 é unha chave inglesa nos traballos para os desenvolvedores de nós. Anywaz! se bater enriba desta cuestión, como eu fixen onte, onde o seu CSS funcionando perfectamente no IE7 (e anterior) e Firefox ten de súpeto comezou a birra no IE8, proba este ... É ben parecía resolver os meus problemas para o momento ....

Usando declaración Meta, pode especificar o motor de renderización que quere usar o IE8. Entón, para forzar o IE8 para renderizar como IE7 ... Insira o Tag Meta seguinte na cabeza do seu documento: -

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

Por defecto Meta IE sería: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
o que sería o IE8 renderizar a páxina usando o modo estándar novo.

En caso necesario, esta sintaxe podería ser usado para acomodar a outros navegadores como a continuación:

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

Máis sobre doctypes:

Se aínda non familiarizado co tipo de animal chamado "Doctype" ... está aquí algunha lectura rápida
Cales son DOCTYPES? Cales son peculiaridades navegador e xeito estrito?
Definir o DOCTYPE no XSL

Para un máis profundo entendemento sobre DOCTYPES, tente visitar estes enlaces ...
A List Apart: Fixe o seu sitio co DOCTYPE dereito!
A List Apart: Beyond DOCTYPE: Web Standards, compatibilidade e IE8

Nota: Aínda que moitos de nós HTML / CSS persoas teñen negligenciado a importancia de decleration DOCTYPE nos nosos documentos, establecer o DOCTYPE correcto, adoita ser a resposta a problemas co navegador máis transversais.

A redefinición CSS é / son CSS para definir un número de estilos de elementos para unha liña de base específica que crea consistencia entre varios navegadores.

Todos nós fomos a través dos pesadelos de escribir CSS cross-browser do. Entón, cando comezamos a escribir o noso CSS, é unha práctica para redefini-la primeiro para eliminar / redefinir as inconsistencia cross navegador. Redefine CSS, son simples liñas de CSS que comeza o seu CSS con, dándolle unha base limpa para empezar a construír o seu enriba.

O redefine CSS normalmente tenden a usar esta aparencia

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;
}

Restablecer o tamaño da fonte navegador
Ademais, conta a reposición que foi aplicado ao tamaño do navegador de fonte na liña seguinte ...

html {font-size: 76%;}

O CSS enriba redefine o tamaño da fonte navegador a 10 píxeles, o que fai posible traballar con tamaños de fontes relativos (que é todo importante a partir dun acordo WAI prespective)
Por exemplo, na seguinte definición, tamaño da fonte nun período defínese como 10 píxeles e que na do n ° defínese por 14 píxeles ...

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