Thiết kế web, công nghệ web

Chủ Nhật, 29 tháng 3, 2015

Thủ thuật web :Phân biệt ứng dụng gốc và ứng dụng web

Ứng dụng dành cho các thiết bị di động được phân thành ba loại chính bao gồm: ứng dụng gốc (Native App), ứng dụng web (Web App) và ứng dụng lai (Hybrid App).
Trong khuôn khổ bài viết này, người viết muốn giới thiệu cho bạn đọc cái nhìn rõ ràng hơn về 2 loại: ứng dụng gốc và ứng dụng web hiện đang rất phổ biến.

Hiểu rõ hơn về ứng dụng gốc (Native app) và ứng dụng web (Web App) sẽ giúp bạn vận dụng tốt hơn cho nhu cầu sử dụng

Native App, được hiểu nôm na là ứng dụng gốc, hay ứng dụng được viết cho các thiết bị di động, chạy trên từng nền tảng (iOS, Android, RIM-OS, QNX…) khác nhau và tất nhiên là trên các thiết bị khác nhau để thực hiện một chức năng cụ thể như: danh bạ, lịch, phần mềm nghe nhạc, xem video trên điện thoại/tablet… và đa số các trò chơi trên thiết bị di động đều là ứng dụng gốc.

Một trong số các ứng dụng gốc mà đại đa số chúng ta đã biết đó là trò chơi “Rắn săn mồi – Snake” được Hãng Nokia đưa vào các dòng điện thoại của mình từ năm 1998.

Mười năm sau ngày Nokia “trình làng” một trong các ứng dụng gốc nổi tiếng, Apple đã giới thiệu đến đông đảo người dùng smartphone phần mềm Apple App Store – kho lưu trữ ứng dụng trực tuyến – đã làm ngành công nghiệp phát triển phần mềm trở nên nhộn nhịp hẳn lên. Năm 2009, tiếp tục RIM cho ra đời kho lưu trữ trực tuyến BlackBerry App World, tiếp sau đó Google với nền tảng Android cũng đã không chịu thua kém với Android Market (nay đã đổi thành Google Play). Rõ ràng cuộc chơi giữa các nhà cung cấp nền tảng hệ điều hành đã thật sự thay đổi với những phần mềm gốc, chạy trên hệ điều hành riêng của mình.

Cùng với quá trình chạy đua trong việc nâng cấp hệ điều hành (OS) từ các nhà cung cấp cũng như sự phát triển của HTML5, thì các ứng dụng chạy trên nền web (web app) đang dần thu hẹp khoảng cách với ứng dụng gốc. Sự phát triển và những tiện lợi đi đầu của ngôn ngữ HTML5 (bên cạnh đó là jQuery/CSS) đã giúp cho ứng dụng web có thể làm được những điều mà ứng dụng gốc đã và đang có.

Có thể nói khi phần cứng và hệ điều hành của smartphone được nâng cấp thì đó cũng chính là “thời” của ứng dụng web, vì hạn chế trước đây của ứng dụng web như tốc độ truy cập, giao diện người dùng không hấp dẫn đã dần được khắc phục. Các nhà phát triển phần mềm đang dần chuyển sang mảnh đất được cho là khá màu mỡ này, vì không bị giới hạn bởi hệ điều hành cụ thể, và đặc biệt phần mềm có thể được nâng cấp nhanh chóng hơn.

Các ứng dụng gốc được giới thiệu trên kho ứng dụng Apple iTunes App Store

Những so sánh sau đây giữa ứng dụng gốc và ứng dụng web sẽ giúp người dùng hình dung rõ hơn sức mạnh cũng như điểm yếu của 2 loại phần mềm này.

