สูตร HTML5: ดำดิ่งสู่การเข้ารหัส HTML5 พร้อมตัวอย่างที่ชัดเจน แหล่งข้อมูลที่ดีที่สุดสำหรับการเรียนรู้ html และ css

เพื่อช่วยเหลือคุณ เรา "ได้รวบรวมแหล่งข้อมูลต่างๆ ที่จะบอกคุณเกี่ยวกับสิ่งที่คุณจำเป็นต้องรู้ ช่วยเหลือคุณเมื่อคุณ" ติดอยู่ และช่วยให้คุณเพิ่มพูนทักษะของคุณได้อย่างรวดเร็ว

01. สูตรโกง HTML

ข้อมูลสรุป HTML ที่มีประโยชน์อย่างไม่น่าเชื่อนี้มีรายการองค์ประกอบ HTML ทั้งหมด พร้อมด้วยคำอธิบาย ตัวอย่างโค้ด และการแสดงตัวอย่างแบบสด คุณสามารถจัดระเบียบแท็กตามตัวอักษรหรือตามหมวดหมู่ และแม้แต่ดาวน์โหลดเป็น PDF เพื่ออ้างอิงในภายหลัง

02. สูตรโกง CSS

หากคุณเพิ่งเริ่มต้นกับ CSS การจำแท็กและคำศัพท์ทางเทคนิคทั้งหมดอาจเป็นเรื่องที่น่าวิตกอย่างมาก แต่อย่าปล่อยให้สิ่งนั้นทำให้คุณผิดหวัง เก็บเอกสารข้อมูลสรุปที่เป็นประโยชน์นี้ไว้หรือพิมพ์ออกมา เพื่อค้นหาองค์ประกอบที่คุณต้องการได้อย่างรวดเร็ว

03. CSS-เคล็ดลับ

เมื่อเปิดตัวในปี 2550 ไซต์นี้เกี่ยวกับ CSS ตอนนี้ "ขยายออกไปเล็กน้อย แต่ก็ยังมีข้อมูลและแบบฝึกหัดที่เป็นประโยชน์มากมายเกี่ยวกับ CSS และ HTML ให้คุณได้ติดตาม มันคุ้มค่าแก่การเยี่ยมชม

04. CSS พ่อมดแม่มด

CSS นั้นง่ายต่อการเรียนรู้ แต่ยากที่จะเชี่ยวชาญ Harry Roberts" CSS Wizardry มีบทความที่ดีที่สุดบางส่วนเกี่ยวกับสาระสำคัญของการเขียน CSS ที่ปรับขนาดได้และบำรุงรักษาได้ เช่น วิธีการของ BEM และการปรับโครงสร้างใหม่ (ซึ่งเป็นส่วนที่ยากที่สุด)

05. ปากกายอดนิยมประจำปีของ CodePen

หนึ่งในวิธีที่ดีที่สุดในการเรียนรู้ HTML/CSS คือการแยกแยะการสาธิตเจ๋งๆ ที่คุณค้นพบ และสุดยอดปากกาประจำปีของ CodePen ก็เหมาะสำหรับสิ่งนั้น การสาธิตมีตั้งแต่เจ๋งๆ ไปจนถึง "ฉันไม่รู้ด้วยซ้ำว่าเป็นไปได้" UI แบบบูรณาการของ CodePen สำหรับการเจาะลึกโค้ดก็สะดวกเช่นกัน ในทำนองเดียวกัน คุณอาจต้องการดูโพสต์ของเรา

06. การออกแบบเว็บไซต์รายสัปดาห์

HTML และ CSS มีการพัฒนาอย่างต่อเนื่อง เพื่อให้ทันกับวิธีการและคุณสมบัติล่าสุด เราขอแนะนำจดหมายข่าวทางอีเมลนี้ มาสัปดาห์ละครั้ง ซึ่งบ่อยพอที่จะอ่านจริงๆ

07. การออกแบบที่ตอบสนองต่อทุกสัปดาห์

Responsive เป็นส่วนสำคัญของชุดเครื่องมือของนักออกแบบเว็บไซต์ในปัจจุบัน และเพื่อช่วยให้คุณติดตามข่าวสารล่าสุด Justin Avery ใช้เวลาหลายชั่วโมงทุกสัปดาห์ในการดูแลจัดการเนื้อหาการออกแบบเว็บไซต์ที่ตอบสนองได้ดีที่สุดและสัมภาษณ์ผู้นำในอุตสาหกรรม และส่งเป็นจดหมายข่าวทุกๆ วันศุกร์ (คุณอาจชอบโพสต์ของเราใน .)

08. สร้างเค้าโครงที่ไม่ใช่สี่เหลี่ยมด้วยรูปร่าง CSS

