Esprimere IT

Un'altra vecchia scuola di memoria supplementare ...

Perché per consentire windos.status?
Javascripts potrebbe essere un incubo quando si ha qualcosa di eseguire il debug. Firefox ha alcuni addons qualche portata di mano, come i thats Firebug ci rende la vita facile e anche, il voto per la tecnica di debug più popolare in Javascript deve andare a "alert ()". Anywaz! Ci sono pochi casi in cui l'aggiunta di ALERT non eseguire il debug del mis-comportamento Javascript è solo non è una buona idea. Per esempio! avete voce dragble la cui posizione deve essere avvisato .... NO NO! Non farlo! ... Sarà solo ottenere avvisi infiniti o non sarà in grado in realtà il drap dragable. Bene! Ci sono situazioni più buoni, in cui è possibile scrivendo i testi di debug alla barra di stato, molto più usful ... Credetemi! La sua esperienza!

IE di default a sinistra si scrive alla barra di stato del browser utilizzando la sintassi "'qualcosa di eseguire il debug' window.status =", ma Firefox non. Quindi, per permettere il cambiamento di stato di Windows, è possibile effettuare una delle seguenti operazioni.

Aprire about: config nel browser (digitare "about: config" questo nella barra degli indirizzi) e cercare
dom. disable_window_status_change. Cambiare a false ... basta cliccare sulla voce per cambiare il suo stato.

Oppure, in alternativa

"Strumenti → Opzioni → Contenuti → Attiva JavaScript / Advanced → testo di stato Change bar"

E anche notare che ... a scrivere sulla barra di stato in Javascript, IE è ok se si utilizza un breve stato di sintassi ie = 'un testo di debug', ma in FireFox, è necessario utilizzare per intero la sintassi cioè window.status = ' qualcosa di eseguire il debug '

Né io sono molto nuovo User Interface (UI) di sviluppo, né io sono un veterano e, come ho sempre messo, mi inseriscono nel profilo di utente sviluppatori più di quello di un designer, senza rimpianti. Oh Well! Cosa stavo scrivendo? Per un po '... (deve essere in anni non meno) ora, ogni tanto quando faccio entrare un po' di Design UI (quando il designer professionisti è andato in vacanza), mi fermo sempre smusso pensare se il mio progetto deve essere adeguatamente complient o no (sinceramente, non che io potessi raggiunti attreaverso al 100% la conformità agli standard, se volevo troppo). Poi mi dico, che merda! ... Il design deve essere semplice, piacevole e soprattutto sembra utilizzabile, non deve far scappare i visitatori ... o rimbalzo (da tecnico). Cosa servirebbe una bella tableless layout di CSS sia per il visitatore, che è ignaro di tutti l'intelligente ipertesto e Cascading Style Sheet sotto la pelle della tua pagina web ... Zilch!
Dovrebbe apparire bello e facile da usare ... poi viene la tutta roba standard.

I stumbbled accross questo blog da Jason Fried di 37 Signals (Per coloro che non sono a conoscenza sono i segnali di 37 onces che hanno creato alcune applicazioni web come Basecamp impressionanti, Campfire etc) che hanno scritto qualcosa di simile nel 2004, e credetemi, quasi 5 anni e non è cambiato molto dal momento che ... ero felice di leggere il suo post, come ho assolutamente d'accordo con quello che ha da dire ed anche il fatto, lei non è sicuro su quello che sta raccontando la sua solo il suo istinto ed è così la mia

Jason Fried: "C'è modo troppo parlare di CSS e XHTML e Standard e accessibilità, e non basta parlare di persone. CSS e del codice Standard di conformità sono solo strumenti - bisogna sapere cosa costruire con questi strumenti. Grande, mi fa piacere l'interfaccia utente non utilizza tabelle. E allora? Chi se ne frega se ancora non permettere alle persone di raggiungere i loro obiettivi. Gli standard Web sono grandi, ma gli standard propri della gente sono cose fatte (e che è ancora troppo difficile da fare online).

Designer dell'interfaccia utente stanno facendo la stessa vecchia fondamentale "dimenticare l'essere umano sull'altro lato" errori - ma questa volta il loro codice ha un aspetto migliore. Gli esseri umani - non validatori di codice - le interfacce di uso ".

Articolo completo Checkout Jason Fried

DISCALIMER: Questo non significa che non dobbiamo preoccupare gli standard a tutti. Le norme sono bello avere e bastone a loro il più possibile. Dobbiamo solo capire che il buon design dell'interfaccia utente non sempre significa il 100% Complience Standards o viceversa ....