So sánh	Ứng dụng gốc (Native App)	Ứng dụng web (Web App)
Truy cập Internet	Tùy loại phần mềm gốc mà có thể cần hay không cần Internet	Gần 100% các ứng dụng web yêu cầu kết nối Internet để sử dụng
Cài đặt/Nâng cấp ứng dụng	Tải và cài đặt trực tiếp lên điện thoại	Bản chất dựa trên trình duyệt web, cho nên người dùng chỉ cần “refresh” là có thể thấy ngay sự thay đổi (nếu có) về giao diện/phiên bản mới.
Giao diện người dùng	Giao diện cũng như khả năng đáp ứng là điểm mạnh của ứng dụng gốc. Giao diện được thiết kế ấn tượng, đáp ứng nhanh.	Đơn giản, không bắt mắt. Tuy nhiên, với sự tiến bộ của HTML5, Javascript (jQuery Mobile) đã và đang mang lại nhiều nét tươi mới cho các ứng dụng web.
Tính tương thích với thiết bị di động	Phụ thuộc nhiều vào hệ điều hành (iOS, webOS, RIMOS, QNX, Androi) và cả phần cứng (CPU, ROM, màn hình hiển thị…) của thiết bị.	Không phụ thuộc vào hệ điều hành, chỉ cần thiết bị hỗ trợ khả năng truy cập Internet; CSS là một yếu tố quan trọng trong việc tạo nên giao diện cũng như tính tương thích với thiết bị.
Đa phương tiện	Phụ thuộc nhiều vào phần mềm phát nhạc/video. Định dạng Adobe Flash chỉ được hỗ trợ trên một vài thiết bị (RIM OS7 trở lên, Android OS 2.1 trở lên)	Nghe nhạc/Video phụ thuộc nhiều vào trình duyệt có hỗ trợ hay không. iOS sử dụng HTML5 trong việc hỗ trợ định dạng Flash.
Font	Font vẫn đang là vấn đề nan giải đối với nhiều thiết bị. Một số hệ điều hành mới được nâng cấp đã có thể hỗ trợ tương đối (tuy vẫn còn hạn chế).	Những nhược điểm trên ứng dụng gốc có thể được khắc chế thông qua khả năng của trình duyệt.
Chức năng tìm kiếm	Chỉ tìm kiếm được trên thiết bị. Còn nội dung khác thì thiết bị sẽ kết nối với máy tìm kiếm khác bằng việc mở một… ứng dụng web.	Là chức năng mặc định của ứng dụng web.
Khả năng chia sẻ ứng dụng	Khó khăn trong việc chia sẻ ứng dụng giữa 2 hệ điều hành có nền tảng khác nhau như iOS và Android, iOS và BlackBerry. Tuy nhiên, gần đây các ứng dụng gốc trên Android đã có thể cài đặt được trên máy tính bảng PlayBook của RIM.	Chỉ cần gửi liên kết của ứng dụng web đó, người nhận sẽ tự biết phải làm gì để mở ứng dụng lên.
Sử dụng phần cứng của thiết bị	Các ứng dụng gốc có thể yêu cầu đến phần cứng của thiết bị như camera, thiết bị định vị GPS, thiết bị cảm ứng xoay…	Bị giới hạn thông qua trình duyệt
Phát triển phần mềm	Cần nhiều thời gian, tài nguyên để phát triển sản phẩm cho từng nền tảng khác nhau (iOS, RIMOS, webOS, Android…)	Mọi thứ rất dễ dàng. Quá trình cập nhật cũng khá đơn giản, không phải built phần mềm lại từ đầu rồi xuất bản.
Cung cấp	Người phát triển phần mềm cần phải xin phép nhà cung cấp để có thể đưa sản phẩm của mình lên các kho lưu trữ ứng dụng trực tuyến như Apple App Store, Blackberry AppWorld, Google Play…	Chia sẻ liên kết website, người dùng đã có thể sử dụng dễ dàng

Bạn đọc có thể phân biệt qua ví dụ về ứng dụng gốc: Facebook, hiện đã có mặt trên nhiều nền tảng như iOS, Android, Blackberry OS, Windows Phone… do chính mạng xã hội Facebook phát triển.

Ngoài các ứng dụng gốc này ra, chúng ta cũng có thể sử dụng Facebook thông qua các ứng dụng web, bằng cách mở trình duyệt, gõ m.facebook.com hoặc touch.facebook.com. Mỗi trình duyệt hỗ trợ một giao diện, tùy chỉnh và đáp ứng khác nhau.

học lập trinh web, học thiết kế web, khóa học thiết kế website, khóa học lập trình web , thiết kế logo, thiết kế bộ nhận diện thương hiệu

Thứ Năm, 26 tháng 3, 2015

9 cách đặt từ khóa (keyword) hiệu quả cho trang web của bạn

12/07/2012 webmaster

Để trang web có thứ hạng cao trên Google thì từ khóa (Keyword ) cần xuất hiện trong nội dung bài viết. Nhưng nếu vị trí đặt từ khóa không hợp lý thì thứ hạng sẽ không cao và ảnh hưởng nhiều đến kết quả tìm kiếm trên các bộ máy tìm kiếm như Yahoo, Google, MSN….
Mình xin chia sẻ với các bạn 9 thủ thuật đặt từ khóa mà mà một website nên áp dụng.

1/ Từ khóa (Keyword ) nên đặt trong thẻ <title>

Đây là vị trí quan trọng nhất mà bạn cần đặt từ khóa (keyword) .Bởi vì nó xuất hiện trong kết quả tìm kiếm, đồng thời nó chính là tên của trang web. Thẻ title phải ngắn (tối đa: 6 đến 7 từ) và phải chứa từ khóa. Tốt nhất, từ khóa nên đặt ở đầu title. Nếu các bạn muốn tìm hiểu kỹ hơn có thể tham khảo Top 10 thủ thuật SEO tối ưu hóa tiêu đề cho web của bạn mà mình đã giới thiệu trong các bài viết trước.