…แม้ว่าไวยากรณ์ของ HTML จะค่อนข้างง่ายในการเรียนรู้ แต่…ยังมีองค์ประกอบ คุณลักษณะ และ…แนวคิดอื่นๆ อีกมากที่คุณจะต้องเรียนรู้และติดตาม…ในขณะที่หลักสูตรนี้มีวัตถุประสงค์เพื่อแนะนำ คุณรู้ถึงแก่นแท้ของ HTML จริง ๆ แล้ว มัน...ไม่ได้ออกแบบมาเพื่อสอนคุณทุก ๆ องค์ประกอบและแอตทริบิวต์ที่มีอยู่ ...ด้วยเหตุนี้ ฉันจึงต้องการให้ทรัพยากร HTML ออนไลน์แก่คุณสองสามอย่าง...ที่สามารถช่วยคุณได้อย่างแท้จริง คุณเริ่มเรียนรู้ HTML และ...สามารถใช้เป็นข้อมูลอ้างอิงอันมีค่าได้ในภายหลัง ขณะที่คุณกำลังเขียนเพจของคุณเอง...ตอนนี้ เราจะมาเริ่มกันที่ข้อมูลจำเพาะของตัวเอง...

และนี่คือบางสิ่ง เอกสารสองฉบับที่คุณควรบุ๊กมาร์กไว้อย่างแน่นอน…ดังนั้น นี่คือ HTML5 เวอร์ชัน W3Cs…คุณจะเห็นว่าพวกเขามีเวอร์ชัน Publisher ล่าสุด…คุณสามารถไปดูแบบร่างของบรรณาธิการได้…ถ้าคุณ ต้องการดูว่า "กำลังจะลงมา ลงมาจากท่อ…และนี่ค่อนข้างใหญ่…ถ้าฉันเลื่อนลงมา คุณจะเห็นว่านี่เป็นเพียงสารบัญ…และฉันจะไม่แม้แต่จะเลื่อนดู ผ่านพวกเขาทั้งหมด…

เลื่อนการถอดเสียงอัตโนมัติต่อ

อัปเดต

3/30/2017

ปล่อยแล้ว

3/16/2015

HTML เป็นภาษาโปรแกรมที่ขับเคลื่อนเว็บ และเช่นเดียวกับภาษาอื่นๆ เมื่อคุณเชี่ยวชาญแล้ว คุณสามารถเริ่มสร้างเนื้อหาของคุณเองได้ ไม่ว่าจะเป็นเว็บไซต์ธรรมดาหรือเว็บแอปพลิเคชันที่ซับซ้อน หลักสูตรนี้ให้ข้อมูลเชิงลึกเกี่ยวกับสิ่งสำคัญ: ไวยากรณ์ของ HTML และแนวทางปฏิบัติที่ดีที่สุดสำหรับ ผู้เขียนเจ้าหน้าที่อาวุโส James Williamson ตรวจสอบโครงสร้างของเอกสาร HTML ทั่วไป และแสดงวิธีแบ่งหน้าและจัดรูปแบบเนื้อหาของคุณด้วย HTML.Plus เรียนรู้วิธีสร้างลิงก์และรายการ และค้นหาวิธีที่ HTML ทำงานร่วมกับ CSS และ JavaScript เพื่อสร้างสื่อสมบูรณ์ ประสบการณ์ผู้ใช้ที่มีส่วนร่วม

หัวข้อรวมถึง:

• ทำไม HTML ถึงสำคัญ?
• สำรวจเอกสาร HTML
• การจัดรูปแบบเนื้อหา
• แสดงภาพ
• การใช้องค์ประกอบ nav, article และ div
• การเชื่อมโยงไปยังหน้าและเนื้อหาที่ดาวน์โหลดได้
• การสร้างรายการ
• การควบคุมสไตล์ (ฟอนต์ สี และอื่นๆ)
• การเขียนสคริปต์พื้นฐาน

ใครในโลกจะหวานกว่าใคร หน้าแดงและน่าปรารถนา? อย่าคิดอะไรหยาบคาย ฉันหมายถึงภาษามาร์กอัปเวอร์ชันใหม่ - HTML5 เวอร์ชันล่าสุดเบราว์เซอร์สมัยใหม่เข้าใจคุณลักษณะบางอย่างของ HTML5 อยู่แล้ว ซึ่งหมายความว่าได้เวลาเริ่มใช้งานในโครงการของคุณแล้ว

HTML5 คืออะไร?

