Stolsiz veb-dizayn - Tableless web design

Kaskadli jadvallar
Tushunchalar
Falsafalar
Asboblar
Taqqoslashlar

Stolsiz veb-dizayn (yoki stolsiz veb-maket) a veb-dizayn foydalanishdan qochadigan usul HTML jadvallari, uchun sahifa tartibi nazorat qilish maqsadlari. HTML jadvallari o'rniga, uslublar jadvali kabi tillar Kaskadli jadvallar (CSS) a elementlarini va matnni tartibga solish uchun ishlatiladi veb sahifa.

Tarix

HTML - bu belgilash tili dastlab uning vizual taqdimoti foydalanuvchiga qoldirildi. Ammo, kabi Internet 1990-yillarning o'rtalarida akademik va tadqiqot dunyosidan asosiy oqimga aylandi va ommaviy axborot vositalariga aylandi, grafik dizaynerlar veb-sahifalarining ingl. ko'rinishini boshqarish usullarini izladilar. Ayniqsa, dizayner tomonidan ommalashgan Devid Sigel uning kitobida Killer veb-saytlarini yaratish, jadvallar va ajratgichlar (odatda shaffof bitta piksel GIF sahifa maketlarini yaratish va saqlash uchun aniq kengligi, balandligi yoki chekkalari) ko'rsatilgan rasmlardan foydalanilgan.[1]

1990-yillarning oxirida birinchi o'rinli kuchli WYSIWYG bozorga tahrirlovchilar keldi, demak veb-dizaynerlar endi veb-sahifalarni yaratish uchun HTML haqida texnik tushunchaga ehtiyoj sezmaydilar.[2] Bunday muharrirlar bilvosita dizayn elementlarini joylashtirish uchun ichki jadvallardan keng foydalanishni rag'batlantirdilar. Dizaynerlar ushbu tahrirlovchilarda o'z hujjatlarini tahrir qilar ekan, hujjatga keraksiz kod va bo'sh elementlar qo'shildi. Bundan tashqari, malakasiz dizaynerlar WYSIWYG tahrirlovchisini ishlatishda jadvallardan talab qilinganidan ko'proq foydalanishlari mumkin edi. Ushbu amaliyot tez-tez jadvallar ichiga joylashtirilgan ko'plab jadvallarni, shuningdek keraksiz qatorlar va ustunlar bilan jadvallarni keltirib chiqardi. To'g'ridan-to'g'ri HTML va rasmlarni chiqaradigan tilimlash vositalari bilan grafik muharrirlardan foydalanish, shuningdek, ko'pincha 1 piksel balandlik yoki kenglikdagi ko'p qatorli jadvallar bilan yomon kodni targ'ib qildi. Ba'zan tarkibni ko'rsatish uchun haqiqiy tarkibdan ko'ra ko'proq kod satrlari ishlatilgan.

Tartibga solish uchun jadvallarga bog'liqligi bir qator muammolarni keltirib chiqardi. Ko'pgina veb-sahifalar jadvallar ichiga joylashtirilgan jadvallar bilan ishlab chiqilgan, natijada katta HTML hujjatlari, oddiyroq formatlash bilan hujjatlarga qaraganda ko'proq tarmoqli kengligi ishlatilgan. Bundan tashqari, jadvalga asoslangan tartib chiziqli ravishda o'rnatilganda, masalan, ekranni o'quvchi yoki qidiruv tizimida tahlil qilishda, natijada tarkibning tartibi biroz chalkash va chalkash bo'lishi mumkin.

Yaxshilash uchun kaskadli jadvallar (CSS) ishlab chiqilgan dizayn va tarkib o'rtasidagi ajratish va Internetdagi kontentning semantik tashkiloti tomon qaytib boring. "Jadvalsiz dizayn" atamasi HTML-elementlarni sahifada joylashtirish uchun jadval jadvallaridan ko'ra CSS-dan foydalanishni nazarda tutadi, veb-sahifalarda jadvalli ma'lumotlarni taqdim etishda HTML jadvallar hanuzgacha o'zlarining qonuniy joylariga ega,[3] va ba'zida CSS-ni qo'llab-quvvatlash yomon yoki muammoli bo'lgan holatlarda, masalan, elementni vertikal ravishda markazlashtirish kabi holatlarda, maket qurilmalari sifatida ishlatiladi. Jadvallardan foydalanishning yana bir sohasi - bu elektron pochta xabarlari. Buning sababi shundaki, ko'plab mashhur elektron pochta mijozlari haqiqatan ham HTML va CSS-render modemlarini ushlab turishmagan. Bunday stsenariyda murakkab elektron pochta xabarchilari o'zlarining tarkibiy va ijodiy muvofiqligini bir oz yo'qotadilar.

