Jojoee - สอนทำเว็บ ออกแบบ HTML5 CSS3 Wordpress Web Design
Web
2 min read

การใช้ Browser ทดสอบการแสดงผลบน Mobile

Browser - Mobile mode

ในการพัฒนา website เมื่อรองรับมือถือนั้น เราก็จำเป็นที่จะต้องทำการทดสอบในมือถือ แต่การทดสอบในมือถือก็ยากเหลือเกิน เช่น ต้องมา clear cache บ่อยๆเพื่อทดสอบ layout ดังนั้นการทดสอบการแสดงผลบน mobile บน browser จึงเป็นตัวเลือกที่น่าสนใจมาก เพราะสะดวกและรวดเร็วครับ Google Chrome เปิด google chrome กด F12 เพื่อเปิด Developer Tools คลิ้กที่ (1) เพื่อดู website ใน mobile mode คลิ้กที่ (2) เพื่อเลือกชนิด device ที่ต้องการ Safari เปิด safari คลิกที่ Preferences… (1) ติ้กเครื่องหมายถูกที่ “Show Develop menu in menu bar (2) เลือกชนิด device…

Read more...
Web
3 min read

Local Storage

HTML5 - Local Storage

local storage = พื้นที่ ที่ web application สามารถเก็บ data ไว้ที่ฝั่ง user / client ได้ วิธีการใช้งาน เบื้องต้น วิธีเก็บ object ลง local storage local storage เก็บได้แค่ string ดังนั้นต้องใช้ json ช่วย วิธีดูค่า localStorage 1. ใช้ javascript เก็บค่าออกมา เช่น localStorage.getItem() 2. ดูจาก browser (ตัวอย่างได้จากรูปด้านบน) Local Storage VS Cookie เปรียบเทียบคุณลักษณะ Local Storage อยู่ฝั่ง client local storage เก็บได้ประมาณ 5mb ไม่มี expiration…

Read more...
Web
3 min read

ทำไมต้องใช้ CDN ด้วย

CDN

จากรูปด้านบน CDN จะทำการหา CDN ที่ใกล้ที่กับ User ที่สุดเพื่อให้ User ดาวน์โหลดไฟล์จาก CDN ตัวนั้นไป เราคงเห็นการให้บริการ Library ดังๆผ่าน CDN กันมาแล้วเช่นอย่างของ jQuery, AnfularJS บน Google CDN, ว่าแต่ทำไมเราต้องใช้กันละครับ, ว่ากันถึง Concept สั้นๆ ของ CDN กันก่อนครับ CDN (Content Delivery Network) ทำหน้าที่ให้การให้ User มาโหลด Resource ต่างๆ (เช่น jQuery, Bootstrap, jQuery UI, AngularJS) ที่ผู้ให้บริการกำหนดไว้ได้, CDN นี้จะวางไว้จุดต่างๆทั่วโลก ยกตัวอย่าง Google มี Server วางอยู่มากมายทั่วโลก ทำให้ CDN ส่ง Resource…

Read more...
PHP
3 min read

DIY – Basic Cache System

Cache - basic

หลักการทำงานทั่วๆไปของ website ปัจจุบัน จะมีลำดับการทำงานแบบนี้ครับ 1. user เข้าหน้า website (user ส่ง request ไปที่ web server) 2. server ประมวลผล 3. server ดึงข้อมูลมาจาก database 4. server ได้รับข้อมูลจาก database แล้วนำมาประมวลผลอีกรอบ 5. server ประมวลผลเสร็จส่งไฟล์กลับไปให้ ซึ่งขั้นตอนทั้ง ก็จะให้ memory ในการทำงาน แต่เมื่อเราทำระบบ cache file, server ก็จะใช้ memory ในการทำงานน้อยลงมาก เช่น การ cache HTML ไฟล์จะช่วยลดได้ดังนี้ ข้อ “2” ก็ไม่ต้องแล้ว หา cache file ก็พอ ข้อ “3” ไม่ต้องไปดึงข้อมูลมาจาก…

Read more...
WP Development
2 min read

DIY – WP Customize CSS หน้า admin

WP - Customize admin css

วันนี้จะมา Customize ปุ่มหน้า admin ให้มันเป็น สีชมพู เอ้ย สีเขียวกันนะครับ รูปก่อนทำ “Customize Your Site” button จะยังเป็นสีฟ้า (สี default ของ wordpress) อยู่นะครับ การ customize CSS หน้า admin จะมีด้วยกัน 2 วิธีนะครับ เลือกใช้แบบไหนก็ได้ echo wp_enqueue_style วิธีที่ 1. echo 1.1 เปิดไฟล์ function.php ใน theme ของเรา 1.2 ใส่ code เข้าไปดังนี้ วิธีที่ 2. wp_enqueue_style 2.1 เปิดไฟล์ function.php ใน theme ของเรา 2.2 สร้างไฟล์ admin.css…

Read more...
WP Development
2 min read

Custom ต่างๆของ WordPress

WP - Custom field, post type, taxonomy

wordpress เริ่มต้นออกแบบมาสำหรับ blog เท่านั้น ดังนั้นที่หน้า post บทความของเราเวลาเราเขียน ก็จะมีสิ่งที่จำเป็นสำหรับการเขียนบทความ บทความหนึ่ง เท่านั้น เช่น titlte, slug, featured image, format, category, tag, etc. แต่เมื่อเราต้องการอะไรที่มากกว่าเราก็ต้องมา custom กันครับ custom ต่างๆของ wordpress จะมีด้วยกัน 3 แบบ 1. Custom Field 2. Custom Post Type 3. Custom Taxonomy 1. Custom Field custom field คือ field เพิ่มเติมที่ post ส่วนใหญ่ของเราควรจะมี จะเป็น field ที่เพิ่มมาในแต่ละ post เช่น สมมุติเราจะทำเว็บเกี่ยวกับภาพยนต์ แต่ละ…