เมื่อมองแวบแรก HTML5 เป็นเพียง รุ่นใหม่ภาษามาร์กอัป อย่างไรก็ตาม คำนี้มีความหมายแตกต่างออกไป การพิจารณา HTML5 โดยไม่กล่าวถึง CSS3 เดียวกันนั้นเป็นเรื่องที่ไร้สาระ เนื่องจากการพัฒนาเว็บแอปพลิเคชันที่ทันสมัยอย่างแท้จริงนั้นเป็นสิ่งที่ขาดไม่ได้ เราต้องไม่ลืมเกี่ยวกับ JavaScript ใช้การเรียกไปยัง Rich API ที่อธิบายไว้ในมาตรฐาน HTML5 สรุปทั้งหมดข้างต้น คำจำกัดความแนะนำตัวเอง: HTML5 เป็นชุดของเทคโนโลยี / มาตรฐานสมัยใหม่ (JS, HTML5, CSS3 และอื่น ๆ ) ที่ใช้ในการพัฒนาเว็บแอปพลิเคชัน

ประวัติย่อ

HTML5 ไม่ได้มาจากไหน การพัฒนาเริ่มขึ้นในปี 2550 กลุ่มที่สร้างขึ้นเป็นพิเศษจากกลุ่ม W3C มีหน้าที่รับผิดชอบในกระบวนการพัฒนา แต่คุณสมบัติหลายอย่างของ HTML5 นั้นถูกประดิษฐ์ขึ้นโดยเป็นส่วนหนึ่งของมาตรฐาน Web Application 1.0 และได้ทำการตรวจสอบมาตั้งแต่ปี 2547 ดังนั้นในความเป็นจริง HTML5 จึงไม่ใช่เทคโนโลยีใหม่อย่างที่เห็นในแวบแรก

เวอร์ชันร่างแรกของข้อกำหนด HTML5 พร้อมใช้งานในวันที่ 22 มกราคม 2551 สามปีผ่านไป แต่สเปครุ่นสุดท้ายยังไม่พร้อมและไม่น่าจะทันในปีหรือสองปีหน้า ช่วงเวลาที่น่าเศร้านี้ทำให้นักพัฒนาต้องใช้คุณสมบัติใหม่ในโครงการของตนอย่างระมัดระวัง ข้อกำหนดสามารถเปลี่ยนแปลงได้ง่ายและไม่ใช่ทั้งหมด เบราว์เซอร์สมัยใหม่(ไฟร์ฟ็อกซ์ 4, Google Chrome 10, IE9, Opera 11) รองรับคุณสมบัติใหม่อย่างสมบูรณ์

สูตรอาหารเพื่อสุขภาพ

คุณสามารถพูดคุยเกี่ยวกับทฤษฎี HTML5 ได้เป็นเวลานาน แต่เกณฑ์ของเราเรียกว่า "การเข้ารหัส" ดังนั้นฉันขอแนะนำให้คุณรู้สึกถึงความเป็นไปได้ของมาตรฐานในทางปฏิบัติ ฉันไม่ได้สนใจที่จะสร้างสูตรอาหารสุดออริจินัล แต่ตัดสินใจยกตัวอย่างสิ่งที่มีประโยชน์จริง ๆ และคุณสามารถทำได้และควรใช้บนเว็บไซต์ของคุณตอนนี้ งั้นไปกัน.

สูตรที่ 1: เปิดการลากและวางจนสุด

ข้อดีอย่างหนึ่ง (คุณไม่ควรใช้เครื่องดื่มชูกำลังมากขนาดนั้น เพราะควรมีคำว่า "ชิป" - ed.) HTML5 คือความสามารถในการใช้ File API และ Drag and Drop API

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

หลังจากนั้นไม่นาน ช่างฝีมือก็เริ่มปั้น apploaders บนแฟลช ซึ่งมีฟังก์ชันการทำงานมากกว่า แต่มีข้อเสียเปรียบอย่างร้ายแรง นั่นคือต้องใช้แฟลชที่ติดตั้งไว้ นอกจากนี้ ในทั้งสองกรณี ผู้ใช้ไม่สามารถเพิ่มไฟล์ที่จะถ่ายโอนได้ด้วยการลากและวางเมาส์ลงบนหน้า

แต่มีการนำเทคโนโลยี Drag & Drop มาใช้ในระบบตลอดเวลา โดยส่วนตัวแล้วฉันต้องการเพียงแค่เลือกไฟล์ที่จำเป็นและโยนมันลงบนหน้าด้วยการปัดหนูเบา ๆ วิธีนี้สะดวกกว่าการค้นหาไฟล์โดยใช้กล่องโต้ตอบมาตรฐาน

