ปรับขนาดจอภาพรองรับ responsive web design

ทำให้ดีที่สุด เพื่อคะแนน performance / optimization หรือ user experience ที่ดีที่สุด จึงกลับไปดูหัวข้อ ขนาดจอภาพ (screen resolution) ที่ถูกบันทึกไว้ บนระบบ website tracker / counter / web stats / web analytics / usage statistics / hit stats พบว่า โลกเราเปลี่ยนไปจาก พ.ศ. 2541 อย่างมาก

ปัจจุบัน ขนาดจอภาพ ยอดนิยมเป็น 1366*768 หรือ 1920*1080 แม้จะคลาดเคลื่อนกันบ้าง แต่ห่างจากที่ผมมองไว้ ที่ 800*600 แบบไม่เห็นฝุ่น ดังนั้นการออกแบบ responsive web design แบบ fixed width เพื่อควมคุม layout ให้ผู้ใช้รู้สึกดี จึงต้องปรับชุด resolution ที่รองรับกันใหม่ แต่ปีนี้ผมยังไม่ย้ายออกจาก comfort zone ที่ width 728px นะครับ ปรับเฉพาะที่ต่ำกว่าขนาดนี้เท่านั้น

สิ่งสำคัญในการปรับเทมเพจรุ่นนี้ (9.2) คือ วิเคราะห์ front-end design อย่างละเอียด เพื่อให้ได้คะแนน 400 เต็ม จาก pagespeed insights ซึ่งปัญหาสุดท้ายที่กว่าจะแก้ได้ก็นาน คือ การยกเลิกการ load css ที่ต้นแฟ้ม แต่แยกประกาศ style ในแท็ก head เฉพาะส่วนที่จำเป็น แล้วส่วนที่เหลืออยู่ในแฟ้ม css ที่รองรับงาน responsive แยกออกเป็นแฟ้ม แล้วค่อยดึงมาใช้หลัง onload ที่เขียนโค้ดไว้หลังปิดแท็ก html และทำงานแบบ async=true

สิ่งที่แก้ไม่ได้ที่ทำให้คะแนน pagespeed ไม่เต็ม 100 มี 4 เรื่องที่แก้ไม่ได้ คือ 1) กูเกิ้ลแอด ที่เรียกโค้ดภายนอก 2) histats หรือ truehits ที่เรียกโค้ดภายนอก 3) การโหลด js และ css จาก cdn จำนวนมาก 4) ขนาด DOM ที่ใหญ่เกินไป เค้าแนะนำว่าไม่ควรเกิน 1500 nodes

ส่วนผลการตัดโค้ดที่ทำให้คะแนนลดออกไป จนทำให้เหลือเฉพาะเนื้อหาจะได้คะแนน 400 เต็ม อยู่ใน link ด้านล่างครับ สามารถนำ url ไปโยนใส่ pagespeed ดูได้ ส่วนโฮมเพจที่ใช้จริงอยู่ที่ หน้าแรก thaiall ซึ่งได้คะแนน mobile คือ 37,100,57,100 เพราะมีปัญหา ใน 4 เรื่องข้างต้น

https://thaiall.com/web2/file_pagespeed.php?file=web2main
https://thaiall.com/web2/file_pagespeed.php?file=web2main&fieldset=blank

Maysoon Zayid สั้นตลอดเวลา

Maysoon Zayid : shake all the time
Maysoon Zayid : shake all the time

ในเวทีที่มีคนพูด และมีคนฟัง
ก็เห็นจะมี TED : Technology, Entertainment, Design
ที่ได้รับความนิยม และยอมรับกันไปทั่วโลก
แต่ละท่านพูดกันประมาณ 15 นาที
มี 20 TED ยอดนิยมในปี 2014
Maysoon Zayid : shake all the time เป็น 1 ใน 20
http://www.ted.com/playlists/215/the_most_popular_talks_of_2014

Transcript : Hello, TEDWomen, what’s up.

