Te drukken

Een andere oude school geheugen aanvullende ...

Waarom moeten we in staat te stellen windos.status?
Javascripts kan een nachtmerrie zijn als je iets te debuggen. Firefox heeft wel een paar handige addons, net als Firebug Dat is maakt ons leven makkelijk en ook de stemming voor de meest populaire techniek in debug Javascript moet gaan naar "alert ()". Anywaz! Er zijn enkele gevallen bij het toevoegen van ALERT niet debuggen uw MIS-gedraagt ​​Javascript is gewoon geen goed idee. Zo! je hebt dragble object waarvan de positie dient te worden gewaarschuwd .... NEE NEE! Dont doen! ... Zul je gewoon oneindig waarschuwingen of u gewoon in staat zijn daadwerkelijk drag uw dragable. Nou! Er zijn meer goede situaties, waar u misschien het uitschrijven van debug teksten naar de status bar, veel meer usful ... Geloof me! De ervaring!

IE standaard heeft voor u schrijven naar de browser STATUS Bar met de syntaxis "window.status = 'iets te debuggen'", maar FireFox niet. Dus om ramen statuswijziging mogelijk te maken, kunt u een van de volgende.

Open about: config in je browser (type "about: config" dit in de adresbalk) en zoeken naar
dom. disable_window_status_change. Verander het om valse ... klik op de toegang tot de staat uit te schakelen.

OF alternatief

"Extra → Opties → Content → JavaScript inschakelen / Geavanceerd → Verander statusbalk tekst"

En ook rekening mee dat ... om te schrijven naar de statusbalk in uw Javascript, IE is gewoon ok als je een korte syntax ie status = 'wat debug tekst', maar in FireFox, dan moet je volledig te benutten syntax ie window.status = ' iets te debuggen '

Noch ik ben erg nieuw voor User Interface (UI) ontwikkeling noch ben ik een veteraan en zoals ik altijd gezegd, ik passen in het profiel van UI ontwikkelaar meer dan dat van een ontwerper, zonder spijt. Nou ja! Wat was ik te schrijven over? ... Voor een tijdje (moet in jaren niet minder), zo nu en dan als ik krijgen in een beetje van UI Design (wanneer de professionele ontwerper is gegaan op vakantie), heb ik altijd cant stop te denken of mijn ontwerp moet goed worden complient of niet (oprecht, niet dat ik kon 100% naleving van normen diagram de, Als ik ook wilde). Dan zeg ik tegen mezelf, wat crap! ... Het ontwerp moet eenvoudig, mooi en vooral lijken te gebruiken, moet bezoekers niet weg te lopen ... of bounce (te technisch). Wat zou een mooie tabelloze CSS-lay-out zijn voor de bezoeker, die zich niet bewust van alle slimme HYPERTEXT en Cascading Style Sheet onder de huid van uw webpagina ... Zilch!
Het ziet er mooi en makkelijk te gebruiken ... dan komt het alle normen spullen.

Ik stumbbled overkant van dit blog door Jason Fried van 37 Signals (Voor degenen die zich niet bewust zijn 37 signalen zijn de onces die hebben een aantal geweldige webapplicaties gemaakt, zoals Basecamp, kampvuur etc) die iets dergelijks heeft geschreven in 2004 en geloof me, bijna 5 jaar en niet veel veranderd sinds dat ... Ik was blij om zijn post te lezen, zoals ik het volledig eens met wat hij te zeggen heeft en het ook het feit, haar is niet zeker over wat er te vertellen over haar alleen zijn buikgevoel en zo is de mijne

Jason Fried: "Er is veel te veel praten over CSS en XHTML en standaarden en toegankelijkheid en niet genoeg praten over mensen. CSS en voldoen aan de standaard code zijn slechts tools - je moet weten wat op te bouwen met deze tools. Geweldig, ik ben blij dat je UI geen tabellen te gebruiken. En dan? Who cares als het dan nog niet laat mensen hun doelen te bereiken. Web standaarden zijn geweldig, maar de eigen normen omvatten dingen gedaan krijgen (en dat is nog te moeilijk om te doen online).

UI ontwerpers maken dezelfde oude fundamentele "te vergeten de mens aan de andere kant" fouten - behalve deze keer hun code ziet er beter uit. Mensen - geen code validators - gebruik interfaces ".

Volledige artikel Afrekenen Jason Fried

