32 công cụ giúp coder làm nhanh giao diện ứng dụng Web

Bản thân lập trình viên ngoài việc giỏi code, còn phải có khả năng design có tính thẩm mĩ. không phải ai cũng dễ dàng có được hai đều này. Dưới đây là những công cụ được tạo ra để hổ trợ coder có thể làm ứng dụng web mà không đòi hỏi nhiểu khả năng design.

Bootstrap

---------------------------------------------------------------------------------------------------------------------------

Bootstrap (Newest : flat design)

http://getbootstrap.com/

Free Design Template

http://startbootstrap.com/ (Recommend)

http://www.templatemag.com/free-bootstrap-templates/

http://www.blacktie.co/

Còn nếu bạn chịu trả phí thì dùng

https://wrapbootstrap.com/

CSS animation

---------------------------------------------------------------------------------------------------------------------------

Animate.css (Recommend)

http://daneden.github.io/animate.css/

Rất nhẹ và rất dễ dùng!

Tạo logo

---------------------------------------------------------------------------------------------------------------------------

Squarespace (Recommend)

http://www.squarespace.com/logo#

LOGASTER

https://www.logaster.com/

Tạo các thành phần của HTML

---------------------------------------------------------------------------------------------------------------------------

coveloping (Recommend)

http://coveloping.com/

Tập hợp rất nhiều công cụ dùng để sinh ra các phần trong trang HTML như price page vân vân.

TeamPage.io

http://www.teampage.io/

Tạo team member page một cách rất đơn giản.

FRAME

http://frame.lab25.co.uk/

Sinh ra 1 top page na ná như trang đó.

UICloud

http://ui-cloud.com/

Trang chuyên dùng cho việc search tham khảo những thành phần của UI. (Category trong này gần như đầy đủ cho 1 template cơ bản)

Nén ảnh

---------------------------------------------------------------------------------------------------------------------------

Hai công cụ tuyệt vời sau đây có thể nén dung lượng ảnh còn gần một nửa mà hầu như không làm giảm chất lượng ảnh.

JPEGmini (Recommend)

http://www.jpegmini.com/

TinyPNG (Recommend)

https://tinypng.com/

Chỉnh sửa ảnh

---------------------------------------------------------------------------------------------------------------------------

GIMP

http://www.gimp.org/

SeaShore (Mac)

http://seashore.sourceforge.net/TheSeashoreProject/About.html

Đặt tên cho ứng dụng

---------------------------------------------------------------------------------------------------------------------------

Dislexicon: The English Language Extender

http://www.robobunny.com/cgi-bin/dislexicon

Công cụ đề xuất tên dịch vụ dựa vào keyword ta nhập vào, các đề xuất nghe rất hay và kêu.

Công cụ này có cả app Android, giúp chúng ta lưu tên mình thích để sau này dùng đ���n.

Web service naming idea tool

http://c.hrgrweb.com/naming/

Xuất ra tên dịch vụ bất kì dựa vào việc kết nối các đơn từ được lưu trong DB. Cách thức rất đơn giản nhưng lại khá tiện lợi.

Ảnh đẹp

---------------------------------------------------------------------------------------------------------------------------

Free high-resolution photos.10 new photos every 10 days.

https://unsplash.com/

Không có chức năng search, nhưng trên này toàn ảnh nét căng mà lại dùng free.

List photo on MEDIUM blog

https://medium.com/@dustin/stock-photos-that-dont-suck-62ae4bcbe01b

Video đẹp

---------------------------------------------------------------------------------------------------------------------------

Tổng hợp những video đẹp dùng làm background (dùng cho cá nhân cũng được)

http://mazwai.com/#index

Toàn là video nhìn rất cool.

jQuery plugin dành cho việc tạo video background

https://github.com/VodkaBears/Vide#readme Cách dùng siêu đơn giản.

Icon

---------------------------------------------------------------------------------------------------------------------------

ICONFINDER

https://www.iconfinder.com/

SNS avatar generator

---------------------------------------------------------------------------------------------------------------------------

uiFaces

http://uifaces.com/

Dùng trong trường hợp muốn tạo ra một loạt avatar dùng cho demo vân vân.

Có tích hợp cả API, rất đáng để dùng thử.

Đa ngôn ngữ

---------------------------------------------------------------------------------------------------------------------------

Wovn.io

http://wovn.io/

Biến tất cả các page thành đa ngôn ngữ bằng cách viết thêm đúng 1 dòng code! 