0:13 (Cheers)
0:15 Not good enough. Hello, TEDWomen, what is up?
0:18 (Cheers)
0:20 My name is Maysoon Zayid, and I am not drunk, but the doctor who delivered me was. He cut my mom six different times in six different directions, suffocating (หอบ, สำลัก) poor little me in the process. As a result, I have cerebral palsy (สมองพิการ), which means I shake all the time. Look. It’s exhausting (ใช้หมด). I’m like Shakira, Shakira meets Muhammad Ali. (Laughter)
0:53 C.P. is not genetic (พันธุกรรม). It’s not a birth defect. You can’t catch it. No one put a curse(คำสาป) on my mother’s uterus (มดลูก), and I didn’t get it because my parents are first cousins (ญาติ), which they are. (Laughter) It only happens from accidents, like what happened to me on my birth day.
1:15 Now, I must warn you, I’m not inspirational (ที่เร้าใจ), and I don’t want anyone in this room to feel bad for me, because at some point in your life, you have dreamt of being disabled. Come on a journey with me. It’s Christmas Eve, you’re at the mall, you’re driving around in circles looking for parking, and what do you see? Sixteen empty handicapped (พิการ) spaces. And you’re like, “God, can’t I just be a little disabled?” (Laughter) Also, I gotta tell you, I got 99 problems, and palsy is just one. If there was an Oppression (การบีบคั้น) Olympics, I would win the gold medal. I’m Palestinian, Muslim, I’m female, I’m disabled, and I live in New Jersey. (Laughter) (Applause) If you don’t feel better about yourself, maybe you should.
2:22 Cliffside Park, New Jersey is my hometown. I have always loved the fact that my hood (ผ้าคลุมหน้า) and my affliction (ความทุกข์) share the same initials. I also love the fact that if I wanted to walk from my house to New York City, I could.
2:36 A lot of people with C.P. don’t walk, but my parents didn’t believe in “can’t.” My father’s mantra was, “You can do it, yes you can can.” (Laughter) So, if my three older sisters were mopping (ถูพื้น), I was mopping. If my three older sisters went to public school, my parents would sue the school system and guarantee that I went too, and if we didn’t all get A’s, we all got my mother’s slipper (รองเท้าแตะ). (Laughter) My father taught me how to walk when I was five years old by placing my heels on his feet and just walking. Another tactic that he used is he would dangle (ห้อย) a dollar bill in front of me and have me chase it. (Laughter) My inner stripper (ผู้เปลื่อง) was very strong, and by — (Laughter) Yeah. No, by the first day of kindergarten, I was walking like a champ who had been punched one too many times.
3:37 Growing up, there were only six Arabs in my town, and they were all my family. Now there are 20 Arabs in town, and they are still all my family. (Laughter) I don’t think anyone even noticed we weren’t Italian. (Laughter) (Applause) This was before 9/11 and before politicians thought it was appropriate to use “I hate Moslems” as a campaign slogan. The people that I grew up with had no problem with my faith. They did, however, seem very concerned that I would starve (อดมื้อกินมื้อ) to death during Ramadan. I would explain to them that I have enough fat to live off of for three whole months, so fasting from sunrise to sunset is a piece of cake.
4:25 I have tap-danced on Broadway. Yeah, on Broadway. It’s crazy. (Applause) My parents couldn’t afford physical therapy (การบำบัดโรค), so they sent me to dancing school. I learned how to dance in heels, which means I can walk in heels. And I’m from Jersey, and we are really concerned with being chic, so if my friends wore (สวม) heels, so did I.
4:47 And when my friends went and spent their summer vacations on the Jersey Shore, I did not. I spent my summers in a war zone, because my parents were afraid that if we didn’t go back to Palestine every single summer, we’d grow up to be Madonna. (Laughter) Summer vacations often consisted of my father trying to heal (รักษา) me, so I drank deer’s milk, I had hot cups on my back, I was dunked in the Dead Sea, and I remember the water burning my eyes and thinking, “It’s working! It’s working!” (Laughter)
5:28 But one miracle cure we did find was yoga. I have to tell you, it’s very boring, but before I did yoga, I was a stand-up comedian (ตัวตลก) who can’t stand up. And now I can stand on my head. My parents reinforced (เสริมสร้าง) this notion (ความคิด) that I could do anything, that no dream was impossible, and my dream was to be on the daytime soap opera “General Hospital.” I went to college during affirmative  (ซึ่งยืนยัน) action and got a sweet scholarship to ASU, Arizona State University, because I fit every single quota. I was like the pet lemur (สัตว์จำพวกลิง) of the theater department. Everybody loved me. I did all the less-than-intelligent kids’ homework, I got A’s in all of my classes, A’s in all of their classes. Every time I did a scene from “The Glass Menagerie (โรงละครสัตว์),” my professors would weep (ร้องไห้). But I never got cast (โยน). Finally, my senior year, ASU decided to do a show called “They Dance Real Slow in Jackson.” It’s a play about a girl with C.P. I was a girl with C.P.
So I start shouting (เสียงร้อง) from the rooftops, “I’m finally going to get a part! I have cerebral palsy! Free at last! Free at last! Thank God almighty (ยิ่งใหญ่), I’m free at last!” I didn’t get the part. (Laughter) Sherry Brown got the part. I went racing to the head of the theater department crying hysterically (อย่างบ้าคลั่ง), like someone shot my cat, to ask her why, and she said it was because they didn’t think I could do the stunts (การแสดงความสามารถ). I said, “Excuse me, if I can’t do the stunts, neither can the character.” (Laughter) (Applause) This was a part that I was literally born to play and they gave it, they gave it to a non-palsy actress. College was imitating (เลียนแบบ) life. Hollywood has a sordid (สกปรก) history of casting able-bodied actors to play disabled onscreen.
7:41 Upon graduating, I moved back home, and my first acting gig (เรือพาย) was as an extra on a daytime soap opera. My dream was coming true. And I knew that I would be promoted from “diner diner” to “wacky (แปลกประหลาด) best friend” in no time. But instead, I remained a glorified (สรรเสริญ) piece of furniture that you could only recognize from the back of my head, and it became clear to me that casting directors didn’t hire fluffy (ปุย), ethnic (หลักจริยธรรม), disabled actors. They only hired perfect people. But there were exceptions to the rule. I grew up watching Whoopi Goldberg, Roseanne Barr, Ellen, and all of these women had one thing in common: they were comedians. So I became a comic. (Laughter) (Applause)
8:30 My first gig was driving famous comics from New York City to shows in New Jersey, and I’ll never forget the face of the first comic I ever drove when he realized that he was speeding down the New Jersey Turnpike with a chick (ลูกเจี๊ยบ) with C.P. driving him. I’ve performed in clubs all over America, and I’ve also performed in Arabic in the Middle East, uncensored and uncovered. Some people say I’m the first stand-up comic in the Arab world. I never like to claim first, but I do know that they never heard that nasty (น่ารังเกียจ) little rumor (เล่าลือ) that women aren’t funny, and they find us hysterical. In 2003, my brother from another mother and father Dean Obeidallah and I started the New York Arab-American Comedy Festival, now in its 10th year. Our goal was to change the negative image of Arab-Americans in media, while also reminding casting directors that South Asian and Arab are not synonymous (ตรงกัน).
(Laughter) Mainstreaming Arabs was much, much easier than conquering (พิชิต) the challenge against the stigma (ปาน)  gainst disability.
9:49 My big break came in 2010. I was invited to be a guest on the cable news show “Countdown With Keith Olbermann.” I walked in looking like I was going to the prom (พรหม), and they shuffle (สับเปลี่ยน) me into a studio and seat me on a spinning, rolling chair. So I looked at the stage manager and I’m like, “Excuse me, can I have another chair?” And she looked at me and she went, “Five, four, three, two …” And we were live, right? So I had to grip (ด้ามจับ) onto the anchor’s desk so that I wouldn’t roll off the screen during the segment, and when the interview was over, I was livid (ซีด). I had finally gotten my chance and I blew it, and I knew I would never get invited back. But not only did Mr. Olbermann invite me back, he made me a full-time contributor (ผู้สนับสนุน), and he taped down my chair. (Laughter) (Applause)
10:48 One fun fact I learned while on the air with Keith Olbermann was that humans on the Internet are scumbags (ก้าวร้าว). People say children are cruel, but I was never made fun of as a child or an adult. Suddenly, my disability on the world wide web is fair game. I would look at clips online and see comments like, “Yo, why’s she tweakin (บิด)?” “Yo, is she retarded (ชะลอ)?” And my favorite, “Poor Gumby-mouth terrorist (ผู้ก่อการร้าย). What does she suffer from? We should really pray for her.” One commenter even suggested that I add my disability to my credits: screenwriter, comedian (ตัวตลก), palsy.
11:31 Disability is as visual as race. If a wheelchair user can’t play Beyoncé, then Beyoncé can’t play a wheelchair user. The disabled are the largest — Yeah, clap (ตบมือ) for that, man. C’mon. (Applause) People with disabilities are the largest minority (ชนกลุ่มน้อย) in the world, and we are the most underrepresented (บทบาท) in entertainment.
11:57 The doctors said that I wouldn’t walk, but I am here in front of you. However, if I grew up with social media, I don’t think I would be. I hope that together we can create more positive images of disability in the media and in everyday life. Perhaps if there were more positive images, it would foster (อุปภัมภ์) less hate on the Internet. Or maybe not. Maybe it still takes a village to teach our children well.
12:27 My crooked (คด) journey has taken me to some very spectacular (น่าตื่นเต้น) places. I got to walk the red carpet flanked (ขนาบข้าง) by soap diva Susan Lucci and the iconic Lorraine Arbus. I got to act in a movie with Adam Sandler and work with my idol, the amazing Dave Matthews. I toured the world as a headliner on Arabs Gone Wild. I was a delegate (ผู้แทน) representing the great state of New Jersey at the 2008 DNC. And I founded Maysoon’s Kids, a charity (การกุศล) hat hopes to give Palestinian refugee (ผู้ลี้ภัย) children a sliver (เศษไม้) of the chance my parents gave me. But the one moment that stands out the most was when I got — before this moment — (Laughter) (Applause) — but the one moment that stands out the most was when I got to perform for the man who floats (ลอย) like a butterfly and stings (ต่อย) like a bee, has Parkinson’s and shakes just like me, Muhammad Ali. (Applause)
13:42 It was the only time that my father ever saw me perform live, and I dedicate this talk to his memory. (In Arabic)
13:52 My name is Maysoon Zayid, and if I can can, you can can. (Applause)
http://www.ted.com/talks/maysoon_zayid_i_got_99_problems_palsy_is_just_one

