Thêm hình ảnh vào Module Mã nguồn là một phần không thể thiếu trong công việc tạo ra các Module tuỳ chỉnh ứng dụng di động của bạn, bạn sẽ làm điều đó bằng cách nào ?
Những điều bạn cần biết
Thêm hình ảnh tương đối khá dễ dàng với đoạn code cơ bản như sau:
Ví dụ 1:
- <img src=“https://appteng.com/banner_teng.png” alt=“AppTeng” />
Bạn sẽ thấy hình ảnh trong ứng dụng di động của bạn giống như bên dưới:
Tất cả những gì bạn cần làm đầu tiên đó là khai báo với Module Mã nguồn bạn muốn thêm một hình ảnh img và sau đó là nguồn hình ảnh từ đâu src (viết tắt của “source” = nguồn).
Chú ý phần tử img là một phần tử đơn vì nó chỉ có một thẻ bao gồm cả đóng và mở.
“https://appteng.com/banner_teng.png” là tên và nguồn của tập tin hình ảnh bạn muốn thêm vào Module Mã nguồn. “
“.png” là định dạng ảnh. Cũng giống như phần mở rộng “.htm” cho biết đó là một tập tin HTML, “.png” khai báo cho Module Mã nguồn biết đây là một loại hình ảnh. Có 3 định dạng hình ảnh thông dụng bạn có thể chèn vào ứng dụng di động của bạn:
– JPG / JPEG (Joint Photographic Experts Group)
– PNG (Portable Network Graphics)
JPEG thường được dùng trong thể loại hình ảnh chụp. JPEG gồm có hàng triệu màu, định dạng JPEG tối ưu cho các hình ảnh phức tạp. Càng nén tốt hơn, kích thước tập tin sẽ nhỏ hơn, úng dụng của bạn sẽ được tải nhanh hơn. Cũng như bạn có thể đã biết, những ứng dụng tải lâu với những lý do không chính đáng sẽ làm cho người dùng ứng dụng khó chịu và bỏ qua.
AppTeng quy định, PNG và JPEG là hai định dạng chủ yếu trên ứng dụng di động. Định dạng PNG là loại ảnh tổng hợp những phẩm chất tốt nhất: chứa hàng triệu màu và nén hiệu quả.
Tôi có thể lấy hình ảnh từ đâu?
Để tự tạo ra các hình ảnh, bạn cần các chương trình biên soạn hình ảnh. Một chương trình biên soạn hình ảnh là một phần thiết yếu trong công việc tạo các ứng dụng di động.
Thật không may, không có những chương trình biên soạn hình ảnh thật sự tốt có sẵn trong Windows. Vì thế, bạn có thể phải cái đặt thêm một số chương trình chuyên nghiệp như Photoshop, Macromedia Fireworks hoặc Paintshop Pro, đây cũng là 3 chương trình tốt nhất mà bạn nên quan tâm.
Nếu bạn đang sử hệ điều hành Mac, ứng dụng Xem trước – Preview là một lựa chọn tốt cho bạn.
Tuy nhiên trong các hướng dẫn Mã nguồn HTML với Module Mã nguồn trên nền tảng AppTeng, bạn không nhất thiết phải có những chương trình này, bạn có thể tận dụng một số hình ảnh sẵn có hoặc tìm kiếm tại images.google.com bằng cách
1. Nhấp chuột phải trên hình ảnh bạn tìm thấy trên Internet.
2. Chọn “Save picture as…” ở menu xuất hiện.
3. Chọn nơi lưu trữ hình ảnh trên máy tính và nhấp vào “Save”.
Hãy cẩn thận, nếu hình ảnh chỉ dùng để phục vụ việc thử nghiệm thì bạn không cần phải lo lắng, nhưng khi sử dụng cho các ứng dụng di động chính thức sau này, bạn nên lưu ý về vấn đề bản quyền, để tránh rắc rối với Apple và Google, họ sẽ có quyền loại bỏ ứng dụng của bạn trên kho ứng dụng của họ nếu hình ảnh đó bị chủ sở hữu tố cáo xâm phạm.
Đó có phải là tất cả những điều tôi cần biết về hình ảnh?
Còn vài điều bạn cũng cần nên biết thêm về hình ảnh.
Đầu tiên, bạn có thể thêm hình ảnh từ các thư mục con trên máy chủ của bạn (nếu có) hoặc thậm chí từ website khác:
Ví dụ 2:
- <img src=“images/logo.png” />
Ví dụ 3:
- <img src=“http://www.google.com.vn/images/srpr/logo11w.png” />
Thứ hai, hình ảnh cũng có thể được dùng để liên kết
Bạn sẽ thấy trình duyệt như sau (hãy thử nhấp chuột vào hình ảnh):
Ví dụ 4:
- <a href=“https://appteng.vn”><img src=“https://appteng.com/banner_teng.png”/></a>
Bạn sẽ thấy hình ảnh trong ứng dụng di động của bạn giống như bên dưới (hãy thử nhấp chuột vào hình ảnh)
Có những thuộc tính hình ảnh nên cần nhớ?
Có hai thuộc tính quan trọng mà bạn không thể bỏ qua đó là width và height:
Ví dụ 7:
- <img src=“https://appteng.com/banner_teng.png” width=“288px” height=“300px”/>
Bạn sẽ thấy hình ảnh trong ứng dụng di động của bạn giống như bên dưới:
Chiều ngang width và chiều cao height là hai thuộc tính xác định kích thước của ảnh, đơn vị được tính là pixel. Pixel là đơn vị đo lường được sử dụng để tính độ phân giải của màn hình (Các màn hình trước đây thường có độ phân giải 1024×768 pixel) . Không giống như centimetres, pixel là đơn vị đo lường có giá trị tương đối, nó dựa vào độ phân giải của màn hình. Đối với màn hình có độ phân giải cao, 25 pixel có thể tương đương 1 centimetre, nhưng nó chỉ khoảng 1.5 centimetre ở màn hình có độ phân giải thấp.
Nếu bạn không khai báo chiều cao và chiều ngang, Module Mã nguồn của AppTeng sẽ trình bày hình ảnh với kích thước thật của nó, tuy nhiên nếu sử dụng height và width bạn có thể khống chế và kiểm soát kích thước hình ảnh theo ý muốn.
Ví dụ 8:
- <img src=“https://appteng.com/banner_teng.png” width=“100px” height=“50px” />
đoạn code trên sẽ cho bạn thấy hình ảnh trong ứng dụng di động của bạn giống như bên dưới:
Tuy nhiên, bạn nên ghi nhớ rằng, kích thước thật được tính bằng kilobytes sẽ không thay đổi và nó sẽ vẫn tốn cùng một thời gian tải cho dù bạn có khai báo kích thước nhỏ hơn theo đơn vị pixel của màn hình. Do đó việc giảm tải kích thước bằng height và width là không có tác dụng, thay vì đó, bạn nên giảm kích thước hình ảnh bằng các chương trình soạn thảo hình ảnh. Mặc khác, việc định kích thước hình ảnh bằng width và height giúp bạn tính toán những khoảng không gian cần thiết trong Module Mã nguồn trên nền tảng AppTeng để trình bày, tạo ứng dụng di động của bạn được đẹp hơn.