HTML5 ได้ทำการปรับเปลี่ยนของตัวเอง และตอนนี้ไม่มีอะไรขัดขวางคุณจากการจัดระเบียบการลากและวางเต็มรูปแบบสำหรับการถ่ายโอนไฟล์ไปยังเพจ Googler ใน Gmail เป็นคนแรกที่ใช้คุณลักษณะนี้ หากคุณใช้ gmyla คุณอาจสังเกตเห็นบริเวณที่คุณสามารถลากไฟล์เพื่อแนบกับจดหมายได้ โดยส่วนตัวแล้ว ฉันใช้ฟังก์ชันนี้อยู่ และตอนนี้ฉันจะแสดงให้คุณเห็นถึงวิธีการกระตุ้นสิ่งเดียวกันสำหรับโครงการของคุณ โปรเจกต์ของเราจะประกอบด้วยไฟล์สามไฟล์: example.html, style.css และ scripts.js แน่นอน เราอาจจำกัดตัวเองไว้ที่ไฟล์ html หนึ่งไฟล์ แต่จากนั้นรหัสก็จะไม่สามารถอ่านได้ ไม่จำเป็นต้องผสม HTML กับ JS หรือ CSS เป็นการดีกว่าที่จะแบ่งทุกอย่างออกเป็นไฟล์แล้วทำงานกับมันอย่างใจเย็น ก่อนอื่นเรามาเตรียมโครงสร้างของแอปพลิเคชันของเรากันก่อน สร้างไฟล์ sample.html และเขียนลงไป:

มีเดีย="ทั้งหมด" href="style.css" />

เพื่อความสะดวกในการเขียนโค้ด JavaScript ฉันได้รวมไลบรารี jquery ไว้ด้วย หลังจากนั้นเขาอธิบายโครงสร้างของเอกสาร html ในอนาคต มันง่ายที่จะขายหน้า - เราจำเป็นต้องอธิบายฟิลด์ที่ผู้ใช้ต้องลากและวางไฟล์ ต้องการคอนเทนเนอร์ div เดียวเท่านั้น หากคุณเปิดหน้านี้ในเบราว์เซอร์ คุณจะไม่เห็นสิ่งที่ดี ในการทำให้ฟิลด์ของเรามองเห็นได้ เราต้องจัดรูปแบบด้วย CSS เปิดไฟล์ style.css และเขียนโค้ดต่อไปนี้ลงไป:

#กล่อง(
ความกว้าง: 500px
ความสูง: 300px;
เส้นขอบ: 2px ประ #000000;
สีพื้นหลัง: #FCFFB2;
จัดข้อความ: กึ่งกลาง;
สี: #3D91FF;
ขนาดตัวอักษร: 2em
ตระกูลแบบอักษร: Verdana, sans-serif;

moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
# ฉลาก (
ตำแหน่ง: ญาติ;
ด้านบน: 2%;
}

ตัวระบุ "กล่อง" คือคอนเทนเนอร์ในอนาคตของเราสำหรับรับไฟล์ (ผู้ใช้ต้องลากเอกสารไปยังพื้นที่นี้) เพื่อให้ผู้ใช้ไม่พลาด ฉันทำให้พื้นที่ใหญ่ขึ้นและเลือกเส้นประเป็นตัวเลือกการวางกรอบ - เส้นประ เส้นประปกติดูไม่ดี ดังนั้นฉันจึงตั้งค่าสำหรับคุณสมบัติทันที: -moz-border-radius และ -webkitborderradius ตอนนี้คุณสามารถเปิดเพจที่สร้างขึ้นในเบราว์เซอร์และประเมินมุมมองทั่วไปได้

อย่างไรก็ตาม หากคุณพยายามลากบางสิ่งในตอนนี้ จะไม่มีอะไรน่าสนใจเกิดขึ้น ไฟล์ที่ลากก็จะเปิดขึ้นในเว็บเบราว์เซอร์ แค่นั้น รหัส JavaScript ชิ้นเล็ก ๆ จะช่วยแก้ไขสถานการณ์:

$(เอกสาร).พร้อม(ฟังก์ชั่น() (

// เพิ่มตัวจัดการเหตุการณ์

Var mybox = document.getElementById("กล่อง")

Mybox.addEventListener("dragent", dragEnter, เท็จ);

Mybox.addEventListener("dragexit", dragExit, เท็จ);

Mybox.addEventListener("ลากโอเวอร์", ลากโอเวอร์, เท็จ);

Mybox.addEventListener("วาง", วาง, เท็จ);
});
ฟังก์ชัน dragEnter(evt) (

Evt.stopPropagation();

Evt.preventDefault();
}
ฟังก์ชัน dragExit(evt) (

Evt.stopPropagation();

Evt.preventDefault();
}
ฟังก์ชัน dragOver(evt) (

Evt.stopPropagation();

Evt.preventDefault();
}
ฟังก์ชันดรอป (evt) (

Evt.stopPropagation();

Evt.preventDefault();

Varfiles = evt.dataTransfer.files;

varcount = ไฟล์ความยาว;

ถ้า (นับ > 0)

HandleFiles (ไฟล์);
}
ฟังก์ชั่น handleFiles (ไฟล์) (

// รับไฟล์แรก

// หากคุณต้องการทำงานกับหลาย ๆ คน

//files จากนั้นคุณต้องจัดการการค้นหาที่นี่

ไฟล์ var = ไฟล์;

Document.getElementById("label").innerHTML =
"ติด: " + file.name;

varreader = ใหม่ FileReader ();

Reader.onprogress = handleReaderProgress;

Reader.readAsDataURL (ไฟล์);
}
ฟังก์ชัน handleReaderProgress(evt) (

ถ้า (evt.lengthComputable)(

ถ้า (evt.loaded = evt.total) (

alert("กำลังโหลด...");
}
}
}

