ออกแบบเว็บไซต์ - หน้า 5

แนวคิดใด ๆ ที่การออกแบบเว็บของคุณดูเหมือนกับเบราว์เซอร์อื่น ๆ? คุณข้ามการตรวจสอบเบราว์เซอร์เพื่อให้แน่ใจว่าการออกแบบและการวางแนวจะรันบนเบราว์เซอร์อื่นหรือไม่ Browsershots ช่วยให้คุณสร้างภาพหน้าจอของเว็บไซต์ของคุณบนเบราว์เซอร์ที่แตกต่างกันในระบบปฏิบัติการที่แตกต่างกัน. บริการฟรีโอเพนซอร์สนี้มาถึงคุณโดย Johann C. Rocholl. สิ่งที่คุณต้องทำคือพิมพ์ URL ของคุณแล้วคลิกเริ่ม คำขอของคุณจะถูกวางในคิว ฉันใช้เวลาประมาณหนึ่งชั่วโมงก่อนที่คอมพิวเตอร์แบบกระจายจะเริ่มแสดงภาพหน้าจอของบล็อกของฉันในเบราว์เซอร์ต่างๆ ความช้าในการสร้างภาพหน้าจออาจเป็นข้อเสียเปรียบเพียงอย่างเดียวของบริการนี้. ภาพด้านบนแสดงภาพหน้าจอของ hongkiat.com ใน: Safari 2.0 บน Mac OS Iceweasel 2.0.0.4 บน Linux Firefox...

การแปล OCR ยังคงไม่สมบูรณ์แบบ แต่ได้ปรับปรุงอย่างรวดเร็วในช่วงไม่กี่ปีที่ผ่านมา ผู้นำทางคือ Tesseract เครื่องมือแปล เปิดแหล่งที่มาในปัจจุบัน C++. แม้ว่านี่จะเป็นห้องสมุดที่น่าทึ่ง แต่ก็ จำกัด เฉพาะซอฟต์แวร์ โชคดีที่มีคนสร้างพอร์ตของ Tesseract เป็น JavaScript ซึ่งเรียกว่า Tesseract.js มัน รองรับได้ถึง 60 ภาษา และแม้ว่ามันจะไม่สมบูรณ์แบบ แต่ก็ทำงานได้ดี. การติดตั้งและตั้งค่าเป็นเรื่องง่ายที่คุณสามารถทำได้ กำหนดเป้าหมายองค์ประกอบภาพใด ๆ บนหน้าและเรียกใช้ Tesseract.recognize...

คู่มือการใช้ชีวิตสไตล์ คือ เอกสารประกอบขององค์ประกอบ UI และรูปแบบ รวบรวมจากไซต์หรือแอปพลิเคชันโดยมีวัตถุประสงค์เพื่อให้นักพัฒนาซอฟต์แวร์สามารถใช้งานได้ สไตล์ที่สอดคล้องกันตลอดทั้งโครงการ. ในอดีตนักพัฒนาสร้างคู่มือสไตล์ด้วยตนเองซึ่งทำงานมาก หลังจากนั้นครู่หนึ่งพวกเขาเริ่มทำให้เวิร์กโฟลว์อัตโนมัติและเครื่องมือแนะนำสไตล์ซึ่งเปลี่ยนรหัสส่วนหน้าให้เป็น ไลบรารี UI ที่มีการจัดการอย่างดี ได้เริ่มปรากฏ. ไกด์การใช้ชีวิตแตกต่างจาก คู่มือสไตล์รหัส, เนื่องจากหลังมีกฎเกี่ยวกับวิธีการเขียนรหัสที่สามารถอ่านได้และบำรุงรักษาได้ในขณะที่แนวทางการใช้ชีวิตคือ คอลเล็กชันของรูปแบบส่วนหน้าเช่นคลาส CSS สำหรับปุ่มวิดเจ็ตและองค์ประกอบการพิมพ์. คู่มือสไตล์รหัสมั่นใจ ความสอดคล้องของรหัส, ในขณะที่คู่มือการใช้ชีวิตมั่นใจ ความมั่นคงทางสายตา ทั่วทั้งไซต์. ในโพสต์นี้เราได้รวบรวม 10 เครื่องมือที่มีประโยชน์ที่สามารถช่วยคุณได้ สร้างคู่มือสไตล์การใช้ชีวิตของคุณเอง. 1. Stylify...