Google ไดรฟ ใช้เป็นเครื่องมือทำงานร่วมกับผู้อื่นในการพัฒนาเว็บไซต์ได้

wire frame
wire frame

ด้วย Google ไดรฟ์ คุณจะสามารถสร้าง แชร์ และเก็บไฟล์ทั้งหมดไว้ในที่เดียว ไม่ว่าจะเป็นการระดมความคิดจัดทำเนื้อหาเว็บไซต์ แชร์ไฟล์รูปภาพกับนักออกแบบของคุณ หรือสร้างแบบร่างไวร์เฟรมใหม่ (WireFrame = screen blueprint) ล้วนสำเร็จได้ใน “ไดรฟ์” และคุณยังสามารถเข้าถึงข้อมูลของคุณได้จากทุกที่ ผ่านอุปกรณ์สื่อสารอันหลากหลาย ไม่ว่าขณะท่องเว็บ อยู่บ้าน ที่ทำงาน หรือทำธุระนอกสถานที่
+ http://adsense.blogspot.com/
+ http://www.fivetechnology.com/blog/2008/10/01/web-design-process-a-focus-on-wireframes-layout/

Web Site Development Process – The life-cycle steps

กระบวนการพัฒนาเว็บไซต์
กระบวนการพัฒนาเว็บไซต์

