Pagpapahayag ng IT

Sa aking limitadong kasanayan-set sa mga tool tulad ng Photoshop at ilustrador, maaari ko matapat mangumpisal na I'ma mas mahusay na developer kaysa Ako ay isang taga-disenyo. Ngunit ang aking background sa core (server side) pag-unlad sa Java / PHP / COBOL, ay naging isang napaka-positibong impluwensiya sa aking mga UI mga kasanayan sa pag-unlad. Ano ang ibig sabihin ko ay, habang ang paglikha ang aking mga disenyo, ibig sabihin tuwing gagawin ko design, tingin ko tungkol sa kung paano ang disenyo ng maaaring pinakamahusay na-convert sa HTML-CSS at habang ginagawa ang HTML-CSS, ako magbigay ng isang-iisip tungkol sa backend teknolohiya at gumawa ng mga makatwirang sigurado na ang HTML ay maaaring madaling ipatupad sa ng XSL loop o PHP snippet atbp

Sa paglipas ng taon, ako ay thrown ulo sa sa disenyo sa pamamagitan ng UI designer na marahil donot magkaroon ng isang palatandaan kung ano ang HTML o CSS ay. Lahat mga taon na ako ay iniisip na Gusto kong humihingi ng labis, Kung inaasahan ko lang ang taga-disenyo, na sinusubukan upang shov ang kanyang "imposible sa code" na disenyo down aking lalamunan, upang maunawaan lamang nang kaunti kung ano ang kanyang disenyo ay iko-convert sa. NA ay makakatulong sa kanan?

Pagkatapos, ako ay dumating sa kabuuan sa post na ito ngayon ... designer Web na maaari hindi code ... Salamat Panginoon! Ako ay isa lamang sa maraming mga na pakiramdam ang parehong ... Ang itaas artitle ay isang bit ng isang mahabang paghinga ... ngunit nagkakahalaga ang read, ang bawat salita nito.

Salamat ang Elliot Stocks Jay ... Pakiramdam ko ay hinalinhan!

Narito ang ilang mga sipi mula sa Elliots artikulo .

Wow, kung ano ang isang araw! Ito na nagsimula sa isang maliit na tiririt at natapos sa isang talakayan na tila magwalis sa buong ang buong komunidad ng web design. Ito ay lilitaw may mga ilang mga napaka-malakas na mga opinyon na gaganapin sa ang paksa ng kung designer web ay dapat ma-code.
...
Kaya, bago makuha namin sa na ito, payagan ako sa mabilis paglalagom kung ano ang sinabi ko sa umaga na ito sa Twitter:

Matapat, ako shocked na sa 2010 pa rin ako pagdating sa 'web designer' na hindi maaaring code sa kanilang sariling mga disenyo. Walang dahilan.

... Dapat ko na isang maliit na mas tiyak sa aking tiririt. Ako ay pakikipag-usap tungkol sa mga designer na walang kahit na ang pinaka-basic HTML at CSS kasanayan upang buksan ang isang patag na disenyo sa isang aktwal na site. Hindi mga tao na sadyang hindi pumili sa code; mga hindi maaari. At pati na rin ako nagre-refer lamang sa front-end code dito, siyempre ito ay katawa-tawa sa tingin na designer ay dapat din ang mga kahanga-hangang back-end programmer ...

Makuha namin 'web disenyo na ipinadala sa ilustrador, 300dpi, imposibleng code, walang pagbabago / usability.
~ Amy Mahon

Ito ay pagkuha ng huli, at Mayroon akong Pakibalot up na ito sa anumang paraan. Alam ko doon ay marami na hindi sumasang-ayon sa akin, at ang aking layunin ay hindi upang sumugat ng damdamin o mapataob sinuman na hindi maaari code, ngunit Umaasa ako na ang ilang mga ang sinabi ko na sumasalamin sa ilang ng ang mga puntos na palaging dumating up kapag delving sa ito debate.

Sa pagtatapos ng araw, hindi ko mawala anumang pagtulog sa na code at na hindi maaari. Ako lamang na tunay na nagulat sa makahanap ng maraming mga designer na kakulangan harap-end na mga kasanayan, bilang Akala ko ito ay isang bagay ng nakalipas.

Ring basahin ang mga komento, may mga paligid ng 320 mga komento, bilang ko isulat ... ang mga ito ay nagkakahalaga ng isang basahin.
Mangyaring basahin ang Elliots buong post dito .. Web designer na hindi code

