Expressant TI

Una altra vella escola complementària de memòria ...

Per què permetre windos.status?
Javascripts podia ser un malson quan vostè té alguna cosa a depurar. Firefox té un addons útils pocs, com això és Firebug ens fa la vida fàcil i també, el vot a favor de la tècnica de depuració més popular en Javascript d'anar a "alert ()". Anywaz! Hi ha pocs casos en què l'addició de ALERTA es depura la mateixa comportament, Javascript és simplement no és una bona idea. Per exemple! vostè té el punt dragble la posició ha de ser alertat .... NO NO NO! Dont do it! ... Vostè acaba de rebre alertes infinites o vostè no serà capaç realment de la seva drap dragable. Bé! Hi ha situacions en les més bones, en què podria escriure els textos de depuració de la barra d'estat, molt més usful ... Creu-me! La seva experiència!

IE per defecte a l'esquerra que s'escriu a la barra d'estat del navegador utilitzant la sintaxi "" alguna cosa per depurar 'window.status = ", però Firefox no ho fa. Per tant per permetre el canvi d'estat de Windows, vostè pot fer qualsevol de les següents.

Obrir about: config al navegador (tipus "about: config" això a la barra d'adreces) i la recerca de
dg disable_window_status_change. Ves al fals ... simplement feu clic a l'entrada per canviar el seu estat.

O, alternativament,

"Eines → Opcions → Contingut → Activar JavaScript / Avançat → Canviar l'estat del text de la barra"

I també en compte que ... escriure a la barra d'estat en el Javascript, l'IE és només acceptable si s'utilitza una sintaxi d'estat a curt, és a dir = 'una mica de text de depuració ", però en Firefox, vostè ha d'utilitzar en la seva totalitat és a dir, la sintaxi window.status =' alguna cosa per depurar '

Ni jo sóc molt nou en la interfície d'usuari (UI) de desenvolupament, ni sóc un veterà i com jo sempre ho posava, em encaixen en el perfil de la interfície d'usuari desenvolupador més que el d'un dissenyador, sense remordiments. Oh Well! Què estava escrivint? Durant un temps ... (ha de ser en els anys no per això menys) Ara, de tant en tant, quan em poso en una mica de disseny d'interfície d'usuari (quan el dissenyador professional ha anat en un dia de festa), m'aturo sempre puc pensar si el meu disseny ha estar degudament complient o no (sincerament no, que jo podia achive 100% compliment de les normes, hom volia també). Llavors em dic, què merda! ... El disseny ha de ser senzill, agradable i sobretot sembla útil, no ha de fer que els visitants de fugir ... o rebot (com a tècnic). De què serviria un bonic disseny sense taules CSS és per al visitant, que és aliè a tot l'intel · ligent L'hipertext i el Full d'estil en cascada sota la pell de la seva pàgina web ... Zilch!
Ha de tenir un aspecte agradable i fàcil d'utilitzar ... després ve la matèria totes les normes.

Jo stumbbled creuant aquesta entrada del bloc de Jason Fried de 37 Signals (Per a aquells que no són conscients dels senyals de 37 són els onzes que han creat algunes aplicacions web com Basecamp impressionants, etc Campfire) que van escriure alguna cosa similar el 2004 i, creu-me, gairebé 5 anys i no ha canviat molt des que ... jo estava feliç de llegir el seu missatge, ja que estic totalment d'acord amb el que ha de dir i també el fet, ella no està segura sobre el que està dient sobre la seva seu només instint i per tant és meu

Jason Fried: "No hi ha manera de parlar massa de CSS i XHTML i Normes i d'accessibilitat i no és suficient parlar de la gent. CSS i el codi de Compliment de normes són només eines - vostè ha de saber què construir amb aquestes eines. Genial, m'alegro que la interfície d'usuari no utilitza taules. Llavors, què? A qui li importa si és que encara no permet que les persones a assolir els seus objectius. Els estàndards web són grans, però les normes pròpies de la gent són les coses es facin (i que encara és molt difícil de fer en línia).

Els dissenyadors de la interfície d'usuari està fent la mateixa vella fonamental "oblidant l'ésser humà en l'altre costat" errors - excepte que aquesta vegada el seu codi es veu millor. Els éssers humans-no validadors de codi - interfícies d'usuari ".

Article complet Comanda Jason Fried

DISCALIMER: Això no vol dir que no cal preocupar-se per les normes en absolut. Les normes són ben tenir i s'adhereixen a ells tant com sigui possible. Només hem d'entendre que el disseny d'interfície d'usuari bé no sempre significa que el 100% complience normes o viceversa ....

Des del meu llista dels meus lliçons apreses, que segueixen un disseny d'interfície d'usuari d'uns pocs i Desenvolupament Regles d'or ... Heres el TOP 10 ... no és que vostè ha de seguir també ...

1. Tingueu cura dels seus usuaris. Els usuaris poden fer o desfer al seu lloc. DONOT fer veure com un usuari idoit total, absolutament incapaç d'usar el seu lloc web. Això és dolent!

2. Mantingui la simplicitat i facilitat d'ús dels seus guidlines primàries. Massa coses a la pantalla, major serà la probabilitat que un usuari es confon, o distret de la seva tasca original.

3. Estar en els límits ... DONOT caure massa en Usabilitat, Accessibilitat i Estàndards. L'ús d'una manera eficaç i fer que entén que l'equip. Això assegurarà consistència adequada en el producte

4. Prototype el requisit. Atès que, en aquests dies les interfícies d'usuari són rics, Prototips sempre és millor que simplement fer wireframes senzills i el segon no té interaccions decents, que deixaria de proporcionar al client una imatge clara del producte final que s'està desenvolupant. Sempre és més fàcil per convertir els prototips en productes finals. També! amb la creació de prototips els problemes d'interacció poden ser esmenades abans del cicle de desenvolupament.

5. La consistència en el disseny i la interacció és molt important. Parli de confondre l'usuari amb les interaccions impredictibles i artefactes.

6. Comprendre la seva "Declaració de la Missió de disseny". Portar centrar en l'acció principal de la beign pàgina dissenyada. A més, faci una llista de les seves accions seconday a la pàgina, i donar prioritat a ells.

7. Proporcionar retroalimentació adequada als usuaris del lloc. Amb la majoria dels llocs web dissenyats al voltant de AJAX, proporcionen indicis visuals per a l'usuari sobre els canvis a la pàgina. L'usuari ha de donar un reconeixement de la realització de qualsevol tasca que realitza. Parli que l'usuari espera i suposo que, per exemple. establir indicadors de progrés per uplaods d'arxius.

8. Utilitzeu els controls de forma adequada. Per a ús per exemple, seleccioneu la llista desplegable per a llistes petites només, nose permetre a l'usuari triar una de les 200 ciutats amb quadres de selecció. Entendre la diferència entre un botó i un enllaç. Un enllaç i el botó tenen propòsits diferents, nose utilitzar un per l'altre. Proporcionar el control de la dreta per fer la interacció amb una pàgina més fàcil. No utilitzeu els menús, que són més que dos nivells de profunditat. No reinventar la roda. Utilitzeu els controls estàndard, personalitzar-només si és molt necessari. Definiu els controls personalitzats necessaris per a la mà el primer lloc, de manera que poguessin ser creat i provat de forma independent, a punt per l'ús del lloc creuant.

9. Donot iterate massa en el disseny. Recordeu! El producte sencer consisteix més que el disseny sol. Construir línies de temps apropiats en la programació del projecte per les iteracions de disseny i s'adhereixen a ella. Iteració ens ajuda a esbrinar el que funciona i el que no, triar els punts més conflictius. Com una bona interfície requereix temps, donar temps per a les iteracions en el començament del cicle de desenvolupament, de manera que les iteracions de disseny doesnot directa equival a reelaborar. Massa reelaborar molt podria jeopradize terminis.

10. Segui i pensar com un usuari vegades.

Aquí està un altre tros petit d'engany Javascript que havia de cavar al seu voltant perquè la situació ho commaned. En un dels meus llocs web, he tingut aquesta situació en què vaig haver de posar en pràctica "windows.onload" dues vegades. La primera cosa que va venir al cap una experiència com la meva (he de dir honestament que, des que he estat utilitzant frameworks de JavaScript i les biblioteques, he oblidat de fer les coses simples pel meu compte ... trist però cert), és el següent mètode ...

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

Em sap greu dir-ho, però, aquest treball costum ... no vull parlar sobre la ciència execució de Javascript molt ... però d'acord a la meva experiència recent, només l'última funció (onloadfn3) la mala voluntat s'executa realment.

En situacions normals, a diferència de la meva (que vaig a parlar una mica més tard) ... pots fer el següent per executar funcions mutliple onload ....

O alguna cosa com això

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

Per la meva situació actual, no pot utilitzar qualsevol dels anteriors ...
Per què he de trucar a windows.onload dues vegades, en lloc de trucar a dues funcions dins d'una funció onload sola? Aquí és ràpida ullada a la meva declaració del problema ...

"Els meus pàgines del lloc s'estructura com el tema de WordPress .... és a dir, hi ha un header.php i footer.php comuns que s'inclouen en totes les pàgines del lloc. Hi ha una funció de la Implementació onload en els footer.php per fer algunes funcions comunes onload. I hi ha poques pàgines que necessiten una mica de la seva pròpia onload, a més dels realitzats per la funció onload comú. Si assigno funció de callback directament al controlador window.onload, serà passar per sobre de les devolucions de trucada assignats prèviament en els footer.php "

.... S'entén el meu problema ?

Bé! hi ha poques solucions que es va trobar. Tots ells són molt similars i sobretot implementions d'una solució donada per Simon Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Solució:

Només cal afegir el codi javascript per al lloc ...

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

I en diuen en lloc de l'habitual "windows.onload"

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (function () {
 / * Més codi s'executi en càrrega de la pàgina *
 }); 

Els avantatges d'aquest fragment de codi ...
1. En primer lloc, que li permet disposar de múltiples esdeveniments windows.onload, anomenada a partir de peces separades del seu codi, sense anul · lant la definició anterior
2. És molt discret. Es pot col · locar en un arxiu amb les seqüències d'ordres d'altres o en un arxiu separat.
3. Funciona fins i tot si window.onload ja s'ha establert.

Vaig pensar que aquest serà un gargot de trobar a Google, com molts escriptors que ens interfície d'usuari i el guió hauria de fer això en el dia a dia, és a dir són una mica tros de fragment de codi PHP (. Php) en un Plantilla Smarty (. TPL). Em vaig adonar que més fàcil / popular a la seva consulta, encara més difícil trobar la resposta exacta ... un milió de resultats de la recerca, però la majoria d'ells reffered a "arxiu" inclou en Smarty ... que té la següent sintaxi

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

En realitat, això inlcuded l'arxiu bé, però com el text, el que volia era el resultat d'arxiu inclòs. (Tingueu en compte l'anterior s'utilitza la plantilla s'inclouen dins d'un arxiu de plantilla). Finalment, amb una mica persiverance .... Em vaig topar amb una sintaxi lleugerament modificada, la qual era la resposta a la meva sol · licitud ... així que aquí està ... si encara no es troba un ja

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

Un altre Joventut ràpida. Aquí hi ha alguna cosa senzilla i agradable utilitzar el poder del CSS ... però era concibian difícil (i segurament no era jo), per començar. Addició d'ombra, podria ser un tros de pastís per a molts de nosaltres, usant algunes eines d'edició d'imatges com Photoshop ANF focs artificials, etc
La raó per la qual, he optat per l'ús de CSS ombra és que, en general, mentre que la creació d'un disseny de pàgina / HTML d'una aplicació, els requisits de mantenir la iteració. El que vull dir és, en un lloc web existent amb moltes imatges, com les que mostren la llista freinds o una galeria d'imatges, que serà difícil tornar a processar tota la càrrega de les imatges que ja havien estat descarregades per afegir i esborrar les ombres, perquè matèria.
Així que si vostè ha fet una mica de visió de futur en crear els htmls per afegir aquestes divisions addicionals o en general la situació és que vostè té una lògica de bucle generació d'aquestes icones o imatges en miniatura XSL, PHP. Java o qualsevol altre llenguatge de programació / scripting, es pot afegir en qualsevol moment, llavors és només la qüestió de mostrar i ocultar les ombres mitjançant la propietat CSS Display, d'acord amb les canviants necessitats dels clients cada vegada ... jo no t'has fet aquest tipus de visió de futur abans d'això ... però ahev comença ja!

En el següent exemple, la imatge original és lliure d'ombres i els dropshadows s'apliquen segons sigui necessari! A més, he anat una mica més, mitjançant l'ús dels trucs de la meva anterior Tut (bien! aquests probablement són les més curtes varietat de tutorials, pel que només es justifica que qualifica de "Tut" 's) sobre ús de la propietat CSS clip per mostrar només

