SứC MạNH CủA HTML5 TRONG THIếT Kế WEBSITE

Thứ sáu - 28/11/2014 09:57

Bạn đang tìm kiếm một giải pháp thiết kế hoàn hảo? HTML5 có thể đáp ứng tất cả những gì bạn cần.

Bạn đang tìm kiếm một giải pháp thiết kế hoàn hảo? HTML5 có thể đáp ứng tất cả những gì bạn cần.

Ban đầu, HTML5  chỉ sử dụng cho việc phát triển  các danh mục sản phẩm tĩnh và cấu trúc trang web nhẹ. Tuy nhiên, kể từ khi được cải tiến, HTML5 đa dạng  hỗ trợ chúng ta rất nhiều tính năng trong thiet ke website. Cùng phân tích những lợi ích mà HTML5 đem lại .
 

Về cơ bản, HTML5 bổ sung các thẻ code mới với nhiều tính năng mới hơn so với trước đây.

HTML5  cho phép  một ứng dụng web có thể hoạt động trơn tru mà không có một kết nối Internet?  Không chỉ vậy, nó cũng cho phép bạn lưu dữ liệu vào bộ nhớ đệm dữ liệu offline.

Khả năng kết nối 

HTML5  giúp kết nối mọi người với nhau bởi tính năng trò chuyện ,bạn sẽ không cần một plug-in hoặc bất kỳ ứng dụng nào khác.

Multimedia dưới dạng video:

HTML5 tích hợp thành công audio và video vào trình duyệt mà không cần bất kỳ Flash hay Silverlight. Trước đây các nhà thiết kế web thích dùng flash để website thêm sinh động nhưng bị hạn chế là flash rất nặng có thể làm chậm tốc độ tải của website. Ngày nay, với HTML5 việc tạo ra những hiệu ứng sinh động rất đơn giản.

Hiệu ứng đặc biệt và đồ họa 3D:

Trong quá khứ, các nhà thiết kế web đều phụ thuộc vào Flash / CSS hay JavaScript để chế tạo các hình ảnh động và cung cấp cho hiệu ứng hình ảnh cho trang web của họ. Với một số thẻ mới HTML5 chúng ta có thể tạo ra hiệu ứng hình ảnh ấn tượng rất giống với  file flash. HTML5 ra đời dường như chấm chứt thời kì sử dụng flash trong thiết kế website. Hơn nữa, HTML5 có một số tính năng tiên tiến khác: 2D Canvas, WebGL ..

Hiệu suất và tích hợp:

 
HTML5 đảm bảo các ứng dụng của bạn được nhanh hơn và mạnh mẽ hơn mọi trình duyệt.

Thay thế Flash:

Thiết bị di động ra đời đánh dấu sự thay đổi lớn trong thiết kê web. Điều này ngụ ý rằng ngày càng có nhiều người dùng  sử dụng các trình duyệt trên thiết bị di động để xem các trang web hoặc các ứng dụng  trong tương lai.  Adobe đã tuyên bố cái chết của Flash trên điện thoại di động. HTML5 là lựa chọn của hầu hết các nhà thiết kê website hiện nay.

Tại sao HTML5 sẽ là tương lai của web?

 

HTML5 sẽ trở thành nền tảng ưa thích nhất và là sự lựa chọn của các nhà phát triển web. Trong tương lai, một ứng dụng web phải có khả năng tương thích với nền tảng di động .Vì vậy HTML5 được coi lá tương lai của Thiet ke web.

Read More

CSS3 Animation: Bắt đầu tạo hiệu ứng không cần tới javascript

Như các bạn đã biết, khi CSS3 chưa ra đời,thì việc tạo hiệu ứng cho trang web chủ yếu là dùng jQuery. Việc dùng jQuery phần nào làm ảnh hưởng tới tốc độ load của trang web. Nhưng từ khi có CSS3 với 2 thuộc tính quan trọng đó là Transition và Animation có thể giúp ta làm các hiệu ứng mà ko cần tới jquery (tất nhiên với các hiệu ứng phức tạp thì ko thể ko dùng). Vì vậy trong bài viết này mình sẽ giới thiệu với các bạn thuộc tính Animation và một ứng dụng đơn giản của nó. Các bạn xem qua demo. Nếu các bạn đã biết về CSS3 Animation thì thử nghĩ xem demo này animation sẽ được sử dụng thế nào nhé. Còn các bạn bắt đầu tìm hiểu thì chúng ta hãy qua phần lí thuyết trước.