DISCALIMER: Dit betekent niet dat we niet moeten bekommeren over normen op alle. Standaarden zijn goed hebben en te houden zoveel mogelijk. We hoeven alleen maar aan die goede UI-ontwerp begrijpen betekent niet altijd 100% Standards complience of vice versa ....

Vanaf mijn lijst van mijn lessen geleerd, volg ik een paar UI Design and Development Gouden Regels ... Heres de TOP 10 ... niet dat je te volgen ...

1. Zorg goed voor je gebruikers. De gebruikers kan maken of breken uw site. Donot maken gebruikers uitzien als een totaal idoit, volstrekt niet in staat om met behulp van uw website. Dat is slecht!

2. Houd Eenvoud en gebruiksgemak uw primaire guidlines. Te veel dingen op het scherm, hoe groter de kans dat een gebruiker in de war raken of afgeleid worden van hun oorspronkelijke taak.

3. Wees binnen de grenzen ... donot genieten te veel in gebruiksvriendelijkheid, toegankelijkheid en NORMEN. Effectief te gebruiken standaarden en ze begrepen het team. Dit zorgt voor juiste consistentie in het product

4. Prototype de eis. Aangezien deze dagen de gebruiksvriendelijke interfaces zijn rijk, altijd Prototyping is beter dan alleen maar het maken van eenvoudige wireframes en de laatste is leegte van fatsoenlijke interacties, zou het niet aan de klant een duidelijk beeld van het uiteindelijke product dat wordt ontwikkeld. Altijd, Het is makkelijker om de prototypes te zetten in eindproducten. Ook! met prototyping elke interactie problemen konden worden gladgestreken eerder in de ontwikkelingscyclus.

5. Consistentie in uw ontwerp en interactie is heel belangrijk. Donot verwarren uw gebruikersnaam met onvoorspelbare interacties en gadgets.

6. Begrijp uw "Design Mission Statement". Aways richten zich op de primaire actie van de ontworpen pagina beign. Zorg er ook voor een lijst van je seconday acties op de pagina en prioriteren.

7. Zorg voor voldoende feedback aan de gebruikers van de site. Bij de meeste van de websites ontworpen rond AJAX, om te voorzien visuele aanwijzingen aan de gebruiker over wijzigingen in pagina. De gebruiker moet een bevestiging gegeven van de voltooiing van elke taak die hij uitvoert. Donot maken van de gebruiker te wachten en raad eens, voor oa. bieden indicatoren voor de file uplaods.

8. Maak geen misbruik van controles. Voor bijvoorbeeld het gebruik Selecteer de keuzelijst voor kleine lijsten alleen donot laat de gebruiker kiezen een van de 200 steden met behulp van vinkjes. Begrijp het verschil tussen een button en een link. Een link en button hebben verschillende doeleinden, geen waarde in gebruik dan een voor de ander. Zorg voor de juiste controle om interactie met een pagina beter. Vermijd het gebruik van menu's, die meer dan twee niveaus diep. Niet het wiel opnieuw uit. Gebruik standaard controls, aan te passen ze alleen als zeer noodzakelijk. Definieer aangepaste controles die nodig zijn voor uw site uit de eerste hand, zodat ze kunnen worden gemaakt en onafhankelijk getest, klaar voor gebruik overkant site.

9. Donot Doorloop te veel op het ontwerp. Vergeet niet! Het gehele produkt bestaat meer dan ontwerp alleen. Maak geschikte tijdslijnen in uw project planning voor design iteraties en vast te houden. Herhaling helpt ons om uit te zoeken wat werkt en wat niet, het uitzoeken van de brandhaarden. Als een goede interface kost tijd, om te voorzien tijd voor iteraties in het begin van de ontwikkeling cyclus, dus dat design iteraties direct gebeurt onafhankelijk gelijk om te gooien. Te veel rework kan jeopradize deadlines.

10. Leun achterover en denk wel eens als een gebruiker.

Heres een andere kleine peice van Javascript bedrog dat ik moest graven rond omdat de situatie commaned het. In een van mijn websites, ik had deze situatie, waarin ik moest een "windows.onload" twee keer uit te voeren. Het eerste wat dat zou kwam er een onervaren geest als de mijne (ik moet eerlijk zeggen dat, sinds ik met behulp van javascript frameworks en libraries, heb ik forgotton om eenvoudige dingen te doen op mijn eigen ... triest maar waar), is de volgende methode ...

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