Imatge original

CSS Resultats DropShadow

Veure demo | Descarregar SourceFiles

Per què vull entendre això?? Humm ...!!

La majoria dels escriptors CSS d'acord que la propietat CSS clip és probablement un de la majoria dels productes no utilitzats de les propietats CSS. Era tan real per a mi també, i era el més feliç d'oblidar, fins que vaig començar a modificar el Mootools DOS Perilla (Pin) de component Slider (amb indicador de la gamma) .

Hi va haver una bona suggeriment d'un dels usuaris dels components per modificar el component Slider utilitzant imatges retallades backgroud (contra una divisió d'ample variable) per indicar el rang botó lliscant. Així va arribar el temps per entrar a la diversió, però inexplorat (per a mi és clar) a les aigües de la propietat Clip CSS.

Bé! el difícil que pot ser? No gaire ... SI i NO. La sintaxi per utilitzar la propietat CSS clip és bastant vertical, però el significat / usuage és una mica croocked. Amb una memòria com la meva, cada vegada que em sento a treballar en el guió de la meva lliscant ... tinc tokeep referint a l'ús d'aquesta propietat CLIP, per recordar-me a mi mateix la lògica que he creat al meu guió .... PER TANT! creu que la ploma cap avall, amb l'esperança de recordar que el futur (i també per al benefici d'aquells que semblen atordida per la propietat CSS clip)