เมื่อมองแวบแรก โค้ดอาจดูยุ่งยากและเข้าใจยาก แต่อย่างน้อยผู้ที่คุ้นเคยกับ JavaScript และ jQuery อย่างน้อยควรเข้าใจทันทีว่าเกิดอะไรขึ้น ในตอนแรกฉันกำหนดเหตุการณ์ที่ฉันสนใจ สำหรับแต่ละฟังก์ชัน ฉันอธิบายถึงฟังก์ชันที่แยกจากกัน ตัวอย่างเช่น เหตุการณ์ dragExit เกิดขึ้นเมื่อผู้ใช้เลื่อนเคอร์เซอร์ของเมาส์ออกจากองค์ประกอบที่กำลังลาก หากผู้ใช้ลากไฟล์ ฟังก์ชัน handleFiles() จะเข้าควบคุม

ในนั้นฉันจงใจอ้างถึงไฟล์แรก (ไฟล์) และเริ่มทำงานกับมัน โปรดทราบว่าผู้ใช้สามารถลากไฟล์หลายไฟล์พร้อมกันได้ หากแอปพลิเคชันของคุณควรสามารถจัดการกับสถานการณ์ดังกล่าวได้ เราจะจัดระเบียบการแจงนับของอาร์เรย์ไฟล์ทั้งหมด ฟังก์ชัน handleFiles() คือที่ซึ่งความสนุกทั้งหมดเกิดขึ้น

อันดับแรก ฉันแสดงองค์ประกอบป้ายกำกับ (จำชื่อ "ลากไฟล์ของคุณมาที่นี่" ได้ไหม) ชื่อของไฟล์ที่ผู้ใช้ลากไปยังฮอตสปอต จากนั้นฉันเริ่มอ่านโดยใช้วัตถุประเภท FileReader () คุณสามารถอ่านเพิ่มเติมได้ในบทความนี้: html5rocks.com/tutorials/file/dndfiles ในกรณีนี้ ฉันกำหนดตัวจัดการเหตุการณ์ onProgress สำหรับวัตถุประเภท FileReader() เหตุการณ์นี้จะถูกเรียกทุกครั้งที่มีการอ่านข้อมูล ในตัวจัดการเอง ฉันตั้งเงื่อนไข: หากจำนวนข้อมูลที่ดาวน์โหลดเท่ากับขนาดของไฟล์ การอ่านจะเสร็จสมบูรณ์ และคุณสามารถแสดงข้อความยินดีได้

สูตรที่ 2: ดื่มเบียร์ ดูวิดีโอ ฟังเพลงร็อก

ก่อนการกำเนิดของ HTML5 การดูวิดีโอบนเว็บนั้นดำเนินการโดยใช้โปรแกรมเล่นแฟลชทุกประเภท นี่ไม่ได้หมายความว่าการดูวิดีโอด้วยวิธีนี้ไม่สะดวก มีแต่ปัญหาเรื่องความปลอดภัย (ล่าสุด แฟลชเพลเยอร์เต็มไปด้วยช่องโหว่) และจำเป็นต้องติดตั้งปลั๊กอินเอง มาตรฐาน HTML5 นำเสนอโซลูชันที่สวยงาม - ความสามารถในการเล่นเนื้อหาวิดีโอและเสียงในตัว

หลายคนอาจเดาได้ว่าฉันกำลังพูดถึงแท็ก

ควรมีวิดีโอที่นี่ หากคุณเห็นข้อความนี้ แสดงว่าเบราว์เซอร์ของคุณไม่รองรับมาตรฐานใหม่

โปรดทราบว่าในตัวอย่างสำหรับแท็ก

มันจะมีประโยชน์อะไร? หรือคุณสามารถแทรกโลโก้ของบริษัท/โครงการของคุณเป็นรูปภาพได้ แท็ก

สูตร #3: ตอนนี้คุณอยู่ที่ไหน (geolocation API)