Dalla mia lista dei miei insegnamenti tratti, seguo un disegno di sviluppo e alcune UI regole d'oro ... Heres la TOP 10 ... non è che avete seguito anche loro ...

1. Prenditi cura dei tuoi utenti. Gli utenti possono creare o distruggere il vostro sito. DONOT far sembrare all'utente come un idoit totale, del tutto incapace di utilizzare il sito web. Che è cattivo!

2. Tenere Semplicità e facilità d'uso le vostre guidlines primarie. Troppe cose sullo schermo, maggiore è la probabilità che un utente confondersi o distratto dalla loro compito originario.

3. Rispettare i limiti ... DONOT indulgere troppo in usabilità, accessibilità e degli standard. Utilizzare gli standard in modo efficace e farli capire alla squadra. Ciò garantirà giusta consistenza del prodotto

4. Prototipo del requisito. Dal momento che, in questi giorni le interfacce utilizzano sono ricchi, Prototyping è sempre meglio che fare wireframe semplici e il secondo è privo di interazioni decenti, non riuscirebbe a fornire al cliente un quadro chiaro del prodotto finale che si sta sviluppando. Sempre, E 'più facile per convertire i prototipi in deliverable finali. Anche! con la prototipazione eventuali problemi di interazione potrebbe essere risolti prima del ciclo di sviluppo.

5. Coerenza nel vostro design e l'interazione è molto importante. Donot confondere l'utente con interazioni imprevedibili e aggeggi.

6. Capire il tuo "Mission Statement Design". Aways concentrarsi sull'azione principale del beign pagina progettata. Inoltre, fare una lista delle vostre azioni secondaria, sulla pagina, secondo le priorità.

7. Fornire un adeguato feedback agli utenti del sito. Con la maggior parte dei siti web progettati intorno AJAX, forniscono indicazioni visive per l'utente sulle modifiche alla pagina. L'utente ha a dato un riconoscimento del completamento di tutta l'operazione si esibisce. Donot rendere l'utente aspettare e immaginare, per esempio. fornire indicatori di avanzamento per uplaods file.

8. Utilizzare i controlli in modo appropriato. Per l'uso ad esempio, selezionare dall'elenco a discesa per le piccole liste, solo, donot permettere all'utente di scegliere una delle 200 città utilizzando le caselle di selezione. Comprendere la differenza tra un pulsante e un link. Un link e pulsante hanno scopi diversi, donot utilizzare uno per l'altro. Fornire il controllo diritto di interagire con una pagina più facile. Evitare l'uso di menu, che sono più di due livelli di profondità. Non reinventare la ruota. Utilizzare i controlli standard, personalizzarli solo se veramente necessario. Definire i controlli personalizzati necessari per la tua mano primo sito, in modo che possano essere creati e testati in modo indipendente, pronto per l'uso del sito attraversato.

9. Donot ITERATE troppo sul design. Ricordate! L'intero prodotto è costituito più che il design da solo. Costruire scadenze appropriate nel vostro programma di progetto per iterazioni di progettazione e bastone ad esso. Iterazione ci aiuta a scoprire cosa funziona e cosa non, individuare i focolai di crisi. Come una buona interfaccia richiede tempo, fornire in tempo per iterazioni l'inizio del ciclo di sviluppo, in modo che iterazioni di progettazione doesnot direttamente equivale a REWORK. Troppo rielaborazione molto potrebbe jeopradize scadenze.

10. Sedetevi e pensare come un utente a volte.

Heres un altro po 'di trucchi peice Javascript che ho dovuto scavare in giro perché la situazione lo commaned. In uno dei miei siti web, ho avuto questa situazione in cui ho dovuto attuare "windows.onload" due volte. La prima cosa che si è venuto a una mente inesperta come la mia (devo dire onestamente che, dal momento che ho utilizzato framework JavaScript e biblioteche, ho forgotton a fare le cose semplici per conto mio ... triste ma vero), è il seguente metodo ...

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

Mi spiace dirlo, ma, questo non funzionerà ... Non voglio discutere la scienza esecuzione di Javascript tanto ... ma secondo la mia esperienza recente, solo l'ultima funzione (onloadfn3) cattiva volontà effettivamente eseguito.