Web Site Development Process – The life-cycle steps
by Benny Alexander

Like the traditional software development, the process of web site development can also be divided into different life cycle steps. This can help to format the team effectively, and the standards and procedures can be adopted to achieve maximum quality. This article explains the steps of development which can be possibly arranged as a process of web engineering. This is just a guideline to help you, to know, how a process can be done. The steps may vary from application to application. Write me your suggestions and comments on this article to enquiry@macronimous.com.
A system development process can follow a number of standard or company specific frameworks, methodologies, modeling tools and languages. Software development life cycle normally comes with some standards which can fulfill the needs of any development team. Like software, web sites can also be developed with certain methods with some changes and additions with the existing software development process. Let us see the steps involve in any web site development.
1. Analysis:
Once a customer is started discussing his requirements, the team gets into it, towards the preliminary requirement analysis. As the web site is going to be a part of a system, It needs a complete analysis as, how the web site or the web based application is going to help the present system and how the site is going to help the business. Moreover the analysis should cover all the aspects especially on how the web site is going to join the existing system. The first important thing is finding the targeted audience. Then, All the present hardware, software, people and data should be considered during the time of analysis. For example, if a company XYZ corp is in need of a web site to have its human resource details online, the analysis team may try to utilize the existing data about the employees from the present database. The analysis should be done in the way, that it may not be too time consuming or with very less informative. The team should be able to come up with the complete cost- benefit analysis and as the plan for the project will be an output of analysis, it should be realistic. To achieve this the analyst should consult the designers, developers and testers to come up with a realistic plan.
Input:Interviews with the clients, Mails and supporting docs by the client, Discussions Notes, Online chat, recorded telephone conversations,Model sites/applications etc.,
Output: 1. Work plan, 2. Cost involved, 3. Team requirements, 4. Hardware-software requirements, 5. Supporting documents and 6. the approval.
2. Specification Building:
Preliminary specifications are drawn up by covering up each and every element of the requirement. For example if the product is a web site then the modules of the site including general layout, site navigation and dynamic parts of the site should be included in the spec. Larger projects will require further levels of consultation to assess additional business and technical requirements. After reviewing and approving the preliminary document, a written proposal is prepared, outlining the scope of the project including responsibilities, timelines and costs.
Input: Reports from the analysis team.
Output: Complete requirement specifications to the individuals and the customer/customer’s representative.
3. Design and development:
After building the specification, work on the web site is scheduled upon receipt of the signed proposal, a deposit, and any written content materials and graphics you wish to include. Here normally the layouts and navigation will be designed as a prototype.
Some customers may be interested only in a full functional prototype. In this case we may need to show them the interactivity of the application or site. But in most of the cases customer may be interested in viewing two or three design with all images and navigation.
There can be a lot of suggestions and changes from the customer side, and all the changes should be freezed before moving into the next phase. The revisions could be redisplayed via the web for the customer to view.
As needed, customer comments, feedback and approvals can be communicated by
e-mail, fax and telephone.
Throughout the design phase the team should develop test plans and procedures for quality assurance. It is necessary to obtain client approval on design and project plans.
In parallel the Database team will sit and understand the requirements and develop the database with all the data structures and sample data will also be prepared.
Input: Requirement specification.
Output: Site design with templates, Images and prototype.
4. Content writing:
This phase is necessary mainly for the web sites. There are professional content developers who can write industry specific and relevant content for the site. Content writers to add their text can utilize the design templates. The grammatical and spelling check should be over in this phase.
Input: Designed template.
Output: Site with formatted content.
5. Coding:
Now its programmers turn to add his code without disturbing the design. Unlike traditional design the developer must know the interface and the code should not disturb the look and feel of the site or application. So the developer should understand the design and navigation. If the site is dynamic then the code should utilize the template. The developer may need to interact with the designer, in order to understand the design. The designer may need to develop some graphic buttons when ever the developer is in need, especially while using some form buttons. If a team of developers is working they should use a CVS to control their sources. Coding team should generate necessary testing plans as well as technical documentation. For example Java users can use JavaDoc to develop their documents to understand their code flow. The end-user documentation can also be prepared by the coding team, which can be used by a technical writer who can understand them, writes helps and manuals later.
Input: The site with forms and the requirement specification.
Output : Database driven functions with the site, Coding documents.
6. Testing:
Unlike software, web based applications need intensive testing, as the applications will always function as a multi-user system with bandwidth limitations. Some of the testing which should be done are, Integration testing, Stress testing, Scalablity testing, load testing, resolution testing and cross-browser compatibility testing. Both automated testing and manual testing should be done without fail. For example its needed to test fast loading graphics and to calculate their loading time, as they are very important for any web site. There are certain testing tools as well as some online testing tools which can help the testers to test their applications. For example ASP developers can use Microsoft’s Web Application Test Tool to test the ASP applications, which is a free tool available from the Microsoft site to download.
After doing all the testing a live testing is necessary for web sites and web based applications. After uploading the site there should be a complete testing(E.g.. Links test)
Input: The site, Requirement specifications, supporting documents, technical specifications and technical documents.
Output: Completed application/site, testing reports, error logs, frequent interaction with the developers and designers.
7. Promotion:
This phase is applicable only for web sites. Promotion needs preparation of meta tags, constant analysis and submitting the URL to the search engines and directories. There is a details article in this site on site promotion, click here to read it. The site promotion is normally an ongoing process as the strategies of search engine may change quite often. Submitting a site URLs once in 2 months can be an ideal submission policy. If the customer is willing, then paid click and paid submissions can also be done with additional cost.
Input: Site with content, Client mails mentioning the competitors.
Output: Site submission with necessary meta tag preparation.
8. Maintenance and Updating:
Web sites will need quite frequent updations to keep them very fresh. In that case we need to do analysis again, and all the other life cycle steps will repeat. Bug fixes can be done during the time of maintenance. Once your web site is operational, ongoing promotion, technical maintenance, content management & updating, site visit activity reports, staff training and mentoring is needed on a regular basis depend on the complexity of your web site and the needs within your organization.
Input: Site/Application, content/functions to be updated, re-Analysis reports.
Output: Updated application, supporting documents to other life cycle steps and teams.
The above-mentioned steps alone are not strict to web application or web site development. Some steps may not applicable for certain tasks. Its depend on the cost and time involved and the necessity. Sometimes if it is a intranet site, then there will be no site promotion. But even if you are a small development firm, if you adopt certain planning along with this web engineering steps in mind, it will definitely reflects in the Quality of the outcome.