Ứng dụng của animation

Với CSS3 Animation chúng ta có thể tạo ra hình ảnh động, thay thế các hình ảnh hoạt hình, hình ảnh động flash và JavaScript trong các trang web.

Cấu trúc của CSS3 Animation

1	animation: name duration timing-function delay iteration-count direction play-state;

animation-name: Tên của animation.

animation-duration: Thời gian của animation

animation-timing-function: Mô tả animation sẽ diễn ra như thế nào trên chu kì của nó. Giá trị mặc định ease.

animation-delay: Sau bao lâu animation sẽ bắt đầu(độ trễ). mặc định 0s

animation-iteration-count: Số lần thực hiện animation

animation-direction: Chỉ định xem animation sẽ diễn ra lần lượt từng chu kì hay ở chu kì tiếp theo sẽ đảo ngược lại với 2 giá trị: normal và alternate. Giá trị này chỉ có tác dụng khi animation-iteration-count có giá trị từ 2 trở lên.

animation-play-state: Chỉ định animation có diễn ra hay ko (running hoặc paused)

Các bạn chú ý rằng Animation chỉ hỗ trợ bộ -moz và -webkit vì thế chỉ chạy được trên Firefox, Chrome và Safari. Và các bạn cần thêm tiền tố vào trước animation ứng với mỗi trình duyệt.

Ở trên chúng ta đã nói tới animation-name. Tên của animation này được định nghĩa bởi @keyframe. @keyframe này sẽ định nghĩa animation sẽ diễn ra như thế nào.

Cấu trúc @keyframe

1	@keyframes animationname {keyframes-selector {css-styles;}}

@keyframes:từ khóa.

Animationname: bắt buộc phải có. tên của animation và có tác dụng khi gọi animation.

keyframes-selector: bắt buộc. Và được xác định bởi phần trăm thời gian diễn ra animation

css-style: Cần có 1 hay nhiều thuộc tính css.

Đó là những thuộc tính của animation. Tiếp theo chúng ta sẽ xem sử dụng chúng như thế nào vào demo. Trong demo này chúng ta thấy khi hover qua sẽ có sự chuyển động của colum từ trái qua phải và trở về vị trí cũ. Vậy chúng ta sẽ áp dụng css animation ra sao đây? Chúng ta cùng làm nào:

Mã html

01	<div id="content">

02	<div id="colum1" class="colum">

03	<h2>Step 1</h2>

04	<p>Lorem ipsum dolor sit amet, consectetue adi piscing elitsed dia myni bh euismocidunt dolor non lorem.</p>

05	<a href="#">More</a>

06

</div>

07

08	<div id="colum2" class="colum">

09	<h2>Step 2</h2>

10	<p>Lorem ipsum dolor sit amet, consectetue adi piscing elitsed dia myni bh euismocidunt dolor non lorem.</p>

11	<a href="#">More</a>

12

</div>

13

14	<div id="colum3" class="colum">

15	<h2>Step 3</h2>

16	<p>Lorem ipsum dolor sit amet, consectetue adi piscing elitsed dia myni bh euismocidunt dolor non lorem.</p>

17	<a href="#">More</a>

18

</div>

19

20	<div id="colum4" class="colum">

21	<h2>Step 4</h2>

22	<p>Lorem ipsum dolor sit amet, consectetue adi piscing elitsed dia myni bh euismocidunt dolor non lorem.</p>

23	<a href="#">More</a>

24

</div>

25

</div>

Mã CSS cho phần hiển thị:

01

.colum{

02	float: left;

03	width: 281px;

04	height: 279px;

05	background: url(../images/bg-block.png) no-repeat 0 bottom;

06	margin-left: -52px;

07	position: relative;

08

left: 0;

09

}

10	#colum2:hover, #colum3:hover, #colum4:hover {

11	z-index: 5 !important;

12

}

13

14

#colum1{

15	z-index: 4;

16	background: url(../images/bg-step.png) no-repeat 0 0;

17

}

18	#colum1:hover{

19	background: url(../images/bg-step.png) no-repeat 0 bottom;

20

}

21

#colum2{

22	z-index: 3;

23	background: url(../images/bg-step2.png) no-repeat 0 0;

24

}

25	#colum2:hover{

26	background: url(../images/bg-step2.png) no-repeat 0 bottom;

27

}

28

#colum3{

29	z-index: 2;

30	background: url(../images/bg-step3.png) no-repeat 0 0;

31

}

32	#colum3:hover{