Farzandlikka olish

CSS1 spetsifikatsiyasi 1996 yil dekabr oyida W3C[4] takomillashtirish maqsadida veb-kirish imkoniyati va uslublar jadvallaridagi taqdimot tafsilotlarini ajratishni ta'kidlash semantik tarkib HTML hujjatlar. 1998 yil may oyida CSS2 (keyinchalik CSS 2.1 va CSS 2.2-da qayta ko'rib chiqilgan) CSS1-ni joylashishni aniqlash va jadval tuzish imkoniyatlari bilan kengaytirdi.

Butun veb-sahifalar tartibini boshqarish uchun CSS-dan emas, HTML-jadvallardan foydalanishni afzalligi bir necha sabablarga bog'liq edi:

  • kontent noshirlarining mavjudlarini takrorlash istagi korporativ dizayn veb-saytidagi elementlar;
  • brauzerlarda CSS-ni qo'llab-quvvatlash vaqtidagi cheklovlar;
  • The o'rnatilgan taglik CSS-ni qo'llab-quvvatlamaydigan brauzerlarning;
  • yangi veb-dizaynerlarning CSS standartlarini yaxshi bilmasligi;
  • sabablarini bilmaslik yoki ularni tashvishga solmaslik (shu jumladan HTML) semantik va veb-kirish imkoniyati ) mo'ljallangan maketlarga tezda erishishning oson yo'li sifatida qabul qilingan o'rniga CSS-dan foydalanish va
  • yangi zoti WYSIWYG ushbu amaliyotni rag'batlantirgan veb-dizayn vositalari.

CSS-ga asoslangan maketlarni qabul qilishning diqqatga sazovor joylariga quyidagilar kiradi Veb-standartlar loyihasi 2001 yil fevral oyida brauzerni yangilash kampaniyasi va veb-dizayn jurnali Boshqa ro'yxat 's bir vaqtning o'zida qayta ishlash, so'ngra Simli 2002 yilda qayta loyihalash.[5] The CSS Zen Garden 2003 yilda ishga tushirilgan veb-sayt stol usti maketlarini ommalashtirishga loyiq deb topildi.[6]

Mantiqiy asos

HTML jadvallarining mo'ljallangan va semantik maqsadi taqdim etishdan iborat jadval ma'lumotlari[3][7] sahifalarni yotqizishdan ko'ra.[8]Sahifalarni joylashtirish uchun CSS-dan foydalanishning afzalliklari orasida turli xil foydalanuvchilar uchun ma'lumotlarning yaxshilanishi, turli xil foydalanuvchilar uchun mavjuddir. foydalanuvchi agentlari. Ko'p sonli ma'noga ega bo'lmaganligi sababli tarmoqli kengligi tejamkorligi mavjud <table>, <tr> va <td> teglar o'nlab sahifalardan kamroq, ammo mazmunli sarlavhalar, xatboshilar va ro'yxatlarni qoldirib olib tashlanadi. Tartibga solish bo'yicha ko'rsatmalar butun CSS uslublar jadvallariga o'tkazilishi mumkin yuklab olindi bir marta va keshlangan har bir tashrif buyuruvchi saytni kezganda qayta foydalanish uchun. Saytlar saqlanib qolishi mumkin, chunki butun sayt qayta tiklanishi yoki bitta o'tish paytida faqat o'ziga xos CSS formatini o'zgartirib, ushbu jadvalga asoslangan har bir sahifaga ta'sir qilishi mumkin. Yangi HTML-tarkibni shu tarzda qo'shish mumkinki, unga muvofiq tartib qoidalari darhol mavjud CSS tomonidan unga hech qanday kuch sarflamasdan qo'llaniladi.

Afzalliklari

Kirish imkoniyati

Asosiy maqolalar: Internetga kirish imkoniyati va Qidiruv tizimni optimallashtirish

Internet tez rivojlanib, kengayib borayotgani sababli nogironlik bo'yicha kamsitish to'g'risidagi qonun hujjatlari va undan tobora ko'proq foydalanish mobil telefonlar va PDAlar, veb-tarkibni nisbatan bir xil qurilmalardan tashqari turli xil qurilmalarda ishlaydigan foydalanuvchilar uchun ochiq bo'lishi kerak ish stoli kompyuter va CRT monitor birinchi bo'lib veb-ekotizim ommalashdi. Stolsiz veb-dizayn sezilarli darajada yaxshilanadi Internetga kirish imkoniyati bu jihatdan.