การสร้างงานและส่งออกไปเป็นเว็บเพจด้วย fireworks CS4

firework
firework

18 ก.พ.54 มีเพื่อนชื่อ ธรณ. สร้างงานไว้ด้วย Adobe Fireworks CS4 และใช้พัฒนาควบคู่ไปกับ Adobe Dreamweaver CS4 ซึ่งมีแนวทางการนำมาแก้ไขปรับปรุง ทั้งเปลี่ยนสี เปลี่ยนภาพ แต่ใช้ theme เดิม ดังนี้
1. เปิดแฟ้มต้นฉบับและทำงานออกแบบให้แล้วเสร็จ ตัวอย่างนี้เป็นภาพขนาด 2000 * 1000 pixels และจะเก็บในสกุล .png ซึ่งเป็นรูปแบบของ fire works ซึ่งขั้นตอนแรกมีรายละเอียดในการออกแบบ และใช้งานมากมายตามความซับซ้อนของเนื้องาน
2. จัดเก็บอีกครั้งด้วยการ save as เป็นแบบ Flattened PNG กำหนดขนาดเป็น 50% ผลคือแฟ้มนี้มีเพื่อนส่งออกไม่สามารถแก้ไขรายละเอียดได้ง่ายเหมือนต้นฉบับ และขนาดภาพคือ 1000 * 500 pixels เพื่อนำไปเป็นเว็บเพจ ซึ่งวางแผนไว้ว่าเว็บเพจกว้าง 1000 pixels และภาพถูกตัดออกเป็นชิ้นให้ download ได้อย่างรวดเร็ว แทนการใช้ภาพใหญ่เพียงภาพเดียว
3. ใช้ select tool สร้างพื้นที่ที่ต้องการตัด แล้วเลือก edit, insert, rectangular slice ผลการ slice จะเกิดขึ้นผลการตัดภาพใน web layer สำหรับเทคนิคตัดภาพนี้คล้ายกับที่เคยพบในโปรแกรม imageready แต่ปัจจุบันถูกรวมเข้าเป็นส่วนหนึ่งของ photoshop ตั้งแต่รุ่น CS2 ไปแล้ว หากจะตัดภาพทำ gif animation ก็ใช้ photoshop ได้เลย
4. ขั้นสุดท้ายส่งงานออกไปใช้ด้วยการเลือก file, export เป็น HTML and images ก็จะได้แฟ้ม html พร้อมภาพอีกหลายภาพ ที่จะไปใช้งานใน dreamweaver หรือควบคุมด้วย php ใน editor ใด ๆ ต่อไป
+ http://www.thaiall.com/fireworks/