33	background: url(../images/bg-step3.png) no-repeat 0 bottom;

34

}

35

#colum4{

36	z-index: 1;

37	background: url(../images/bg-step4.png) no-repeat 0 0;

38

}

39	#colum4:hover{

40	background: url(../images/bg-step4.png) no-repeat 0 bottom;

41

}

42	.colum h2{

43	color: #47453E;

44	font-size: 24px;

45	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

46	font-weight: bold;

47	font-style: normal;

48	text-shadow: 1px 1px 0 rgba(255, 255, 255, .5), 1px 1px 0 rgba(0, 0, 0, .5)inset;

49	background: url(../images/bg-h.png) bottom repeat-x;

50	margin: 10px 47px 0px 21px;

51	padding: 17px 0px 19px;

52	letter-spacing: -1px;

53	text-shadow: 1px 1px 0 rgba(255, 255, 255, .3);

54

}

55	.colum:hover h2{

56	color: #FFFCE9;

57

}

58

.colum p{

59	font-size: 14px;

60	color: #3C3A35;

61	font-weight: bold;

62	font-style: italic;

63	line-height: 24px;

64	letter-spacing: -1px;

65	padding: 8px 82px 0px 19px;

66	margin-bottom: 14px;

67	text-shadow: 1px 1px 0 rgba(255, 255, 255, .2);

68

}

69	.colum:hover p{

70	color: #D9D6C6;

71

}

72

.colum a{

73	background: #47433E;

74	display: inline-block;

75	box-shadow: 1px 1px 0 rgba(255,255,255, .3), 1px 1px 3px rgba(0,0,0, .5) inset;

76	border-radius: 20px;

77	width: 70px;

78	padding: 6px 0 10px;

79	text-align: center;

80	color: #F5F2DF;

81	font-size: 17px;

82	text-shadow: 1px 1px 0 rgba(0, 0, 0, .7);

83	text-decoration: none;

84	margin: 0px 0px 0px 20px;

85

}

86	.colum a:hover{

87	background: #1A1A17;

88

}

Bắt đầu hiệu ứng Animation

Trước hết chúng ta cần định nghĩa animation này đã. Như đã thấy ở demo. Colum sẽ chuyển dịch từ vị trí ban đầu sang phải 60px rồi lại trở về vị trí cũ. Vậy đã sẽ định nghĩa animation này như sau.

Ban đầu(0%): colum tại vị trí 1.

Một phần tư thời gian(25%): Colum di chuyển từ vị trí 1 sang phải tới vị trí 2 cách vị trí 1 30px

Nửa thời gian(50%): Colum di chuyển từ vị trí 2 sang phải tới vị trí 3 cách vị trí 1 60px

Ba phần tư thời gian(75%):Colum di chuyển từ vị trí 3 sang trái về vị trí 2 cách vị trí 1 30px.

Cuối cùng(100%): Colum di chuyển từ vị trí 2 về vị trí 1

Và đây là @keyframes

01	@-webkit-keyframes myfirst /* Safari and Chrome */

02

{

03	0%   {-webkit-transform: translate(0px, 0px); }

04	25%  {-webkit-transform: translate(30px, 0px);}

05	50%  {-webkit-transform: translate(60px, 0px); }

06	75%  {-webkit-transform: translate(30px, 0px); }

07	100% {-webkit-transform: translate(0px, 0px); }

08

}

09	@-moz-keyframes myfirst /* Firefox */

10

{

11	0%   {-moz-transform: translate(0px, 0px); }

12	25%  {-moz-transform: translate(30px, 0px);}

13	50%  {-moz-transform: translate(60px, 0px); }

14	75%  {-moz-transform: translate(30px, 0px); }

15	100% {-moz-transform: translate(0px, 0px); }

16

}

Cuối cùng ta chỉ cần gọi hàm Animation

1	#colum2:hover, #colum3:hover, #colum4:hover {

2	-webkit-animation: myfirst 0.8s linear 0s 1 alternate;

3	-moz-animation: myfirst 0.8s linear 0s 1 alternate;

4

}

Như vậy chúng ta đã có một hiệu ứng cho trang web sử dụng CSS3 Animation. Nếu như các bạn tìm được hiệu ứng trên trang web nào đẹp hãy chia sẽ cùng mọi người. Hoặc tốt hơn hết hãy viết một tut gửi về ntuts.com mọi người chắc hẳn sẽ rất biết ơn về sự chia sẻ của các bạn! Cám ơn mọi người!

Read More