Thiết kế website dành cho điện thoại P1

Xin chào các bạn!

Việc thiết kế website dành cho điện thoại không đơn giản như thiết kế website dành cho máy tính, có thể nói về mặt độ rộng của điện thoại khá nhỏ hơn nhiều so với thiết kế web miễn phí dành cho máy tinh, nên việc hiển thị cho nó vừa với màn hình điện thoại là khá khó khăn, vì vậy freewebs xin giới thiệu một  công cụ  tạo ra những website free với giao diện dành cho điện thoại đó là Ratchet.

Ratchet là công cụ mạnh mẽ để thiết kế ứng dụng cho iPhone cùng với nó là bạn tạo các thành phần html, css và javascript giúp bạn đơn giản trong quá trình tạo ra các sản phẩm web free đẹp và ấn tượng

Nếu bạn muốn dùng phần mềm bạn có thế download trên web miễn phí tại http://www.mediafire.com/?jmhayjnjiyfphf5

Ratchet cung cấp nhiều tùy trỉnh nhiều bao gồm

Title bar

<header class="bar-title">
  <h1 class="title">Title</h1>
</header>

Title bar with buttons

<header class="bar-title">
  <a class="button" href="#">
    Left
  </a>
  <h1 class="title">Title</h1>
  <a class="button" href="#">
    Right
  </a>
</header>

Title bar with directional buttons

<header class="bar-title">
  <a class="button-prev" href="#">
    Previous
  </a>
  <h1 class="title">Title</h1>
  <a class="button-next" href="#">
    Next
  </a>
</header>

Title bar with segmented controller

<header class="bar-title">
  <a class="button" href="#">
    Left
  </a>
  <ul class="segmented-controller">
    <li class="active">
      <a href="#">One</a>
    </li>
    <li>
      <a href="#">Two</a>
    </li>
    <li>
      <a href="#">Three</a>
    </li>
  </ul>
  <a class="button" href="#">
    Right
  </a>
</header>

Tab bar

<nav class="bar-tab">
  <ul class="tab-inner">
    <li class="tab-item active">
      <a href="#">
        <img class="tab-icon" src="img/icon-home.png">
        <div class="tab-label">Label</div>
      </a>
    </li>
    <li class="tab-item">
      <a href="#">
        <img class="tab-icon" src="img/icon-profile.png">
        <div class="tab-label">Label</div>
      </a>
    </li>
    <li class="tab-item">
      <a href="#">
        <img class="tab-icon" src="img/icon-messages.png">
        <div class="tab-label">Label</div>
      </a>
    </li>
    <li class="tab-item">
      <a href="#">
        <img class="tab-icon" src="img/icon-hamburger.png">
        <div class="tab-label">Label</div>
      </a>
    </li>
    <li class="tab-item">
      <a href="#">
        <img class="tab-icon" src="img/icon-settings.png">
        <div class="tab-label">Label</div>
      </a>
    </li>
  </ul>
</nav>

Standard bars

<nav class="bar-standard">
  <ul class="segmented-controller">
    <li class="active">
      <a href="#">Thing one</a>
    </li>
    <li>
      <a href="#">Thing two</a>
    </li>
    <li>
      <a href="#">Thing three</a>
    </li>
  </ul>
</nav>
<div class="bar-standard bar-header-secondary">
  <a class="button-block">Block level button</a>
</div>

Lists

<ul class="list">
  <li>List item 1</li>
  <li>List item 2</li>
  <li class="list-divider">List Divider</li>
  <li>List item 3</li>
</ul>

List with chevrons

<ul class="list">
  <li>
    <a href="#">
      List item 1
      <span class="chevron"></span>
    </a>
  </li>
  <li>
    <a href="#">
      List item 2
      <span class="chevron"></span>
    </a>
  </li>
  <li>
    <a href="#">
      List item 3
      <span class="chevron"></span>
    </a>
  </li>
</ul>

List with counts

<ul class="list">
  <li>List item 1 <span class="count">4</span></li>
  <li>List item 2 <span class="count">1</span></li>
  <li>List item 3 <span class="count">5</span></li>
</ul>

List with counts and chevrons

<ul class="list">
  <li>
    <a href="#">
      List item 1
      <span class="chevron"></span>
      <span class="count">4</span>
    </a>
  </li>
  <li>
    <a href="#">
      List item 2
      <span class="chevron"></span>
      <span class="count">1</span>
    </a>
  </li>
  <li>
    <a href="#">
      List item 3
      <span class="chevron"></span>
      <span class="count">5</span>
    </a>
  </li>
</ul>

List with buttons

<ul class="list">
  <li>List item 1 <a class="button">Button</a></li>
  <li>List item 2 <a class="button-main">Button</a></li>
  <li>List item 3 <a class="button-positive">Button</a></li>
  <li>List item 4 <a class="button-negative">Button</a></li>
</ul>

List with toggles

<ul class="list">
  <li>
    List item 1
    <div class="toggle">
      <div class="toggle-handle"></div>
    </div>
  </li>
  <li>
    List item 2
    <div class="toggle active">
      <div class="toggle-handle"></div>
    </div>
  </li>
  <li>
    List item 3
    <div class="toggle">
      <div class="toggle-handle"></div>
    </div>
  </li>
</ul>

Inset list

<ul class="list inset">
  <li>List item 1</li>
  <li>List item 2</li>
  <li class="list-divider">List Divider</li>
  <li>List item 3</li>
  <li>List item 4</li>
</ul>

. Để lưu vào điện thoại, có một số cách nhưng đơn giản nhất là chạy trên sever local của máy tính. Kết nối safari trên iPhone vào máy tính sau đó click nút và “Add to home screen”

 

Phần 2 tôi sẽ giới thiệu về các đoạn code thiết kế website khác cùng với Ratchet