Techmaster: Web cơ bản

Tuesday, October 2, 2018

Mockup giao diện

Mockup: vẽ phác thảo, vẽ nháp giao diện
Công cụ

photoshop
balsamiq
sketch app (cho mac)

Sunday, September 23, 2018

Soạn thảo HTML siêu nhanh với Emmet (gõ code CSS tự sinh ra HTML)

Emmet – công cụ hỗ trợ soạn thảo HTML siêu nhanh

Các bạn lập trình viên làm việc với HTML chắc hẳn nhiều lần cảm giác mỏi mệt khi viết các dòng HTML gây tốn thời gian của bạn. Cách đây vài phút, trong lúc xem một video hướng dẫn vài mẹo nhỏ về HTML5, ngẫu nhiên thấy được cách viết HTML rất nhanh chóng, tôi lập tức tìm hiểu làm thế nào để có thể viết HTML nhanh như vậy. Sau đây cũng xin chia sẻ cùng các bạn cách để viết HTML nhanh chóng này.
Công cụ hỗ trợ thực hiện điều mà tôi vừa nói mang tên Emmet. Emmet không phải là một trình soạn thảo văn bản mà là một phần bổ trợ cho các trình soạn thảo văn bản, IDE lập trình.

Sử dụng Emmet

Khi sử dụng Emmet, các bạn có thể viết HTML theo cách viết CSS một cách nhanh chóng. Ví dụ, bạn gõ dòng mã sau và ấn TAB sau khi gõ xong:
.contain>form#new-form>input.text-input
Đoạn mã HTML được sinh ra như sau:

Rất nhanh phải không nào? Với cách viết này chúng ta có thể tiết kiệm không ít thời gian và công sức.

Cài đặt Emmet

Emmet có thể được cài đặt trên nhiều trình soạn thảo văn bản hay các IDE. Trong bài viết này tôi hướng dẫn cách cài đặt Emmet trên trình soạn thảo SublimeTextvà IDE PhpStorm. Ngoài ra bạn có thể tìm hiểu thêm Emmet hỗ trợ các trình soạn thảo/IDE nào thông qua địa chỉ http://emmet.io/download/

Cài đặt Emmet trên SublimeText

Bước 1: tải gói bổ trợ Emmet tại đây

(Nếu không tải được, bạn vào đây để tìm link tải gói bổ trợ này).
Bước 2: trên thanh menu của SublimeText, vào menu Preferences, chọn Browse Packages…

Thư mục chứa các package của Sublime được mở ra, bạn giải nén gói bổ trợ Emmet đã tải về ở bước 1 vào thư mục này.
Khởi động lại SublimeText và thử cảm giác thành quả với emmet thôi, bạn sẽ thấy mình có thể soạn thảo HTML siêu nhanh chóng.

Cài đặt Emmet trên IDE PhpStorm

Vào menu File, chọn Setting, trên hộp thoại Setting, kích vào mục Plugins, kích vào nút Browse Repositories…

Gõ tìm kiếm từ khóa “Emmet”

Kích chuột phải vào plugin Emmet Everywhere, chọn Download and Install. Sau khi hoàn tất thì ấn Ok và khởi động lại PhpStorm. Vậy là bạn đã có cho mình plugin Emmet vô cùng hữu ích.
Để tham khảo thêm cách sử dụng Emmet hiệu quả, các bạn có thể xem video dưới đây hoặc truy cập website http://docs.emmet.io/ để biết thêm chi tiết.
Chúc các bạn luôn vui vẻ với công việc lập trình.
https://www.youtube.com/watch?v=8n923UBjV9w

Layout

độ rộng trang web thường từ 1000 => 1200px

2 bước design:

Chia layout (vẽ sơ qua trên giấy nháp)
Làm mockup

balsamic (vẽ drap)
sketch app (vẽ pixel perfect)

Ví dụ layout của VNG

1. Cấu trúc thường gặp của 1 trang HTML

2. Cấu trúc trang HTML sử dụng các thẻ HTML5

3. Chức năng của một số thẻ hay dùng

Thẻ <header>: Phần đầu của trang web, cũng có thể là phần đầu của bài viết (chú ý thẻ <header> khác với thẻ <head>).
Thẻ <nav>: Chứa điều hướng chính của trang web (menu chính)
Thẻ <section>: Dùng để nhóm các phần nội dung liên quan đến nhau, và thông thường mỗi section sẽ có tiêu đề riêng của nó.
Thẻ <article>: Chứa các khối nội dung độc lập trên trang web, ví dụ như: các bài viết, các đoạn comment, … Một section có thể chứa nhiều article có nội dung liên quan, hoặc nếu 1 article có nội dung lớn thì nó cũng có thể chứa nhiều section.
Thẻ <aside>: Có tác dụng tùy vào vị trí của nó trên trang HTML. Nếu aside nằm trong article thì nó chứa thông tin liên quan đến article nhưng không quá cần thiết đối với article (ví dụ như 1 đoạn chú thích cho bài viết hay các đường link đến bài viết cùng chuyên mục). Nếu aside nằm ngoài article thì nó chứa thông tin liên quan đến toàn bộ trang nhưng không phải thông tin chính (ví dụ như danh sách các bài viết mới nhất, thông tin quảng cáo, ...)
Thẻ <footer>: Phần cuối của trang web, cũng có thể là phần cuối của bài viết.
Thẻ <address>: Chứa thông tin liên hệ, tác giả (của bài viết hoặc của trang web). Nếu là thông tin liên hệ của trang web thì thường đặt trong footer.