ในอดีตเราได้ทำการคัดลอก flexbox และพื้นฐานของวิธีการใช้งาน แต่ที่จริงแล้วการใช้ flexbox กับเวิร์กโฟลว์ของคุณนั้นเป็นสิ่งที่ท้าทายเพราะมันเป็นการเพิ่มที่ซับซ้อนให้กับสเป็ค CSS. ด้วย Flexbox Froggy คุณทำได้ เรียนรู้พื้นฐานทั้งหมดของ flexbox ด้วยเว็บเกมแสนสนุกที่เกี่ยวข้องกับกบและลิลลี่. ฉันรู้ว่ามันฟังดูบ้า แต่นี่เป็นเว็บแอพที่ยอดเยี่ยมอย่างจริงจัง. คุณเริ่มที่ระดับ 1 และ ค่อยๆทำงานผ่าน 24 ระดับที่แตกต่างกัน การสอนการวางแนว flexbox ในหลาย ๆ ด้าน ระดับเริ่มต้นง่ายโดยขอให้คุณ จัดกบหนึ่งหรือสองตัวตามภาชนะเดียว. บทเรียนตอนต้นยังมีเคล็ดลับและคำแนะนำที่จะช่วยคุณไปตลอดทาง....

หนึ่งในเครื่องมือออกแบบกราฟิกที่ใช้งานได้ในการสร้างโลโก้ที่ยอดเยี่ยมคือสัญลักษณ์.. เมื่อออกแบบโลโก้ บริษัท สิ่งหนึ่งที่สำคัญคือการกำหนดเอกลักษณ์คือเพื่อแสดงให้เห็นอย่างชัดเจนว่า บริษัท คือใครและต้องการรับรู้อย่างไร โลโก้ที่ดำเนินการอย่างเชี่ยวชาญเป็นรูปธรรมแสดงตัวตนของผู้ใช้และผู้ที่มีปฏิสัมพันธ์กับโลโก้ ตอนนี้ในฐานะนักออกแบบเราต้องยอมรับและเคารพในสิ่งที่ทำให้โลโก้มีอำนาจนี้เพื่อกำหนด - เป้าหมายของเราคือการสร้างโลโก้ที่มีคุณภาพสูงและมีประสิทธิภาพสำหรับลูกค้าของเรา. สัญลักษณ์, สำหรับเราในโลกแห่งการออกแบบนั้นมักจะเป็นการรวมกันขององค์ประกอบกราฟิกที่เป็นตัวแทนของบางสิ่งบางอย่างกับเราในคำอื่น ๆ ภาพที่บอกเล่าเรื่องราว Kenneth Burke นักทฤษฎีและนักวิจารณ์ในศตวรรษที่ยี่สิบอธิบายมนุษย์ว่า “การใช้สัญลักษณ์การสร้างสัญลักษณ์และสัตว์ในทางที่ผิด” ความสนใจของเราในฐานะนักออกแบบควรอยู่ในวิธีการใช้สัญลักษณ์อย่างถูกต้องและเพื่อหลีกเลี่ยงการบิดเบือนความจริง! สิ่งสุดท้ายที่เราต้องการทำคือใช้สัญลักษณ์อย่างไม่ถูกต้องและทำให้ลูกค้าดูไม่ดี (ขวานเป็นสัญลักษณ์ที่คำนึงถึงในสถานการณ์ที่โชคร้ายนี้) ผลกระทบของสัญลักษณ์ภายในโลโก้ ในโลกที่ผู้คนและ บริษัท ได้รับการยอมรับมากขึ้นในสิ่งที่พวกเขาเป็นตัวแทนมากกว่าสิ่งที่พวกเขาเป็นสัญลักษณ์ได้กลายเป็นสิ่งสำคัญมากขึ้นและการใช้งานของพวกเขาที่ซับซ้อนมากขึ้น. บางคนอาจโต้แย้งว่าโลโก้เป็นสัญลักษณ์จริง แต่ไม่ง่ายอย่างนั้น โลโก้จะกลายเป็นสัญลักษณ์สำหรับตัวตนของ บริษัท และในขณะเดียวกันก็ใช้สัญลักษณ์ที่มีอยู่แล้วเพื่อทำงานของมัน....

ในโพสต์เมื่อเร็ว ๆ นี้ฉันได้รวบรวมไลบรารี่แอนิเมชั่นที่สนุกสนานสำหรับปุ่มตัวเลือกที่กำหนดเอง, ขับเคลื่อนโดย CSS. ห้องสมุดฟรีนั้นเปิดตัวโดย 720kb และเห็นอย่างรวดเร็ว ทางเลือกการติดตามที่เรียกว่า Checkbox.css. วิธีนี้ใช้งานได้ในลักษณะเดียวกันยกเว้น restyles และเคลื่อนไหวช่องทำเครื่องหมาย HTML. ห้องสมุดนี้มาพร้อมกับชุดของห้องสมุดด้วย วัตถุประสงค์ที่แตกต่างกันสามประการ: Radiobox.css - ภาพเคลื่อนไหววิทยุที่กำหนดเอง Checkbox.css - ภาพเคลื่อนไหวช่องทำเครื่องหมายที่กำหนดเอง Checked.css - สไตล์และภาพเคลื่อนไหวองค์ประกอบที่เลือกอยู่ (วิทยุและช่องทำเครื่องหมาย) ทั้งหมดนี้พัฒนาโดยทีมงานเดียวกันและทำงานในลักษณะเดียวกัน แต่คุณจะต้อง รวมแต่ละห้องสมุดเป็นรายบุคคล ถ้าคุณต้องการได้รับผลเต็มรูปแบบ....

