Uttrykke IT

En annen old school minne supplerende ...

Hvorfor trenger vi å aktivere windos.status?
Javascripts kunne for å være et mareritt når du har noe å feilsøke. Firefox har noen praktiske addons, som Firebug dvs gjør våre liv enkelt og må også stemme på de mest populære debug teknikk i Javascript gå til "VARSLE ()". Anywaz! Det er få tilfeller når du legger ALERT ikke feilsøke mis-oppfører Javascript er bare ikke en god idé. For eksempel! du har dragble element hvis stilling må varsles .... NEI NEI! Ikke gjør det! ... Du vil bare få uendelige varsler eller du wont kunne faktisk drap din dragable. Vel! Det er flere gode situasjoner, der du kan skrive ut debug tekster til statuslinjen, mye mer usful ... Tro meg! Dens Experience!

IE som standard venstre du skriver til leseren STATUS Bar med syntaksen "window.status = 'noe å feilsøke", men FireFox ikke. Så for å aktivere Windows status endres, kan du gjøre ett av følgende.

Åpne about: config i nettleser (type "about: config" dette inn i adressefeltet) og søker etter
Dom. disable_window_status_change. Endre det til falsk ... bare klikk på oppføringen for å veksle sin tilstand.

Eller alternativt

"Verktøy → Alternativer → Innhold → Aktiver JavaScript / Advanced → Endre statuslinjen tekst"

Og også oppmerksom på at ... å skrive til statuslinjen i Javascript din, er IE bare ok hvis du bruker et kort syntaks dvs. status = 'litt debug tekst', men i FireFox, må du bruke i full syntaks dvs. window.status = ' noe å feilsøke '

Verken jeg er veldig nytt for User Interface (UI) utvikling nor jeg er en veteran og som jeg alltid si det, jeg passer inn i profilen til UI utvikler mer enn en designer, uten anger. Oh well! Hva skulle jeg skrive om? ... For en stund (må være i år ikke noe mindre) nå, nå og da når jeg får inn litt UI Design (når den profesjonelle designeren har gått på ferie), jeg har alltid skrånende slutte å tenke om min design skal være riktig complient eller ikke (oppriktig, ikke at jeg kunne achive 100% overholdelse av standardene, hvis jeg ville også). Så jeg sier til meg selv, hva crap! ... Konstruksjonen skal være enkel, fin og fremst synes brukbar, det bør ikke gjøre besøkende løpe vekk ... eller sprett (for å være teknisk). Hva skulle en fin tableless CSS layout være til den besøkende, som er uvitende om alt det smarte hypertekst og Cascading Style Sheet under huden på nettsiden din ... Zilch!
Det skal se fint og være lett å bruke ... så kommer alle standarder ting.

Jeg stumbbled risikere å møte dette blogginnlegget av Jason Fried av 37 Signals (For de som ikke er klar 37-signaler er de onces som har skapt noen fantastiske web apps som Basecamp, Campfire etc) som skrev noe lignende i 2004, og tro meg, nesten 5 år og ikke mye forandret siden den ... jeg var glad for å lese hans innlegg, som jeg helt enig med hva han har å si, og også det faktum, er hun ikke sikker på hva forteller om sitt bare hans magefølelse og så er min

Jason Fried: "Det er altfor mye snakk om CSS og XHTML og Standarder og tilgjengelighet, og ikke nok snakke om mennesker. CSS og standarder RoHS kode er bare verktøy - må du vite hva du skal bygge med disse verktøyene. Flott, jeg er glad din UI bruker ikke tabeller. Hva så? Hvem bryr seg om det fremdeles ikke la folk nå sine mål. Web standarder er bra, men folks egne standarder inkluderer å få ting gjort (og det er fortsatt for vanskelig å gjøre på Internett).

UI designere gjør det samme gamle fundamental "glemme mennesket på den andre siden" feil - bortsett fra denne gangen koden sin ser bedre ut. Mennesker - ikke kode validatorer - brukervennlige grensesnitt ".

Checkout Jason Fried fulle artikkelen

DISCALIMER: Dette betyr ikke at vi ikke skal bry seg om standarder i det hele tatt. Standarder er godt å ha, og holde seg til dem så mye som mulig. Vi bare må forstå at god UI utforming betyr ikke alltid 100% Standards Complience eller omvendt ....