Read more...
Misc
3 min read

your Resume

Your Resume

อย่างที่เรารู้กัน การสมัครงานนั้นเป็นการตัดสินใจที่สำคัญต่อชีวิตการทำงานของเราอย่างมาก และด่านแรกของ การสมัครงาน ก็คือ “your Resume” resume เปรียบเหมือน โบรชัวของตัวเราเองเมื่อ HR เห็นแล้วต้องอยากติดต่อเรากลับมา (จุดประสงค์ของ Resume คือให้ HR ติดต่อคุณมาสัมภาษณ์) HR เป็นชื่อของแผนกที่ทำหน้าที่คัดสรรบุคลากร และสามารถใช้อ้างถึงบุคลลที่อยู่ในแผนกนั้นซึ่งทำหน้าที่คัดสรรบุคลากรได้อีกด้วย Get Started พื้นฐานของ resume แล้วควร อ่านง่าย, กระชับ, เป็นทางการ (formal), เป็นข้อมูลล่าสุด (up to date) ต่อไปจะนำเสนอส่วนต่างๆและข้อแนะนำในการเขียนครับ 1. Contact information มีส่วนประกอบ คือ ชื่อ, ที่อยู่, email (ควรดูเหมาะแก่การทำงาน เช่น นามสกุลผสมชื่อ), เบอร์ติดต่อ 2. Design / Layout ควรจะมีแบบ formal เป็นพื้นฐาน (ซึ่งจะทำให้อ่านง่าย หาข้อมูลได้ง่าย)…

Read more...
Code
2 min read

ประเภทของ Programming Errors

Programming Errors

บทความนี้จะว่าถึงเรื่องประเภทของ error ที่เกิดขึ้นในการเขียน program ไม่ว่าจะเป็น programmer ที่มีประสบการณ์มากแค่ไหนยังไงก็ต้องมีพลาดกันบ้าง และนี่คือจุดสำคัญของ programming, คือการ debug program และหาทางแก้ไขมัน โดย programming errors จะแบ่งเป็น 3 หมวดคือ Compilation errors Run-time errors Logic errors 1. Compilation errors compilation errors หรือ complier errors เป็น error ที่เกิดจาก complier ทำการ compile โปรแกรมของเรา ส่วนใหญ่ error ประเภทนี้จะเกิดจากการ Syntax error เช่น สะกดผิด, ใช้ space ผิดที่, ผิดลำดับ (เช่นเรียกใช้ else ก่อน if)…

Read more...
Web
3 min read

Email ขาเข้า ขาออก เข้าแล้วก็ออก เอ้าๆ เอิ้วๆ

Email

สงสัยจะเขียน code มากไปชื่อ บทความเลยเป็นแบบนี้ เอาละเข้าเรื่องกันเลยครับ ในส่วนของ Email ที่เราใช้งานจะมี 2 ส่วนหลักๆเป็น ขาเข้า ไว้รับ email มาและก็ขาออกไว้ส่ง email ครับ ขาออก – SMTP เราจะใช้ SMTP ในการส่ง email กันครับ SMTP ? SMTP ย่อมาจาก Simple Mail Transfer Protocol SMTP คือ Protocol ทำงานอยู่บน TCP/IP protocol ใช้ในการส่ง email SMTP เป็น รูปแบบการส่ง email ปกติเวลาเราจะส่ง email, ผู้ให้บริการส่ง email เขาก็จะมีข้อกำหนดต่างๆครับเช่น ส่งมาจากไหน, ใครเป็นผู้ส่ง, etc. (ซึ่งอาจมีข้อตกลงอื่นๆอีกครับเช่น ต้องเป็นสมาชิกถึงจะส่งเมลผ่านผู้ให้บริการ SMTP…

Read more...
HTML & CSS
3 min read

CSS Framework ชีวิตเราดีขึ้นเพราะนายเลยนะ

CSS Framework

CSS Framework นี่จะมีส่วนประกอบหลายๆอย่าง ครับแต่ สิ่งหนึ่งที่มีส่วนใหญ่ จะมีเลยคือ Grid Layout Grid Layout ปกติเวลาเราจะเขียน CSS เนี่ยเราก็ต้องวาง Layout กันก่อน ส่วนใหญ่จะเป็นแบบ Grid layout แบบนี้ สังเกตตรง แถบแดงๆ นะครับจะเป็นตัวแบ่งขอบเขตของ Layout, และจากรูปตัวอย่างจะบ่งบอกได้ชัดเจนเลยครับว่าเขาออกแบบตาม Grid ต่างๆ ดังนั้นเมื่อเราใช้บ่อยกันอย่างนี้ก็ทำเป็น Framework กันเลยดีกว่าจะได้สะดวกเวลาเริ่มทำ Website กันใหม่ขึ้นมา // 1 <div class=”row”> <div class=”col-md-4″>.col-md-4</div> <div class=”col-md-4″>.col-md-4</div> <div class=”col-md-4″>.col-md-4</div> </div> // 2 <div class=”row”> <div class=”col-md-3″>.col-md-3</div> <div class=”col-md-6″>.col-md-6</div> <div class=”col-md-3″>.col-md-3</div> </div> // 3…

Read more...