2/ Từ khóa (keyword ) trong URL

URL là địa chỉ trang web, nếu URL chứa từ khóa thì giá trị trang web sẽ tăng lên. Ví dụ, tối ưu trang web với từ khóa “keo socola” thì URL của bài viết cần chứa từ khóa. từ khóa càng gần DOMAIN càng tốt.
Tất nhiên, từ khóa phải có trong bài viết, vì nếu không có thì sẽ không có tác dụng gì cả.

3/ Mật độ từ khóa trong bài viết

Một yếu tố rất quan trọng khác mà bạn cần quan tâm. Bài viết tốt nhất nên có khoảng 3-7% từ khóa chính và 1-2% từ khóa phụ. Mật độ > 10% là rất đáng ngờ và trông có vẻ như là bạn đang cố nhồi nhét từ khóa chứ không phải một đoạn văn bản viết tự nhiên. Và bạn có thể bị google liệt kê vào danh sách spam và tụt thứ hạng là điều cả bạn và tôi đều không muốn cho website của mình.

4/ Từ khóa trong liên kết (Anchor text )

Link đặt lên từ khóa. Đây cũng là một yếu tố rất quan trọng, đặc biệt với các inbound link (link dẫn về website của mình từ website khác). Các công cụ tìm kiếm, như Google, sẽ đánh giá cao trang web của bạn.

5/ Từ khóa trong Heading (& đặt trong thẻ <H1>)

Nội dung trong thẻ <H1> được đánh giá rất quan trọng, robot của google sẽ tìm kiếm các từ khóa trong các thẻ này khi nó đi sâu vào nội dung web của bạn.

6/ Từ khóa trong dòng Headline

Dòng đầu tiên có mức độ quan trọng cao, cần chứa từ khóa, nên đặt trong thẻ <H1>.
Lưu ý: phần đầu của văn bản không nhất thiết có nghĩa là đoạn đầu tiên, nếu bạn sử dụng bảng, dòng đầu tiên có thể nằm ở phần nửa sau của bảng.

7/ Từ khóa trong ALT của ảnh

Các Robots của công cụ tìm kiếm không đọc được ảnh nhưng nó đọc được phần mô tả bằng chữ nằm trong thẻ ALT, ví dụ: <IMG src=”http://” ALT=”mô tả ảnh, chứa từ khóa” />. Vì thế việc đặt thẻ alt cho ảnh cũng góp phần đáng kể trong việc seo website của bạn.

8/ Từ khóa trong thẻ META

Phần này ngày càng ít có giá trị, đặc biệt đối với Google. Yahoo! và Bing vẫn còn sử dụng, nên nếu bạn tối ưu hóa cho hai công cụ tìm kiếm như Yahoo! và Bing, hãy điền các thẻ này một cách chính xác – cũng không mất nhiều thời gian.

9/ Khoảng cách keyword

Các từ khóa xuất hiện trong bài viết không nên quá gần nhau, hoặc lặp lại nhiều lần (>=3 lần) trong 1 câu, trong 1 đoạn.
Sau khi đã chọn được từ khóathích hợp thì việc đặt từ khóa ở vị trí phù hợp cũng quan trọng không kém, kết hợp hai yếu tố đó sẽ giúp cho bạn mang lại thứ hạng cao cho chiến dịch SEO website của mình .
Hy vọng với 9 thủ thuật trên sẽ giúp các bạn nâng tầm giá trị website và thu hút nhiều độc giả cũng như khả năng kiếm tiền của website, các bạn cũng có thể tìm hiểu thêm 9 yếu tố ảnh hưởng thứ hạng website của bạn

học lập trinh web, học thiết kế web, khóa học thiết kế website , thiết kế logo, thiết kế bộ nhận diện thương hiệu

Tạo Pop Up Login Form với HTML5, CSS3 và jQuery

Tranh thủ một chút ít thời gian buổi sáng ,mình sẽ chia sẻ cho các bạn một cách tạo hiệu ứng pop up cho form login. Với cách làm này, các bạn sẽ có thể áp dụng vào cho chính trang web hay blog của các bạn. Login form sẽ được xây dựng bằng HTML5 với chức năng tự động kiểm chứng dữ liệu (validate), định dạng với CSS3 và hiệu ứng pop up bằng jQuery.

Xem Demo | Download

HTML5

Đầu tiên, chúng ta xây dựng khung chuẩn html như sau :