เหตุที่ผมเลิกออกแบบเว็บไซต์ส่วนตัว แล้วแนะให้จิ้ม

ออกแบบเว็บ
ออกแบบเว็บ

14 พ.ย.53 มีเจ้าของธุรกิจคนหนึ่ง อีเมลถามผมว่า เขาชอบเว็บเพจในเว็บไซต์แห่งหนึ่ง แล้วส่งมาให้ผมดู 3 หน้า ถ้าไปจ้างนักพัฒนา เขาจะต้องบอกว่าอย่างไร ซึ่งเว็บเพจทั้ง 3 หน้ามีจุดที่น่าสนใจ คือ รูปภาพ กราฟฟิก และวีดีโอ แสดงว่าเขาให้ความสนใจกับภาพ และวีดีโอในเว็บเพจ ถือเป็นประเด็นสำคัญมากกว่าองค์ประกอบอื่น เพราะทั้งโครงเว็บไซต์ และเทคนิคเชิงโปรแกรมในเว็บเพจที่เขาสนใจนั้นไม่มีความซับซ้อน .. ผมก็บอกว่าถ้าไปจ้างง่ายเลยครับ บอกผู้รับจ้างว่าขอถูก ๆ มีภาพ และแบบให้แล้ว .. แต่ปัญหาคือ content และภาพที่เขาสนใจนั้น เจ้าของธุรกิจมีในมือหรือไม่ เพราะเชื่อได้ว่าถ้าเขาไปจ้างโดยไม่มีแนวคิดหรือภาพในมือ  แล้วนักพัฒนาก็คงทำได้ในเชิงเทคนิค และโครงสร้างเว็บเท่านั้น แต่จะหาภาพที่เขาชอบในมุมของเจ้าของธุรกิจ เรียนรู้กันนาน .. แต่ถ้าเป็นโครงสร้างเว็บกับสีสวย .. ผมก็แนะว่าใช้นิ้วจิ้มครับ ได้เรื่องแน่นอน คือจิ้มไปที่แบบ free template สักแบบหนึ่งที่มีเผยแพร่นั่นเอง .. แค่นั้นคืนเดียวก็เสร็จครับ เพราะไม่ต้องนั่งลองผิดลองถูกอีก

เป็นเหตุให้ผมขุดความทรงจำเรื่อง template มาได้ ว่าเคยจัดอบรมเรื่องเทมเพจเมื่อปี 2548 และผลการอบรมครั้งนั้น ทำให้ผมรู้ว่าโลกนี้มีความสวยงามอยู่มากมายและหลากหลาย ตั้งแต่นั้นผมจึงไม่ให้เวลากับการออกแบบเว็บไซต์อย่างที่ควร เพราะวัตถุประสงค์ของเว็บไซต์ คือ การให้ข้อมูลมิใช่การออกแบบ ถ้าจะออกแบบให้สวยงาม ก็แค่ชี้นิ้วไปยังเทมเพจที่ต้องการ แล้วก็เนรมิตในเวลาชั่วข้ามคืน ซึ่งนักพัฒนาที่รับจ้าง สามารถรับงานพัฒนาเว็บเพจที่สวยที่สุดในเวลาชั่วข้ามคืนเท่านั้น ถ้ารู้จักการใช้ template แต่ถ้ามานั่งออกแบบเองก็คงไม่มีอะไรรับประกันได้ว่าจะถูกใจเจ้าของธุรกิจคนนั้นหรือไม่ .. เพราะอังกฤษ อเมริกา อินเดีย จีน พม่า ต่างก็มองผู้หญิงสวยกันไปคนละแบบ แต่วัตถุประสงค์ของการมีคู่ครองคงมิใช่ความสวยเพียงอย่างเดียว นางงามจักรวาลก็ยังเลิกกับสามีมาแล้วหลายคน เพราะความสวยอย่างเดียวไม่พอ ต้องดูเนื้อหาเป็นสำคัญครับ ว่าจะอยู่กันยืดหรือไม่ .. ดังโบราณท่านว่ารักง่าย หน่ายเร็ว .. เว็บไซต์ขององค์กรหลายแห่งเห็นสวยมาหลายรุ่น เมื่อเปลี่ยนผู้ดูแล ความสวยนั้นก็ถูกหน่ายไปในที่สุด ที่ยังต้องอยู่คือเนื้อหา และวัตถุประสงค์ที่ชัดเจนสอดรับกับแผนกลยุทธ์ขององค์กร
http://www.thaiall.com/template
http://www.freelayouts.com
http://www.templatesbox.com/templates.htm
http://www.steves-templates.com/templates.html