Què Clip CSS fer?

Clip és part del mòdul d'efectes visuals de CSS 2.1. En poques paraules, el seu treball consisteix a col · locar una finestra visible a la part superior d'un objecte que està sent tallat, per tant, retallar imatges i crear miniatures sense haver de crear utilitzant fitxers (ja he posat aquesta funció per a un millor aprofitament en el component Slider )

Ús de la propietat Clip de CSS, pot crear una retallada amb la forma rect. Igual que moltes altres propietats CSS (com el farcit, etc marge), utilitzant rect requereix quatre coordenades Superior, Inferior Dreta, Esquerra (DECISIÓ). La naturalesa croocked d'aquesta propietat reflecteix el moment en què mireu més de prop com es calcula clip de la regió de retallada, l'ús d'aquests quatre coordenades (envia el cervell en un sorteig per un temps). Ara, per confondre la part inferior s'inicia des de la part superior, i el dret s'inicia des de l'esquerra. . Veus el que et vaig dir? .... Per tant aquest post ...

Aquest poc de confusió poden desaparèixer fàcilment, amb aquesta explicació visual de la CSS Clip / rect propietat com de baix!!

CSS Requisits Clip

La tasca que hem començat és per retallar la imatge en miniatura següent en una imatge més quadrada buscant (i també una imatge de gran angular)