นักพัฒนาที่ใช้เวลาในโครงการขนาดใหญ่เข้าใจถึงความสำคัญของการแสดงความคิดเห็นเกี่ยวกับโค้ด เมื่อคุณสร้างคุณสมบัติมากมายในแอพพลิเคชั่นเดียวกันสิ่งต่าง ๆ มักจะมีความซับซ้อน มีบิตข้อมูลจำนวนมากรวมถึงฟังก์ชั่นการอ้างอิงตัวแปรค่าส่งคืนพารามิเตอร์ ... คุณคาดหวังที่จะรักษาอย่างไร? ไม่น่าแปลกใจเลยที่การแสดงความคิดเห็นรหัสของคุณเป็นสิ่งจำเป็นทั้งโครงการเดี่ยวและโครงการ แต่นักพัฒนาหลายคนไม่ทราบว่าจะทำอย่างไรกับกระบวนการนี้ ฉันได้แสดงกลวิธีส่วนตัวบางอย่างของฉัน การสร้างความคิดเห็นโค้ดที่จัดรูปแบบเรียบร้อย. เทมเพลตมาตรฐานและข้อคิดเห็นจะแตกต่างกันระหว่างนักพัฒนา แต่ท้ายที่สุดคุณควรพยายามทำ ทำความสะอาดและแสดงความคิดเห็น เพื่ออธิบายเพิ่มเติมเกี่ยวกับพื้นที่ที่สับสนในรหัสของคุณ. เราควรเริ่มพูดคุยเกี่ยวกับความแตกต่างบางประการในการจัดรูปแบบความคิดเห็น สิ่งนี้จะช่วยให้คุณมีความคิดที่ดีขึ้นว่ารายละเอียดของคุณจะเป็นอย่างไรกับรหัสโครงการ หลังจากนั้นฉันจะเสนอเคล็ดลับและตัวอย่างเฉพาะซึ่งคุณสามารถเริ่มใช้งานได้ทันที! สไตล์ความคิดเห็น: ภาพรวม ควรสังเกตว่าแนวคิดเหล่านี้นำเสนอเป็นเพียง แนวทาง ที่มีต่อความคิดเห็นที่สะอาด ภาษาการเขียนโปรแกรมส่วนบุคคลไม่ได้กำหนดแนวทางหรือข้อกำหนดสำหรับวิธีการตั้งค่าเอกสารของคุณ. ดังที่กล่าวไปแล้วผู้พัฒนาในยุคปัจจุบันได้รวมตัวกันเพื่อจัดรูปแบบระบบการแสดงความคิดเห็นโค้ดของตนเอง ฉันจะเสนอรูปแบบหลัก ๆ สองสามอย่างและดูรายละเอียดเกี่ยวกับวัตถุประสงค์ของพวกเขา. การแสดงความคิดเห็นแบบอินไลน์ ทุกข้อเสนอภาษาการเขียนโปรแกรมเดียวจริง...

คำกระตุ้นการตัดสินใจ ในการออกแบบเว็บเป็นคำที่ใช้สำหรับองค์ประกอบในหน้าเว็บที่เรียกร้องการกระทำจากผู้ใช้ (คลิก, การโฮเวอร์, ฯลฯ ) วันนี้เรากำลังจะไป สร้างปุ่มเรียกร้องให้ดำเนินการที่มีประสิทธิภาพและยอดเยี่ยมด้วย CSS และ jQuery ที่ดึงดูดความสนใจของผู้ใช้และดึงดูดให้เขาคลิก . ในบทช่วยสอนนี้เราจะอธิบายทุกบรรทัดของรหัสที่ใช้พร้อมรายละเอียดและหวังว่าจะเป็นประโยชน์สำหรับคุณ บทช่วยสอนต่อไปนี้ใช้ HTML, CSS และ jQuery ด้วยระดับความยาก ผู้เริ่ม และเวลาที่คาดว่าจะเสร็จโดยประมาณ 45 นาที. ดาวน์โหลดบทแนะนำ (.zip) หรือ การสาธิต ส่วนที่ฉัน -...