Sorry om te zeggen, maar dit zal niet werken ... niet wilt met de uitvoering wetenschap van Javascript veel te bespreken ... maar volgens mijn recente ervaring, alleen de laatste functie (onloadfn3) ziek zal daadwerkelijk worden uitgevoerd.

In normale omstandigheden, in tegenstelling tot de mijne (die later zal ik het hebben over een beetje) ... je zou kunnen doen op een van de volgende handelingen uit om mutliple onload functies uit te voeren ....

Of iets dergelijks

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

Voor mijn huidige situatie, kan ik ook niet gebruik maken van de bovenstaande ...
Waarom heb ik nodig om windows.onload twee keer te bellen, in plaats van dat te roepen twee functies binnen een onload-functie? Hier is een snelle blik op mijn probleemstelling ...

"Mijn site's zijn gestructureerd als de WordPress thema .... dwz er is een veel voorkomende header.php en footer.php dat wordt opgenomen in alle pagina's. Er is een onload functie wijze uitvoering in de footer.php op enkele veelgestelde onload functies uit te voeren. En er zijn enkele pagina's die moeten iets van hun eigen OnLoad, behalve die die door het gemeenschappelijke onload functie. Als ik wijs callback functie rechtstreeks aan de window.onload handler, zal het over-rijden eerder toegewezen callbacks in de footer.php "

.... Is mijn probleem begrepen ?

Nou! er zijn weinig oplossingen die ik vond. Ze zijn allemaal erg op elkaar lijken en vooral implementions van een oplossing gegeven door Simon Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Oplossing:

Voeg eenvoudig deze javascript-code naar site ...

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

En noem het in plaats van de gebruikelijke "windows.onload"

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (function () {
 / * Meer code kan worden uitgevoerd laden van de pagina *
 }); 

Voordelen van deze code snippet ...
1. In de eerste, Het laat je meerdere windows.onload evenementen, genoemd van aparte delen van uw code, zonder overridding de vorige definitie
2. Het is echt onopvallend. Het kan worden geplaatst in een bestand met uw andere scripts of in een apart bestand.
3. Het werkt zelfs als window.onload al is ingesteld.

Ik dacht dat dit zal men een doodle te vinden in google, zoals velen u ons UI en het script schrijvers nodig zou hebben om dit te doen op een dagelijkse basis, dat is ook een beetje van peice van de PHP-code snippet (. Php) in een Smarty sjabloon (. TPL). Ik realiseerde me dat makkelijker / populaire uw vraag, nog moeilijker om het exacte antwoord ... een miljoen zoekresultaten te vinden, maar de meesten van hen aangeschreven "bestand" omvat in Smarty ... die heeft de volgende syntaxis

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

Dit eigenlijk inlcuded het bestand prima, maar als tekst, Wat ik wilde was het resultaat van opgenomen bestand. (Let op de hierboven wordt gebruikt zijn onder andere template in een template-bestand). Uiteindelijk met een beetje persiverance .... Ik struikelde over een slighty aangepaste syntax, dat was het antwoord op mijn eis ... dus hier is ... als je er een gevonden havn't al

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

Een andere snelle tut. Hier is iets eenvoudig en mooi gebruik van de kracht van CSS ... maar was moeilijk concieve (en het zeker was het niet) om te beginnen. Het toevoegen van Slagschaduw, kan een stuk van cake voor velen van ons zijn, met behulp van enkele image editing tools zoals Photoshop anf Vuurwerk etc.
De reden waarom, heb ik gekozen voor slagschaduw met behulp van CSS is dat, meestal tijdens het maken van een pagina-ontwerp / html van een aanvraag, aan de eisen te houden itereren. Wat ik bedoel is, in een bestaande website met veel afbeeldingen, zoals die weergegeven freinds lijst of een image gallery, zal het moeilijk zijn om opnieuw verwerken van de gehele lading van beelden die was al gelost toe te voegen of de schaduwen te verwijderen, want dat materie.
Dus als je gedaan hebt een beetje vooruit denken tijdens het maken van de HTMLS deze extra divisies of toe te voegen meestal de situatie is dat je een Loop Logic het genereren van deze pictogrammen / miniaturen in XSL, PHP hebben. JAVA of een andere programmering / scripting taal, je kan op elk moment toevoegen, dan is alleen de kwestie van show en verbergen van deze schaduwen met behulp van de CSS-display eigendom, volgens de klanten steeds veranderende eisen ... Ik havn't gedaan dit soort vooruitstrevende voordat dit ... maar ahev begonnen nu!

