Uttrykke IT

Med min begrensede ferdigheter sett med verktøy som Photoshop og Illustrator, kan jeg ærlig innrømme at jeg er en bedre utvikler enn jeg er en designer. Men min bakgrunn med kjerne (server side) utvikling med Java / PHP / COBOL, har vært en svært positiv innvirkning på mine UI utviklingen ferdigheter. Hva jeg mener er, mens skape mine motiver, dvs. når jeg gjør design, tenker jeg på hvordan design kan bli best mulig konverteres til HTML-CSS og mens de gjør det HTML-CSS, gir jeg en tanke om backend teknologi og gjøre rimelig sikker at HTML enkelt kan implementeres i XSL sløyfer eller PHP tekstbiter etc.

Over årene har jeg blitt kastet hodet på design av brukergrensesnitt designere som sannsynligvis donot har en anelse hva HTML eller CSS er. Alle disse årene har jeg tenkt at jeg ville spørre om for mye, hvis jeg bare venter designeren, som prøver å shov hans "umulig å kode" design ned halsen min, å forstå litt hva hans design ville bli konvertert inn. Det ville hjelpe rett?

Deretter kom jeg over dette innlegget i dag ... Webdesignere som ikke kan kode ... Takk Herren! Jeg er bare en av mange som føler det samme ... Det ovenstående artitle er litt lang omstendelig .. men verdt lese hvert ord av det.

Takk Elliot Jay Stocks ... Jeg føler lettet!

Her er noen utdrag fra Elliots artikkelen .

Wow, for en dag! Det startet med en liten tweet og endte med en diskusjon som syntes å feie over hele webdesign samfunnet. Det synes det er noen veldig sterke meninger holdt på temaet om webdesignere skal kunne kode.
...
Så, før vi kommer inn i dette, la meg raskt oppsummere hva jeg sa på denne morgenen på Twitter:

Ærlig talt, jeg sjokkert over at i 2010 jeg fortsatt kommer over 'Choice webdesignere' Hvem kan ikke kode sine egne design. Ingen unnskyldning.

... Jeg skulle ha vært litt mer spesifikk i tweeten min. Jeg snakket om designere som ikke har selv de mest grunnleggende HTML og CSS ferdigheter til å slå en flat design i en faktisk side. Ikke folk som forsettlig velger å ikke kode, de som ikke kan. Og jeg også henvise kun til front-end kode her; selvfølgelig er det latterlig å tro at designere bør også være fantastisk back-end programmerere ...

Vi får 'web' design sendt i Illustrator, 300dpi, umulig å kode, ingen konsistens / brukervennlighet.
~ Amy Mahon

Det begynner å bli sent, og jeg har fått til å pakke opp dette liksom. Jeg vet det vil være mange som er uenige med meg, og min intensjon er ikke å fornærme eller opprørt noen som ikke kan kode, men jeg håper at noe av det jeg har sagt gjenspeiler noen av de punktene som alltid kommer opp når hulene i denne debatten.

På slutten av dagen, jeg ikke miste noe søvn over hvem som kan kode, og som ikke kan. Jeg er bare oppriktig overrasket over å finne så mange designere som mangler front-end ferdigheter, som jeg trodde dette var en saga blott.

Også lese kommentarene, var det rundt 320 kommentarer, mens jeg skriver ... de er verdt en leser.
Vennligst les Elliots hele innlegget her .. Webdesignere som ikke kan kode

• Document Type Declaration må være tilstede i begynnelsen av et dokument som bruker HTML-syntaks. Det kan eventuelt brukes i XHTML syntaks, men det er ikke nødvendig. Den XHTML Dokumentet trenger ikke å inkludere DOCTYPE fordi XHTML dokumenter som blir levert korrekt bruker en XML MIME-type og blir behandlet som XML av nettlesere, er alltid gjengis i noen quirks-modus.

• I XHTML, kodenavn er store og små bokstaver og er vanligvis definert til å være skrevet med små bokstaver. I HTML, derimot, kodenavn er små bokstaver, og kan bli skrevet i store bokstaver eller blandet sak, men den vanligste konvensjonen er å feste med små bokstaver. Ved start og slutt tagger trenger ikke å være den samme, men å være konsekvent gjør koden ser renere.

Fordeler ved å bruke HTML

• Bakoverkompatibel med eksisterende nettlesere
• Forfattere er allerede kjent med syntaks
• Den overbærende og tilgivende syntaks betyr at det blir ingen bruker-fiendtlig " Yellow Screen of Death "hvis en feil ved et uhell glipper gjennom
• Praktisk stenografi syntaks, kan f.eks forfattere utelate noen koder og attributtverdier

Fordeler ved å bruke XHTML

