Cách thức chuyển PSD sang Joomla template

Các bước thực hiện

1. Chuẩn bị source
2. Đo kích thước + giải pháp xử lý từng page
3. Cắt hình ảnh - Font kích cỡ màu sắc
4. Setup template Favicon template + admin
5. Thực hiện edit file template.xml position
6. Thực hiện load file index.php
7. Tổ chức nội dung
8. Tổ chức menu
9. Tổ chức module
10. Thực hiện css
11. Thực hiện javascript
12. Check browser
13. Đóng gói-Bàn giao

1.Chuẩn bị source: 
Source sạch : joomla 1.5, 2.5 hoặc 3.
Setup component thông dụng: k2, zoo, widgetkit, rsform, acymailing, JCE
Hoặc sử dụng bộ source đã setup các extension trước đây (đã có có sử dụng và có tính ổn định).

2.Đo kích thước + giải pháp xử lý từng page
    2.1 Đo kích thước
        File PSD ko hiển thị kích thước từng vị trí. Vì vậy cần phải có chương trình để đo. Sử dụng paint.net
Yêu cầu hệ thống  Microsoft's .NET Framework 3.5 SP1  
Chương trình nhẹ, nhanh tiết kiệm bộ nhớ.
Cách làm:
            Dùng photoshop lưu PSD sang file image để xử lý.
            Dùng các chương trình đo: hình dùng paint.net - rectangle để đo như hình
        Kết quả như hình:

   2.2 Giải pháp xử lý
        Đối với từng page psd cần có giải pháp xử lý.
        Xử lý page home, about us, category, detail
        Tổng hợp các chức năng chung: background, logo, search, banner, component, right, footer
        Giải pháp riêng ghi thẳng vào hình ảnh: ví dụ viết javascript, module html vào vị trí này, load slideshow có custom next prev
        Kết quả như hình:
       

3. Cắt hình ảnh - Font kích cỡ màu sắc
    Dùng photoshop cắt hình ảnh
    Cắt hình ảnh lưu vào 1 folder root/images
    Cắt nội dung đưa vào notepad++, font-family,font-size,fontweight,màu sắc (photoshop có nhiều đối tượng nên khi thực hiện dự án sẽ chậm - vì vậy muốn tăng tốc cần lưu nội dung qua notepad)
        Kết quả:
            arial - 18- bold - #000
            Giới thiệu công ty
            arial - 12-normal-red
            Nội dung giới thiệu công ty   
4. Setup template Favicon template + admin
    4.1 Setup template
        Sử dụng template sạch beez, japurity, ja template blank, protostar - Việc sử dụng template khác sẽ gây khó khăn khi phát sinh lỗi + override css rất cực và không rõ ràng.
        Hiệu chỉnh .xml template thành tên template website sử dụng - tên template, phiên bản, ngày tạo, người tạo, mail, copyright.

        Setup template
        Làm sạch template: xóa template css, xóa images, javascript, xóa nội dung folder html.
        Hiệu chỉnh file index.php : xóa tất cả load css, javascript, module ko cần thiết. Chỉ để lại mẫu 1 đoạn load module mẫu + load message + load component.
        Kết quả 1 template sạch.
   4.2 Favicon
        Favicon là hình ảnh icon nhỏ tên là favicon.ico thương hiệu trên browser
        Dùng hình ảnh 16px*16px dùng các chương trình lưu trữ thành favicon.ico
        Up favicon.ico vào 2 vị trí: yourtemplate/favicon.ico (đối với tempalate framewor ja, t3 template/images/favicon.ico), administrator/templates/template đang dùng/favicons.
Thường các đối tác yêu cầu thay đổi logo joomla trong admin
Kết quả đạt được:

5. Thực hiện edit file template.xml position
    Mở file template.xml
    Dựa vào hình ảnh giải pháp thêm/xóa position

6. Thực hiện load file index.php
    Dựa vào hình hành giải pháp tiến hành load các vị trí module
    Load component

7. Tổ chức nội dung
    Dựa vào giải pháp tiến hành tổ chức category, article
    Dùng file notepad++ lấy tiêu đề, nội dung
8. Tổ chức menu
    Tạo mainmenu
    Thêm menu trỏ vào các catagory, bài viết
9. Tổ chức module
    Load module assign theo menu
    Thông thường: logo, search, main menu, banner, right, footer...
10. Thực hiện css
    Hiện các dữ liệu đã được load đúng
    Mở file template.css
    Viết css tổ chức vị trí: trái phải, trên dưới.
    Viết css style font: menu, a hover, h2 page title, h3 module title, content, footer, search, button
    Dựa và hình ảnh ghi kích thước : tiến hành kiểm tra và xử lý css.   

11. Thực hiện javascript
    Viết javascript nếu có: footer bottom, float banner, popup, check browser ...
12. Check browser: ie7 ++, firefox, chrome, safari
Kiểm tra từng browser
Firefox: pass
chrome: pass
safari: pass
ie7, 8, 9, 10 bằng ietester

13. Đóng gói-Bàn giao
    Đóng gói thường: mysql.sql + source và đóng gói thành file zip
    Đóng gói bằng component: akeeba backup -> chương trình tự động tạo .zip có mysql và có khả năng check hệ thống + giao diện setup khi unzip.

Trung bình 1 dự án nhỏ 5-10page: 2 ngày
15page-25page:3 ngày
Kết quả đạt chuẩn các đối tác châu âu
Trải qua 161 dự án trực tiếp thực hiện - ghi lại cách làm việc hiện có tham khảo - chính xác và hiệu quả nhất.
Hết rồi