Chọn màu

---------------------------------------------------------------------------------------------------------------------------

Adobe Kuler (for pro use)

https://kuler.adobe.com/create/color-wheel/

HUE/360 (for simple use)

http://hue360.herokuapp.com/

Web Colour Data

http://webcolourdata.com/Tổng hợp color code của các Web service nổi tiếng.

Service introduction video

---------------------------------------------------------------------------------------------------------------------------

Wideo

http://www.wideo.co/

Công cụ có thể tạo ra những video giới thiệu dịch vụ không khác gì Power Point.

Social plugin

---------------------------------------------------------------------------------------------------------------------------

Công cụ tổng hợp nút liên kết với các mạng xã hội.

AddThis

http://www.addthis.com/

Ninja omatome button

http://www.ninja.co.jp/omatome/


Server

---------------------------------------------------------------------------------------------------------------------------

Heroku

https://www.heroku.com/

Một cloud server rất nổi tiếng có thể dùng miễn phí.

Cực kì thích hợp cho việc làm prototype.

New Relic (add-on for Heroku)

https://devcenter.heroku.com/articles/newrelic

Công cụ quản lí server đơn giản, miễn phí có thể add vào Heroku.

Dùng công cụ này có thể biết được cụ thể server đang chịu tải ra sao và có cả lỗi báo về.


Send mail

---------------------------------------------------------------------------------------------------------------------------

SendGrid

http://sendgrid.com/

Tiện lợi hơn khi dùng dưới dạng add-on cho Heroku.


HTML mail

---------------------------------------------------------------------------------------------------------------------------

BeeFree (Recommend)

http://web-cre.info/beefree/

Tạo mail HTML cực kì đơn giản bằng cách kéo thả, đã thế còn miễn phí!

Có sẵn template của các loại mail hay dùng nên ta chỉ cần chọn template, sửa sang một chút, sau khi export thì customize lại chút nữa là ổn.

Công cụ còn hỗ trợ việc gửi mail để test thử rất đơn giản.

MailChimp

http://mailchimp.com/

Công cụ thần thánh không những cho phép tạo HTML mail mà còn cho phép gửi một loạt mail theo lịch (step mail).

Zurb

http://zurb.com/ink/

Cung cấp template cho việc tạo responsive HTML mail một cách đơn giản.

Có document hướng dẫn cụ thể việc code cho từng phần như thế nào.

Antwort

http://internations.github.io/antwort/

Nếu muốn tạo mail HTML do tự mình customize thì tôi nghĩ đây là công cụ tiện lợi.


Favicon

---------------------------------------------------------------------------------------------------------------------------

Favicon Generator

http://favicon-generator.org/

Công cụ sinh ra file favicon.ico khi ta up ảnh lên.

Tinycon - js library có thể xuất ra alert number cho favicon

https://github.com/tommoor/tinycon

Một thư viện js nhỏ có khả năng xuất ra alert number cho favicon, ta chỉ cần viết thêm 1 dòng code.

Ngoài ra còn nhiều công cụ về Rails, Heroku hay API nữa như dưới đây.

Rails

---------------------------------------------------------------------------------------------------------------------------

Sign in, sign up management

Devise

https://github.com/plataformatec/devise

facebook

https://github.com/plataformatec/devise/wiki/OmniAuth:-Overview


Xử lí không đồng bộ

---------------------------------------------------------------------------------------------------------------------------

Redis&Resque

https://devcenter.heroku.com/articles/queuing-ruby-resque


Heroku

---------------------------------------------------------------------------------------------------------------------------

Batch processing

Scheduler

https://addons.heroku.com/scheduler

Mail

---------------------------------------------------------------------------------------------------------------------------

MailChimp

https://devcenter.heroku.com/articles/mandrill

SendGrid

https://addons.heroku.com/sendgrid

WEBSITE DOWNLOAD TEMPLATE EMAIL MARKETING MIỄN PHÍ

Nếu bạn thường xuyên phải gửi email marketing cho khách hàng, nhưng nếu đó là những email bán hàng thì sao. Bạn chỉ có cảm thấy nhàm chán khi chỉ gửi đi những email toàn chữ không?

        <p style="text-align: justify;"><span style="font-size: medium;"><span style="font-family: Arial;">Là một marketer, điều bạn mong muốn ở một mẫu <strong>email marketing</strong> là giao diện email được thiết kế chuyên nghiệp và có thể chèn vào thông tin khác khi cần thiết.</span></span></p>