• Streng XML-syntaks oppfordrer forfattere til å skrive godt formet markering, som enkelte forfattere kan finne enklere å vedlikeholde
• Integreres direkte med andre XML-vokabularer som SVG og MathML
• Tillater bruk av XML Processing, som enkelte forfattere bruker som en del av deres redigering og / eller publisering prosesser

I går, etter at problemet jeg møtte med CSS Tilbakestiller i Google Chrome ... jeg tenkte på å grave litt dypere inn i området av User Agent Style Sheets ...
Fant denne tabellen på standardverdiene CSS2.1 User Agent Style Sheets ... (for de uvitende om hva "User Agent Style Sheets", er å følge Hva er User Agent Style Sheets (spesifikasjon) .

For en full liste av CSS 2.1 Bruker stilsett mislighold klikk her

I går, som alle andre "Groundhog Day", ble jeg jobber med noen CSS / tableless layouter. Alt gikk bra i 7 IE, FF 3 og Chrome, inntill Plutselig så jeg noen un-ignorable marginer sett bare i Google Chrome. Selv om veldig merkelig og worring, var det noen nye bug / problem som jeg hadde risikere å møte, var det endelig litt krydder i mitt verdslig arbeid. Trist (men fin) det ble fikset i løpet av noen få minutter av sonden ...

I utgangspunktet så det ut som Google Chrome ignorert min CSS Tilbakestiller (margin: 0px). Det faktisk ble forårsaket av user agent stilarket (-WebKit-padding-start: 40px). Så løsningen var å nullstille denne stilen ved å sette padding: 0 de misbehaving elementene.
En god måte å unngå dette problemet skjer til enhver element er å bruke en global CSS Rest som følger

* {Margin: 0; padding: 0;}

Hva er User Agent Style Sheets (spesifikasjon)?
Følgende utdrag er hentet fra http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , følg linken for å lese mer om User Agent Style Sheets

CSS 1 introduserer ideen ved å si at hver User Agent (UA, ofte en "nettleser" eller "web klient ') vil ha en standard stilark som presenterer dokumenter i en rimelig - men uten tvil verdslig - måte. CSS 2 sier at i samsvar nettlesarar må bruke en standard stilark (eller oppføre seg som om de gjorde) og at en bruker agent standard stilark bør presentere elementene i dokumentet språket på en måte som tilfredsstiller generelle presentasjon forventninger til dokumentet språk; CSS 3 er trolig det samme sinn.

Siden CSS spesifikasjonene la det opp til implementeringer om å bruke en "ekte" style sheet til standard visning eller ikke, er det ikke forbausende at du ikke finner en standard stilark i hvert nettleserens installasjonsmappen. I motsetning til Microsofts Internet Explorer, samt Opera, for eksempel (og så vidt jeg vet), Gecko nettlesere som Firefox og Netscape Navigator (se etter "html.css"), men også Konqueror gjør det ganske enkelt å forstå deres standard styling.

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 '

Google starter en bevegelse ber folk å dumpe IE6 ... Av plage IE6-brukere med en popup på side belastning ... kanskje ikke en veldig god ide ... men å være en UI utvikler, må jeg bli med dette bandet vogn ... en mindre nettleser for meg bekymre ... Beklager egoistisk det er! men jeg har også denne javascript ... (TRY DENNE SIDEN i IE6) ...
Hei! og på lysere notatet ... Se det er en visning av POWER av JavaScript .... det kan også ta ned en gigantisk (eller når det var)

SO ... Hjelp fri verden fra IE6 med en linje av javascript!

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

Jeg er så begeistret for det økende antall sidevisninger på bloggen min, som jeg sjekke min Google Analytics nesten hver dag. Jeg merket at bloggen min blir referert til av nettsteder i mange andre språk og av mennesker over hele verden. SO Nice!!
For å gjøre livet litt enklere for min Ikke-engelsk viewer skip, har jeg lagt til en Google-Widget / Plugin som heter "Global Translator".

The Global Oversetter sier at det "automatisk oversetter en blogg på 41 forskjellige språk ved å pakke fire forskjellige online oversettelsestjeneste motorer (Google Translation Engine, Babelfish Oversettelse Engine, FreeTranslations.com, PROMT)" ... Hvis du vil legge den til din egen WordPress installasjon ... sjekk den ut her http://www.nothing2hide.net/wp-plugins/wordpress-global-translator-plugin/

Ikke sikker, hvor god oversettelsen er, men jeg håper inderlig at det hjelper noen andre utviklere der ute, ender som opp nå bloggen min, bare for å bli skuffet, at det er på engelsk ....

Oversetteren koblinger er nederst Side Bar ....

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

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