Thumbnal original / imatge	Requisits per al clip Sqaure Thumbmail

CSS Resultats Clip

Veure demo | Descarregar SourceFiles

Aquesta pregunta va creuar per la meva ment un parell de vegades abans, quan estava treballant en els llocs abans també, que utilitza WordPress per mostrar blocs o nou tipus de contingut en alguna part del lloc / portal.Being un novell en PHP i al voltant de WordPress, em vaig mantenir procastinating, pensant "aquest no és el meu tros de pastís". Per fi! aquest requisit va arribar fins al meu nas, quan s'inicia cavant al voltant d'un trosset de solució.
Em vaig sorprendre en descobrir que en realitat era més fàcil del que realment pensava que era, per mostrar una llista dels titulars o els últims missatges en qualsevol altra pàgina fora de la secció de WordPress potència, simplement usant una mica de PHP i l'API de WordPress .

Això és el que ha de fer: -
Per raons d'explicació, suposem que el seu lloc és http://www.inchembur.com/ i vostè té la secció de notícies d'aquest lloc en http://news.inchembur.com/ (que s'està executant de WordPress). Ara bé, el requisit és per mostrar l'últim lloc de http://news.inchembur.com/ a la pàgina principal del lloc principal, és a dir, http://www.inchembur.com/index.php

Pas 1: Al index.php afegir el tros de codi següent, s'inclogui l'arxiu de WordPress API. Pots afegir això a la part superior de la pàgina que vols que el teu missatge aparegui en.

<? Php
'WP_USE_THEMES' , false ) ; // Disbable use of WordPress Theme define ('WP_USE_THEMES', false); ús / / Disbable del Tema de WordPress
requereix ('/ var / news.inchembur.com / wp-header.php de bloc de'); / / Incloure WordPress API
; // Get Latest Post query_posts ('showposts = 1'); / / Obtenir Darrer missatge
>

En el tros anterior d'inclusió, que estem rebent només el missatge més recent single. si vols provar altres variacions no dubteu a indagar en, query_posts() la documentació .