• Ang Pahayag Uri ng Dokumento kailangang dumalo sa simula ng isang dokumento na gumagamit ng HTML syntax. Maaaring opsyonal na ito ay ginagamit sa loob ng syntax XHTML, ngunit ito ay hindi kinakailangan. Ang XHTML dokumento ay hindi na kailangang isama ang DOCTYPE dahil XHTML dokumento na ay inihatid tama ang paggamit ng isang XML ng uri ng MIME at naproseso bilang XML sa pamamagitan ng browser, ay palaging ibinigay sa walang quirks mode.

• Sa XHTML, mga pangalan ng tag ay case sensitive at ay karaniwang tinukoy na nakasulat sa maliit na. Sa HTML, gayunpaman, mga pangalan ng tag ay case insensitive at maaaring nakasulat sa lahat ng malalaki o halo-halong kaso, kahit na ang pinaka-karaniwang kapulungan ay sa patpat na may maliit na. Ang kaso ng mga tag na simula at wakas ay hindi ang parehong, ngunit ang pagiging pare-pareho ay gumawa ng mas malinis ang code ng hitsura.

Mga benepisyo ng Paggamit ng HTML

• Paurong tugmang na may umiiral na mga browser
• Mga may-akda ay na pamilyar sa ang syntax
• Ang maawain at mapagpatawad syntax ibig sabihin nito ay hindi gumagamit pagalit na " Yellow Screen ng Kamatayan "kung ang isang pagkakamali ay hindi sinasadyang slips sa pamamagitan ng
• Maginhawa takigrapya syntax, hal may-akda ay maaaring ligtaan ilang mga tag at mga halaga ng katangian

Mga benepisyo ng Paggamit ng XHTML

• Mahigpit XML syntax ay naghihikayat sa mga may-akda upang isulat ang nabuo nang maayos markup, kung saan ang ilang mga may-akda ay maaaring makahanap ng mas madali upang mapanatili
• Integrates direkta sa iba pang mga XML vocabularies, tulad ng SVG at MathML
• Pinapayagan ang paggamit ng XML Processing, na ang ilang mga may-akda gamitin bilang bahagi ng kanilang pag-edit at / o mga proseso sa pag-publish