In het onderstaande voorbeeld, het originele beeld is als een schaduw gratis en de dropshadows worden toegepast als nodig! Ook heb ik gegaan een beetje extra, met behulp van de trucs van mijn eerdere Tut (Well! deze waarschijnlijk kortste verschillende Tutorials, dus het is alleen gerechtvaardigd noemde ze "Tut" 's) over gebruik van CSS Clip Eigendom voor pronken alleen

Originele afbeelding

CSS DropShadow resultaten

Bekijk de demo | Download bronbestanden

Waarom wil ik dit begrijpen??? Humm ...!!

De meeste van CSS schrijvers zijn het erover eens dat CSS Clip eigendom is waarschijnlijk een van de meest niet-gebruikte CSS-eigenschappen. Het was zo waar ook voor mij en was het meest blij om het te negeren, totdat ik begonnen met het wijzigen van de MooTools TWEE knop (pen) Slider Component (met Range Indicator) .

Er was een goede suggestie van een van de component gebruikers om de component Slider met geschoren backgroud beelden (tegen een variabele breedte divisie) naar de slider range aangeven te wijzigen. Zo kwam mijn tijd aan de pret, maar niet-registeraccountant (voor mij natuurlijk) water van de CSS Clip eigendom in te voeren.

Nou! hoe moeilijk het kan zijn? Niet veel op alle ... JA en NEE. De syntax van de CSS Clip eigendom te gebruiken is vrij rechtop maar de betekenis / usuage is een beetje croocked. Met een geheugen als de mijne, iedere keer zit ik bewerken om mijn Slider Script ... Ik heb tokeep verwijzen naar het gebruik van deze CLIP eigendom, herinner ik mezelf eraan de logica die ik heb gemaakt in mijn script .... DUS! dacht pen neer, met een hoop om te onthouden dat de toekomst (en ook ten behoeve van degenen die lijken boggled door de CSS Clip Eigendom)

Wat doet CSS Clip doen?

Clip is een onderdeel van de visuele effecten module van CSS 2.1. Simpel gezegd, de taak om een ​​zichtbaar venster boven op een object dat wordt geknipt, dus het knippen van foto's en het maken van miniaturen, zonder dat u extra bestanden (ik heb deze functie al beter benut in de component Slider maken )

Met behulp van de CSS Clip woning, kunt u een knipsel met behulp van de rect vorm. Net als veel andere CSS-eigenschappen (zoals marge, padding, enz.), met behulp van rect zijn vier coördinaten Boven, Rechts, Onder, Links (TRBL). De croocked aard van deze woning aan wanneer je een kijkje op hoe clip berekent de clipping regio, met behulp van deze vier coördinaten (stuurt hersenen in een worp voor een tijdje). Nu te verwarren je de onderkant begint vanaf de top, en de rechter gaat uit van de links. . Zie je wat ik zei? .... Vandaar dat dit bericht ...

Deze kleine verwarring kan gemakkelijk, verdwijnen met deze visuele uitleg van de CSS Clip / eigenschap rect, zoals hieronder!!

CSS Clip Eisen

De taak die we zijn begonnen is aan de volgende Thumbnail image clip in een rechthoek is op zoek afbeelding (en ook een groothoek afbeelding)

Originele Thumbnal / Image	Clip Eisen aan Sqaure Thumbmail

CSS Clip resultaten

Bekijk de demo | Download bronbestanden

Deze vraag schoot door mijn hoofd een paar keer eerder, toen ik werkte op sites eerder ook, die gebruikt WordPress blogs of nieuwe vorm van content in een deel van de site / portal.Being een beginner in PHP en rond WordPress laten zien, bleef ik procastinating het, denken: "dit is niet mijn peice van een cent". Eindelijk! deze eis kwam t mijn neus, toen begon Diggin een beetje rond voor oplossing.
Ik was verbaasd te zien dat het echt was makkelijker dan ik eigenlijk dacht dat het was, om een lijst van koppen of het laatste bericht weer te geven op een andere pagina buitenkant van de WordPress-aangedreven gedeelte, alleen met behulp van een klein beetje van PHP en de WordPress API .

Hier is wat te doen: -
Om redenen van uitleg, gaan ervan uit dat uw site is http://www.inchembur.com/ en je hebt het nieuws sectie voor deze site op http://news.inchembur.com/ (die WordPress draait). Nu de eis is om de laatste berichten zien van http://news.inchembur.com/ op de homepage van de hoofdsite, dat wil zeggen http://www.inchembur.com/index.php

Stap 1: In je index.php Voeg de volgende peice van de code, ook de WordPress API-bestand. U kunt dit aan de bovenkant van de pagina die u wilt dat uw post op.

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

In de bovenstaande peice van omvatten, krijgen we alleen maar de meest recente bericht. als je wilt om te proberen meer variaties voel je vrij om te graven in, query_posts() documentatie .

Stap 2: Nu, In het gedeelte van de Index / Home pagina waar u de nieuwste WordPress bericht blijkt uit http://news.inchembur.com , gebruikt u de volgende code. Onnodig om te zeggen, vrij voelen om uw advertentie styling afdelingen, overspanningen en klassen volgens uw ontwerp behoeften.

Stap 3: Er is geen Stap 3 ... Dat is het ... je bent klaar!

Hoe zien een specifiek bericht / pagina in tegenstelling tot de laatste post: -
Dit kan gemakkelijk achived door het veranderen van de argumenten om query_posts() om de pagina-ID of pagina slak zijn

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

of U kunt het aantal berichten:
) ; query_posts (showposts = 3);