In situazioni normali, a differenza mia (che mi parlare di un po 'più tardi) ... si può fare una delle seguenti operazioni per eseguire funzioni onload mutliple ....

O qualcosa del genere

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

Per la mia situazione attuale, non posso utilizzare di quanto sopra ...
Perché ho bisogno di chiamare windows.onload due volte, piuttosto che chiamare due funzioni all'interno di una funzione onload single? Ecco rapido sguardo a mia dichiarazione problema ...

"Le mie pagine del sito sono strutturati come il tema WORDPRESS .... vale a dire che è un header.php footer.php comuni e che viene incluso in tutte le pagine del sito. C'è un implementaion funzione onload nel footer.php per fare alcune funzioni onload comuni. E ci sono poche pagine che hanno bisogno di qualcosa del loro OnLoad propria, ad eccezione di quelli con la funzione onload comune. Se mi assegna la funzione di callback direttamente al gestore window.onload, che si impone rispetto alla callback precedentemente assegnati nelle footer.php "

.... Il mio problema è capire ?

Bene! ci sono poche soluzioni che ho trovato. Sono tutte molto simili e implementions principalmente di una soluzione data da Simon Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Soluzione:

Basta aggiungere il codice javascript al sito ...

 addLoadEvent funzione (func) {
     var = oldonload window.onload;
     if (typeof window.onload! = 'funzione') {
        window.onload = funzione
     Else {}
        window.onload = function () {
            se (oldonload) {
                   oldonload ()
           }
           func ()
        }
    }
 }

E lo chiamano invece del consueto "windows.onload"

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (function () {
 / * Più codice per essere eseguito su * caricamento della pagina
 }); 

I vantaggi di questo frammento di codice ...
1. In primo luogo, ti permette di avere più eventi windows.onload, chiamato da parti separate del codice, senza overridding la definizione precedente
2. E 'davvero discreto. Può essere collocata in un file con i vostri altri script o in un file separato.
3. Funziona anche se window.onload è già stata impostata.

Ho pensato che questo sarà uno uno scarabocchio a trovare in google, come molti ci scrittori interfaccia utente e lo script avrebbe bisogno di fare questo su una base quotidiana, che è include un po 'di pezzo del frammento di codice PHP (. Php) in un Smarty Template (. TPL). Mi resi conto che più facile / popolare tua domanda, ancora più difficile trovare l'esatta risposta ... un milione di risultati di ricerca ma la maggior parte di essi si riferiscono al "file" include in Smarty ... che ha la seguente sintassi

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

Questo in realtà inlcuded bene, ma il file come testo, Quello che volevo era il risultato di file incluso. (Tener presente quanto sopra viene utilizzato includono template all'interno di un file template). Infine, con un po '.... persiverance Mi sono imbattuto in una sintassi leggermente modificata, che è stata la risposta alla mia richiesta ... ecco che è ... se si havn't trovato uno già

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

Un altro tut veloce. Ecco qualcosa di semplice e piacevole utilizzando il potere del CSS ... ma era concieve difficile (e sicuramente non ero io) per cominciare. Aggiunta Dropshadow, potrebbe essere un pezzo del dolce per molti di noi, utilizzando alcuni strumenti di editing di immagini come Photoshop ANF Fireworks, ecc
Il motivo per cui, ho optato per ombra con i CSS è che, di solito durante la creazione di una struttura di pagina / html di una domanda, i requisiti di mantenere l'iterazione. Quello che voglio dire è, in un sito web esistente con molte immagini, come quelle che mostrano lista freinds o una galleria di immagini, sarà difficile per rielaborare l'intero carico di immagini che erano già stati scaricati per aggiungere o rimuovere le ombre, per quel materia.
Quindi, se avete fatto un po 'il pensiero in avanti, mentre i file HTML per la creazione di aggiungere queste divisioni extra o in genere la situazione è che hai un loop Logic generare queste icone / miniature in XSL, PHP. JAVA o di qualsiasi altro di programmazione / scripting language, è possibile aggiungere in qualsiasi momento, è quindi solo questione di spettacolo e hai tenuto nascoste queste ombre utilizzando la proprietà CSS display, come per i clienti mutevoli esigenze ... I Havn't fatto questo genere di trasmettere il pensiero prima di questo ... ma ahev Inizia ora!

Nell'esempio riportato di seguito, l'immagine originale è l'ombra di libero e le dropshadows vengono applicate come richiesto! Inoltre, ho fatto un piccolo extra, utilizzando i trucchi della mia precedente Tut (Well! questi sono probabilmente più breve serie di Tutorials, quindi è giustificato solo chiamandoli "Tut" 's) su CSS utilizzando la proprietà clip per mostrare solo

Immagine originale

CSS DropShadow Risultati

Visualizza Demo | Scarica SourceFiles

Perché voglio capire questo?? Humm ...!!

La maggior parte degli scrittori CSS sarebbe d'accordo che la proprietà Clip CSS è probabilmente una delle più inutilizzato proprietà CSS. E 'stato così vero anche per me ed è stato più felice di trascurare, fino a quando ho iniziato a modificare il MooTools due pomelli (Pin) Component Slider (con indicatore Range) .

C'era un buon suggerimento da uno degli utenti componente per modificare il componente Slider utilizzando immagini ritagliate da sfondo (contro una divisione larghezza variabile) per indicare l'intervallo cursore. Così è venuto il mio tempo per entrare nel divertimento, ma un-a noleggio (per me ovviamente) le acque della proprietà Clip CSS.

Bene! quanto possa essere difficile? Non più di tanto ... SI e NO. La sintassi per utilizzare la proprietà Clip CSS è abbastanza eretta, ma il significato / usuage è un po 'croocked. Con una memoria come la mia, ogni volta che mi siedo a rielaborare il mio script Slider ... ho tokeep rinviando all'uso di questa proprietà CLIP, per ricordare a me stesso la logica che ho creato nel mio script .... QUINDI! pensato di penna giù, con una speranza per ricordare che il futuro (e anche per il beneficio di coloro che sembrano ho provato con la proprietà Clip CSS)

Cosa fa clip CSS fare?

Clip è parte del modulo di effetti visivi di CSS 2.1. In poche parole, il suo compito è quello di posizionare una finestra visibile sulla parte superiore di un oggetto che viene tagliato, quindi ritaglio immagini e la creazione di miniature senza dover creare ulteriori file (ho già messo questa funzionalità per un migliore utilizzo nel componente Slider )

Utilizzando la proprietà Clip CSS, è possibile creare un ritaglio utilizzando la forma rect. Come molte altre proprietà CSS (come margin, padding, ecc), utilizzando rect richiede quattro coordinate Top, Right, Bottom, Left (GUASTO). La natura di questa proprietà croocked riflette quando si dà un'occhiata più da vicino come fermaglio calcola l'area di visualizzazione, utilizzando queste quattro coordinate (manda il cervello in un lancio per un po '). Ora, per confondere il fondo inizia dalla parte superiore, e la destra inizia da sinistra. . Vedete quello che ho detto? .... Quindi questo post ...

Questa confusione poco può facilmente scomparire, con questa spiegazione visiva del Clip / rect proprietà CSS, come qui sotto!!

CSS clip Requisiti

Il compito che abbiamo iniziato è quella di ritagliare l'immagine seguente Miniatura in un immagine più squadrata cercando (e anche un grandangolo immagine)

Thumbnal Original / Image	Requisiti clip per Sqaure Thumbmail

CSS risultati di clip

Visualizza Demo | Scarica SourceFiles

Questa domanda mi venne in mente un paio di volte prima, quando stavo lavorando su siti anche prima, che ha utilizzato WordPress per mostrare blog o nuovo tipo di contenuto in qualche parte del sito / portal.Being un novizio in PHP e intorno WordPress, ho continuato a procastinating, pensando "questo non è il mio pezzo del dolce". Finalmente! questo requisito è venuto fino a naso, quando ha iniziato diggin giro un po 'per la soluzione.
Sono stato sorpreso di scoprire che era davvero più facile di quanto pensavo che si fosse, per visualizzare un elenco di titoli o l'ultimo post su qualsiasi altra pagina al di fuori della sezione di WordPress-powered, usando solo un po 'di PHP e l'API di WordPress .

Ecco cosa fare: -
Per motivi di spiegazione, supponiamo che il sito è http://www.inchembur.com/ e vi è la sezione news di questo sito su http://news.inchembur.com/ (che è in esecuzione WordPress). Ora l'esigenza è quella di mostrare gli ultimi post di http://news.inchembur.com/ sulla home page del sito principale, vale a dire http://www.inchembur.com/index.php

Step1: Nel vostro index.php aggiungere il peice di codice seguente, includere il file di WordPress API. È possibile aggiungere questo alla parte superiore della pagina che si desidera che il post a comparire su.

<? Php
'WP_USE_THEMES' , false ) ; // Disbable use of WordPress Theme define ('WP_USE_THEMES', false); uso / / Disbable di WordPress Theme
require ('/ var / news.inchembur.com / wp-blog-header.php'); / / Include WordPress API
; // Get Latest Post query_posts ('showposts = 1'); / / Get Latest Post
?>

Nel peice sopra di include, stiamo ottenendo solo il singolo post più recente. se volete provare altre varianti non esitate a scavare, query_posts() documentazione .

Fase 2: Ora, nella parte dell'Indice / Home page in cui si desidera visualizzare gli ultimi messaggi WordPress da http://news.inchembur.com , utilizzare il seguente codice. Inutile dire, sentitevi liberi di annuncio vostre divisioni stile, campate e le classi come per le vostre esigenze di progettazione.

Fase 3: Non c'è Step 3 ... Ecco fatto ... si è fatto!

Come mostrare una pagina specifica per il posto / in contrasto con l'ultimo post: -
Questo può essere facilmente achived alterando gli argomenti query_posts() per includere l'ID di pagina o slug

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

o È possibile controllare il numero di messaggi:
) ; query_posts showposts (= 3);