Ekran o'quvchilari va brayl qurilmalarda stolsiz dizaynlar bilan bog'liq muammolar kamroq, chunki ular mantiqiy tuzilishga amal qilishadi. Xuddi shu narsa uchun ham amal qiladi qidiruv tizimi Veb-brauzerlar, veb-sayt noshirlarining ko'pchiligi o'z sahifalarini topadi, ularni aniq tasniflaydi va shuning uchun potentsial foydalanuvchilarga kerakli qidiruvlarda ularni osongina topishlariga imkon beradi deb umid qiladigan dasturiy ta'minot agentlari.

Dizayn (CSS) va strukturani (HTML) ajratish natijasida, shuningdek, har xil qurilmalar uchun turli xil sxemalarni taqdim etish mumkin, masalan. qo'llar, mobil telefonlar va h.k.larni chop etish uchun boshqa uslublar jadvalini ham ko'rsatish mumkin, masalan. ahamiyatsiz bo'lgan reklama sahifalari yoki navigatsiya elementlarining ko'rinishini yashirish yoki o'zgartirish uchun sahifaning bosma versiyasida noqulaylik tug'diradi.

W3C Veb-kontentga kirish bo'yicha ko'rsatmalar "yo'riqnoma №. 3 ta davlat "belgilash va uslublar jadvallaridan foydalaning va buni to'g'ri bajaring."[9]Yo'l-yo'riqlar tekshiruv punkti 3.3, birinchi o'ringa qo'yilgan 2-nazorat punktida "tartib va ​​taqdimotni boshqarish uchun uslublar jadvallaridan foydalaning" deyilgan.[10]

Tarmoqli kengligi tejash

Stolsiz dizayn tarkibni joylashtirish uchun foydalaniladigan kamroq HTML teglari bo'lgan veb-sahifalarni ishlab chiqaradi. Odatda bu sahifalarni yuklab olish uchun kichrayishini anglatadi. Falsafa, tartib va ​​joylashishni aniqlash bo'yicha barcha ko'rsatmalar tashqi uslublar jadvallariga o'tkazilishini nazarda tutadi. Ning asosiy imkoniyatlariga ko'ra HTTP, ular kamdan-kam hollarda o'zgarib turishi va ko'pgina veb-sahifalarda umumiy qo'llanilishi sababli, ular birinchi yuklab olingandan so'ng keshlanadi va qayta ishlatiladi. Bu sayt bo'ylab o'tkazuvchanlik va yuklab olish vaqtlarini yanada qisqartiradi.[11][12]

Xizmat qilish

Veb-saytni olib borish, veb-saytning maqsadiga qarab, veb-saytning vizual uslubida kichik va katta hajmdagi tez-tez o'zgarishlarni talab qilishi mumkin. Jadval asosida joylashish tartibi HTMLning o'ziga xos qismidir. Shunday qilib, shablonga asoslangan vizual muharrirlar yordamisiz HTML muharrirlari, butun saytdagi elementlarning joylashuv tartibini o'zgartirish talab qilinadigan takroriy o'zgarishlarning miqdoriga qarab katta kuch talab qilishi mumkin. Hatto ish bilan ta'minlash sed yoki shunga o'xshash global topish va almashtirish dasturlari muammoni butunlay engillashtira olmaydi.

CSS-dan foydalangan holda jadvalsiz tartibda tartib ma'lumotlari CSS hujjatida bo'lishi mumkin. Maket haqida ma'lumot markazlashtirilgan bo'lishi mumkinligi sababli, ushbu o'zgarishlarni sukut bo'yicha tez va global miqyosda amalga oshirish mumkin. HTML formatidagi fayllarni tartibini o'zgartirish paytida ularni o'zgartirishga hojat qolmasligi mumkin.

Bundan tashqari, tartib to'g'risidagi ma'lumotlar HTML-ga tashqi tomondan saqlanishi mumkinligi sababli, mavjud sahifani o'zgartirish yoki yangi sahifani qo'shishdan qat'i nazar, jadvalsiz dizaynga yangi tarkib qo'shish juda oson bo'lishi mumkin. Aksincha, bunday dizaynsiz, har bir sahifa uchun tartib har bir nusxani o'zgartirish uchun ko'proq vaqt talab qiladigan qo'lda o'zgartirishni yoki global topish va almashtirish dasturlaridan foydalanishni talab qilishi mumkin. Biroq, sayt egalari ko'pincha ma'lum sahifalar qisqa vaqt yoki uzoq muddat davomida saytdagi boshqalarnikidan farq qilishini xohlashadi. Bu ko'pincha ushbu sahifa uchun alohida uslublar jadvalini ishlab chiqishni talab qiladi. Sahifa (yoki shablon) tarkibi odatda o'zgarishsiz qolishi mumkin, ammo jadvalga asoslangan dizaynda bunday bo'lmaydi.

