Te drukken

Met mijn beperkte skill-set met tools zoals Photoshop en Illustrator, kan ik eerlijk bekennen dat ik een betere ontwikkelaar dan ik ben een ontwerper. Maar mijn achtergrond met kern (server side) ontwikkeling met Java / PHP / COBOL, is een zeer positieve invloed op mijn UI ontwikkeling van vaardigheden. Wat ik bedoel is, terwijl het creëren van mijn ontwerpen, dat wil zeggen als ik het ontwerp te doen, denk ik aan hoe het ontwerp het best kan worden omgezet in HTML-CSS en terwijl het doen van de HTML-CSS, geef ik een gedachte over de backend techniek en zorg redelijk zeker dat de HTML-code kan eenvoudig worden geïmplementeerd in XSL-lussen of PHP snippets etc.

Meer dan jaren heb ik gegooid hoofd op naar een ontwerp van UI ontwerpers die waarschijnlijk geen waarde in een idee wat HTML of CSS is. Al die jaren heb ik gedacht dat ik zou vragen om te veel, als ik alleen maar verwachten dat de ontwerper, die probeert om zijn "onmogelijk om code" design in mijn keel Shov, om maar een klein beetje wat zijn ontwerp zou worden omgezet begrijpen in. Dit recht zou helpen?

Toen kwam ik dit bericht vandaag ... Webdesigners die dat niet kunnen-code ... Dank Heer! Ik ben gewoon een van de velen die het zelfde voelen ... Het bovenstaande artitle is een beetje een lange adem .. maar de moeite waard het te lezen, elk woord van.

Bedankt Elliot Jay Stocks ... Ik voel me opgelucht!

Hier is een aantal fragmenten uit Elliots artikel .

Wow, wat een dag! Het begon met een klein tweet en eindigde met een discussie die leek te vegen over het hele web design gemeenschap. Het lijkt er een aantal zeer sterke meningen gehouden op het onderwerp van de vraag of webdesigners moeten in staat zijn code.
...
Dus, voordat we in deze, laat ik snel samen te vatten wat ik gezegd heb op deze ochtend op Twitter:

Eerlijk gezegd, ik ben geschokt dat in 2010 ik nog steeds over te komen 'web designers' die niet coderen hun eigen ontwerpen. Geen excuus.

... Ik ben een beetje meer specifiek in mijn tweet. Ik had het over ontwerpers die hebben niet eens de meest elementaire HTML en CSS vaardigheden om een ​​plat ontwerp om te zetten in een daadwerkelijke site. Niet mensen die bewust niet voor gekozen om code, zij die dat niet kunnen. En ik ben ook slechts verwijzen naar front-end code hier, natuurlijk is het belachelijk om te denken dat ontwerpers moeten ook geweldige back-end programmeurs ...

We krijgen 'web' ontwerpen gestuurd in Illustrator, 300dpi, onmogelijk om code, geen consistentie / bruikbaarheid.
~ Amy Mahon

Het is al laat, en ik heb om dit op een of andere manier verpakken. Ik weet dat er velen zullen zijn die niet eens zijn met mij, en mijn bedoeling is niet om te beledigen of boos iemand die dat niet kunnen-code, maar ik hoop dat een deel van wat ik gezegd heb een aantal van de punten die altijd komen bij het graven in weerspiegelt dit debat.

Aan het eind van de dag, denk ik niet wakker liggen, die kan coderen en wie niet. Ik ben gewoon oprecht verbaasd om zoveel ontwerpers die front-end vaardigheden missen, zoals ik dacht dat dit een ding van het verleden te vinden.

Lees ook de commentaren, waren er ongeveer 320 reacties, terwijl ik dit schrijf ... ze zijn zeker een te lezen.
Lees Elliots volledige bericht hier .. Webdesigners die niet coderen

• De Document Type Declaration moet aanwezig zijn bij het begin van een document dat de HTML-syntax gebruikt. Het kan eventueel worden gebruikt in de syntax XHTML, maar is niet vereist. De XHTML-document is niet nodig om de DOCTYPE nemen omdat XHTML documenten die worden afgeleverd correct gebruik van een XML MIME-type en worden verwerkt als XML door browsers, worden altijd weergegeven in geen quirks mode.

• In XHTML, tag namen zijn hoofdlettergevoelig en worden meestal gedefinieerd te worden geschreven in kleine letters. In HTML, echter, tag-namen zijn niet hoofdletter gevoelig en kunnen worden geschreven in hoofdletters of gemengd geval, hoewel de meest voorkomende conventie is aan de stok met kleine letters. Het geval van de start en eind tags hebben geen gelijk te zijn, maar consequent is de code er schoner te maken.

Voordelen van het gebruik HTML

• Achterwaarts compatibel met bestaande browsers
• Auteurs zijn al vertrouwd met de syntax
• De mild en vergevingsgezind syntax betekent dat er geen door de gebruiker vijandig "zijn Yellow Screen of Death "als een fout per ongeluk glipt
• Handig verkorte syntax, kan bijvoorbeeld auteurs laten een aantal tags en attribuutwaarden

Voordelen van het gebruik XHTML