A volte, per mantenere il pageweight giù ... abbiamo suddiviso i nostri script in frammenti ... Questi frammenti di javascript possono essere caricati come e quando richiesto (su un evento o di click su un link o pulsante, ecc.)

Caricamento dinamico Javascript è semplice e piuttosto semplice, come di seguito ...

= “text/javascript” > <Tipo di script = "text / javascript">
Funzione loadNewScript (source) {
var s = document.createElement ('script');
s.setAttribute ('type', 'text / javascript');
s.setAttribute ('src', di origine);
document.body.appendChild (s);
}
</ Script>

e si può avere il link seguente chiamata in qualsiasi parte del corpo, o si può avere questo "onLoad" script del documento stesso ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a > <A href = "javascript: loadNewScript ('myDynamicScript.js');"> Script carico dinamico </ a>

o

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

Se siete persone css, si dovrebbe conoscere il dolore ottenere i vostri layout di lavoro cross-browser. IE8 è ancora un altro bastone tra le ruote per gli sviluppatori noi. Anywaz! se si preme su questo problema, come ho fatto ieri, in cui il vostro perfettamente funzionante CSS in IE7 (e precedenti) e Firefox ha improvvisamente iniziato a tirare i capricci in IE8, provate questo ... E 'bene sembrava risolvere i miei problemi, per il momento ....