Fra min liste over mine erfaringer, følger jeg noen UI design og utvikling gylne regler ... Heres Topp 10 ... ikke at du må følge dem også ...

1. Ta vare på dine brukere. Brukerne kan gjøre eller ødelegge ditt nettsted. Donot gjøre brukeren se ut som en total idoit, helt ute av stand til å bruke ditt nettsted. Det er BAD!

2. Hold enkelhet og brukervennlighet Bruk dine primære guidlines. For mange ting på skjermen, jo høyere er sannsynligheten for at en bruker vil bli forvirret eller distrahert fra sin opprinnelige oppgave.

3. Være i GRENSER ... donot hengi for mye inn brukervennlighet, tilgjengelighet og standarder. Bruk standarder effektivt og gjøre dem forstått til teamet. Dette vil sikre riktig konsistens i produktet

4. Prototype kravet. Siden, i disse dager de brukervennlige grensesnitt er rike, Prototyping alltid er bedre enn bare å lage enkle trådmodeller og sistnevnte er blottet for anstendige interaksjoner, ville det ikke gir kunden et klart bilde av det endelige produktet som utvikles. Alltid er det lettere å konvertere prototypene til endelige leveranser. Også! med prototyping noen interaksjon problemer kunne strykes ut tidligere i utviklingen syklus.

5. Konsistens i design og samhandling er veldig viktig. Donot forvirre brukeren med uforutsigbare interaksjoner og duppeditter.

6. Forstå din "Design Mission Statement". Aways fokusere på den primære handlingen på siden beign utformet. Også lage en liste over dine seconday handlinger på siden, og prioritere dem.

7. Gi riktig tilbakemelding til brukere av området. Med de fleste nettstedene designet rundt AJAX, gir visuelle signaler til brukeren om endringer på siden. Brukeren må gis en erkjennelse av gjennomføringen av en oppgave han utfører. Donot gjøre brukeren vente og gjette, for eksempel. gi fremdrift indikatorer for fil uplaods.

8. Bruk kontrollene riktig. For eksempel bruk Velg rullegardinlisten for små lister kun donot la brukeren velge én av 200 byer ved hjelp av utvalgte boksene. Forstå forskjellen mellom en knapp og en link. En kobling og knapp har ulike formål, donot bruke én for den andre. Gi retten kontrollen slik at samspill med en side enklere. Unngå å bruke menyer, som er mer som to nivåer dyp. Ikke gjenoppfinne hjulet. Bruk standard kontroller, tilpasse dem bare hvis den er veldig nødvendig. Definer eventuelle egendefinerte kontroller som er nødvendig for nettstedet ditt første hånd, slik at de kunne bli opprettet og testet uavhengig, klar til bruk bølger seg nettstedet.

9. Donot iterere for mye på design. Husk! Hele Produktet består mer at design alene. Bygg riktige tidslinjer inn prosjektplan for design iterasjoner og hold deg til det. Iterasjon hjelper oss å finne ut hva som fungerer og hva som ikke gjør det, plukke ut de problemområder. Som en god grensesnitt tar tid, gi tid for gjentakelser i begynnelsen av utviklingen syklus, slik at utforming iterasjoner doesnot direkte likestille til omarbeiding. For mye omarbeiding kunne jeopradize tidsfrister.

10. Len deg tilbake og tenke som en bruker av og til.

Her er et annet lite peice av Javascript lureri at jeg måtte grave rundt fordi situasjonen commaned det. I en av mine nettsider, hadde jeg denne situasjonen hvor jeg måtte implementere "windows.onload" to ganger. Det første som ville kom til en uerfaren sjel som min (jeg må ærlig si at siden jeg har brukt javascript Rammeverk og biblioteker, forgotton jeg har å gjøre enkle ting på min egen ... trist men sant), er følgende metode ...

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

Beklager å si, men wont dette fungere ... ikke ønsker å drøfte gjennomføringen vitenskapen Javascript mye ... men ifølge min siste erfaring, bare den siste funksjonen (onloadfn3) vil syk faktisk bli henrettet.

I normale situasjoner, i motsetning til min (som jeg skal snakke om litt senere) ... du kan gjøre ett av følgende for å utføre utover flere onload funksjoner ....

Eller noe som dette

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