<div class="overlay" style="display: none;">

    <div class="login-wrapper">

        <div class="login-content">

            <a class="close">x</a>

            <h3>Sign in</h3>

            <form method="post" action="login.php">

                <label for="username">

                    Username:

                    <input type="text" name="username" id="username" placeholder="Username must be between 8 and 20 characters" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{8,20}$" required="required" />

                </label>

                <label for="password">

                    Password:

                    <input type="password" name="password" id="password" placeholder="Password must contain 1 uppercase, lowercase and number" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" required="required" />

                </label>

                <button type="submit">Sign in</button>

            </form>

        </div>

    </div>

</div>

Trong đoạn html bên trên, các bạn có thể thay đổi giá trị kiểm trứng dữ liệu nhập vào ở thuộc tính pattern. Để có thể gọi được form login này, các bạn chèn link sau vào vị trí bất kì trên trang web mà các bạn muốn người dùng nhấp vào.

<a href="login.php" class="overlayLink" data-action="login-form.html">Log-in</a>

CSS

Các bạn dùng đoạn css sau để định dạng cho form login.

/*

*   LOG-IN BOX

*/

div.overlay {

    background-color: rgba(0,0,0,.25);

    bottom: 0;

    display: flex;

    justify-content: center;

    left: 0;

    position: fixed;

    top: 0;

    width: 100%;

}

    div.overlay > div.login-wrapper {

        align-self: center;

        background-color: rgba(0,0,0,.25);

        border-radius: 2px;

        padding: 6px;

        width: 450px;

    }

        div.overlay > div.login-wrapper > div.login-content {

            background-color: rgb(255,255,255);

            border-radius: 2px;

            padding: 24px;  

            position: relative;

        }

            div.overlay > div.login-wrapper > div.login-content > h3 {

                color: rgb(0,0,0);

                font-family: 'Varela Round', sans-serif;

                font-size: 1.8em;

                margin: 0 0 1.25em;

                padding: 0;

            }

/*

*   FORM

*/

form label {

    color: rgb(0,0,0);

    display: block;

    font-family: 'Varela Round', sans-serif;

    font-size: 1.25em;

    margin: .75em 0;    

}

    form input[type="text"],

    form input[type="email"],

    form input[type="number"],

    form input[type="search"],

    form input[type="password"],

    form textarea {

        background-color: rgb(255,255,255);

        border: 1px solid rgb( 186, 186, 186 );

        border-radius: 1px;

        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);

        display: block;

        font-size: .65em;

        margin: 6px 0 12px 0;

        padding: .8em .55em;    

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

        transition: all 400ms ease;

        width: 90%;

    }

    form input[type="text"]:focus,

    form input[type="email"]:focus,

    form input[type="number"]:focus,

    form input[type="search"]:focus,

    form input[type="password"]:focus,

    form textarea:focus,

    form select:focus { 

        border-color: #4195fc;

        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px #4195fc;

    }

        form input[type="text"]:invalid:focus,

        form input[type="email"]:invalid:focus,

        form input[type="number"]:invalid:focus,

        form input[type="search"]:invalid:focus,

        form input[type="password"]:invalid:focus,

        form textarea:invalid:focus,

        form select:invalid:focus { 

            border-color: rgb(248,66,66);

            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgb(248,66,66);

        }

form button {

    background-color: #50c1e9;

    border: 1px solid rgba(0,0,0,.1);

    color: rgb(255,255,255);

    font-family: 'Varela Round', sans-serif;

    font-size: .85em;

    padding: .55em .9em;

    transition: all 400ms ease; 

}

    form button:hover {

        background-color: #1bc5b3;

        cursor: pointer;

    }

jQuery

Cuối cùng, để form login xuất hiện dưới dạng pop up, các bạn cần sử dụng đoạn script sau :

$(document).ready(function() {

    $("#loginLink").click(function( event ){

        event.preventDefault();

        $(".overlay").fadeToggle("fast");

    });

    $(".overlayLink").click(function(event){

        event.preventDefault();

        var action = $(this).attr('data-action');

        $.get( "ajax/" + action, function( data ) {

            $( ".login-content" ).html( data );

        }); 

        $(".overlay").fadeToggle("fast");

    });

    $(".close").click(function(){

        $(".overlay").fadeToggle("fast");

    });

    $(document).keyup(function(e) {

        if(e.keyCode == 27 && $(".overlay").css("display") != "none" ) { 

            event.preventDefault();

            $(".overlay").fadeToggle("fast");

        }

    });

});

Thế là xong, mình hy vọng là các bạn có thể sáng tạo và định dạng thêm cho form login đẹp hơn và hấp dẫn hơn.

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

học lập trinh web, học thiết kế web, khóa học thiết kế website , thiết kế logo, thiết kế bộ nhận diện thương hiệu

Đăng ký: Bài đăng ( Atom )