Kahapon, pagkatapos ang mga isyu ko nakatagpo sa CSS Resets sa Google Chrome ... Akala ko ng paghuhukay ng kaunti mas malalim sa ang lugar ng User Agent Style Sheet ...
Natagpuan ang talahanayan na ito sa mga default na halaga ng CSS2.1 User Agent Style Sheet ... (para sa mga walang kamalayan ng kung ano ang "User Agent Style Sheet" ay sundin Ano ang User Agent Style Sheet (Specification) .

Para sa isang buong listahan ng mga CSS 2.1 User Agent Style Sheet default mag-click dito

Kahapon, tulad ng bawat ibang "Araw Ground taong matakaw", ako ay nagtatrabaho sa ilang mga layout ng CSS / tableless. Lahat ay pagpunta sa IE 7, FF 3 at Chrome, untill biglang, Nakita ko ang ilang mga di-ignorable margin na nakikita lamang sa Google Chrome. Kahit na napaka kakaiba at worring, Ito ay ilang mga bagong bug / isyu na ako ay dumating accross, nagkaroon sa wakas ng ilang pagandahin sa aking pangmundo trabaho. Malungkot (ngunit magandang) May maayos ito sa loob ng ilang minuto ng probe ...

Talaga, mukhang hindi pinansin ng Google Chrome ang aking CSS Resets (margin: 0px). Talagang ito ay dulot ng ang stylesheet user agent (-WebKit-padding-simula: 40px). Kaya solusyon ay upang i-reset ito estilo sa pamamagitan ng pagtatakda ng padding: 0 ang magulo na mga elemento.
Ang isang mabuting paraan upang maiwasan ang problemang ito mula sa nangyayari sa anumang elemento ay gamitin ang isang global CSS REST tulad ng mga sumusunod

* {Margin: 0; padding: 0;}

Ano ang User Agent Style Sheet (Specification)?
Ang mga sumusunod na sipi ay kinuha mula sa http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , follow link na basahin ang higit pa sa User Agent Style Sheet

CSS 1 introduces ang mga ideya sa pamamagitan ng na nagsasabi na ang bawat User Agent (UA, madalas isang 'web browser' o 'web kliyente) ay magkakaroon ng isang estilo ng sheet ng default na nagpapakita ng mga dokumento sa isang makatwirang - ngunit arguably ng makalupa - paraan. CSS 2 sabi na matularin ahente ng gumagamit ay kailangang mag-aplay ng isang default sheet estilo (o kumilos bilang kung sila mismo) at na ang default na estilo ng isang user agent ng sheet ay dapat ipakita ang mga elemento ng ang wika dokumento sa paraan na masunod ang pangkalahatang inaasahan pagtatanghal para sa mga wika dokumento; CSS 3 ay malamang na maging ng parehong isip.

Dahil ang CSS pagtutukoy iwanan ito sa pagpapatupad kung gamitin ang isang "real" style sheet para sa default na display o hindi, hindi ito ay kahanga-hanga na hindi mo mahanap ang isang default na estilo ng sheet sa pag-install ng folder ng bawat browser. Hindi tulad ng Internet Explorer ng Microsoft pati na rin ang Opera, halimbawa (at Sa pagkaalam ko), sa Gecko browser tulad ng Firefox at Netscape Navigator (hanapin para sa "html.css") ngunit din Konqueror kaysa gawin itong simpleng upang maunawaan ang kanilang mga default styling.

Isa pang lumang paaralan ng mga pandagdag ng memory ...

Bakit namin upang paganahin windos.status?
Javascripts ay maaaring maging isang bangungot kapag mayroon kang bagay na i-debug. Firefox ang magkaroon ng ilang mga madaling-magamit na addons, tulad ng Firebug thats gumagawa ng aming buhay madali at Gayundin, ang mga boto para sa pinaka-popular na pamamaraan ng pag-debug sa Javascript ay dapat pumunta sa "ALERTO ()". Anywaz! May ilang mga pagkakataon kapag nagdadagdag ng ALERTO ko i-debug ang iyong di-behaving Javascript ay lamang isn'ta magandang ideya. Halimbawa! Mayroon ka dragble item na ang posisyon ay kailangang alerted .... HINDI HINDI! Wala gawin ito! ... Ay mo lamang makakuha ng walang katapusan na mga alerto o ugali mo talagang drap ang iyong dragable. Na rin! May mga mas mahusay na mga sitwasyon, kung saan maaari mong pagsusulat ang mga debug teksto sa bar ng katayuan, mas usful ... naniniwala sa akin! Nito Karanasan!

IE sa pamamagitan ng default iniwan mong sumulat sa Bar browser STATUS gamit ang syntax na "window.status = 'bagay upang i-debug'", ngunit FireFox hindi. Kaya upang paganahin ang mga bintana katayuan pagbabago, maaari mong gawin ang alinman sa mga sumusunod.

Buksan ang tungkol sa: config sa browser (uri "tungkol sa: config" ito sa address bar) at ang paghahanap para sa
DOM. disable_window_status_change. Baguhin ito sa maling ... i-click lamang sa entry upang i-toggle ang estado.

O Bilang kahalili

"Tools → Opsyon → ng Nilalaman → Paganahin ang JavaScript / Advanced → teksto ng Baguhin ang status bar"

At tandaan din na ... na magsulat sa status bar sa iyong Javascript, IE ay ok lang kung gumamit ka ng isang maikling syntax is katayuan = 'ilang debug teksto' ngunit sa FireFox, kailangan mong gamitin sa buong syntax is window.status = ' bagay na i-debug '

Pagsisimula ng Google ng isang kilusan na prompt mga tao sa tambakan ng basura IE6 ... Sa pamamagitan ng bugging IE6 gumagamit sa isang popup sa pahina ng pagkarga ... ay maaaring hindi isang magandang ideya ... pero pagiging isang UI developer, mayroon akong sumali sa band kariton ... isa mas mababa browser para sa akin ay mag-alala tungkol sa ... Paumanhin makasarili ito ay! ngunit ako ay isama ang javascript na ito ... (Subukan ang PAGE SA IE6) ...
Uy! at sa ang maliwanag na tala ... Tingnan ito ay isang pagpapakita ng kapangyarihan ng JavaScript .... maaari itong dalhin kahit isang higanteng (o kapag ito ay)

KAYA ... Tulong mapupuksa ang mundo ng IE6 sa isang linya ng javascript!

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

Kaya ako nasasabik tungkol sa pagtaas ng bilang ng mga page view sa aking blog, na check ko ang aking Google Analytics na halos araw-araw. Napansin ko na ang aking blog ay tinutukoy sa pamamagitan ng mga site sa maraming iba pang mga wika at ng mga tao sa buong mundo. KAYA Nice!!!!
Upang gumawa ng buhay ng isang bit na mas madali para sa aking hindi Ingles viewer barko, nagdagdag ako ng isang Google ng Widget / Plugin na tinatawag na "Global Translator".

Ang Global Translator sabi na "Awtomatikong isinasalin ng isang blog sa 41 iba't ibang mga wika sa pamamagitan ng pambalot ng apat na iba't ibang mga online translation engine (Google Translation Engine, Babelfish Translation Engine, FreeTranslations.com, Promt)" ... Kung nais mong idagdag ito sa iyong sariling pag-install ng WordPress ... suriin ito dito http://www.nothing2hide.net/wp-plugins/wordpress-global-translator-plugin/

Hindi sigurado, kung paano mahusay na pagsasalin ay ngunit sumasainyo ko umaasa na ito ay tumutulong sa isang ilang kapwa developer out doon, na tapusin hanggang maabot ang aking blog, lamang na bigo, na ito ay sa Ingles ....

Ang mga tagasalin na link sa ilalim ng Bahagi Bar ....

Heres isa pang maliit peice ng Javascript linlang na ako ay may sa humukay sa paligid dahil ang sitwasyon ang commaned ito. Sa isa sa aking mga web site, ako ay may situasyon na ito kung saan ako ay upang ipatupad ang "windows.onload" dalawang beses. Ang unang bagay na dumating sa isang bagito isip tulad ng minahan (Mayroon akong matapat sabihin na, dahil ako ay gumagamit ng javascript Frameworks at mga aklatan, ako forgotton upang gawin ang mga simpleng mga bagay-bagay sa aking sariling ... malungkot ngunit totoo), ay ang mga sumusunod na pamamaraan ...

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

Paumanhin upang sabihin ngunit, ito kostumbre gumana ... wala ang nais na talakayin ang pagpapatupad science ng Javascript magkano ... pero ayon sa aking mga kamakailan-lamang na karanasan, lamang ang huling function na sa (onloadfn3) ay masama talaga makapag pinaandar.

Sa normal na sitwasyon, hindi katulad mina (na kukunin ko na makipag-usap tungkol sa isang maliit na mamaya) ... maaari mong gawin ang isa sa mga sumusunod na execute mutliple onload function ....

O isang bagay tulad nito

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

Para sa aking kasalukuyang sitwasyon, hindi ko maaaring gamitin ang alinman sa itaas ...
Bakit kailangan kong tumawag sa windows.onload dalawang beses, sa halip na pagtawag ng dalawang mga function sa loob ng isang solong onload function na? Narito ang mabilis na pagtingin sa aking mga pahayag ng problema ...

"Aking Site pahina ay nakabalangkas na tulad ng tema WordPress .... yan ay isang mga karaniwang Header.php at Footer.php na makakakuha ng kasama sa lahat ng mga pahina site. May ay isang onload function na implementaion sa ang Footer.php upang gawin ang ilang mga karaniwang onload function. AT may mga ilang mga pahina na kailangan sa isang bagay ng kanilang sariling ONLOAD, hiwalay mula sa mga nagawa ng mga karaniwang onload function na. Kung ako ay magtalaga ng callback function na direkta sa handler window.onload, ito ay over-sumakay dati itinalaga callbacks sa ang Footer.php "

.... Ang aking problema naunawaan ?

Na rin! may ilang mga solusyon na ako ay mahanap. Lahat sila ay halos katulad at ay pangunahing implementions ng isang solusyon na ibinigay ng Simon Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Solusyon:

Lamang idagdag ang javascript code sa site ...

 ng pagpapaandar addLoadEvent (func) {
     var oldonload = window.onload;
     kung (typeof window.onload! = 'function na') {
        window.onload = func
     } Ibang {
        window.onload = ang function () {
            kung (oldonload) {
                   oldonload ()
           }
           func ()
        }
    }
 }

At tawagan ang mga ito sa halip ng sa karaniwang "windows.onload"

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (ang function () {
 / * Higit code upang tumakbo sa pahina ng pagkarga *
 }); 

Bentahe ng code snippet na ito ...
1. Lalo na, hinahayaan Ito mayroon kang maramihang mga kaganapan windows.onload, na tinatawag na mula sa mga mga seperate bahagi ng iyong code, walang overridding ang nakaraang kahulugan
2. Ito ay talagang mahinhin. Ito ay maaaring ilagay sa isang file sa iyong iba pang mga script o sa isang hiwalay na file.
3. Gumagana ito kahit na kung window.onload ay nai-set.

Akala ko ito ay maging isang doodle upang mahanap sa google, ng maraming mo sa amin ang mga manunulat ng UI at script ay kailangan upang gawin ito sa araw-araw na batayan, na isama ang isang bit ng peice ng snippet ng code ng PHP (. Php) sa isang Smarty Template (. tpl). Natanto ko na mas madali / popular ang iyong query, kahit na mas mahirap upang mahanap ang eksaktong sagot ... isang milyong mga resulta ng paghahanap ngunit karamihan sa kanila reffered sa "file" Kasama sa Smarty ... na may mga sumusunod na syntax

{Isama ang mga file = "isama / header.php"}

Ito talagang inlcuded file ng pinong ngunit bilang teksto, Ano Nais kong ay ang resulta ng kasama na file. (Tandaan sa itaas ay ginagamit isama ang mga template sa loob ng isang file ng template). Sa wakas sa isang bit persiverance .... Ko stumbled sa kabuuan ng isang syntax slighty na binago, na kung saan ay ang kasagutan sa aking mga pangangailangan ... kaya ito ay dito ... kung havn't na iyong natagpuan ang isa na

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

Tanong na ito matang naka aking isip ng ilang beses bago, kapag ako ay nagtatrabaho sa mga site na mas maaga masyadong, na ginamit ang WordPress upang ipakita ang mga blog o bagong uri ng nilalaman sa ilang mga bahagi ng site / portal.Being ng isang baguhan sa PHP at sa paligid ng WordPress, pinananatiling ko ang procastinating ito, iniisip "na ito ay hindi ang aking peice ng cake". Sa wakas! kinakailangan na ito ay dumating hanggang sa aking ilong, kapag nagsimula diggin sa paligid ng isang bit para sa solusyon.
Ako ay nagulat na upang mahanap na talagang ito ay mas madali kaysa sa aktwal ko naisip ito ay, upang ipakita ang isang listahan ng mga headline o ang pinakabagong post sa anumang iba pang mga pahina sa labas ng WordPress-pinagagana ng seksyon, lamang gamit ang isang maliit na bit ng PHP at ang WordPress API .

Narito ang kung ano ang gagawin: -
Para sa mga dahilan ng paliwanag, ipagpalagay na ang iyong site ay http://www.inchembur.com/ at mayroon ka ng seksyon ng balita para sa site na ito sa http://news.inchembur.com/ (na ay tumatakbo sa WordPress). Ngayon ang kinakailangan ay upang ipakita ang pinakabagong post mula sa http://news.inchembur.com/ sa home page ng main site, ie http://www.inchembur.com/index.php

Step1: Sa iyong index.php idagdag ang sumusunod na peice ng code, Isama ang file ng WordPress API. Maaari mong idagdag ito sa tuktok ng pahina na nais mo ang iyong post na lumitaw sa.

<? Php
'WP_USE_THEMES' , false ) ; // Disbable use of WordPress Theme tukuyin ('WP_USE_THEMES', hindi totoo); / / Disbable paggamit ng WordPress Tema
nangangailangan ('/ var / news.inchembur.com / wp-blog-header.php'); / / Isama WordPress API
; // Get Latest Post query_posts ('showposts = 1'); / / Kunin ang Pinakabagong Mga Post
?>

Sa itaas peice ng kasama, kami ay pagkuha lamang ang nag-iisang pinakabagong post. kung nais mong subukan ang higit pang mga pagkakaiba-iba huwag mag-atubiling upang maghukay sa, query_posts() papeles .

Hakbang 2: Ngayon, Sa bahagi Index / Home page kung saan mo nais na ipakita ang pinakabagong post WordPress mula sa http://news.inchembur.com , gamitin ang sumusunod na code. Hindi na kailangang sabihin, huwag mag-atubiling sa ad ang iyong mga dibisyon sa styling, ay sumasaklaw at mga klase sa bawat iyong mga pangangailangan sa disenyo.

Step3: Walang Hakbang 3 ... Thats ito ... tapos ka na!

Paano ipakita ang isang tiyak na post / pahina bilang laban sa pinakabagong post: -
Ito maaari madali na achived sa pamamagitan ng binabago ang mga argumento sa query_posts() upang isama ang ID ng pahina o pahina banatan

) ; query_posts ('page_id = 7');
) ; query_posts ('pagename = tungkol sa');

o maaari mong makontrol ang bilang ng mga post:
) ; query_posts (showposts = 3);