Pas 2: Ara, a la part de la pàgina Índex / Casa al que voleu mostrar l'últim missatge de WordPress http://news.inchembur.com , utilitzeu el codi. No cal dir que, no dubti en anunci de les seves divisions d'estil, s'estén i les classes com per les seves necessitats de disseny.

Pas 3: No hi ha pas 3 ... Això és tot ... heu finalitzat!

Com mostrar una pàgina específica posterior / davant del darrer missatge: -
Aquesta facilitat és capaç de crear mitjançant l'alteració dels arguments per query_posts() per incloure la identificació de la pàgina o la pàgina de bala

) ; query_posts ('page_id = 7');
) ; query_posts ('= nom de la pàgina de');

o Es pot controlar el nombre de llocs:
) ; query_posts showposts (= 3);

De vegades, per mantenir el pageweight baix ... hem dividit els nostres scripts en fragments ... Aquests fragments de JavaScript es poden carregar quan sigui necessari (en un esdeveniment o fer clic en un enllaç o un botó, etc.)

Javascripts càrrega dinàmica és senzilla i bastant simple de la manera ...

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

i vostè pot tenir l'enllaç següent en qualsevol punt en el cos, o pot fer que aquest script "onLoad" del document en si ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a > <A Href = "javascript: loadNewScript ('myDynamicScript.js');"> Càrrega del script dinàmic </ a>

o

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

Si vostè és una persona css, vostè sap que el dolor en aconseguir els dissenys de treball multi-navegador. IE8 és un altre pal a la roda per als desenvolupadors de nosaltres. Anywaz! si es colpeja sobre aquest tema, com ho vaig fer ahir, on el seu perfecte estat de funcionament de CSS a Internet Explorer 7 (i anteriors) i Firefox de sobte ha començat fer enrabiades en IE8, intenteu el següent ... Es molt ben plantat per arreglar els meus problemes de moment ....

Ús de la declaració del Meta, es pot especificar el motor de renderitzat de l'Internet Explorer 8 ens agradaria utilitzar. Així doncs, per obligar a Internet Explorer 8 per fer que Internet Explorer 7 ... Inseriu la següent etiqueta META al cap del seu document: -

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

Per defecte IE Meta seria la següent: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
el que faria que IE8 representar la pàgina fent servir el mode de noves normes.

Si cal, aquesta sintaxi podria ser utilitzat per acomodar per a altres navegadors com a continuació:

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

Més Sobre DOCTYPEs:

Si vostè encara no estan familiaritzats amb el tipus d'animal que es diu "Doctype" ... vet aquí una mica de lectura ràpida
Quins són DOCTYPEs? Què són els Caprichos de navegador i de manera estricta?
Ajust de la DOCTYPE en XSL

Per a una anàlisi més profund coneixement sobre DOCTYPEs, intent que visita aquests links ...
A List Apart: Establiu seu lloc amb el DOCTYPE Molt bé!
A List Apart: Més enllà de DOCTYPE: Estàndards Web, compatibilitat cap endavant, i IE8

Nota: Encara que molts de nosaltres HTML / CSS gent ha estat descuidant la importància de decleration DOCTYPE en els nostres documents, Configuració de la DOCTYPE correcte, sol ser la resposta a les qüestions de navegació més transversal.

Un reajustament CSS / CSS són per establir una sèrie d'estils dels elements d'una línia de base específica que crea consistència a través de diferents navegadors.

Tots hem estat a través dels malsons de l'escriptura de cross-browser CSS. Així que quan vam començar a escriure el codi CSS, és una pràctica per restablir en primer lloc, per eliminar / restaurar les incoherències en qualsevol navegador. Restableix CSS, són simples línies de CSS que vostè comença la seva CSS, donant-li una base neta per començar a construir el seu sobre.

Els reajustaments de CSS que normalment tendeixen a utilitzar aquest aspecte

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

Restablir la grandària de font del navegador
També tingui en compte el reajustament que s'ha aplicat a la mida del navegador de font en la següent línia ...

html {font-size: 76%;}

L'anterior es restableix el codi CSS de la mida de la font del navegador de 10 píxels, i això fa que sigui possible treballar amb mides de font relatius (que és tot important des del compliment de perspectiva WAI)
Per exemple, en la següent definició, mida de font en un lapse és de 10 píxels, i que en el paragarph s'estableix en 14 píxels ...

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