Geolocation API - อินเทอร์เฟซการเขียนโปรแกรมสำหรับกำหนดพิกัดของผู้ใช้ จากข้อมูลที่ได้รับ ทำให้ง่ายต่อการระบุตำแหน่งของผู้ใช้ เช่น บน Google Maps คุณสมบัตินี้สามารถใช้ได้ที่ไหน? ใช่ มีหลายที่! ตัวอย่างเช่น ผู้พัฒนาบริการไมโครบล็อก Twitter ยอดนิยมใช้ Geolocation API ในเว็บอินเตอร์เฟสของไคลเอนต์ Twitter หากผู้ใช้อนุญาตให้รับข้อมูลเกี่ยวกับตำแหน่งของเขา เมืองที่เขาอยู่ในขณะนี้จะถูกเพิ่มไปยังทวีตทั้งหมดของเขา

ฉันไม่สงสัยเลยว่าตอนนี้คุณกำลังทรมานกับคำถาม: "GAPI รับข้อมูลตำแหน่งจากที่ใด" อย่าคิดด้วยซ้ำว่าดาวเทียมสอดแนมและสิ่งของอื่น ๆ ที่เกี่ยวข้องกับคดีนี้ ทุกอย่างธรรมดามากขึ้น - แพ็คเกจข้อมูลสำหรับการวิเคราะห์ขึ้นอยู่กับข้อมูลเกี่ยวกับที่อยู่ IP, ฮอตสปอต Wi-Fi ที่ใกล้ที่สุด, GPS (หากคุณมีอุปกรณ์), ID เซลล์ GSM และอื่น ๆ หากคุณสนใจในทฤษฎีและการปฏิบัติในการรับพิกัดโดยประมาณจากแหล่งข้อมูลข้างต้น ฉันแนะนำให้คุณเปิดไฟล์ ][ และค้นหาบทความของ Step ในหัวข้อนี้ ซึ่งเขาได้วิเคราะห์ส่วนทางทฤษฎีอย่างละเอียด และยังให้ภาพรวม ของซอฟต์แวร์ที่เกี่ยวข้อง มาดูตัวอย่างการใช้ GAPI กัน ทุกอย่างง่ายและชัดเจนมาก:

ก่อนที่จะลองรับพิกัด คุณต้องแน่ใจว่าเบราว์เซอร์รองรับ GAPI หากเมธอดตำแหน่งทางภูมิศาสตร์ส่งคืนค่า True ทุกอย่างเรียบร้อยดีและคุณสามารถลองรับพิกัดได้ ในการทำเช่นนี้ เราใช้เมธอด getGurrentPosition ของวัตถุนำทาง หากสำเร็จเราจะได้พิกัดที่จะไปตรงกับเอกสาร

สูตร #4: ฐานข้อมูลในเบราว์เซอร์

เมื่อพัฒนาเว็บแอปพลิเคชัน เราคุ้นเคยกับการใช้ฐานข้อมูล MySQL, SQLite เป็นผลิตภัณฑ์ที่โปรแกรมเมอร์ทุกคนคุ้นเคย HTML เวอร์ชันที่ห้ามอบของขวัญใหม่ให้กับเรา นั่นคือความสามารถในการใช้ฐานข้อมูล SQLite แบบสแตนด์อโลน หยุด!

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

ตัวอย่างเช่น IE9 และ FF4 ยังไม่มีโอกาสดังกล่าว ดังนั้นคุณสามารถทำความคุ้นเคยกับชิปที่ใช้งานได้จริงใน Google Chrome เท่านั้น ฉันจะไม่ยกตัวอย่างโค้ดจริง แต่จะแสดงเฉพาะหลักการทำงานทั่วไป:

this.db = openDatabase("xakep", "1.0", "ทดสอบ", 8192);
tx.executeSql("สร้าง mytable หากไม่มีอยู่" +
"เช็คอิน (รหัสจำนวนเต็มคีย์หลัก asc, field_number_one สตริง)",
, function() ( console.log("คำขอเสร็จสมบูรณ์"); ));
);

เมื่อพิจารณาจากตัวอย่างข้างต้นอย่างใกล้ชิดมากขึ้น คุณจะสังเกตเห็นว่าโดยทั่วไปแล้ว การทำงานกับฐานข้อมูลแบบฝังจะเหมือนกับ SQLite ทั่วไปทุกประการ: เราเปิดฐานข้อมูล เตรียมข้อความค้นหา และดำเนินการ

HTML5.Shutdown()

ไม่ว่าคุณจะใช้ HTML5 ในโครงการของคุณหรือไม่นั้นขึ้นอยู่กับคุณ ฉันคิดว่าตอนนี้เป็นเวลา หากคุณทำงานอย่างมืออาชีพในการพัฒนาเว็บไซต์ อย่าขี้เกียจที่จะฝังคุณสมบัติ HTML5 ในตอนนี้ แน่นอน อย่าลืมดูแลความเข้ากันได้ - ใช้การรองรับทั้งเบราว์เซอร์สมัยใหม่และเบราว์เซอร์รุ่นเก่า คุณมีทุกสิ่งที่คุณต้องการสำหรับสิ่งนี้ อย่าช้าลงและพยายามทำให้โครงการของคุณโดดเด่นกว่าที่อื่น ขอให้โชคดี!