For min nåværende situasjon, kan jeg ikke bruke noen av de ovennevnte ...
Hvorfor gjorde jeg må ringe windows.onload to ganger, snarere at du ringer to funksjoner i ett enkelt onload funksjon? Her er rask titt på mitt problem uttalelse ...

"Mitt område sider er strukturert som WordPress tema .... dvs. det er en vanlig header.php og Footer.php som blir inkludert i alle webområdesidene. Det er en onload funksjon implementaion i Footer.php å gjøre noen vanlige onload funksjoner. Og det er få sider som må noe av sin egen OnLoad, bortsett fra de som gjøres av felles onload-funksjonen. Hvis jeg tildele tilbakering funksjon direkte til window.onload behandlingsprogram, vil den overstyre tidligere tildelte tilbakeanrop i Footer.php "

.... Er mitt problem forstått ?

Vel! det er få løsninger som jeg fant. De er svært like og i hovedsak implementions av en løsning gitt ved Simon Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Løsning:

Bare legg denne javascript-koden på siden ...

 funksjon addLoadEvent (funk) {
     Var oldonload = window.onload;
     if (typeof window.onload! = 'funksjon') {
        window.onload = funk
     } Else {
        window.onload = funksjon () {
            if (oldonload) {
                   oldonload ()
           }
           funk ()
        }
    }
 }

Og kaller det i stedet for den vanlige "windows.onload"

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (funksjon () {
 / * Mer kode kjøres på side belastning *
 }); 

Fordelene ved denne kodebit ...
1. Primært, lar det du har flere windows.onload hendelser, heter fra separate deler av koden din, uten overridding den tidligere definisjonen
2. Det er virkelig påtrengende. Det kan plasseres i en fil med dine andre skript eller i en separat fil.
3. Det fungerer selv om window.onload allerede er satt.

Jeg tenkte at dette vil være en doodle å finne i google, så mange du oss UI og manusforfattere ville trenge å gjøre dette på en dag til dag basis, er som inkluderer en bit av peice av PHP-kodebiten (. Php) i en Smarty mal (. TPL). Jeg innså at enklere / populær med søket ditt, enda vanskeligere å finne den eksakte svaret ... en million søkeresultater men de fleste av dem referert til "fil" inkluderer i Smarty ... som har følgende syntaks

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

Dette faktisk inlcuded filen fint, men som tekst, Hva jeg ville var et resultat av inkluderte filen. (Merk deg ovenfor brukes inkludere malen inne i en mal fil). Endelig med litt persiverance .... Jeg snublet over en slighty modifisert syntaks, som var svaret på kravet mitt ... så her er det ... hvis du havn't funnet en allerede

{Include_php fil = "inkluderer / header.php"}

En annen rask Tut. Her er noe enkelt og fint ved hjelp av kraften CSS ... men var vanskelig concieve (og det sikkert ikke var meg) til å begynne med. Legge Dropshadow, kan være en peice kake for mange av oss, ved hjelp av noen bilderedigeringsprogram verktøy som Photoshop ANF Fyrverkeri etc.
Grunnen, valgte jeg for slagskygge ved bruk av CSS er at vanligvis mens du oppretter en side design / html av en søknad, krav holde gjentar. Hva jeg mener er, i en eksisterende nettside med mange bilder, som de viser freinds liste eller en bildegalleri, vil det være vanskelig å reprosessere hele belastningen av bilder som hadde blitt alt losset å legge til eller fjerne skyggene, for at saken.
Så hvis du har gjort litt fremover tenkning, mens skape HTMLS å legge disse ekstra divisjoner eller vanligvis situasjonen er at du har en Loop Logic genererer disse ikonene / miniatyrer i XSL, PHP. JAVA eller andre programmeringsspråk / skriptspråk, kan du legge det når som helst, da er bare spørsmål om showet og skjule disse skygger ved hjelp av CSS display eiendommen, i henhold til de klientene stadig skiftende krav ... jeg havn't gjort slike fremtidsrettede før dette ... men ahev gang nå!