Kamchiliklari

CSS-ni keshlash mumkinligi sababli, agar o'zgartirishlar kiritilsa va mijoz hali eskirgan uslublar jadvalini ishlatsa, to'liq CSS-ga asoslangan tartib noto'g'ri ko'rsatilishi mumkin. Buni ehtiyotkorlik bilan ishlab chiqish va foydalanish bilan yumshatish mumkin keshbuster texnikalar.

Shuningdek qarang

Adabiyotlar

  1. ^ Gruber, Jordan S. (1997-02-01). "Outta sayt". Simli.
  2. ^ Maas, Benard. "WYSIWYG muharrirlarining qisqacha tarixi". 1PMWD. Olingan 10 fevral 2015. Microsoft Office FrontPage 1997 yilgi Microsoft Office versiyasining to'plami sifatida chiqdi, bu birinchi marta ishonchli, tijorat HTML WYSIWYG muharriri va nashr etuvchisi har bir kishi foydalanishi mumkin edi ... Veb-sahifa tashqarida qurilganida WYSIWYG MS FrontPage dasturi FPSE-ni qo'llab-quvvatlagan holda ishlaydi, chunki u HTML-kodni noldan yozib, texnolog tomonidan yaratilishi mumkin bo'lgan to'liq quvvatga ega bo'ladi. Veb-sahifalarni yaratish uchun endi veb-dizaynerlar HTML-ni texnik jihatdan tushunishga hojat qolmadi.
  3. ^ a b Jennifer Kyrnin. "Jadval ma'lumotlari uchun jadvallar - jadval ma'lumotlari nima? Jadvallarni standartlarga asoslangan XHTML hujjatida qachon ishlatish kerak". About.com, The New York Times kompaniyasining bir qismi. Olingan 2009-10-22.
  4. ^ Yolg'on, Xekon Vium; Bos, Bert (1996-12-17). "W3C tavsiyasi: 1-darajali kaskadli jadvallar". W3C. Arxivlandi asl nusxasi 1997-06-05 da. Olingan 2019-04-19.
  5. ^ Zeldman, Jeffri (2003-05-14). Veb-standartlar bilan loyihalash (1-nashr). Indianapolis: Yangi chavandozlar. pp.120-134. ISBN  978-0-7357-1201-0.
  6. ^ Zeldman, Jeffri (2007). Veb-standartlar bilan loyihalash (2-nashr). Berkli: Yangi chavandozlar. p.137. ISBN  978-0-321-38555-0.
  7. ^ "17.2.1 Anonim jadval ob'ektlari". Kaskadli jadvallar 2-darajali Reviziya 1 (CSS 2.1) spetsifikatsiyasi. W3C. 2009. Olingan 2009-10-23.
  8. ^ Dominik Hazaël-Massieux (2005). "Stol usti tartibi QANDAY". W3C. Olingan 2007-09-08.
  9. ^ "Veb-tarkibga kirish uchun ko'rsatmalar 1.0". W3C. 1999 yil. Olingan 2009-09-19. Yo'riqnoma 3. Belgilanish va uslublar jadvallaridan foydalaning va ularni to'g'ri bajaring.
  10. ^ "Veb-kontentga kirish uchun ko'rsatmalar 1.0.". W3C. 2000 yil. Olingan 2009-09-19. Maket va taqdimotni boshqarish uchun uslublar jadvallaridan foydalaning.
  11. ^ Daniel M. Frommelt (2003). "Slashdot-ni veb-standartlar bilan qayta tiklash". Ro'yxat jurnali. Olingan 2009-09-20.
  12. ^ Dan Shafer (2003). "HTML Utopia: CSS-dan foydalangan holda jadvallarsiz loyihalash, 4-bob: CSS veb-saytining dizayni". SitePoint Pty. Olingan 2009-09-20. ... yuqorida tavsiflangan tashkiliy afzalliklari ustiga, brauzerda yuklab olish uchun kamroq kod mavjud. Og'ir dizaynlashtirilgan saytlarda yoki yuzlab sahifalar yoki undan ko'p sahifalarda ushbu qisqartirilgan yuklab olish vaqti foydalanuvchi tajribasiga ham, tarmoq o'tkazuvchanligi narxiga ham sezilarli ta'sir ko'rsatishi mumkin.

Tashqi havolalar