• Strikte XML-syntaxis moedigt auteurs aan goed gevormde markup te schrijven, waarvan sommige auteurs kunnen vinden makkelijker te onderhouden
• Integreert direct met andere XML-vocabulaires, zoals SVG en MathML
• Maakt het gebruik van XML Processing, waarvan sommige auteurs gebruiken als onderdeel van hun bewerking en / of publiceren processen

Gisteren, na de kwestie die ik tegenkwam met de CSS Resets in Google Chrome ... Ik dacht aan het graven van een beetje dieper in op het gebied van User Agent Style Sheets ...
Gevonden deze tabel op de standaardwaarden van CSS2.1 User Agent Style Sheets ... (voor degenen die zich niet bewust van wat "User Agent Style Sheets 'is te volgen Wat is User Agent Style Sheets (Specification) .

Voor een volledige lijst van CSS 2.1 User Agent Style Sheets standaard klik hier

Gisteren, net als elke andere "Ground Hog Day", was ik bezig met een aantal CSS / tabelloze lay-outs. Alles was goed gaat in IE 7, FF 3 en Chrome, tot plots zag ik een aantal niet-negeerbare marges alleen gezien in Google Chrome. Hoewel heel vreemd en Worring, Het was een nieuwe bug / issue dat ik overkant gekomen, was er eindelijk wat pit in mijn alledaagse werk. Sad (maar leuk) het werd vastgesteld binnen een paar minuten van de sonde ...

Kortom, het zag eruit als Google Chrome negeerde mijn CSS Resets (marge: 0px). Eigenlijk werd veroorzaakt door de user agent stylesheet (-webkit-padding-start: 40px). Dus de oplossing was om deze stijl te resetten door het instellen van padding: 0 de misdragen elementen.
Een goede manier om dit probleem te voorkomen op elk element is het gebruik van een wereldwijde CSS Rest als volgt

* {Margin: 0; padding: 0;}

Wat is User Agent Style Sheets (Specification)?
Het volgende fragment is afkomstig uit http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , follow link om meer te lezen op de User Agent Style Sheets

CSS 1 introduceert het idee door te stellen dat elke User Agent (UA, vaak een 'web browser' of 'web client') wordt een standaard style sheet dat de documenten presenteert in een redelijke hebben - maar misschien wel alledaagse - manier. CSS 2 zegt dat in overeenstemming user agents moet een standaard style sheet van toepassing zijn (of zich gedragen alsof ze deden) en dat een user agent de standaard style sheet moeten de elementen van de taal van het document te presenteren op een manier die algemene presentatie verwachtingen te voldoen voor het document taal; CSS 3 is waarschijnlijk van dezelfde geest.

Omdat de CSS-specificaties laten het aan implementaties of er een "echte" style sheet voor de standaard weergave gebruiken of niet, het is niet verwonderlijk dat je niet een standaard style sheet in de installatie elke browser de map te vinden. In tegenstelling tot Microsoft's Internet Explorer en Opera, bijvoorbeeld (en voor zover ik weet), Gecko browsers zoals Firefox en Netscape Navigator (zoek naar "html.css"), maar ook Konqueror maakt het tamelijk eenvoudig om hun standaard styling begrijpen.

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 '

Google begint een beweging snel mensen te dumpen IE6 ... Door afluisteren IE6 gebruikers met een POPUP laden van de pagina ... is misschien niet een heel goed idee ... maar het zijn een UI-ontwikkelaar, moet ik deze band wagon mee ... een minder browser voor mij zorgen te maken over ... Sorry egoïstisch het is! maar ik heb onder andere dit javascript ... (TRY DEZE PAGINA IN IE6) ...
Hey! en op de heldere noot ... Zie het is een weergave van de POWER van JavaScript .... het kan zelfs brengen een gigantische (of een keer het was)

Dus ... helpen zich te ontdoen de wereld van de IE6 met een lijn van javascript!

http://code.google.com/p/sevenup/

Ik ben zo opgewonden over het toenemende aantal pageviews op mijn blog, dat ik mijn Google Analytics bijna elke dag. Ik merkte dat mijn blog wordt aangeduid met sites in andere talen en door mensen over de hele wereld. So Nice!!
Om het leven een stuk makkelijker voor mijn niet-ENGELS kijker schip te maken, heb ik nog een Google Widget / Plugin genaamd "Global Translator '.

De Global Translator zegt dat het "automatisch een blog in 41 verschillende talen door het wikkelen van vier verschillende online vertaalmachines (Google Translation Engine, Babelfish Translation Engine, FreeTranslations.com, Promt) vertaalt" ... Als je het wilt toevoegen aan uw eigen WordPress installatie ... check it out hier http://www.nothing2hide.net/wp-plugins/wordpress-global-translator-plugin/

Niet zeker, hoe goed de vertaling is, maar ik hoop oprecht dat het een paar mede-ontwikkelaars helpt die er zijn, die uiteindelijk het bereiken van mijn blog, alleen teleurgesteld worden, dat het in het Engels ....

De vertaler links zijn aan de onderkant van de Side Bar ....

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 op de pagina te laden *}); 

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

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