Sử dụng jquery để tạo portfolio từ flickr

04/11/2010 | 656 views

1.     FLickr là gì ?

a. b.    Flickr là một dịch vụ lưu trữ ảnh của Yahoo. Cho phép người dùng  lưu trữ và  phát hành ảnh của mình trực tuyến.

c.      Để có tài khoản FLickr, người dùng  sử dụng chính account Yahoo messenger của mình để đăng nhập và quản lý – thật là tiện .

2.     API là gì ? Flickr API là gì ?

a.     API là viết tắt của application programming interface ( giao diện lập trình ứng dụng )   giải thích chi tiết thì có lẽ nên để cho “ đồng chí” wiki sẽ trình bày chi tiết hơn, còn nói ngắn gọn thì API có tác dụng như một cầu nối để các ứng dụng có thể trao đổi yêu cầu, kết nối dữ liệu với nhau. Trong trường hợp của bài viết, ta sử dụng Flickr API  – một loại cầu nối cung cấp bởi Flickr – để lấy dữ liệu là các ảnh từ Flickr .

3.     Portfolio là gì ?

a.     Khi đi xin việc liên quan đến các ngành nghề khác, thường nhà tuyển dụng sẽ hỏi đến bằng cấp, kinh nghiệm của bạn.

b.    Khi ứng tuyển liên quan đến thiết kế, nhà tuyển dụng sẽ hỏi bạn về portfolio đầu tiên – Portfolio là nơi bạn trưng bày các sản phẩm về thiết kế trong các lĩnh vực của mình, 2D,web, 3D, film… vì với thiết kế dựa  vào portfolio có thể đánh giá khả năng thiết kế  trực quan và nhanh nhất.

4.     Jquery  là gì.

a.     Jquery  là một thư viện kiểu mới của javascript. Giúp ta có thể tạo những hiệu ứng chuyển động mượt mà nhờ kết hợp giữa javascript và css .

Bài viết hướng dẫn sử dụng các API của Flickr để load các ảnh từ flickr và hiển trị trên các hệ máy không hỗ trợ flash player như điện thoại, itouch, ipad, iphone.

1.     Flickr cung cấp cho ta khá nhiều công cụ và các hàm để kết nối và lấy dữ liệu ( là ảnh về ) – tất cả các hàm kèm theo công dụng được cập nhật trong trang chủ : www.flickr.com/services/api.

a. để kết nối với flickr bạn cần một “chìa khóa” để mở, đó là API key. Các bước để tạo Api key như sau :

b.    Đăng nhập vào Flickr.com bằng tải khoản yahoo của bạn.


c.      truy nhập vào đường dẫn và làm theo các bước


d.    Sau bước thứ 2 thì giá trị khóa được hiển thị  đó là Flickr API


2.     Trước khi bạn bắt đầu, bạn cần phải download file demo từ địa chỉ  http://mos.futurenet.com/resources/computerarts/cap136iphonefolio.zip
Trong file zip này có chứa một số plugin jquery giúp bạn hiển thị trên điện thoại , đó là plugin JQTouch.

3.     File đầu tiên là file index.html. File có tác dụng load các thư viện jquery và sử dụng JQTouch  được đặt trong phần head.

4.     Bên dưới phần head là body. Phần body này bạn nên tự thiết kế bằng photoshop cho phù hợp với cá tính. Ví dụ mang tính chất demo nên phần body khá đơn giản.

5.     Thêm một chút CSS vào ta được giao diện.

6.     Mở file photoset.php . Thay phần API key bằng API key của bạn , photoset_id bằng photoset_id của bạn.
File này có sử dụng Flickr api nên bắt buộc phải đuôi là php. Còn lại sử dụng là jquery.

(lưu ý là file PHP được chạy trên server, bạn lựa chọn cài một server cho phù hợp – mình dùng wamp ( free tại http://wamp .com )

7.     Xem trên trình duyệt của iphone.

8.     Thêm một chút CSS.

9.     Xem trên trình duyệt firefox 3.6

10.                        Sử dụng thêm plugin JQTouch để giúp bạn có một icon thể hiện đẹp trên iphone .

11.                        Bước cuối cùng để hoàn thiện là bạn phải biết được người nào dùng iphone truy nhập web để điều hướng đến trang web phù hợp.
Để làm việc đó bạn làm các bước sau :

a.     Tạo một file đặt tên là .httacess.
b.    Mở file này bằng notepad.
c.      Paste đường dẫn tới giao diện iphone vào

d.    Đặt file này vào cùng với file trang chủ index.html

VietND – Dịch từ computer arts.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *