เบื่อกันมัยกับ Lorem Ipsum เรามาหาคำอืนแทนกันดีกว่า

จากโพสก่อหน้า ได้พูดถึงที่มาที่ไปของเจ้า Lorem Ipsum กันไปแล้ว ซึงมันก้มีการใช้มายาวนานละ
ลองมาคำใหม่ๆมาแทนกันมังดีกว่า
เข้าไปที่ Website: http://www.fillerati.com/ คำตอบอยู่ที่นั้นแล้วเลือกกันตามสบาย

Lorem Ipsum นี่มันมาจากใหน

Lorem Ipsum    แน่นอเราต้องนึกถึงคำนี้ก่อนเสมอเวลาที่เราต้องการจะใส่ข้อมูลบ่างอย่าง
เพื่อที่จะให้เห็นการแสดงผลคร่าวๆ เวลาที่เราออกแบบเว้บหรือกราฟฟิค

แล้วไอ้คำนี้มีที่มาที่ไปอย่างไรอะ...

นี่คือคำตอบ

ตรงกันข้ามกับความเชื่อที่นิยมกัน Lorem Ipsum ไม่ได้เป็นเพียงแค่ชุดตัวอักษรที่สุ่มขึ้นมามั่วๆ แต่หากมีที่มาจากวรรณกรรมละตินคลาสสิกชิ้นหนึ่งในยุค 45 ปีก่อนคริสตศักราช ทำให้มันมีอายุถึงกว่า 2000 ปีเลยทีเดียว ริชาร์ด แมคคลินท็อค ศาสตราจารย์ชาวละติน จากวิทยาลัยแฮมพ์เด็น-ซิดนีย์ ในรัฐเวอร์จิเนียร์ นำคำภาษาละตินคำว่า consectetur ซึ่งหาคำแปลไม่ได้จาก Lorem Ipsum ตอนหนึ่งมาค้นเพิ่มเติม โดยตรวจเทียบกับแหล่งอ้างอิงต่างๆ ในวรรณกรรมคลาสสิก และค้นพบแหล่งข้อมูลที่ไร้ข้อกังขาว่า Lorem Ipsum นั้นมาจากตอนที่ 1.10.32 และ 1.10.33 ของเรื่อง "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) ของ ซิเซโร ที่แต่งไว้เมื่อ 45 ปีก่อนคริสตศักราช หนังสือเล่มนี้เป็นเรื่องราวที่ว่าด้วยทฤษฎีแห่งจริยศาสตร์ ซึ่งเป็นที่นิยมมากในยุคเรเนสซองส์ บรรทัดแรกของ Lorem Ipsum "Lorem ipsum dolor sit amet.." ก็มาจากบรรทัดหนึ่งในตอนที่ 1.10.32 นั่นเอง

ด้าน ล่างของหน้านี้คือท่อนมาตรฐานของ Lorem Ipsum ที่ใช้กันมาตั้งแต่คริสตศตวรรษที่ 16ที่ได้รับการสร้างขึ้นใหม่สำหรับผู้ที่สนใจ ประกอบไปด้วย ตอนที่ 1.10.32 และ 1.10.33 จากเรื่อง "de Finibus Bonorum et Malorum" โดยซิเซโร ก็ได้รับการผลิตขึ้นใหม่ด้วยเช่นกันในรูปแบบที่ตรงกับต้นฉบับ ตามมาด้วยเวอร์ชั่นภาษาอังกฤษจากการแปลของ เอช แร็คแคม เมื่อปี ค.ศ. 1914

 ที่มาจาก http://th.lipsum.com/
อ่อแล้วเรายังสามารถที่จะเจนเนื้อหาจากลิงค์ข้างบนได้ดวยนะ

มาสร้างเมนูรูปภาพเจ๋งๆ Infinite jQuery Carousel – carouFredSel

คราวนี้เรามาสร้างเมนูรูปภาพสวยๆกันโดยเราจะใช้ javascript framework ที่ชืี่อ Jquery
โดยจะใช้ Plugin ที่ชื่อ jQuery.carouFredSel กันนะ

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

ตัวอย่าง JavaScript

01	$("#foo2").carouFredSel({

02	auto : false,

03

prev : {

04	button  : "#foo2_prev",

05	key     : "left"

06

},

07

next : {

08	button  : "#foo2_next",

09	key     : "right"

10

},

11	pagination  : "#foo2_pag"

12

});

อันนี้เป็น HTML

01	<div class="image_carousel">

02	<div id="foo2">

03	<img src="examples/images/small/basketball.jpg" alt="basketball" width="140" height="140" />

04	<img src="examples/images/small/beachtree.jpg" alt="beachtree" width="140" height="140" />

05	<img src="examples/images/small/cupcackes.jpg" alt="cupcackes" width="140" height="140" />

06	<img src="examples/images/small/hangmat.jpg" alt="hangmat" width="140" height="140" />

07	<img src="examples/images/small/new_york.jpg" alt="new york" width="140" height="140" />

08	<img src="examples/images/small/laundry.jpg" alt="laundry" width="140" height="140" />