Bootstrap

Sử dụng để responsive trang web

phải import cả file bootstrap.css và bootstrap.js (ngoài ra cả jquery, vì boostrap sử dụng jquery)
bản 4.0 trở lên còn sử dụng thêm thư viện popper.js

Phần CSS của bootstrap:

Các component trong bootstrap được sử dụng để tạo các component của trang web
ví dụ tạo menu => sử dụng component : navbar

Chú ý
- Glyphicons trong Bootstrap sử dụng tương tự như Font Awesome.
- Khi sử dụng menu, để highlight 1 item ta gán thêm class "active" vào thẻ <li>. Ví dụ người dùng đang ở trang Album ảnh thì ta thêm class="active" vào thẻ <li> của Album ảnh

<li class="active"><a href="#">Album ảnh <span class="sr-only">(current)</span></a></li>

thẻ <span class="sr-only"> là dùng cho trang web xem ở chế độ dành cho người khuyết tật, ta cũng nên cho vào.
--------------------------
tạo main content => sử dụng 2 container (tức là thẻ div hoặc thẻ section bao quanh toàn bộ nội dung, làm cho phần bên trong ko tràn ra ngoài)

container (độ rộng xác định ở một số loại kích thước màn cụ thể)
container-fluid (width không được xác định, tức là phần tử cha rộng bao nhiêu nó sẽ rộng bấy nhiêu. vì nó là thẻ div mà nếu width ko được xác định thì nó sẽ rộng hết chiều rộng phần tử cha)

thường ảnh sẽ có độ dài xác định vd 1000px, cho nên nếu màn hình full HD có độ rộng 1400 1600px thì ảnh sẽ KO hiển thị hết được
=> ko nên sử dụng container-fluid mà nên sử dụng container

-----------
Grid system

hệ thống layout lưới của bootstrap sử dụng mô hình 12 cột => có thể layout 1, 2, 3, 4, 6, 12 cột trong 1 hàng , hoặc layout tùy ý khác
sử dụng các thẻ div, mỗi thẻ thuộc class row hoặc col
tao các row trong các container. mỗi row đều có margin-left và margin-right là -15px (vì tại mỗi col đều có padding là 15px nên để căn chỉnh cho các col trong row áp sát vào viền ngoài trang web thì phải sử dụng row để bao ngoài cac col)
trong các row tạo các col: col-xs-{number 1-12} col-sm-{1-12} col-md-{1-12} col-lg-{1-12}. sô 1-12 là span từ 1-12 cột
xs :extra small device (smartphone), sm small device (tablet), md medium device (laptop), lg large device (desktop)

------------
2 cách CSS cho ảnh:

sử dụng img-responsive cho ảnh
đặt thẻ <img> trong 1 thẻ <div> (hoặc thẻ <a>) với class thumbnail để tạo viền cho ảnh.

Phần Javascript của bootstrap

Là tập hợp các plugin của jquery
Hay sử dụng nhất là modal
Modal:

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

2 cách gọi modal
Cách 1: sử dụng các attribute của html

data-toggle="modal" data-target="#myModal" (là id của modal đó)

Cách 2: qua jquery

$('#myModal').modal(options)

Ví dụ
$('#myModal').modal('show'); //hiển thị modal
$('#myModal').modal('toggle');//bật tắt modal
//tắt backdrop element cho nên kích ở ngoài modal sẽ ko tắt được modal (mặc định backdrop = true c
cho nên kích ngoài modal sẽ tắt được modal)
$('#myModal').modal({backdrop:false});
//tắt backdrop nhưng nền của trang web vẫn bị mờ đi
$('#myModal').modal({backdrop:"static"});
// ấn esc thì modal không bị đóng
$('#myModal').modal({keyboard:false});

Media query

Giúp định nghĩa CSS cho từng loại thiết bị, từng loai kích thước màn hình

<meta name="viewport" content = "width = device-width, initial-scale = 1.0"/>

width = device-width (chiều rộng trang web bằng chiều rộng thiết bị)
initial-scale = 1.0 (zoom là 1, trang web sẽ KO bị zoom khi màn hình ở độ phân giải thấp như trên di động)