วิธีการประกัน?

ตลอดบทความนี้ ฉันได้กล่าวว่าปัจจุบันเบราว์เซอร์สมัยใหม่รองรับคุณลักษณะ HTML5 ในปริมาณที่แตกต่างกัน นั่นคือเหตุผลที่คุณต้องระวังและพยายามอย่าใช้สิ่งแปลกใหม่ คำถามเกิดขึ้นทันที: “คุณรู้ได้อย่างไรว่าคุณลักษณะ HTML5 ใดที่เบราว์เซอร์ใดรองรับ” มีหลายวิธีในการทำเช่นนี้ แต่ที่ฉันชอบคือไลบรารี JavaScript ขนาดเล็ก Modernizr (modernizr.com)

ไลบรารีนี้แจกจ่ายให้โดยไม่เสียค่าใช้จ่ายใดๆ และเมื่อคุณเชื่อมต่อกับโปรเจ็กต์ของคุณแล้ว ไลบรารีจะแสดงรายการคุณลักษณะ HTML5 ที่เบราว์เซอร์ของคุณรองรับทันที หากต้องการทดสอบการทำงานของไลบรารี คุณไม่จำเป็นต้องดาวน์โหลดทันทีและเชื่อมต่อกับโปรเจ็กต์ของคุณ คุณเพียงแค่ไปที่เว็บไซต์อย่างเป็นทางการของห้องสมุดและคุณจะเห็นได้ทันทีว่าวอล์คเกอร์ของคุณรองรับอะไรและไม่รองรับ ดูภาพหน้าจอของการเยี่ยมชมเว็บไซต์เมื่อ ความช่วยเหลือของ Google Chrome และ Internet Explorer 9 แม้จะมีการประชาสัมพันธ์บริษัทที่ดีและมีบทความยกย่อง แต่ rpg ของ Microsoft รองรับคุณสมบัติน้อยกว่า Google Chrome อย่างชัดเจน

HTML5 จะย้าย Flash

มากที่สุดแห่งหนึ่ง ชิปที่น่าสนใจ HTML5 คือความสามารถในการสร้างภาพเคลื่อนไหว สิ่งนี้ทำได้โดยการผสม HTML5 และ CSS3

แอนิเมชั่นดังกล่าวดูดีทีเดียวและสามารถแทนที่ Flash ได้ในหลาย ๆ กรณี ฉันสามารถพูดด้วยความมั่นใจว่าจะไม่ใช่เร็วๆ นี้ เพราะตอนนี้ Flash ง่ายต่อการเรียนรู้มากกว่าที่จะเข้าใจโค้ด HTML5/CSS3 (IMHO) ที่คลุมเครือ อย่างไรก็ตาม คุณต้องรู้เกี่ยวกับคุณสมบัติดังกล่าว ฉันขอแนะนำให้คุณอ่านลิงก์ด้านล่างและดูด้วยตาของคุณเอง การสาธิตที่สวยงามซึ่งแสดงให้เห็นถึงความเป็นไปได้ของภาพเคลื่อนไหว

• การสาธิตที่ดีที่แสดงคุณลักษณะของ Canvas: feedtank.com/labs/html_canvas ;
• กล่อง 3 มิติที่สวยงามพร้อมแถบค้นหาในตัวจาก Google: ;
• คลิกเมาส์เพียงครั้งเดียวและหน้าจะเริ่มเต็มไปด้วยลูกบอล คลิกมากขึ้น - ลูกบอลมากขึ้น ในขณะที่คุณเติมหน้าให้เต็มขอบ - พยายามลากอย่างรวดเร็ว ดูตลกมาก: mrdoob.com/projects/chromeexperiments/ball_pool ;
• เพียงการสาธิตที่ยอดเยี่ยมที่แสดงสารประกอบทางเคมีต่างๆ คุ้มค่ากับการดูอย่างแน่นอน: alteredqualia.com/canvasmol ;
• คุณเคยอยากรู้สึกเหมือนเป็นนักอายุรเวชและสำรวจความลึกลับของร่างกายมนุษย์หรือไม่?

ถ้าใช่ ลิงค์นี้เหมาะสำหรับคุณ Google ทำการสาธิตที่ยอดเยี่ยมของการผสมผสานระหว่างเทคโนโลยี WebGL, HTML5, CSS3 และ Flash ผลลัพธ์ของค็อกเทลคือแอปพลิเคชันแบบโต้ตอบที่แสดงร่างกายมนุษย์ 3 มิติ ซึ่งคุณสามารถมองเห็นโครงสร้างของอวัยวะภายในได้ เมื่อฉันเห็นเขาครั้งแรก ฉันไม่สามารถวางมันลง