ระบบการปรับปรุงรายงานขาดลาสายออนไลน์

22 ม.ค.53 วัตถุประสงค์ของระบบคือ ปรับปรุงข้อมูลที่ใช้รายงานจำนวนวันและชั่วโมง ที่บุคลากร ขาด ลา และสาย ให้บริการแก่บุคลากร หัวหน้างาน และผู้บริหาร ให้เป็นข้อมูลอ้างอิงที่สรุปภาพรวมของแต่ละเดือน กลไกที่รับผิดชอบในการดำเนินการตามระบบ คือ บุคากรที่หัวหน้างานทรัพยากรบุคคลมอบหมายให้ดำเนินการมีหน้าที่ดำเนินการทุกสิ้นเดือน และทำไปพร้อมกับการจัดทำรายงานการขาดลาสายของบุคลากรเสนอต่อผู้บริหาร
     มีขั้นตอนดังนี้ ๑) จัดทำรายงานการขาดลาสายของบุคลากรเสนอต่อผู้บริหาร แล้วบันทึกข้อมูลด้วย MS Excel ๒) เปิดแฟ้มข้อมูลต้นแบบ ๔ แฟ้มในเครื่องของตนเอง คือ ๒.๑ แฟ้มข้อมูลบุคลากร (empl.csv) ๒.๒ แฟ้มข้อมูลการขาดลาของเจ้าหน้าที่ (leavework_officer.csv) ๒.๓ แฟ้มข้อมูลการขาดลาของพนักงาน (leavework_empl.csv) ๒.๔ แฟ้มข้อมูลการขาดลาของอาจารย์ (leavework_ajarn.csv) แล้วปรับปรุงข้อมูลด้วยการเพิ่มข้อมูลเดือนใหม่ หรือเพิ่มลบบุคลากร ๓) เข้าสู่ระบบ e-document ของมหาวิทยาลัยในห้อง person ๔) upload แฟ้มทั้ง ๔ ที่มีรูปแบบเป็น CSV ๕) เข้าระบบอินทราเน็ตตรวจสอบการปรับปรุงว่ามีการรายงานข้อมูลการขาดลาสายถูกต้องหรือไม่ ๖) แจ้งให้ผู้เกี่ยวข้องได้รับทราบ

ระบบหรือขั้นตอนการปรับปรุงผลการเรียนออนไลน์

ตัวย่างแฟ้ม csv ที่เปิดด้วย excel

22 ม.ค.53 นำขั้นตอนเดิมที่เผยแพร่เมื่อ 25 พ.ย.2552 มาปรับปรุง และประชาสัมพันธ์ให้เกิดการคิดต่อในการเขียนระบบและขั้นตอนของงานหน่วยอื่นต่อไป โดยมีรายละเอียดใหม่ดังนี้ วัตถุประสงค์ของระบบคือ ปรับปรุงข้อมูลผลการเรียนของนักศึกษา ที่ให้บริการแก่นักศึกษาตรวจผลการเรียนด้วยตนเองผ่านระบบอินเทอร์เน็ต ให้เป็นข้อมูลล่าสุดหลังจากคณะวิชาส่งผลการเรียนทุกสิ้นภาคการศึกษา กลไกที่รับผิดชอบในการดำเนินการตามระบบ คือ บุคลากรที่หัวหน้างานทะเบียนมอบหมายให้ดำเนินการมีหน้าที่ดำเนินการทุกสิ้นภาคการศึกษา และหลังเปิดภาคเรียนไปแล้วประมาณ ๓ สัปดาห์
     มีขั้นตอนดังนี้ ๑) งานทะเบียนรับผลการเรียนจากอาจารย์ผู้สอนในแต่ละคณะวิชา ๒) ตรวจสอบความถูกต้องของข้อมูล แล้วกรอกข้อมูลเข้าสู่ระบบฐานข้อมูล ๓) เลือกส่งออกข้อมูลที่จำเป็นไปเป็นแฟ้มข้อมูลเฉพาะเรื่อง ได้แก่ แฟ้มผลการเรียน แฟ้มอาจารย์ และแฟ้มวิชา ให้อยู่ในแฟ้มที่มีรูปแบบเป็น CSV ๔) เข้าสู่ระบบ e-document ของมหาวิทยาลัยในห้อง grade ๕) upload แฟ้มผลการเรียนเฉพาะเรื่องที่มีรูปแบบเป็น CSV สำหรับแฟ้มผลการเรียนให้แยกเป็นภาคเรียนละ ๑ แฟ้ม ๖) สั่งปรับปรุงข้อมูลในเครื่อง yn1 โดยใช้ข้อมูลจากเครื่อง it ให้มีข้อมูลตรงกัน โดยมีตัวอย่าง URL ดังนี้ http://yn1.yonok.ac.th/grade/_regist20083.php ๗) ตรวจสอบผลการปรับปรุงว่านักศึกษาได้ข้อมูลผลการเรียนล่าสุดของตนหรือไม่ จาก URL ดังนี้ http://www.yonok.ac.th/grade ๘) ประชาสัมพันธ์ให้คณะวิชา และนักศึกษาได้รับทราบ