09	<img src="examples/images/small/mom_son.jpg" alt="mom son" width="140" height="140" />

10	<img src="examples/images/small/picknick.jpg" alt="picknick" width="140" height="140" />

11	<img src="examples/images/small/shoes.jpg" alt="shoes" width="140" height="140" />

12	<img src="examples/images/small/paris.jpg" alt="paris" width="140" height="140" />

13	<img src="examples/images/small/sunbading.jpg" alt="sunbading" width="140" height="140" />

14	<img src="examples/images/small/yellow_couple.jpg" alt="yellow couple" width="140" height="140" />

15

</div>

16	<div class="clearfix"></div>

17	<a class="prev" id="foo2_prev" href="#"><span>prev</span></a>

18	<a class="next" id="foo2_next" href="#"><span>next</span></a>

19	<div class="pagination" id="foo2_pag"></div>

20

</div>

ตัวอย่าง CSS

01	.image_carousel {

02	padding: 15px 0 15px 40px;

03	position: relative;

04

}

05	.image_carousel img {

06	border: 1px solid #ccc;

07	background-color: white;

08	padding: 9px;

09	margin: 7px;

10	display: block;

11	float: left;

12

}

13	a.prev, a.next {

14	background: url(../images/miscellaneous_sprite.png) 0 0 no-repeat transparent;

15	width: 45px;

16	height: 45px;

17	display: block;

18	position: absolute;

19	top: 85px;

20

}

21	a.prev {        left: -22px; }

22	a.prev:hover {  background-position: 0 -50px; }

23	a.next {        right: -22px;

24	background-position: -50px 0; }

25	a.next:hover {  background-position: -50px -50px; }

26	a.prev span, a.next span {

27	display: none;

28

}

29	.pagination {

30	text-align: center;

31

}

32	.pagination a {

33	background: url(../images/miscellaneous_sprite.png) 0 -100px no-repeat transparent;

34	width: 15px;

35	height: 15px;

36	margin: 0 5px 0 0;

37	display: inline-block;

38

}

39	.pagination a.selected {

40	background-position: -25px -100px;

41	cursor: default;

42

}

43	.pagination a span {

44	display: none;

45

}

46	.clearfix {

47	float: none;

48	clear: both;

49

}

ดูต่อได้ที่ 

Requirements: jQuery

Compatibility: All Major Browsers

Website: http://caroufredsel.frebsite.nl/

แจกอีกสำหรับแอนดรอย์ เอาไว้ออกแบบหน้าตาเจ้าหุ่น Free Android GUI Set In PSD

ตัวนี้เป็นไฟล์โฟโต้ชอปเหมือนเคยแล้วมันมีอะไรมาให้มังละ

- Main menu
- Contextual menus
- Keyboard
- Radio
- Applications
- Browser
- Status Bar
- Screen label
- Dialog
- Options panel
- Slider
- Google search
- Circle buttons
- Bottom bar
- Media player
- Contact list
- Messages view
- Message compose
- Word suggestion
- Hour
- Signal bar
- Battery status
เพียบเลยดิ หวังว่าคงจะถูกใจกันนะครับ
โหลดได้ที่
Website: http://www.webdesignshock.com/freebies/free-photoshop-android-interface-gui/

ไวเพรมฟรี อีตัว Sqetch @ A Stylish Illustrator Wireframe Toolkit

คราวที่แล้วเป็นฟรี Photoshop คราวนี้ถึงคราว Illustrator มังแล้วครับ ไวเฟรมตัวนี้

ไม่ธรรมดาเนืองจากมีมาให้ครับคลุม ทังเว็บคอนโทรลต่างๆ แต่มันยังมีพวกคอนโทรล

ของอุปกรณ์ จำพวก IPad หรือ SmartPhone มาให้ครบครับ แถมทีมยังเป็นแบบ

ฟรีแฮนสเกต์เอา สวยไปอีกแบบ ที่สำคัญ ฟรี.. เอลืมบอกชื่อ Sqetch 

ลองดูที่เค้ามีให้นะเจ๋งมัยละ

Browser

iPad upright

iPad landscape

Smartphone

GUI-Elements

Form-Elements

โหลดได้ที่นี่ http://www.eleqtriq.com/2010/08/sqetch-wireframe-toolkit/

โพสแรกของวันนี้ ขอเสนอ WEB Wireferame สำหรับ Web designer

ดาวโหลดได้ที่นี่ครับ http://www.emazekraker.biz/projects/webWireframeKit/
เปนไฟล์ PSD แบบ Layer มีให้ครบเลย มีสองสีแบบแรกจะออกโทนดำๆเทาๆ
ส่วนอีกอัน จะเป็นโทนขาวๆ

แล้วไอ้ไวเฟรมนี่มันเอาไว้ทำอะไร ก็ประมาณว่าเป็นต้นแบบของหน้าเว็บทำออกมาว่าหน้าตาประมาณนี้
มีอะไรอยู่ตรงใหนบ้าง งงมัยเนียย

โพสนี้แค่นี้ก่อนละกัน...