หน้านี้มีเนื้อหาสำหรับบุคคลที่เกี่ยวข้องกับการพัฒนามาตรฐาน

ข้อมูลส่วนใหญ่นี้ไม่ได้ป้องกันด้วยรหัสผ่าน อย่างไรก็ตาม เมื่อเข้าถึงบางหน้า คุณอาจต้องใช้รหัสผ่าน

จรรยาบรรณ

สมาชิกของคณะกรรมการ ISO คณะทำงาน หรือ United for Consensus ได้รับการสนับสนุนให้ทำงานตามหลักการของจรรยาบรรณ

แนวทางการปฏิบัติตามการแข่งขัน

การปฏิบัติตามกฎหมายในกระบวนการกำหนดมาตรฐานเป็นสิ่งสำคัญในการรับประกันการทำงานที่มีประสิทธิภาพของตลาดและเพิ่มขีดความสามารถในการแข่งขัน ตลอดจนเพิ่มระดับความเชื่อมั่นในมาตรฐาน ISO ให้คำแนะนำในเรื่องกฎหมายแก่ผู้ที่เกี่ยวข้องในกระบวนการพัฒนามาตรฐาน

คำถามใด ๆ เกี่ยวกับหลักเกณฑ์ด้านกฎหมายการแข่งขันสามารถส่งไปยังทีมกฎหมายของ ISO ได้ที่

ลิขสิทธิ์

ผู้เข้าร่วมกิจกรรมมาตรฐานทุกคนจะต้องเคารพลิขสิทธิ์ของสิ่งพิมพ์และการพัฒนาโครงการของ ISO รวมถึงเนื้อหาใดๆ ที่เกี่ยวข้องกับ ISO กฎเหล่านี้สะท้อนให้เห็นในคำประกาศ ซึ่งทุกฝ่ายที่สนใจเรื่องมาตรฐานต้องยอมรับ

นโยบายด้านการสื่อสารการทำงานของคณะกรรมการกับบุคคลภายนอกและการเก็บรักษาเอกสาร

ผู้เข้าร่วมในกระบวนการพัฒนามาตรฐาน ISO อาจถูกถาม (เช่น จากสื่อ) หรืออาจมีความคิดริเริ่มของตนเอง (เช่น ผ่าน สังคมออนไลน์) แลกเปลี่ยนข้อมูลกับบุคคลภายนอกเกี่ยวกับการทำงานของคณะกรรมการด้านต่างๆ ISO ได้พัฒนานโยบายกิจกรรมสำหรับการโต้ตอบภายนอกเหล่านี้

คำถามใด ๆ เกี่ยวกับนโยบายนี้อาจถูกส่งไปที่ อีเมลสำนักเลขาธิการ ทีเอ็มบี: .

นโยบายการปกป้องข้อมูล

ทุกฝ่ายที่เกี่ยวข้องกับกระบวนการกำหนดมาตรฐานมีสิทธิและหน้าที่เกี่ยวกับการคุ้มครองข้อมูล สิ่งเหล่านี้สะท้อนให้เห็นในนโยบายการปกป้องข้อมูลที่พัฒนาขึ้นสำหรับสมาชิก ISO เช่นเดียวกับในปฏิญญา ซึ่งทุกฝ่ายที่เกี่ยวข้องกับกระบวนการนี้จะต้องปฏิบัติตาม นำไปใช้กับข้อมูลที่จัดเก็บไว้ในบริการ ISO IT เช่นเดียวกับข้อมูลส่วนบุคคลจำนวนมากที่รวบรวมระหว่างงานกำหนดมาตรฐาน (เช่น รายการการเข้างาน รายงานการประชุม)

คำอธิบายคำศัพท์และสำนวนที่ใช้ในมาตรฐาน ISO

มาตรฐานสากลและการค้า

ประเภทของการลงโทษทางกฎหมายใน ISO

ISO ได้พัฒนาเอกสารที่สรุปประเด็นที่เกี่ยวข้องกับการคว่ำบาตรและกระบวนการพัฒนามาตรฐาน

การมีส่วนร่วมของผู้มีส่วนได้ส่วนเสียและการสร้างฉันทามติ

ISO มุ่งมั่นที่จะทำให้มั่นใจว่ามาตรฐานได้รับการพัฒนา ผู้มีส่วนได้ส่วนเสียและสำหรับผู้มีส่วนได้ส่วนเสียเพื่อตอบสนองความต้องการของตลาดได้อย่างมีประสิทธิภาพมากขึ้น

ด้านล่างนี้คุณจะพบเอกสารที่ให้คำแนะนำเกี่ยวกับวิธีการมีส่วนร่วมของผู้มีส่วนได้ส่วนเสีย