I eksempelet nedenfor er det opprinnelige bildet skygge gratis og dropshadows brukes som kreves! Også har jeg gått litt ekstra, ved hjelp av triksene av mine tidligere Tut (Well! disse antagelig er kortest rekke veiledninger, så det er bare rettferdiggjøres å kalle dem "Tut" 's) om hjelp CSS Clip Eiendom for briljere bare

Original bilde

CSS DropShadow Resultater

Se demo | Last ned sourcefiles

Hvorfor ønsker jeg å forstå dette?? Humm ...!!

De fleste av CSS forfattere vil være enige om at CSS Clip eiendom er trolig en av de un-brukte CSS egenskaper. Det var så sant for meg også, og var mest glad for å overse det, før jeg begynte å endre MooTools TO Knob (Pin) Slider Komponent (med Range Indicator) .

Det var et godt forslag fra en av komponenten brukerne til å endre Slider Component hjelp klippede backgroud bilder (mot en variabel bredde divisjon) for å indikere glideren serien. Dermed kom min tid til å gå inn i moroa, men FN-chartret (for meg selvsagt) farvann av CSS Clip eiendommen.

Vel! hvor vanskelig det kan være? Ikke mye i det hele tatt ... ja og nei. Syntaksen for å bruke CSS Clip eiendommen er ganske oppreist, men meningen / usuage er litt croocked. Med et minne som min, hver gang jeg sitter å omarbeide på min Slider Script ... har jeg tokeep henvise tilbake til bruken av dette klippet eiendom, for å minne meg selv den logikken som jeg har skapt i manuset mitt .... Derfor! tenkte å pennen ned, med et håp om å huske det i fremtiden (og også til fordel for dem som synes boggled av CSS Clip Eiendom)

Hva gjør CSS Clip?

Clip er en del av den visuelle effekter modulen av CSS 2.1. Enkelt sagt, er dens jobb å plassere et synlig vindu på toppen av et objekt som blir klippet, derav klipping bilder og lage miniatyrbilder uten å måtte opprette flere filer (jeg har allerede lagt denne funksjonen til bedre bruk i Slider Component )

Bruke CSS Clip eiendommen, kan du opprette en klipping med rect form. Som mange andre CSS-egenskaper (som margin, padding etc), ved hjelp rect krever fire koordinater Topp, Høyre, Bunn, Venstre (FEIL). Den croocked natur denne eiendommen reflekterer når du tar en nærmere titt på hvordan klippet beregner klipping regionen, ved hjelp av disse fire koordinater (sender hjernen til en kaste for en stund). Nå å forvirre deg bunnen starter fra toppen, og retten starter fra venstre. . Du ser hva jeg sa? .... Derfor dette innlegget ...

Denne lille forvirring kan lett forsvinne, med denne visuelle forklaring av CSS Clip / rect eiendom som under!!

CSS Clip Krav

Oppgaven vi har begynt å klippe følgende miniatyrbilde til et rettvinklet ser bilde (og også en vidvinkel bilde)

Original Thumbnal / Bilde	Clip Krav til sqaure Thumbmail

CSS Clip Resultater

Se demo | Last ned sourcefiles

Dette spørsmålet streifet meg noen ganger før, da jeg jobbet på steder tidligere også, som brukes til WordPress for å vise blogger eller ny type innhold i noen del av området / portal.Being en nybegynner i PHP og rundt WordPress, holdt jeg procastinating det, tenker "dette er ikke mitt peice av kaken". Endelig! Dette kravet kom upto nesen min, da begynte Diggin rundt litt for løsning.
Jeg ble overrasket over å finne at det egentlig var lettere enn jeg trodde faktisk det var, for å vise en liste med overskrifter eller siste innlegg på en annen side utenfor WordPress-drevne delen, bare ved hjelp av en liten bit av PHP og WordPress API .

Her er hva du skal gjøre: -
Av hensyn til forklaring, antar at området er http://www.inchembur.com/ og du har nyheter seksjon for dette området på http://news.inchembur.com/ (som kjører WordPress). Nå kravet er å vise siste innlegg fra http://news.inchembur.com/ på hjemmesiden til det viktigste området, dvs. http://www.inchembur.com/index.php

Trinn 1: I index.php din legger du til følgende peice av kode, Inkluder WordPress API filen. Du kan legge denne til toppen av siden du vil at innlegget skal vises på.

<? Php
'WP_USE_THEMES' , false ) ; // Disbable use of WordPress Theme define ('WP_USE_THEMES', false); / / Disbable bruk av WordPress Theme
krever ('/ var / news.inchembur.com / wp-blog-header.php'); / / Ta WordPress API
; // Get Latest Post query_posts ('showposts = 1'); / / Få siste innlegg
>

