ເນື້ອຫາ
- ມີປະໂຫຍດຕໍ່ການອອກແບບດ້ວຍລະຫັດ
- ຂໍ້ມູນກ່ອນ
- ຄຸນງາມຄວາມດີຂອງມືຖືໂດຍບໍ່ເສຍຄ່າ
- ຊອກຫາພາສາ ທຳ ມະດາ
- ຮຽນຮູ້ໄວຂື້ນ
- iteration ຢ່າງໄວວາ
- ເວລາໄວກວ່າທີ່ຈະເປີດຕົວ
- ເປັນຫຍັງ HTML5?
- ຂໍ້ມູນທີ່ມະຫັດສະຈັນ
- CSS3 - ມັນແມ່ນ Photoshop ໃໝ່
- Sass + ເຂັມທິດ: ແຊບແຊບ
- jQuery: ໂອ້, ແມ່ນແລ້ວເຈົ້າສາມາດ
- ກອບ
- ຄວາມຄິດສຸດທ້າຍ
ບົດຂຽນນີ້ປາກົດຢູ່ໃນວາລະສານທີ 235 ຂອງວາລະສານ .net - ວາລະສານທີ່ຂາຍດີທີ່ສຸດໃນໂລກ ສຳ ລັບນັກອອກແບບແລະນັກພັດທະນາເວັບ.
ຂ້ອຍບໍ່ເຄີຍເປັນແຟນໃຫຍ່ຂອງການເຮັດວຽກຫຼາຍກວ່າທີ່ ຈຳ ເປັນ. ຂ້ອຍມີແນວໂນ້ມທີ່ຈະປະເມີນວິທີການແລະເຄື່ອງມືໂດຍອີງໃສ່ຄວາມສາມາດຂອງພວກເຂົາທີ່ຈະເຮັດໃຫ້ຂ້ອຍ, ຫລືທີມງານຂອງຂ້ອຍມີປະສິດຕິພາບຫຼາຍຂື້ນ. ພວກເຂົາເອົາພວກເຮົາໄປຫາຜະລິດຕະພັນທີ່ເຮັດວຽກໄດ້ໄວເທົ່າໃດ? ການສື່ສານມີປະສິດທິພາບຫຼາຍປານໃດ? ພວກເຂົາຢູ່ຫ່າງໄກຈາກພວກເຮົາບໍ?
ໃນຫລາຍປີທີ່ຜ່ານມາ, ຂ້ອຍໄດ້ປັບຂະບວນການອອກແບບແລະເຄື່ອງມືອອກແບບຂອງຂ້ອຍ. ຂ້ອຍຄິດວ່າຂ້ອຍຈະສືບຕໍ່ເຮັດເຊັ່ນນັ້ນ. ນັ້ນແມ່ນລັກສະນະຂອງການອອກແບບເຕັກໂນໂລຢີແລະເວັບ. ອຸດສາຫະ ກຳ ນີ້ມີການພັດທະນາຢ່າງບໍ່ຢຸດຢັ້ງ; ຂະບວນການແລະເຄື່ອງມືຂອງພວກເຮົາກໍ່ຕ້ອງມີການພັດທະນາເຊັ່ນກັນ.
HTML5 ແລະ CSS3 ເຮັດໃຫ້ມັນງ່າຍຕໍ່ການຫັນປ່ຽນຫຼາຍຂັ້ນຕອນການອອກແບບທີ່ຢູ່ເບື້ອງເທິງ - ໄກຈາກ Photoshop ແລະອື່ນໆໄປສູ່ການອອກແບບທີ່ມີຊີວິດ, ຫາຍໃຈ. ເຄື່ອງມືເຊັ່ນ: ມູນນິທິ, Bootstrap, ແລະ jQuery ເຮັດໃຫ້ມີການເຄື່ອນຍ້າຍຂະບວນການອອກແບບຂອງທ່ານໃຫ້ມີລະຫັດຫຼາຍຂື້ນ.
ມີປະໂຫຍດຕໍ່ການອອກແບບດ້ວຍລະຫັດ
ທຳ ອິດ, ຂ້ອຍບໍ່ໄດ້ສະ ໜັບ ສະ ໜູນ ການຖີ້ມ Photoshop, ຫລືບັນນາທິການອອກແບບພາບອື່ນໆຈາກການເຮັດວຽກຂອງເຈົ້າ. ແທນທີ່ຈະ, ຂ້ອຍຈະສຸມໃສ່ຜົນປະໂຫຍດຂອງການຍ້າຍອອກແບບດັ່ງກ່າວເຂົ້າໃນລະຫັດໄວກວ່ານັ້ນ.
ຂໍ້ມູນກ່ອນ
ສິ່ງທີ່ຂ້ອຍມັກກ່ຽວກັບການອອກແບບດ້ວຍ HTML ແມ່ນວ່າມັນຈະສົ່ງເສີມການຄິດຈາກມູມມອງຂໍ້ມູນ - ທຳ ອິດ. ໃນທາງກົງກັນຂ້າມ, ການ ນຳ ໃຊ້ໂປແກຼມແຕ້ມຮູບເຊັ່ນ: Illustrator, OmniGraffle, ຫຼື Balsamiq, ທ່ານເລີ່ມຕົ້ນໃສ່ປ່ອງແລະຕື່ມຂໍ້ມູນໃສ່.
ໃນ HTML ທ່ານກໍ່ສ້າງ DOM (ແບບແຜນວັດຖຸເອກະສານ), ຄືການສ້າງຕາຕະລາງເນື້ອຫາ. ມັນແມ່ນການກັບຄືນສູ່ການອອກແບບຂໍ້ມູນຂ່າວສານທີ່ແທ້ຈິງກັບ ລຳ ດັບຊັ້ນທີ່ມີຄວາມ ໝາຍ. HTML5 ນຳ ໃຊ້ຂັ້ນຕອນຕໍ່ໄປອີກດ້ວຍການເພີ່ມສ່ວນປະກອບຂອງ semantic ໃໝ່: ບົດຄວາມ, ສ່ວນ, ຫົວ, ສ່ວນ, ຂ້າງແລະອື່ນໆ. ວິທີການຂໍ້ມູນ - ທຳ ອິດນີ້ປະສົມປະສານເຂົ້າກັບແບບມືຖື, ແບບ ທຳ ອິດທີ່ຕອບສະ ໜອງ ໄດ້ດີ.
ຄຸນງາມຄວາມດີຂອງມືຖືໂດຍບໍ່ເສຍຄ່າ
ຖ້າທ່ານອ່ານເລື່ອງນີ້, ທ່ານອາດຈະອອກແບບ ສຳ ລັບມືຖື. ແລະໂອກາດທີ່ທ່ານຈະຕ້ອງໄດ້ອອກແບບຫລືແບບສອງ. ດ້ວຍ HTML5, ທ່ານໂຊກດີ. ກ່ອນ HTML5, ປະເພດການປ້ອນຂໍ້ມູນຂອງທ່ານແມ່ນຫຼາຍບໍ່ວ່າຈະເປັນຂໍ້ຄວາມຫຼືລະຫັດຜ່ານ. HTML5 ແນະ ນຳ ປະເພດປ້ອນຂໍ້ມູນເພີ່ມເຕີມ, ລວມທັງ:
ປະເພດປ້ອນຂໍ້ມູນ = "ອີເມວ"> ປະເພດປ້ອນເຂົ້າ = "tel"> ປະເພດປ້ອນເຂົ້າ = "url"> ປະເພດປ້ອນເຂົ້າ = "ວັນທີ"> ປະເພດປ້ອນເຂົ້າ = "ວັນທີເວລາ">
ສິ່ງທີ່ ໜ້າ ຕື່ນເຕັ້ນແທ້ໆກ່ຽວກັບປະເພດການປ້ອນຂໍ້ມູນເພີ່ມເຕີມເຫຼົ່ານີ້ແມ່ນຕົວທ່ອງເວັບມືຖືໃນ iOS ແລະ Android ຮັບຮູ້ມັນແລະປ່ຽນຄີບອດທີ່ມີສະຕິປັນຍາໂດຍອັດຕະໂນມັດ - ໂດຍບໍ່ຕ້ອງມີໂປແກຼມ jQuery ພິເສດຫຼື hacks. ໂອ້, ແລະຖ້າໂປຣແກຣມທ່ອງເວັບຂອງທ່ານບໍ່ຮູ້ວ່າແມ່ນຫຍັງ ປະເພດປ້ອນຂໍ້ມູນ = "ອີເມວ"> ແມ່ນ, ຫຼັງຈາກນັ້ນມັນພຽງແຕ່ຕັ້ງຄ່າຕໍ່ກັບການປ້ອນຂໍ້ຄວາມ.
ຊອກຫາພາສາ ທຳ ມະດາ
"ມັນເປັນຕາຢ້ານແທ້ໆທີ່ນັກອອກແບບແລະນັກພັດທະນາຂອງພວກເຮົາສາມາດເຮັດວຽກເປັນພາສາດຽວກັນ" - John Drago, ນັກພັດທະນາໂປແກຼມທີ່ Inflection.
ເບິ່ງວ່າສຽງນີ້ຄຸ້ນເຄີຍແລ້ວ. ຂ້ອຍຢູ່ໃນຫ້ອງປະຊຸມທີ່ມີຫລາຍກວ່າເຄິ່ງ ໜຶ່ງ ຂອງເຄື່ອງແມ່ຂ່າຍທີ່ໃຊ້ກັບເຊີຟເວີເຊິ່ງສາມາດໂຄ້ງຮອບຂ້ອຍໃນ Ruby, Python, Java ຫຼື. NET. ຂ້ອຍເປັນຜູ້ອອກແບບດຽວ. ຄຳ ແນະ ນຳ ຈຳ ນວນ ໜຶ່ງ ຂອງຂ້ອຍໃນເບື້ອງຕົ້ນແມ່ນຖືກປະຕິເສດວ່າເປັນສິ່ງທີ່ສັບສົນເກີນໄປທີ່ຈະຈັດຕັ້ງປະຕິບັດ. ຂ້ອຍຍ່າງໄປຫາກະດານຂາວແລະເລີ່ມຕົ້ນຂຽນບາງ HTML ແລະ CSS ຢູ່ເທິງກະດານ ສຳ ລັບວິທີການອອກແບບ. ຢ່າງກະທັນຫັນສຽງການສົນທະນາປ່ຽນແປງແລະນັກພັດທະນາຄົນ ໜຶ່ງ ເວົ້າຢ່າງບໍ່ຄ່ອຍສົນໃຈ, "ແມ່ນແລ້ວ - ຖ້າພວກເຮົາເຮັດແບບນັ້ນ, ມັນອາດຈະເຮັດວຽກໄດ້."
ການກ້າວໄປສູ່ຂັ້ນຕອນການອອກແບບຂອງຂ້ອຍຫຼາຍເຂົ້າໃນລະຫັດໄດ້ປັບປຸງການສົນທະນາກັບນັກພັດທະນາ. ມີການເພີ່ມຄວາມເຄົາລົບນັບຖືທີ່ໄດ້ຮັບໂດຍການຮູ້ວິທີການຜະລິດແບບຂອງທ່ານໃນລະຫັດ. ທ່ານບໍ່ ຈຳ ເປັນຕ້ອງເປັນຜູ້ຊ່ຽວຊານໃນການນັບຖືຄວາມນັບຖືນັ້ນ. ໃນຂະນະທີ່ທັກສະ HTML ແລະ CSS ຂອງຂ້ອຍແຂງແຮງ, ທັກສະ JavaScript ຂອງຂ້ອຍແມ່ນສະພາບທີ່ດີທີ່ສຸດ. ແລະຂ້ອຍບໍ່ອາຍທີ່ຈະຍອມຮັບເລື່ອງນັ້ນ. ເຖິງຢ່າງໃດກໍ່ຕາມ, ເມື່ອເຮັດວຽກກັບ frontend, ຫລືນັກພັດທະນາດ້ານ server, ຄວາມຈິງທີ່ພວກເຮົາສາມາດເວົ້າເປັນພາສາ ທຳ ມະດາ, ຫລືພົບກັນເຄິ່ງ ໜຶ່ງ, ແມ່ນຜົນປະໂຫຍດອັນໃຫຍ່ຫຼວງ.
ຮຽນຮູ້ໄວຂື້ນ
ໃນຂະນະທີ່ສາຍແລະຮູບປະກອບທີ່ເບິ່ງເຫັນສາມາດຊ່ວຍໃນການວາງແຜນ, ຂອງປອມເຫຼົ່ານີ້ແມ່ນທິດສະດີ. ທ່ານໄດ້ພະຍາຍາມອະທິບາຍການພົວພັນກັບຜູ້ໃດຜູ້ ໜຶ່ງ ຈັກເທື່ອ, ພຽງແຕ່ໃຫ້ພວກເຂົາຕອບວ່າ, "ຂ້ອຍຄິດວ່າຂ້ອຍຈະຕ້ອງໄດ້ເຫັນມັນ." ທ່ານຈະໄດ້ຮັບຮູບແບບຕົ້ນແບບໄວໆ, ບາງສິ່ງບາງຢ່າງທີ່ຜູ້ຄົນສາມາດພົວພັນກັບ, ທ່ານຈະສາມາດປະສົບກັບການອອກແບບແລະເບິ່ງວ່າຄວາມຄິດເຮັດວຽກໄດ້ແນວໃດ.
iteration ຢ່າງໄວວາ
ເວລາສຸດທ້າຍແມ່ນການອອກແບບສຸດທ້າຍທີ່ສົ່ງເຂົ້າໄປໃນການຜະລິດທີ່ກົງກັບ Photoshop ຂອງທ່ານຢ່າງແນ່ນອນຄືແນວໃດ? ເກືອບບໍ່ເຄີຍ. ດ້ວຍການອອກແບບຜະລິດຕະພັນດິຈິຕອນ, ການປ່ຽນແປງເກີດຂື້ນເລື້ອຍໆ ຍິ່ງໄປກວ່ານັ້ນ, ການປ່ຽນແປງຕ່າງໆເຊັ່ນ: ການເພີ່ມຂະ ໜາດ ຂອງຫົວຂອງທ່ານຈາກ 22pt ຫາ 24pt ທົ່ວ ໜ້າ ຈໍສອງສາມສິບໃບສາມາດໃຊ້ເວລາຫລາຍຊົ່ວໂມງໃນ Photoshop. ຈຸດປະສົງ Smart ໃຫ້ທ່ານມີການອອກແບບຈຸດປະສົງໃນລະດັບບາງຢ່າງໃນ Photoshop. ແຕ່ໂຊກບໍ່ດີ, ຜູ້ອອກແບບທີ່ເບິ່ງເຫັນຫຼາຍທີ່ສຸດທີ່ຂ້ອຍຮູ້ບໍ່ໄດ້ໃຊ້ Smart Object ພຽງພໍ. ດ້ວຍ CSS, ເພາະວ່າມັນໄດ້ສົ່ງເສີມໃຫ້ມີວິທີການທີ່ມີລະບົບຫຼາຍຂື້ນໃນການອອກແບບ, ການປ່ຽນແປງແບບພິມແມ່ນໃຊ້ເວລານາທີແທນເວລາຫຼາຍຊົ່ວໂມງ.
ຈະເປັນແນວໃດກ່ຽວກັບການປ່ຽນເສັ້ນສີ້ນສຸດໃນທຸກປຸ່ມຂອງທ່ານ? ຫລືຂະ ໜາດ ຂອງຊາຍແດນ? ແນວໃດກ່ຽວກັບການປ່ຽນຈາກຮູບສີ່ຫລ່ຽມມົນໆເປັນຮູບມົນ 2px? ໃນ Photoshop, ສິ່ງນີ້ສາມາດໃຊ້ເວລາຫລາຍຊົ່ວໂມງແລະທ່ານຍັງຕ້ອງໄດ້ໃສ່ລະຫັດມັນຢູ່. ຄວາມສາມາດໃນການອອກແບບໃນລະຫັດຊ່ວຍໃຫ້ຫລີກລ້ຽງການເດີນທາງຮອບໆຂອງການກັບໄປໃຊ້ Photoshop ສຳ ລັບແກ້ໄຂຕາມການອອກແບບສາຍຕາ. ເມື່ອທ່ານຍ້າຍການປ່ຽນແປງເຫລົ່ານັ້ນຢູ່ຂ້າງເທິງເຂົ້າໃນລະຫັດ, ໂດຍໃຊ້ CSS3 ແລະ Sass (ເຊິ່ງຂ້າພະເຈົ້າຈະຂຽນໃນພາຍຫຼັງໃນບົດຄວາມນີ້) ພວກມັນສາມາດເກີດຂື້ນໃນເວລາຈິງແລະໃຊ້ເວລາພຽງສອງສາມນາທີເທົ່ານັ້ນ.
ເວລາໄວກວ່າທີ່ຈະເປີດຕົວ
ໃນຫລາຍປີທີ່ຜ່ານມາ, ໃນຂະນະທີ່ຂ້າພະເຈົ້າຫັນປ່ຽນການອອກແບບການອອກແບບຂອງຂ້າພະເຈົ້າໃຫ້ເປັນລະຫັດຫຼາຍຂຶ້ນ, ຂ້າພະເຈົ້າໄດ້ປະສົບກັບການປັບປຸງທີ່ແທ້ຈິງ - ປະມານ 20 - 30 ເປີເຊັນໃນການຫຼຸດເວລາໄປຕະຫຼາດ ຍິ່ງຂ້ອຍເຮັດສິ່ງນີ້ຫລາຍເທົ່າໃດ, ຂ້ອຍໃຊ້ເວລາ ໜ້ອຍ ກວ່າທີ່ຂ້ອຍໃຊ້ຄວາມພະຍາຍາມທີ່ຊ້ ຳ ຊ້ອນກັນ. ຂ້ອຍ ກຳ ລັງໃຊ້ເວລາຮອບວຽນ ໜ້ອຍ ລົງໃນ Photoshop ຫລື Fireworks ແລ້ວເຮັດຊ້ ຳ ອີກເທື່ອ ໜຶ່ງ.
ໃນບາງຈຸດການອອກແບບຕ້ອງມີການໂຕ້ຕອບກັບ backend ບາງປະເພດ, ບໍ່ວ່າຈະເປັນ CMS, Rails app ຫຼືບາງສິ່ງບາງຢ່າງອື່ນ. ຍ້ອນວ່າວຽກງານການອອກແບບຂອງຂ້ອຍສ່ວນຫຼາຍແມ່ນຢູ່ໃນລະຫັດ, ການລວມເຂົ້າກັນຈະເກີດຂື້ນໄວກວ່ານັ້ນ. ສອງສາມປີກ່ອນ, ລູກຄ້າຄົນ ໜຶ່ງ ຂອງຂ້ອຍ, PointRoll, ໄດ້ຈາກຕົ້ນແບບໄປສູ່ການຜະລິດໃນ 5 ວັນ.
ເປັນຫຍັງ HTML5?
HTML5 ແມ່ນງ່າຍກວ່າລຸ້ນ HTML ກ່ອນ. ຍົກຕົວຢ່າງການປະກາດປະເພດເອກະສານ. ໃນເວີຊັນກ່ອນ ໜ້າ ນີ້ຂອງ HTML, the DOCTYPE ເບິ່ງບາງສິ່ງບາງຢ່າງເຊັ່ນນີ້:
! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
ແລະມີຫົກແບບທີ່ແຕກຕ່າງກັນ. ໂຊກດີທີ່ HTML5 DOCTYPE ເບິ່ງຄືແນວນີ້:
! DOCTYPE HTML>
ຢ່າງຈິງຈັງ. ນັ້ນແມ່ນມັນ. ງ່າຍດາຍທີ່ຫນ້າຕົກໃຈ.
ເມື່ອສ້າງ ໜ້າ HTML ມາດຕະຖານ, ມີຫຼາຍໆອົງປະກອບທົ່ວໄປເຊັ່ນ: ສ່ວນຫົວ, ເນື້ອຫາຫຼັກ, ແຖບດ້ານຂ້າງແລະຕີນ. ຂ້າພະເຈົ້າແນ່ໃຈວ່າທ່ານໄດ້ເຫັນບາງສິ່ງບາງຢ່າງແບບນີ້ມາກ່ອນ:
div id = "header> div id =" nav "> / div> / div> / div> = div" = ຫລັກ "> div id =" ແຖບຂ້າງ "> / div> / div> div id =" footer "> / div>
ບໍ່ມີຫຍັງນອກ ເໜືອ ຈາກ ທຳ ມະດາຢູ່ທີ່ນັ້ນ. ແຕ່ເມື່ອເຕັມໄປດ້ວຍເນື້ອໃນ, ແມ່ແບບນີ້ປ່ຽນເປັນແກງ div. ໃນທາງກົງກັນຂ້າມ, ກັບອົງປະກອບ semantic ໃໝ່ ຂອງ HTML5, ທ່ານຈະໄດ້ຮັບບາງສິ່ງທີ່ງ່າຍແລະງ່າຍກວ່າໃນການສະແກນ, ເຊັ່ນວ່າ:
header> nav> / nav> / header> Article> ຫລີກໄປທາງຫນຶ່ງ / / ຫລີກໄປທາງຫນຶ່ງ / ບົດຄວາມ> footer> / footer>
ເບິ່ງທີ່ນັ້ນ. ບາງສິ່ງບາງຢ່າງທີ່ເຮັດໃຫ້ຮູ້ສຶກ.
ຂໍ້ມູນທີ່ມະຫັດສະຈັນ
HTML5 ມາພ້ອມກັບສຽງຫວາດສຽວອີກອັນ ໜຶ່ງ ທີ່ເຮັດໃຫ້ທ່ານມີຄວາມສາມາດໃນການປະດິດຄວາມ ໝາຍ ທີ່ ສຳ ຄັນຂອງຕົວເອງ: the ຂໍ້ມູນ -. ກ່ອນຫນ້ານີ້, ຖ້າທ່ານຕ້ອງການມອບ ໝາຍ ສິ່ງທີ່ມີຄວາມ ໝາຍ ໃຫ້ກັບອົງປະກອບ DOM, ທ່ານໄດ້ຖືກ ຈຳ ກັດຕໍ່ບັດປະ ຈຳ ຕົວ, ຫ້ອງຮຽນແລະພາລະບົດບາດ.
ແຕ່ຫນ້າເສຍດາຍ, ID ຕ້ອງເປັນເອກະລັກ. ຫ້ອງຮຽນແມ່ນວິທະຍາໄລ (yippee!), ແຕ່ການ ນຳ ໃຊ້ພວກມັນສາມາດກາຍເປັນສັບສົນໄດ້ຢ່າງໄວວາ. ພາລະບົດບາດແມ່ນຊັບສິນທີ່ບໍ່ມີປະສິດຕິພາບທີ່ໃຫ້ຄວາມ ໝາຍ ທີ່ ສຳ ຄັນ ສຳ ລັບ ARIA. ເມື່ອບໍ່ດົນມານີ້, ຂ້າພະເຈົ້າໄດ້ ນຳ ໃຊ້ຂໍ້ມູນ - ສຳ ລັບແພລະຕະຟອມການວິເຄາະຕິດຕາມເຫດການທີ່ພວກເຮົາ ກຳ ລັງພັດທະນາຢູ່ທີ່ Inflection.ພວກເຮົາເປັນແຟນໃຫຍ່ຂອງການທົດສອບການອອກແບບຂອງພວກເຮົາ. ໃນເວລາທີ່ເຮັດວຽກກ່ຽວກັບແອັບພລິເຄຊັນຫລື ໜ້າ ເວັບຕ່າງໆທີ່ມີປະຕິ ສຳ ພັນທີ່ດີ, ພວກເຮົາຕ້ອງການໃຫ້ມີຄວາມເຂົ້າໃຈຕື່ມກ່ຽວກັບການມີສ່ວນຮ່ວມຂອງລູກຄ້າພາຍໃນ ໜ້າ.
ໃສ່ ຂໍ້ມູນ -. ດ້ວຍມັນທ່ານສາມາດແຕ່ງຕັ້ງ, ຜ່ານໄປ, ແລະຕິດເຂົ້າໄປໃນ "ກຳ ນົດຕົວແບບຄວາມ ໝາຍ ຂອງທ່ານເອງ". ດັ່ງນັ້ນ, ຕົວຢ່າງ, ທ່ານສາມາດເຮັດສິ່ງນີ້:
type type = "button" data-id = "facebook" dataregion = "ຕົ້ນຕໍ" data-event = "ລົງທະບຽນ"> ປະເພດປ້ອນຂໍ້ມູນ = "ປຸ່ມ" ຂໍ້ມູນ-id = "twitter" dataregion = "ຕົ້ນຕໍ" data-event = "ລົງທະບຽນ "> ປະເພດປ້ອນຂໍ້ມູນ =" ປຸ່ມ "data-id =" linkedin "dataregion =" ຕົ້ນຕໍ "data-event =" ລົງທະບຽນ ">
ພວກເຮົາສາມາດຕິດຜູ້ຟັງກັບ JavaScript ໃນ ໜ້າ ເວັບແລະທຸກເວລາທີ່ລູກຄ້າມັກ, ຫລືກົດປຸ່ມນີ້, ພວກເຮົາສາມາດຕິດຕາມກິດຈະ ກຳ ນັ້ນໄດ້. ແທນທີ່ຈະພຽງແຕ່ສາມາດຕິດຕາມວ່າຜູ້ໃດຜູ້ ໜຶ່ງ ລົງທະບຽນຜ່ານ OAuth ກັບ Twitter, ພວກເຮົາສາມາດເຫັນໄດ້ວ່າພວກເຂົາໄດ້ເບິ່ງຜ່ານເຟສບຸກ, ຈາກນັ້ນ Twitter, ຈາກນັ້ນ LinkedIn, ແລະສຸດທ້າຍກໍ່ຕັດສິນໃຈເລືອກ Twitter ສຳ ລັບຮູບແບບ OAuth ຂອງພວກເຂົາ.
ຈິນຕະນາການຂະຫຍາຍສິ່ງນີ້ໄປຫາເວັບໄຊເຊັ່ນ Pinterest, ຫລືການອອກແບບ Myspace ໃໝ່ ທີ່ລູກຄ້າລາກແລະວາງໂລ້ເພື່ອຈັດຮຽງ ໃໝ່ ໂດຍອີງຕາມຄວາມສົນໃຈ. ຫຼືອາດຈະປິດບັງກະເບື້ອງທີ່ພວກເຂົາບໍ່ສົນໃຈ ຂໍ້ມູນ - ຄຸນລັກສະນະຊ່ວຍໃຫ້ທ່ານສາມາດແນບຫຼື ກຳ ນົດຊັ້ນຄວາມ ໝາຍ semantic ເພີ່ມເຕີມຕໍ່ກັບສິ່ງທີ່ທ່ານສາມາດ ກຳ ນົດໄດ້. ສຳ ລັບເວັບໄຊແລະແອັບຕ່າງໆທີ່ເພິ່ງພາອາໄສ Ajax ມັນເປີດໂອກາດທີ່ບໍ່ ຈຳ ກັດ.
CSS3 - ມັນແມ່ນ Photoshop ໃໝ່
CSS3 ໄດ້ ນຳ ເອົາການອອກແບບແລະຄວາມຮູ້ສຶກໃນລະດັບ ໃໝ່ ທີ່ເຄີຍໃຊ້ໃນການຮຽກຮ້ອງໃຫ້ມີຮູບພາບພື້ນຫລັງ, ຊິ້ນ, ແລະເຕັກນິກການ 'ເລື່ອນປະຕູ' ທີ່ບໍ່ດີ. ໂຊກດີ, ນັ້ນແມ່ນສິ່ງທີ່ຜ່ານມາທັງ ໝົດ.
ລອງພິຈາລະນາເບິ່ງປຸ່ມທີ່ ໜ້າ ຮັກທີ່ມີຮູບຊົງ, ເສັ້ນລຽບໆ, ມຸມມົນ, ເງົາຕົວ ໜັງ ສືທີ່ເຮັດໃຫ້ມີ ໜັງ ສືພິມທີ່ດີ, ແລະມີຄວາມສະຫວ່າງຂື້ນ. ການຮຽນຮູ້ເຕັກນິກເຫຼົ່ານີ້ຈະເປັນໄປໄດ້ຍາວນານ. ພວກມັນແຕ່ລະສາມາດຖືກ ນຳ ໃຊ້ຢ່າງເປັນອິດສະຫຼະ, ຫຼືໃນການປະສົມປະສານຕ່າງໆເພື່ອດຶງດູດຄວາມສົນໃຈຂອງຄວາມສາມາດໃນການເບິ່ງເຫັນເວັບໃນປະຈຸບັນ.
ຫນ້າທໍາອິດ, ໃຫ້ຂອງການປັບດັດແກ້ບາງຢ່າງກັບຄ່າເລີ່ມຕົ້ນ ປຸ່ມ> ແລະ ປະເພດປ້ອນຂໍ້ມູນ = "ສົ່ງ"> ອົງປະກອບ. ສົມມຸດວ່າທ່ານໃຊ້ ໜຶ່ງ ໃນການຕັ້ງຄ່າ CSS ແບບມາດຕະຖານ, ພວກເຮົາພຽງແຕ່ເພີ່ມຫ້ອງທີ່ມີຂະ ໜາດ ນ້ອຍແລະຫາຍໃຈ ໜ້ອຍ ໜຶ່ງ.
/ * ປຸ່ມກົດປຸ່ມ, ປຸ່ມທີ່ໄດ້ຮັບປຸ່ມ. ======================================= * * / ປຸ່ມ, ການປ້ອນຂໍ້ມູນ [ປະເພດ = "ສົ່ງ"] {ຄວາມສູງ: 2.7em; ແຜ່ນຮອງ: .4em .7em; ເສັ້ນສູງ -: 1.9; }
ການພິສູດ: ປຸ່ມແລະວັດສະດຸປ້ອນເຂົ້າທີ່ຖືກຍື່ນສະ ເໜີ ສາມາດເປັນສິ່ງທີ່ຫຼອກລວງໃຫ້ restyle. ຂ້າພະເຈົ້າໄດ້ພົບເຫັນໂດຍການດັດປັບເສັ້ນຄວາມສູງໃຫ້ເປັນ 1,6 ຫຼືຫຼາຍກວ່ານັ້ນ, ທ່ານສາມາດຫລີກລ້ຽງການລັກເຄື່ອງທີ່ ຈຳ ເປັນຕ້ອງມີ div ຫຼື span ພາຍໃນ ປຸ່ມ> ແທັກ.
ຕອນນີ້ພວກເຮົາໄດ້ແກ້ໄຂບັນຫາປຸ່ມຂອງພວກເຮົາ, ພວກເຮົາສາມາດສ້າງ .btn ຫ້ອງຮຽນເພື່ອໃຫ້ພວກເຮົາມີປຸ່ມທີ່ສະອາດງາມໆດ້ວຍມຸມມົນ, ຮູບຊົງ, ຮູບແຂບ, ແລະຮູບລັກສະນະຂອງຕົວ ໜັງ ສື.
.btn {ສະແດງ: inline-block; ຊາຍແດນ: 1px ແຂງ # d4d4cc; -moz-border-radius: 4px; -webkit-border-radius: 4px; ຊາຍແດນ - ລັດສະ ໝີ: 4px; ແຜ່ນຮອງ: .4em .7em; ພື້ນຫລັງ: # edeff2; ພື້ນຫລັງ: -webkit-gradient (linear, 0% 0%, 0% 100%, ຈາກ (#fefefe), ສີຢຸດ (0.55, # edeff2), ເຖິງ (# e4e6e9)); ພື້ນຫລັງ: -moz-linear-gradient (ຈຸດສູນກາງ, #fefefe, # edeff2 55%, # e4e6e9); -moz-box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; -webkit-box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; ສີ: # 6c7786; font-size: 1.1em; text-shadow: #fefefe 1px 0 1px; ເສັ້ນສູງ -: 1.375em; cursor: ຕົວຊີ້; }
ແລະຫຼັງຈາກນັ້ນກໍ່ມີຜົນກະທົບທີ່ດີທີ່ສຸດດ້ວຍຄວາມສະຫວ່າງທີ່ສະຫວ່າງໂດຍໃຊ້ box-shadow ວິທີການ:
.btn: hover, .btn: focus {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; box-shadow: # 129ceb 0 0 2px; ພື້ນຫລັງ: # e6e9eb; ພື້ນຫລັງ: -webkit-gradient (linear, 0% 0%, 0% 100%, ຈາກ (# f7f7f7), ສີຢຸດ (0.55, # f6f6f7), ເຖິງ (# e6e9eb)); ພື້ນຫລັງ: -moz-lineargradient (ຈຸດສູນກາງ, # f7f7f7, # f6f6f7 55%, # e6e9eb); ສີ: # 45484b; text-shadow: rgb (255,255,255) 1px 1px 0; color-color: # c9c9c0; }
ດຽວນີ້, ຂ້ອຍບໍ່ແມ່ນແຟນໃຫຍ່ຂອງການຂຽນລະຫັດ gradient linear. ມັນຍາວແລະສັບສົນ. ຂະນະທີ່ທ່ານສາມາດເບິ່ງເຫັນໄດ້, ຂ້າພະເຈົ້າພຽງແຕ່ລວມເອົາສະບັບ ສຳ ລັບ -moz, -webkit, ແລະຮູບແບບມາດຕະຖານ. ຖ້າທ່ານຕ້ອງການລວມເອົາແບບ -o ແລະ -ms, ທ່ານຈະຕ້ອງເພີ່ມລະຫັດສອງເທົ່າ.
ມັນມີສອງທາງເລືອກອື່ນ. ໜຶ່ງ ແມ່ນເຄື່ອງປັ່ນໄຟ CSS3; ມີຫລາຍເວັບໄຊທ໌ທີ່ມີຢູ່, ລວມທັງ ColorZilla. ແຕ່ຖ້າທ່ານຕ້ອງການເພີ່ມເກມຂອງທ່ານເລັກ ໜ້ອຍ, ໃຫ້ພິຈາລະນາ ດຳ ນ້ ຳ ເຂົ້າ Sass: ສົມທົບກັບເຂັມທິດ, ມັນແມ່ນຄວາມເພີ້ຝັນ.
Sass + ເຂັມທິດ: ແຊບແຊບ
ທ່ານສາມາດຢຸດຄວາມຫວັງ ສຳ ລັບ CSS4 unicorn edition. ມັນຢູ່ທີ່ນີ້ແລະມັນຖືກເອີ້ນວ່າ Sass + Compass. Sass ຫຍໍ້ມາຈາກ Syntactically Awesome Stylesheets: ທ່ານສືບທອດຜົນປະໂຫຍດພື້ນເມືອງທັງ ໝົດ ຂອງ CSS3 ດ້ວຍຄວາມເພີດເພີນເພີ່ມຂອງຕົວແປ, ເຄື່ອງປະສົມ, ເຄື່ອງຂະຫຍາຍແລະສິ່ງດີໆອື່ນໆ.
ບໍ່ດົນມານີ້ຂ້າພະເຈົ້າໄດ້ປະຕິເສດເອກະສານ CSS ທີ່ມີ 5,000 ແຖວເຊິ່ງມີຫລາຍກວ່າ 30 ການປ່ຽນແປງໃນສີຟ້າດຽວກັນ. ດ້ວຍ Sass, ຂ້ອຍໄດ້ປ່ຽນທຸກໆການປ່ຽນແປງດ້ວຍລະຫັດນີ້:
ສີ: $ blue;
ໂດຍ ກຳ ນົດ $ ຟ້າ ໃນຂອງຂ້ອຍ _variables.scss file, ຂ້ອຍສາມາດສ້າງສີເລີ່ມຕົ້ນທີ່ທຸກເອກະສານ CSS ຫຼື SCSS ສາມາດອ້າງອີງ. ທຸກໆຄົນທີ່ຂຽນ CSS ສາມາດໃຊ້ໄດ້ $ ຟ້າ ແລະບໍ່ ຈຳ ເປັນຕ້ອງກັງວົນກ່ຽວກັບການໃຊ້ eyedropper, ຊອກຫາລະຫັດ hex, ຫຼື RGB, RGBA ຫຼື HSL.
ຈື່ລະຫັດ gradient linear ໄດ້ບໍ? ແທນທີ່ຈະຂຽນລະຫັດຫຼາຍໆເສັ້ນ, ຈະເປັນແນວໃດກ່ຽວກັບເລື່ອງນີ້:
@include ພື້ນຫລັງ (linear-gradient (# b1cfdc, # 7a9cac));
ໃຫ້ Sass ແລະ Compass ເຮັດການຍົກທີ່ ໜັກ ແລະສ້າງໄວຍາກອນທີ່ຖືກຕ້ອງ ສຳ ລັບທ່ານ: ເຮັດແລ້ວ. ບອກວ່າທ່ານຕ້ອງການສີທີ່ອ່ອນກວ່າຫຼືສີມ້ານກວ່າ. ທ່ານສາມາດຍ້າຍ eyedropper ປະມານໃນ Photoshop, ຫຼືພຽງແຕ່ໃຊ້ ຄຳ ສັ່ງ lighten / darken ໃນ Sass:
@include ຄວາມເປັນມາ (linear-gradient (darken ($ litegray, 2%), darken ($ off-white, 5%)));
ນັ້ນຈະເປັນການສ້າງຮູບແຂບທີ່ມີຮູບແຂບທີ່ມີສີເຂັ້ມ 2% $ lite-grey ແລະ 5% ມືດ off-white. Voil! ທ່ານບໍ່ ຈຳ ເປັນຕ້ອງມີລະຫັດ HEX ຫຼື RGB.
jQuery: ໂອ້, ແມ່ນແລ້ວເຈົ້າສາມາດ
ຂ້ອຍມີການສາລະພາບທີ່ຈະເຮັດ. JavaScript ເຄີຍໃຊ້ເພື່ອຂົ່ມຂູ່ຂ້ອຍ. ຫຼັງຈາກນັ້ນຂ້ອຍກໍ່ພົບ jQuery. ຂ້າພະເຈົ້າບໍ່ໄດ້ອ້າງວ່າເປັນຜູ້ສອນ guru, ແຕ່ຂ້າພະເຈົ້າ ໝັ້ນ ໃຈວ່າຂ້ອຍສາມາດຍ້າຍອອກໄປປະເພດໃດກໍ່ຕາມ, ຫຼື ໜ້າ ທີ່ທີ່ຂ້ອຍຕ້ອງການໃຊ້ jQuery.
ຍົກຕົວຢ່າງ, ຄວາມສາມາດທີ່ຈະສະແດງການປ້ອນຂໍ້ມູນໂທລະສັບຮອງໃນ ໜ້າ ຈໍໂດຍການກົດປຸ່ມ Add New link. ການໃຊ້ jQuery, ທ່ານພຽງແຕ່ຂຽນນີ້:
ກົດ - ການເປີດເຜີຍຄວາມຄືບ ໜ້າ - // $ ('.-new-number') ກົດທີ່ (function () {$ ('. alt-number'). fadeIn ('fast');});
ຊອກຫາບາງສິ່ງບາງຢ່າງທີ່ກ້າວ ໜ້າ ກວ່າເກົ່າບໍ ມັນອາດຈະມີໂປແກມສຽບມັນ. ພຶດຕິ ກຳ ພື້ນຖານແມ່ນງ່າຍແລະສະລັບສັບຊ້ອນທີ່ເຂົ້າຫາໄດ້ງ່າຍກັບ jQuery.
ກອບ
ສອງໃນກອບທີ່ເຂັ້ມແຂງທີ່ສຸດໃນປະຈຸບັນແມ່ນມູນນິທິແລະ Bootstrap. ຕອນນີ້, ກ່ອນທີ່ທ່ານຈະຍົກເລີກໂຄງຮ່າງ CSS, ຂ້າພະເຈົ້າຂໍຖາມທ່ານບາງຢ່າງ. ເຈົ້າໃຊ້ jQuery ບໍ? Ruby on Rails? Django? ທຸກໆກອບ.
ເຊັ່ນດຽວກັບ jQuery ແລະ RoR, ມູນນິທິແລະ Bootstrap ເກີດມາຈາກການຮັບຮູ້ວ່າມີ ຈຳ ນວນສິ່ງທີ່ພວກເຮົາເຮັດຊ້ ຳ ແລ້ວຊ້ ຳ ອີກ (ເຊັ່ນ: ການຕັ້ງຄ່າ ໃໝ່, ການພິມ, ພິມ, ຕາຂ່າຍໄຟຟ້າ, ແບບຟອມ, ປຸ່ມ, nav ແລະລາຍຊື່). ມູນນິທິແລະ Bootstrap ທັງສອງໄດ້ສະ ໜັບ ສະ ໜູນ ການອອກແບບທີ່ຕອບສະ ໜອງ ໂດຍການ ນຳ ໃຊ້ຫ້ອງຮຽນຜູ້ຊ່ວຍ. ທັງສອງໄດ້ຖືກບັນທຶກໄວ້ເປັນຢ່າງດີແລະໄດ້ຮັບການທົດສອບຖະ ໜົນ, ດັ່ງນັ້ນທ່ານສາມາດ ນຳ ໃຊ້ມັນດ້ວຍຄວາມ ໝັ້ນ ໃຈ.
ຄວາມແຕກຕ່າງທີ່ ສຳ ຄັນ ໜຶ່ງ ລະຫວ່າງສອງ: Bootstrap ແມ່ນອີງໃສ່ລະບົບ LESS ສຳ ລັບການປຸງແຕ່ງ CSS, ໃນຂະນະທີ່ມູນນິທິແມ່ນອີງໃສ່ Sass. ຂ້ອຍມັກ Sass ກັບ LESS ຍ້ອນຄວາມສາມາດເພີ່ມເຕີມຂອງມັນ, ແຕ່ວ່າທັງ Sass ແລະ LESS squash CSS ແບບດັ້ງເດີມເປັນຕ່ອນ.
ຄວາມຄິດສຸດທ້າຍກ່ຽວກັບກອບ. ສຳ ລັບຜູ້ທີ່ບໍ່ຕ້ອງການທີ່ຈະສືບທອດສາຍຕາພິເສດຂອງກອບຂອງຄົນອື່ນ, ພິຈາລະນາເລືອກເອົາຂອງທີ່ມີຢູ່ແລ້ວແລະເອົາມັນໄປໃສ່ກະດູກທີ່ເປົ່າ, ຫລືເອົາ cherry ຈາກສອງສາມເພື່ອມ້ວນຂອງທ່ານເອງ. ໂດຍວິທີໃດກໍ່ຕາມ, ມັນບໍ່ມີເຫດຜົນທີ່ຈະເລີ່ມຕົ້ນຈາກການຂູດທຸກໆຄັ້ງ.
ຄວາມຄິດສຸດທ້າຍ
ຕ້ອງການການຄວບຄຸມຫຼາຍກວ່າເກົ່າກ່ຽວກັບວິທີການອອກແບບຂອງທ່ານໃນທີ່ສຸດ? ຍ້າຍຂະບວນການຫຼາຍຂື້ນໄປຂ້າງເທິງລະຫັດ. HTML5 ສຸດທ້າຍກໍ່ ນຳ ຄວາມຮູ້ສຶກບາງຢ່າງມາສະ ເໜີ ຕໍ່ DOM. ຄວາມຫຍາບຄາຍທີ່ບໍ່ມີປະໂຫຍດ DOCTYPEs ແລະ divitis. CSS3 ແມ່ນ Photoshop ແບບ ໃໝ່: gradients ຮູບແຂບ, borderradius, ແລະ box-shadows FTW! ແລະພ້ອມດ້ວຍເຄື່ອງມືຕ່າງໆເຊັ່ນ Bootstrap, Foundation, Sass ແລະ jQuery, ການອອກແບບທີ່ກ້າວ ໜ້າ ຂຶ້ນສູ່ລະຫັດບໍ່ເຄີຍງ່າຍຂື້ນ.
ຄົ້ນພົບ 55 ຕົວຢ່າງທີ່ ໜ້າ ຕື່ນຕາຕື່ນໃຈຂອງ HTML5 ຢູ່ທີ່ Creative Bloq.