Soms om de pageweight laag te houden ... we hebben opgesplitst onze scripts in fragmenten ... Deze javascript fragmenten kunnen worden geladen als dat nodig is (op een evenement of bij klikken op een link of knop, etc.).

Laden Javascripts is dynamisch eenvoudig en mooi recht naar voren, zoals hieronder ...

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

en je kunt de volgende oproep koppeling overal in het lichaam, of u kunt dit script "onLoad" van het document zelf hebben ...

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

of

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

Als je css persoon, dan zou je weten dat de pijn in het krijgen van uw lay-outs werken cross-browser. IE8 is nog een andere roet in het eten voor ons ontwikkelaars. Anywaz! als je kwam op dit onderwerp, zoals ik gisteren deed, waar je perfect werkende CSS in IE7 (en eerder) en Firefox plotseling is begonnen met het gooien van woede-uitbarstingen in IE8, probeer dan deze ... Het mooi leek om mijn problemen op te lossen op het moment ....

Met behulp van Meta verklaring, kunnen we specificeren de rendering engine willen we IE8 gebruiken. Dus te dwingen IE8 te maken als IE7 ... Plaats de volgende metatag in de kop van het document: -

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

Standaard IE Meta zou zijn: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
die zou IE8 maakt de pagina met de nieuwe standards mode.

Indien gewenst kan deze syntax worden gebruikt voor andere herbergen browsers als volgt:

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

Meer over doctypes:

ALS je nog onbekend bent met het soort dier de naam "Doctype" ... hier is een aantal snelle gelezen
Wat zijn doctypes? Wat zijn browser GRILLEN & strikte modus?
Het instellen van de DOCTYPE in XSL

Voor een meer diepgaand inzicht in doctypes, probeer dan het bezoeken van deze links ...
A List Apart: Fix Your site met de juiste DOCTYPE!
A List Apart: Beyond DOCTYPE: Web Standards, voorwaartse compatibiliteit, en IE8

Opmerking: Hoewel velen van ons HTML / CSS mensen zijn het belang van de DOCTYPE verklaring! Verwaarlozen in onze documenten, stellen van de juiste DOCTYPE, is meestal het antwoord op de meeste cross browser kwesties.

Een CSS Reset is / zijn CSS om een aantal elementen stijlen ingesteld op een specifieke uitgangssituatie voor deze samenhang creëert in verschillende browsers.

We hebben allemaal al de door de nachtmerries van het schrijven van cross-browser CSS. Dus als we beginnen met het schrijven van onze CSS, Het is een praktijk te resetten voor het eerst te verwijderen / reset elke cross browser inconsistenties. CSS Resets, zijn eenvoudig paar regels CSS dat je je CSS te beginnen, waardoor u een schone basis om te beginnen met het bouwen van uw op.

De CSS-resets die ik normaal de neiging om te gebruiken ziet er als volgt

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

Reset de browser lettergrootte
Let ook op de reset die is toegepast op de browser lettergrootte in de volgende regel ...

html {font-size: 76%;}

De bovenstaande CSS reset de browser lettergrootte van 10 pixels, en dit maakt het mogelijk om te werken met relatieve lettergroottes (dat is elke belangrijke van een WAI-naleving perspectivisch)
Voor bijvoorbeeld in de volgende definitie, is font-size in een span ingesteld op 10 pixels en dat in de paragarph is ingesteld op 14 pixels ...

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