Ailddylunio Blogger, rhan 3
Yn y rhan yma nid ydw i am roi cyfarwyddiadau ar sut i fynd ati i olygu CSS neu HTML, ond am siarad am syniadau tu ôl i ddylunio i'r wê.
Ymwahannu cynnwys o'r cynllun
Yn nyddiau cynnar y wê, roedd y gwahaniaethau rhwng y porwyr gwahanol yn eithaf mawr. Roedd Netscape yn dangos tudalennau mewn un ffordd, a Internet Explorer yn eu dangos mewn ffordd arall.
Dechreuodd dylunwyr ddefnyddio tablau i arddangos tudalen. Bwriad gwreiddiol y tag <table> oedd i arddangos gwybodaeth tabular, ond roedd ei defnyddio fel arf layout yn golygu bod tudalennau yn edrych yn fwy cyson mewn porwyr gwahanol.
Yn anffodus, camddefnydd o <table> yw hyn. Mae'n creu tudalennau sy'n unnaccesible, yn fawr o faint (kb), ac yn annodd i'w newid a'u golygu.
Accessibility
Dim pawb sy'n pori'r wê sy'n gallu gweld yn dda iawn. Mae nifer fawr o bobl yn defnyddio darllenwyr sgrîn i ddweud iddynt beth mae'r dudalen yn cynnwys. Os yw tablau wedi'u defnyddio i adeiladu'r dudalen, mae'n gallu fod yn dipyn o nightmare.
Dyma beth tebyg i beth bydd darllenwr sgrin yn adrodd am dudalen Microsoft:
Dwi wedi cymryd beth oedd yna hyd at prif gynnwys y dudalen (sef 'Dig into SQL server 2005'), roedd llawer mwy ar ôl hynny.
Wrth gwrs nid ydi hyn yn ddefnyddiol iawn i rhywun sy'n gwrando. Mae tabl o fewn tabl (nested tables) yn cael eu gordefnyddio yma, ac yn creu hunllef i'r darllennydd sgr&icric;n.
Maint
Pan mae gymaint o gôd yn y dudalen i'w helpu i arddangos yn gywir, mae'n atal y tudalennau rhag llwytho'n gyflym.
Mae'n rhaid i'r porwr ail lwytho'r wybodaeth bob tro mae tudalen newydd yn cael ei llwytho. Yn amlwg mae hyn yn wastraffus iawn o fandwidth, ac yn arafu'r holl broses lawr.
Golygu'r tudalennau
Os oes angen ailddylunio gwefan sy'n defnyddio tablau, mae'n job fawr i ddeud y lleiaf. Mae angen penderfynu ar y cynllun newydd, ac yna newid pob tudalen yn unigol. Mae hyn yn lot o waith, i nifer fawr o bobl.
CSS - saviour of the Universe
Mae CSS yn galluogi dylunwyr i gadw cynnwys a'r cynllun ar wahan. Engraifft wych o hyn yw'r Ardd Zen CSS. Project yw hwn gan Dave Shea, dyluniwr graffeg o Ganada. mae wedi'i ddechrau i amlygu CSS fel technoleg realistig i ddylunio tudlaennau i'r wê. Nid yw'r HTML yn newid o gwbl, does ond rhaid newid y ffeil CSS i newid arddull y dudalen yn gyfangwbl (er mae rhai yn mynd yn rhy bell). Dyma'r Ardd Zen gyda darllennydd sgrin.
Dipyn mwy darllenadwy, ynde?
Ac felly, gan bod pryd a gwedd y wefan mewn un ffeil CSS, does ond angen ei lawrlwytho unwaith, a bydd y porwr yn gallu ei alw o'r cache, ac ond lawrlwytho'r dudalen HTML. Sy'n golygu pori cyflymach, a llai o wastraff bandwidth. Ac os oes angen ailddylunio'r wefan, does ond angen golygu un ffeil CSS, yn hytrach na channoedd o ffeiliau HTML. Mae dau steil y dudalen hon yn dangos defnydd arall o'r syniad hyn.
Felly pam nad yw CSS wedi cael ei ddyfnyddio ers y cychwyn? Mae'r spec wedi bod o gwmpas ers blynyddoedd. Ond nid oedd y porwyr yn ei ddefnyddio yn gywir na chyson, felly doedd dim llawer o bwynt ei ddefnyddio. Erbyn hyn mae rhai porwyr yn renderio tudalennau yn gywir (Safari 2.0, Opera 8.0, Firefox 1.5), mae IE 6 yn eithaf da, ond mae IE 5.5 a 5.0 yn uffernol, ac yn golygu felly bod angen rhoi nifer o hacks yn y côd CSS i'w wneud o weithio.
Mae sôn am IE 7, sydd i fod yn renderio CSS yn gywir, ond nid yw'r adroddiadau dwi di clywed hyd yn hyn yn addawol iawn.
Rhagor o ddarllen
Golwg wrthrychol ar tablau vs CSS Andy Budd
Throwing tables out the window Stop Design
O Dablau i CSS Jeff Zeldman
Arfau
I gynyhyrchu'r testun gan ddarllenwr sgrin defnyddiais estyniad i Firefox, Fangs.
I helpu gyda dylunio CSS, dwi'n defnyddio Bar Arfau'r Datblygwr Gwê, gan Chris Pederick.
Technorati:
CSS, tiwtorial, dylunio.
Ymwahannu cynnwys o'r cynllun
Yn nyddiau cynnar y wê, roedd y gwahaniaethau rhwng y porwyr gwahanol yn eithaf mawr. Roedd Netscape yn dangos tudalennau mewn un ffordd, a Internet Explorer yn eu dangos mewn ffordd arall.
Dechreuodd dylunwyr ddefnyddio tablau i arddangos tudalen. Bwriad gwreiddiol y tag <table> oedd i arddangos gwybodaeth tabular, ond roedd ei defnyddio fel arf layout yn golygu bod tudalennau yn edrych yn fwy cyson mewn porwyr gwahanol.
Yn anffodus, camddefnydd o <table> yw hyn. Mae'n creu tudalennau sy'n unnaccesible, yn fawr o faint (kb), ac yn annodd i'w newid a'u golygu.
Accessibility
Dim pawb sy'n pori'r wê sy'n gallu gweld yn dda iawn. Mae nifer fawr o bobl yn defnyddio darllenwyr sgrîn i ddweud iddynt beth mae'r dudalen yn cynnwys. Os yw tablau wedi'u defnyddio i adeiladu'r dudalen, mae'n gallu fod yn dipyn o nightmare.
Dyma beth tebyg i beth bydd darllenwr sgrin yn adrodd am dudalen Microsoft:
Page has one frame, three headings and sixty-eight links Microsoft Corporation dash Internet Explorer Link Table with two columns and three rows Table with two columns and one row Table end Table with three columns and one row Link Quick Links vertical bar Link Worldwide Table end Table end Table with two columns and one row Graphic Microsoft Edit Search button Radio button Checked Microsoft.com Radio button Not checked Graphic MSN Web Search Table end Table with two columns and seven rows Heading level four Product Families List of nine items bullet Link Windows bullet Link Office bullet Link Windows Server System bullet Link Developer Tools bullet Link Business Solutions bullet Link Games and Xbox bullet Link MSN bullet Link Windows Mobile bullet Link All Products List end Heading level four Product Resources List of eight items bullet Link Downloads bullet Link Microsoft Update bullet Link Office Update bullet Link Security bullet Link Communities bullet Link Support bullet Link Learning Tools bullet Link Events and Webcasts List end Heading level four Microsoft Worldwide List of one item bullet Link Countries and RegionsL ist end Link Graphic SQL Server Table with two columns and one row Graphic Dig into SQL Server two thousand five with a one hundred eighty dash day trial, webcasts, and virtual labs Graphic Hardware developers colon Register to attend Win HEC two thousand six May twenty-three dash twenty-five in Seattle Graphic Windows Server and Linux colon Get the facts
Dwi wedi cymryd beth oedd yna hyd at prif gynnwys y dudalen (sef 'Dig into SQL server 2005'), roedd llawer mwy ar ôl hynny.
Wrth gwrs nid ydi hyn yn ddefnyddiol iawn i rhywun sy'n gwrando. Mae tabl o fewn tabl (nested tables) yn cael eu gordefnyddio yma, ac yn creu hunllef i'r darllennydd sgr&icric;n.
Maint
Pan mae gymaint o gôd yn y dudalen i'w helpu i arddangos yn gywir, mae'n atal y tudalennau rhag llwytho'n gyflym.
Mae'n rhaid i'r porwr ail lwytho'r wybodaeth bob tro mae tudalen newydd yn cael ei llwytho. Yn amlwg mae hyn yn wastraffus iawn o fandwidth, ac yn arafu'r holl broses lawr.
Golygu'r tudalennau
Os oes angen ailddylunio gwefan sy'n defnyddio tablau, mae'n job fawr i ddeud y lleiaf. Mae angen penderfynu ar y cynllun newydd, ac yna newid pob tudalen yn unigol. Mae hyn yn lot o waith, i nifer fawr o bobl.
CSS - saviour of the Universe
Mae CSS yn galluogi dylunwyr i gadw cynnwys a'r cynllun ar wahan. Engraifft wych o hyn yw'r Ardd Zen CSS. Project yw hwn gan Dave Shea, dyluniwr graffeg o Ganada. mae wedi'i ddechrau i amlygu CSS fel technoleg realistig i ddylunio tudlaennau i'r wê. Nid yw'r HTML yn newid o gwbl, does ond rhaid newid y ffeil CSS i newid arddull y dudalen yn gyfangwbl (er mae rhai yn mynd yn rhy bell). Dyma'r Ardd Zen gyda darllennydd sgrin.
Page has ten headings and thirty-nine linkscss Zen Garden colon The Beauty in CSS Design dash Internet ExplorerHeading level one css Zen GardenHeading level two The Beauty of CSS Design A demonstration of what can be accomplished visually through CSS dash based design. Select any style sheet from the list to load it into this page. Download the sample Link html file and Link css fileHeading level three The Road to Enlightenment Littering a dark and dreary road lay the past relics of browser dash specific tags, incompatible DOM s, and broken CSS support. Today, we must clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk like the Wthree C , WaSP and the major browser creators. The css Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the left paren yet to be right paren time dash honored techniques in new and invigorating fashion. Become one with the web.
Dipyn mwy darllenadwy, ynde?
Ac felly, gan bod pryd a gwedd y wefan mewn un ffeil CSS, does ond angen ei lawrlwytho unwaith, a bydd y porwr yn gallu ei alw o'r cache, ac ond lawrlwytho'r dudalen HTML. Sy'n golygu pori cyflymach, a llai o wastraff bandwidth. Ac os oes angen ailddylunio'r wefan, does ond angen golygu un ffeil CSS, yn hytrach na channoedd o ffeiliau HTML. Mae dau steil y dudalen hon yn dangos defnydd arall o'r syniad hyn.
Felly pam nad yw CSS wedi cael ei ddyfnyddio ers y cychwyn? Mae'r spec wedi bod o gwmpas ers blynyddoedd. Ond nid oedd y porwyr yn ei ddefnyddio yn gywir na chyson, felly doedd dim llawer o bwynt ei ddefnyddio. Erbyn hyn mae rhai porwyr yn renderio tudalennau yn gywir (Safari 2.0, Opera 8.0, Firefox 1.5), mae IE 6 yn eithaf da, ond mae IE 5.5 a 5.0 yn uffernol, ac yn golygu felly bod angen rhoi nifer o hacks yn y côd CSS i'w wneud o weithio.
Mae sôn am IE 7, sydd i fod yn renderio CSS yn gywir, ond nid yw'r adroddiadau dwi di clywed hyd yn hyn yn addawol iawn.
Rhagor o ddarllen
Golwg wrthrychol ar tablau vs CSS Andy Budd
Throwing tables out the window Stop Design
O Dablau i CSS Jeff Zeldman
Arfau
I gynyhyrchu'r testun gan ddarllenwr sgrin defnyddiais estyniad i Firefox, Fangs.
I helpu gyda dylunio CSS, dwi'n defnyddio Bar Arfau'r Datblygwr Gwê, gan Chris Pederick.
Technorati:
CSS, tiwtorial, dylunio.
0 Sylw:
Clicia i ychwanegu sylw.
I'r dudalen flaen.