I ovenstående peice av include, vi får bare den ene nyeste innlegget. Hvis du ønsker å prøve flere varianter gjerne grave seg inn, query_posts() dokumentasjon .

Trinn 2: Nå, i den delen av Index / Home side der du vil vise den nyeste WordPress innlegg fra http://news.inchembur.com , bruker du følgende kode. Unødvendig å si, gjerne annonse dine styling divisjoner, spenn og klasser som per dine design behov.

Trinn 3: Det er ingen Trinn 3 ... Thats det ... du er ferdig!

Hvordan vise en spesifikk post / side i motsetning til siste innlegg: -
Dette kan lett oppnås ved å endre argumentene til query_posts() for å inkludere siden ID eller siden slug

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

eller Du kan kontrollere antall innlegg:
) ; query_posts (showposts = 3);

Noen ganger for å holde pageweight ned ... vi har delt våre scripts i fragmenter ... Disse javascript fragmenter kan lastes ved behov (på en hendelse eller klikk på en lenke eller knapp osv.).

Laster Javascripts er dynamisk enkel og ganske rett frem som under ...

= “text/javascript” > <Script type = "text / javascript">
funksjon loadNewScript (kilde) {
Var s = document.createElement ('script');
s.setAttribute ('type', 'text / javascript');
s.setAttribute ('src', kilde);
document.body.appendChild (s);
}
</ Script>

og du kan ha følgende samtale koblingen hvor som helst i kroppen, eller du kan få dette skriptet "onLoad" av selve dokumentet ...

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

eller

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

Hvis du er css person, ville du kjenner smerte i å få layoutene arbeider cross-browser. IE8 er enda en skiftenøkkel i verk for oss utviklere. Anywaz! hvis du treffer på dette problemet, som jeg gjorde i går, der perfekt å jobbe CSS i IE7 (og tidligere) og Firefox har plutselig begynt å kaste tantrums i IE8, prøv dette ... det pent syntes å fikse problemene mine for øyeblikket ....

Bruk Meta-erklæringen, kan vi spesifisere rendering motoren vi ønsker IE8 å bruke. Så for å tvinge IE8 til å gjengi som IE7 ... Sett inn følgende Metakode i hodet av dokumentet: -

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

Som standard IE Meta vil være: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
som ville gjøre IE8 gjengi siden ved hjelp av nye standarder modus.

Om nødvendig, kan denne syntaksen brukes til å kompensere for andre nettlesere som følger:

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

MER Om Doctyper:

HVIS du er ennå ukjent med den slags dyr kalt "Doctype" ... her er noen raske lese
Hva er Doctyper? Hva omfatter surfing quirks og STRENGT modus?
Stille DOCTYPE i XSL

For en mer inngående forståelse om Doctyper, prøve å besøke disse linkene ...
A List Apart: Fix Your Site Med riktig DOCTYPE!
A List Apart: Beyond DOCTYPE: webstandarder, Forward kompatibilitet, og IE8

Merk: Selv om mange av oss HTML / CSS folk har vært å neglisjere betydningen av DOCTYPE decleration i våre dokumenter, Stille rett DOCTYPE, er vanligvis svaret til de fleste kryss problemer med nettleseren.

En CSS Reset er / er CSS til å sette en rekke element stiler til en bestemt baseline som skaper konsistens på tvers av ulike nettlesere.

Vi har alle vært gjennom mareritt å skrive cross-browser CSS-tallet. Så når vi begynner å skrive vår CSS, er det en praksis for å tilbakestille den første til å fjerne / tilbakestille noen kryss nettleser inkonsekvenser. CSS Tilbakestiller, er enkle få linjer med CSS som du begynner din CSS med, og gir deg en ren base for å begynne å bygge din på.

CSS tilbakestilles at jeg vanligvis pleier å bruke ser slik ut

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

Tilbakestill nettleseren skriftstørrelse
Legg også merke til reset som har blitt brukt til nettleseren skriftstørrelsen i følgende linje ...

html {font-size: 76%;}

Ovennevnte CSS nullstiller leseren skriftstørrelsen til 10 piksler, og dette gjør det mulig å arbeide med relative fontstørrelser (som er alle viktige fra en WAI samsvar prespective)
For eksempel i følgende definisjon, er font-size i en span satt til 10 piksler og at det i paragarph er satt til 14 piksler ...

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