cách thiết kế trang web responsive sử dụng fluid (liquid) layout:

luôn set <meta name="viewport" content = "width = device-width, initial-scale = 1.0"/>
sử dụng max-width cho thẻ div.wrap
sử dụng % để set width cho các element khác bằng bao nhiêu % của thằng cha của nó

Responsive:
trên mobile người dùng ko phải cuộn ngang để xem nội dung
chữ không bị nhỏ quá
ảnh không bị nhỏ quá

Chú ý

Chú ý khi thiết kế giao diện web responsive chúng ta nên thiết kế cho mobile trước (Mobile first CSS) bởi vì làm theo cách này thường sẽ dễ hơn và giúp file CSS của chúng ta nhẹ hơn, do đó load trang web sẽ nhanh hơn.
Ví dụ tôi có 1 trang web giao diện 2 cột trên Desktop nhưng trên Mobile thì chỉ có 1 cột (do màn hình Mobile bé nên sẽ phải đơn giản hơn màn hình Desktop)

Nếu tôi viết CSS cho Desktop trước, code của tôi sẽ trông như sau:

.content {
  /* Style cho màn hình Desktop */
  float: left; 
  width: 60%; 

  /* Style lại cho màn hình Mobile */
  @media (max-width: 800px) {
    float: none; 
    width: 100%; 
  }
}

Còn nếu viết CSS cho Mobile trước thì sẽ như sau:

.content {
  /* Mặc định chiều rộng của thẻ div là 100% nên không cần viết thêm gì */

  /* Viết lại style cho Desktop */
  @media (min-width: 800px) {
    float: left; 
    width: 60%; 
  }
}

Như vậy, viết theo kiểu Mobile first thì chúng ta đã tiết kiệm được 2 dòng code, và với 1 trang web càng lớn thì sẽ tiết kiệm được càng nhiều (bởi giao diện trên Desktop thường sẽ rất phức tạp so với giao diện mobile). Do đó chúng ta nên viết theo kiểu này, đặc điểm của nó là sử dụng đa số media feature min-width (đa số thôi, còn trong một số trường hợp chúng ta sẽ dùng các kiểu feature khác sao cho phù hợp và tối ưu nhất, code ngắn nhất).

Thursday, September 20, 2018

Table

    <table>

    <thead>

        <tr>

            <th>0</th>

            <th>0</th>

            <th>0</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>0</td>

            <td>0</td>

            <td>0</td>

        </tr>

        <tr>

            <td>0</td>

            <td>0</td>

            <td>0</td>

        </tr>

        <tr>

            <td>0</td>

            <td>0</td>

            <td>0</td>

        </tr>

    </tbody>

    <tfoot>

    </tfoot>

    </table>

dfds

Wednesday, September 12, 2018

Form

<form>

<label for="email">Email</label><br/>

<input type="text" id="email" name="email" /> <br/>

<label for="password">Password</label><br/>

<input type="password" id="password" name="password" /> <br/>

<input type="checkbox" id="remember" name="remember" />

<label for="remember">Remember the login account</label><br/>

<input type="submit" value="Login" />

</form>

chú ý:

- Thẻ <form> có 2 thuộc tính khá quan trọng đó là:

action: Chỉ ra nơi xử lý dữ liệu form khi form được submit (thường là đường dẫn đến 1 trang nào đó, nếu để rỗng thì sẽ lấy mặc định là trang hiện tại)
method: Phương thức gửi dữ liệu. Có 2 giá trị là GET và POST. Phương thức GET gửi dữ liệu lên dưới dạng các cặp key/value và chúng ta có thể nhìn thấy trên URL (độ dài bị giới hạn), do đó phương thức GET dùng trong trường hợp mà dữ liệu gửi lên không cần bảo mật và không quá nhiều (ví dụ như search của Google). Phương thức POST thì gửi dữ liệu qua body mesage của HTTP request nên dữ liệu không nhìn thấy được qua URL, thích hợp để gửi các dữ liệu cần bảo mật hoặc nhiều dữ liệu như form đăng nhập, đăng ký.

- Nếu trong form có sử dụng <input type="file"/> (cho phép người dùng upload file) thì form phải có thuộc tính enctype="multipart/form-data" và method="post".

- Sử dụng jQuery để lấy giá trị của input, ta dùng phương thức .val(). Tương tự khi muốn set giá trị cho input.

- Với một số input kiểu select, checkbox, radio thì ta phải đặt thuộc tính value => khi gửi lên thì trình duyệt mới biết gửi giá trị gì

------
Khi truyền thông tin qua URL, sẽ có những giá trị đặc biệt bị encode cho hợp lệ ví dụ như dấu cách (khoảng trắng) sẽ bị convert thành %20. Để lấy được giá trị ban đầu ta sử dụng function decodeURIComponent(), ngược lại với nó là function encodeURIComponent()