นิยามศัพท์เฉพาะ ที่เกี่ยวข้องกับระบบฐานข้อมูล

13 ธ.ค.52 ปีการศึกษานี้เริ่มการประเมินความพึงพอใจของผู้ใช้ระบบฐานข้อมูล ซึ่งหลายท่านไม่ทราบนิยามศัพท์ของคำต่าง ๆ ที่เกี่ยวข้องจึงได้จัดทำ นิยามศัพท์เฉพาะ ที่เกี่ยวข้องกับระบบฐานข้อมูล โดยรับความอนุเคราะห์เรียบเรียงจาก อ.วิเชพ ใจบุญ และ อ.เกศริน อินเทลา  และเผยแพร่ให้ทุกคณะ และหน่วยงานได้รับทราบผ่านบันทึก งทส. ๔๑/๒๕๕๒ โดยมีรายละเอียดดังนี้
     ๑. ระบบฐานข้อมูล (Database System) คือ การรวมและจัดเก็บข้อมูลที่มีความสัมพันธ์กันเข้าด้วยกัน (Integration) โดยมีการจัดกลุ่มข้อมูลให้อยู่ในรูปตาราง (Grouping) ที่สามารถเชื่อมโยงตารางทั้งหมดเข้าหากัน(Sharing) เพื่อลดความซ้ำซ้อนในการจัดเก็บ (Non Redundancy) ไม่มีความขัดแย้งของข้อมูล (Inconsistency) และมีความคงสภาพของข้อมูล (Integrity)
     ๒. ข้อมูล (Data) คือ ค่าของความจริงที่ปรากฏขึ้น โดยค่าความจริงที่ได้จะนำมาจัดการ ปรับแต่งหรือประมวลผล เพื่อให้ได้สารสนเทศที่ต้องการ
     ๓. สารสนเทศ (Information) คือ กลุ่มของข้อมูลที่ผ่านการประมวลผลตามกฎเกณฑ์ เพื่อให้ข้อมูลเหล่านั้นมีความหมายและมีประโยชน์ตามความต้องการของผู้ใช้
     ๔. ระบบ (System) คือ สิ่งที่ประกอบขึ้นมาจากหน่วยย่อยหรือองค์ประกอบย่อย ที่มีความสัมพันธ์และทำหน้าที่ร่วมกัน เพื่อให้บรรลุวัตถุประสงค์ที่กำหนดไว้
    ๕. ระบบ (System) มีความหมายอธิบายในคู่มือของ สกอ. (พ.ค.52) หน้า 222
ระบบ (System) ประกอบด้วย 1)วัตถุประสงค์ (Objective) 2)ปัจจัยนำเข้า (Input) 3)กระบวนการ (Process) และ 4)ผลผลิต (Output) แต่ในการประเมินตามคู่มือของ สกอ. คำว่าระบบ จะเน้นที่กระบวนการ หมายถึง ขั้นตอนการปฏิบัติงานที่มีการกำหนดอย่างชัดเจนว่าต้องทำอะไรบ้าง เพื่อให้ได้ผลออกมาตามที่ต้องการ ขั้นตอนการปฏิบัติงานจะปรากฎให้ทราบโดยทั่วกันไม่ว่าจะในรูปของเอกสารหรือสื่ออิเล็กทรอนิกส์หรือโดยวิธีการอื่น ๆ
     ๖. ระบบและกลไก มีความหมายอธิบายในคู่มือของ สกอ. (พ.ค.52) หน้า 162
     ระบบและกลไก คือ ขั้นตอนการดำเนินงานต่าง ๆ ที่มีความสัมพันธ์และเชื่อมโยงกันอย่างเป็นระบบ โดยอาศัยบุคลากร ทรัพยากร กฎเกณฑ์ มาตรการ แนวปฏิบัติ และปัจจัยต่าง ๆ เป็นกลไกให้การดำเนินงานบรรลุเป้าหมาย

เรียบเรียงโดย อาจารย์คณะวิทยาศาสตร์และเทคโนโลยี