Utilizzando dichiarazione Meta, possiamo specificare il motore di rendering vorremmo utilizzare IE8. Quindi, per forza di rendere IE8 come IE7 ... Inserire il seguente meta tag nella testa del documento: -

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

Per impostazione predefinita Meta IE potrebbe essere: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
che renderebbe IE8 il rendering della pagina utilizzando la nuova modalità standard.

Se necessario, questa sintassi potrebbe essere utilizzato per accogliere per altri browser come di seguito:

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

PIU 'A proposito di DOCTYPE:

Se siete ancora familiarità con il tipo di animale chiamato "Doctype" ... ecco alcune lettura veloce
Cosa sono i DOCTYPE? Quali sono i difetti dei browser e Modalità rigorosa?
Impostazione del DOCTYPE in XSL

Per una più profonda conoscenza circa DOCTYPE, provare a visitare questi link ...
A List Apart: Fix Your Site Con il DOCTYPE destra!
A List Apart: Beyond DOCTYPE: Web Standards, le compatibilità in avanti e IE8

Nota: Anche se molti di noi HTML / CSS persone sono state trascurando l'importanza della decleration DOCTYPE nei nostri documenti, Impostazione del DOCTYPE destra, è di solito la risposta ai problemi del browser più trasversali.

Un reset CSS è / sono i CSS per impostare una serie di stili di elementi in una linea di base specifica che crea coerenza tra i vari browser.

Tutti siamo stati passante gli incubi di scrittura cross-browser CSS. Così, quando abbiamo iniziato a scrivere il nostro CSS, E 'una pratica per reimpostarla prima di rimuovere / ripristinare eventuali incoerenze cross browser. Ripristina CSS, sono semplici poche righe di CSS che iniziano con il CSS, fornendo una base pulita per iniziare a costruire il vostro momento.

Il reset CSS che normalmente tendono a utilizzare il seguente aspetto

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

ol, ul {
list-style: none;
}

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

Ripristina la dimensione del carattere del browser
Da notare anche il reset che è stato applicato alla dimensione del font del browser nella riga seguente ...

html {font-size: 76%;}

Quanto sopra CSS azzera la dimensione del carattere del browser a 10 pixel, e questo rende possibile lavorare con dimensioni relative per i font (che è ogni importante dal punto di conformità WAI prespective)
Per esempio, nella seguente definizione, font-size in un arco è impostata a 10 pixel e che nel paragarph è impostato a 14 pixel ...

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