Để đảm bảo đạt kết quả tốt từ các chương trình email marketing, bạn cần hiểu rõ cấu trúc tạo nên một mẫu email marketing chuẩn mực, nhằm mục đích tối ưu hóa sự tương tác giữa chúng và người nhận trong khi vẫn giữ được hình ảnh thương hiệu.

Dưới đây là một số website cho phép bạn tạo và download miễn phí những mẫu email marketing chuyên nghiệp theo nhiều lĩnh vực kinh doanh, sản phẩm, dịch vụ khác nhau. Bạn hãy truy cập vào 4 website sau để download mẫu email template ưng ý nhất cho mình nhé:

1. http://www.activecampaign.com/templates/
2. http://www.campaignmonitor.com/templates/
3. http://spreademail.net/free-email-templates-download.aspx
4. http://www.carbongraffiti.com/emailmarketing/emailtemplates.html

Sau khi download về bạn cần sử dụng công cụ chỉnh sửa HTML như FrontPage hay Dreamweaver để mở file này lên. Rất đơn giản như bạn chỉnh sửa word

Cuối cùng là bạn copy toàn bộ nội dung vào Email và gửi đi. Nhưng nên nhớ các hình ảnh thì để link lên các host lưu trữ hình ảnh như Picasa, Photobucket, Flickr…

Chúc các bạn thành công!

SOẠN LAB ONLINE VỚI GOOGLE DOCS

Sau khi có hình lab và đã publish lên FTP webdoanhnghiep.org , công đoạn tiếp theo là mở Microsoft Word lên để tạo file .doc hoặc mở Dreamweaver lên để tạo trang web HTML kèm những hình đó. Trong 1 buổi không có lớp dạy, tôi đã mượn 1 máy tính Nhất Nghệ để soạn lab, nhưng máy tính này không có cài MS Word hay Dreamweaver, với google docs đã giúp tôi có thể soạn xong 1 bài lab với hơn 100 tấm hình 1 cách nhanh chóng. Bài lab soạn xong có thể save dưới dạng word hoặc HTML tùy ý.

Chuẩn bị:
- 1 máy tính có kết nối Internet
- 1 account gmail
- download bộ gõ tiếng Việt tại http://thuc.webdoanhnghiep.org/softs/UniKey4.zip
- download WSFTP tại http://thuc.webdoanhnghiep.org/softs/wsftp701.zip (nên xài cái này trong trường hợp không nhớ đường dẫn hình đã upload trên FTP server)

Show Time: 30 jQuery Calendar Date Picker Plugins

Today we will be featuring calendar date pickers to let you output planners, calendars even more easier, most of these date pickers are built on jQuery and jQuery UI (User Interface).

I would consider these date pickers as frameworks with great functionality, but most of them require modifying and some styling, but I think it’s really acceptable since each project needs it’s own design and you should change style of calendar plugin too. These plugins will help you and your visitors keep track what’s happening in specific project and help to organize time!

 

Show Time: 30 jQuery Calendar Date Picker Plugins

Khác...

Thêm target blank và nofollow cho links trong blog

Trước đây tui có hướng dẫn chèn thuộc tính target="_blank" cho các link trong bài viết để khi click vào link đó sẽ mở ra 1 tab mới trong trình duyệt. Như vậy người đọc sẽ không phải rời trang hiện thời để đọc trang mới. Tiếc là blog của tui hiện giờ đã không còn hoạt động, nên hôm nay tôi trình bày lại thủ thuật này kèm 1 chút cải tiến cho phép chèn cả thuộc tính rel="nofollow" cho các link ra trang ngoài, có domain khác domain của blog.

Đoạn code chèn vào blog khá đơn giản do tôi dùng jQuery để làm. Mở template của bạn lên, chèn đoạn code sau ngay trước thẻ </body>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

$(function() {
    var domain = 'http://hontap.blogspot.com';

    // Them target="_blank" cho tat ca cac link
    $('a').attr('target', '_blank');

    // Them rel="nofollow" cho cac link den trang web khac (khong cung domain)
    $('a:not([href^=' + domain + '])').attr('rel', 'nofollow');
});
</script>
Các bạn chỉ cần sửa dòng khai báo domain trong đoạn code trên là được.

Đoạn code trên dùng javascript để chèn nofollow nên có thể sẽ không hiệu quả (trong việc kiểm soát PageRank) nếu các con bọ của các trình duyệt không đọc được javascript.