Hướng dẫn tạo Toggle (Collapsible) ẩn/hiện trong Angular 4

Khi thiết kế website chúng ta hay có nhu cầu ẩn hiện một div / panel, hay một vùng dữ liệu nào đó. Khi người dùng bấm vào sẽ hiển thị nội dung, giúp tiết kiệm không gian hiển thị.

Link demo trên W3school, sử dụng Bootstrap. Link

Trong phạm vi bài viết này chúng ta sẽ thực hiện nó trên angular4. Chúng ta sẽ viết một component để tùy ý sử dụng, viết một lần dùng ở nhiều nơi.

Demo 

Tạo  component collapsible.component với 2 file là collapsible.component.html & collapsible.component.ts

Code file HTML

<section id="tuanitpro_collapse">
  <div class="filter">
    <a (click)="toggleCollapse()" title="Click để đóng mở">{{title || 'Tìm kiếm'}}
    <i class="fa fa-times" *ngIf="!isCollapseOpen"></i>
    <i class="fa fa-search" *ngIf="isCollapseOpen"></i>
  </a>
  </div>
  <div class="filter_panel" [hidden]="isCollapseOpen">
    <div class="x_panel">
      <div class="x_content">
        <ng-content></ng-content>
      </div>
    </div>
  </div>
</section>

Code file .ts

import { Component, OnInit, Input, AfterViewInit, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-collapsible',
  templateUrl: './collapsible.component.html'
})
export class CollapsibleComponent implements OnInit, AfterViewInit {
  @Input() title: string;
  @Input() uid: string;

  public isCollapseOpen = true;
  constructor(private ref: ChangeDetectorRef) { }

  ngOnInit() {
  }
  ngAfterViewInit() {
    const savedState = localStorage.getItem(this.uid + '_filterKey');
    if (savedState) {
      if (savedState === 'true') {
        this.isCollapseOpen = true;
      } else {
        this.isCollapseOpen = false;
      }
    }
    this.ref.detectChanges();

  }
  toggleCollapse() {
    const currentState = this.isCollapseOpen;
    this.isCollapseOpen = !currentState;
    localStorage.setItem(this.uid + '_filterKey', String(this.isCollapseOpen));
  }
}

Cách dùng:

import vào app.module.ts

import { CollapsibleComponent } from ‘./collapsible.component’;
@NgModule({
declarations: [
CollapsibleComponent
],
Trong UI cần ẩn hiện
<app-collapsible title="Tiêu đề" uid="category">
<div class="panel">
Nội dung cần ẩn hiện
</div>
</app-collapsible>

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

Tại sao bạn nên chọn PHP để lập trình web?

Bài viết được dịch từ trang web SitePoint

Đó là một câu hỏi phổ biến. Tại sao thực sự nên chọn PHP chứ không phải là một lựa chọn nào khác? Sau tất cả, PHP thường bị xem như là một ngôn ngữ lộn xộn, không sử dụng được và có thiết kế rất tồi. Tại sao mọi người chọn nó khi bắt đầu một dự án từ đầu?

Thay vì liệt kê những lý do tại sao mọi người chọn nó (cái này có rất nhiều), chúng ta hãy tập trung vào lý do tại sao mọi người nên chọn nó. Tuy nhiên, chúng ta không thể nói về điều đó mà không đề cập đến những trường hợp mà nó không nên được sử dụng.

Khi nào thì bạn KHÔNG nên chọn PHP

Khi viết các ứng dụng dạng command line

Nếu bạn xây dựng một ứng dụng dạng dòng lệnh (command line), PHP không phải là sự lựa chọn đúng. Chắc chắn là cũng có những cách tiếp cận tốt để xây dựng ứng dụng CLI (Command Line Interface) bằng PHP, nhưng chỉ đơn giản là nó không được thiết kế với mục đích làm điều đó. Đầu tiên và trước hết, PHP là một ngôn ngữ web, và một ứng dụng thuần command line tốt hơn là nên được xây dựng bằng một ngôn ngữ khác. Điều đó không phải để nói rằng nó không thể – mà chắc chắn ứng dụng đó sẽ nhanh hơn và dễ dàng hơn khi thực hiện bằng một ngôn ngữ khác. Việc xây dựng các ứng dụng CLI bằng PHP thì tự bản thân nó chính là phép ẩn dụ mà người ta sử dụng khi so sánh PHP với một cái búa có hai đầu dùng để nhổ đinh. Chỉ vì nó không phải là công cụ dành cho việc đó. Ví dụ – Python được cài đặt sẵn trên hầu hết các hệ điều hành họ *nix, vì vậy bạn có thể truy cập ngay lập tức tới nó mà không cần phải vọc vậy chỉnh sửa file php.ini, và có thể bắt đầu làm việc ngay lập tức.

Khi nó có vẻ như dễ dàng nhất

Nếu PHP có vẻ là cách dễ dàng nhất trong các ngôn ngữ và đó là động lực duy nhất của bạn, thì sự lựa chọn đó của bạn là sai lầm. PHP có thể trở nên phức tạp một cách nhanh chóng, và phải thừa nhận rằng việc dễ dàng hơn những ngôn ngữ khác là điều không thực tế. Việc thực hiện những dự án quan trọng thì độ khó cũng tương đương nhau trong bất kỳ ngôn ngữ nào.

Chỉ vì nhà cung cấp hosting của bạn hỗ trợ nó

Nếu bạn đang sử dụng một shared host, và vui sướng với thực tế rằng nó hỗ trợ PHP (thậm chí không phải là phiên bản mới nhất), hãy dừng lại. Nếu bạn đang xem mình là một nhà phát triển phần mềm, thì đừng bao giờ sử dụng các shared host cho bất cứ điều gì ngoại trừ một số thứ lặt vặt như custom webmail, quản lý domain, hoặc những demo hết sức đơn giản. Với những lựa chọn thay thế như DigitalOcean cung cấp các máy chủ riêng ảo (VPS – Virtual Private Server) được lưu trữ trên ổ SSD với chi phí ít nhất là $5 đô-la/tháng, thì việc chọn một shared host không có ý nghĩa gì – vì VPS mang lại cho bạn nhiều quyền kiểm soát hơn. Nếu bạn không hài lòng với đội ngũ DevOps của họ và không thích tự tay thiết lập server (dù vậy bạn thực sự nên tìm hiểu cách làm điều đó), có rất nhiều nhà cung cấp cloud hosting đưa ra các tầng miễn phí được cấu hình sẵn cho bạn. Hãy tránh xa các shared host.

Phần mềm tính toán mạnh

Khi bạn muốn viết phần mềm làm việc rất nhiều với toán học, các tính toán phức tạp, thống kê và những thứ tương tự như vậy, có những lựa chọn tốt hơn – đặc biệt là nếu ứng dụng đó chủ yếu làm công việc này là chính. Thì các ngôn ngữ dạng functional như Scala hoặc ngôn ngữ mới Dart sẽ thực thi tác vụ này tốt hơn nhiều so với PHP, vì nếu làm bằng PHP có thể yêu cầu nhiều nỗ lực hơn để nó có khả năng làm những việc bạn muốn. PHP cũng chậm hơn đáng kể ở những công việc mà các ngôn ngữ khác được thiết kế dành riêng cho chúng.

Đôi khi sẽ đơn giản hơn nếu viết phần nặng về tính toán của các ứng dụng trong ngôn ngữ mà bạn đang làm việc hiện tại, nhưng đó thường là một sự lười biếng. Sự khó chịu khi phải cài đặt một ngôn ngữ helper hoặc máy ảo và xây dựng phần đó như một ứng dụng riêng biệt thường được bù đắp bởi những lợi ích lâu dài, đặc biệt khi lượng traffic bắt đầu đòi hỏi điều đó. Có một lý do mà phần tính toán back-end của mạng xã hội Twitter được viết bằng Scala, mặc dù phần front-end của họ vẫn là Ruby on Rails.

PHP là rất dễ học

Các vấn đề được liệt kê ở trên là những vấn đề của việc thiếu kiến thức và kinh nghiệm, và đương nhiên là khi ai đó sử dụng PHP cho một mục đích như vậy thì kết quả cuối cùng là không được tối ưu – nó sẽ bổ sung thêm những ý kiến xấu đến danh tiếng đã bị hoen ố của PHP. Vậy PHP tốt nhất cho điều gì?, đó là bất kỳ kịch bản hướng web nào cần phát triển nhanh chóng, và cần thực hiện thực sự nhanh.

PHP có một cộng đồng rất lớn. Đúng vậy, đại đa số là các tay lính mới, nhưng một khi bạn đã gạt bỏ những thành phần linh tinh, còn lại là một số ít các chuyên gia có tâm huyết như Phil Sturgeon, Josh Lockhart, Mike van Riel,Anthony Ferrara và rất nhiều người khác nữa. Một tá chuyên gia có nhiều tâm huyết thừa nhận những nhược điểm của PHP, nhưng cũng làm việc vất vả trong việc hướng dẫn cho cộng đồng và sửa chữa những vấn đề đó, họ có thể cung cấp một kho tàng kiến thức có giá trị. Cùng với những nguồn tài nguyên tuyệt vời như diễn đàn SitePoint,StackOverflowPTRW, những vấn đề gặp phải trong PHP dễ dàng được giải quyết, và quá trình này thường nhanh chóng và có chất lượng cao. Trừ khi các câu hỏi mà bạn đặt ra là hết sức ngớ ngẩn (và vâng, những câu hỏi ngớ ngẩn), cộng đồng này luôn luôn sẵn sàng giúp đỡ.

Số lượng các dự án mã nguồn mở cũng như là các cuốn sách và khóa học về PHP là rất dồi dào, với sự kiên nhẫn và tài liệu hướng dẫn thì bạn có thể trở nên rất thông thạo ngôn ngữ này trong một khoảng thời gian tương đối ngắn.

Xua tan những tin xấu

PHP đã trưởng thành hơn nhiều kể từ lần cuối cùng mà người ta tập hợp những điểm tồi của nó, và nó đã kế thừa rất nhiều những tính năng hiện đại của các ngôn ngữ khác. Thành kiến ở đây rất phổ biến, và chúng ta nên học cách để nhận ra điều đó. Như nội dung bài viết tuyệt vời này trên blog MailChimp từ năm 2010 nói rằng, nó không phải là công cụ, mà do cách bạn sử dụng nó như thế nào.

PHP cho phép nhanh chóng tạo nguyên mẫu của tất cả các loại ứng dụng, và có thể giúp bạn dựng lên chạy thử mà không tốn nhiều thời gian. Nó là một ngôn ngữ nhanh và mạnh mẽ, và thậm chí còn nhanh hơn cả Ruby on Rails và Python trong rất nhiều các ứng dụng web phức tạp, cùng với những lợi ích tăng thêm của các dự án nhưHHVMPhalcon, hiệu suất của PHP là không có đối thủ trong các ngôn ngữ dynamic.

Bây giờ, trước khi bạn hùa theo đám đông và hét toáng lên là “chỉ cần sử dụng NodeJS, nó là tốt nhất!” hay “MailChimp sẽ tốt hơn bằng cách sử dụng NodeJS ngay từ đầu”, thì trước tiên bạn hãy xem xét sự hỗn loạn và phân mảnh của thế giới JavaScript hiện nay. Có tuổi đời trẻ hơn PHP, nhưng các framework của JS nhiều hơn – đó là một điểm mà nhiều kẻ ghét PHP thường đem ra chế diễu. Ngoài ra luôn có sự chênh lệch giữa các giải pháp khác nhau, và mỗi cái đều tuyên bố mình là “đơn giản hơn/ tốt hơn/ nhanh hơn để làm việc X”. Cộng đồng này là rất lớn, nhưng bị phân mảnh khủng khiếp. Điều này được thể hiện qua một tweet vui trên mạng xã hội Twitter như sau:

Trò chơi uống rượu phạt cho các nhà phát triển web:
(1) Bạn hãy nghĩ ra một danh từ
(2) Hãy tìm kiếm trên Google cụm từ “<tên danh từ đó>.js”
(3) Nếu có một thư viện với tên đó đã tồn tại – thì phạt uống một ly rượu
— Shay Friedman (@ironshay)

Ý định của tôi không phải là đi bôi nhọ những ngôn ngữ khác – những người khác có thể làm công việc đó tốt hơn rất nhiều trong việc phân tích nhược điểm của JS hơn tôi – điều mà tôi đang cố gắng chỉ ra đó là thực tế rằng ai cũng có thể soi mói vào những nhược điểm của bất kỳ ngôn ngữ nào. Cũng giống như trong cuộc sống vậy, nếu bạn chỉ tập trung vào những thứ tiêu cực thì bạn sẽ chẳng bao giờ có những trải nghiệm tốt cả – những nhược điểm của PHP đã được chăm sóc bởi các thư viện và framework, và trong khi người ta có thể lập luận rằng một “ngôn ngữ đích thực” thì không cần các bản vá lỗi hoặc sự giúp đỡ của các công ty lớn để làm việc, nhưng ai có thể đếm được chính xác những gì các thư viện và các gói Java, NPM hoặc PUB dùng để vá lỗi và cải tiến ngôn ngữ này, bổ sung thêm những chức năng còn thiếu để người ta có thể sử dụng.

Vì vậy hãy dừng ngay việc tập trung vào bàn về ngôn ngữ X dở như thế nào, mà hãy bắt đầu làm việc trên các dự án chứng tỏ tính ưu việt trong sự lựa chọn của chúng ta. Vâng, có những dự án ngoài kia làm giảm uy tín của nó – WordPress là một trong những dự án như vậy – nhưng nếu chúng ta kiên trì và xây dựng với những thứ tốt nhất, chúng ta có thể xua tan đi những tiếng xấu và bắt đầu xây dựng lại thế giới PHP mà chúng ta yêu quý.

Kết luận

PHP là một lựa chọn tuyệt vời cho các dự án mới bất kể sự phức tạp của chúng. Thế giới PHP đã phát triển với những bước đi thần tốc trong một vài năm gần đây, và một số tính năng mới mang tính cách mạng có thể đưa vào sử dụng ngay hôm nay (tham khảo các liên kết về HHVM và Phalcon ở trên). Theo tôi thì nó nên là công cụ chính trong hộp công cụ của bạn – việc thông thạo nhiều ngôn ngữ lập trình cũng mang lại hữu ích như bạn biết nhiều ngoại ngữ vậy – nhưng chắc chắn sẽ tốt hơn nếu bạn thật tinh thông về một ngôn ngữ. PHP cung cấp cho bạn khả năng đi từ ý tưởng, đến nguyên mẫu, tới sản phẩm trong thời gian rất ngắn – và đó không phải là điều mà nhiều ngôn ngữ làm được. Những tiến bộ gần đây như OpCache built-in và các máy ảo như HHVM đưa ngôn ngữ này đi xa hơn, cho phép bạn giảm đáng kể chi phí cloud hosting, và các trình giám sát hiệu năng như AppDynamics sẽ cho phép bạn sử dụng đến tận cùng giới hạn của nó.

Khi xem xét dự án tiếp theo của bạn – đừng hỏi bản thân “Ai ghét PHP?” hoặc “Mọi người sẽ nghĩ gì?”. Những câu hỏi này tạo ra sự vô nghĩa và bất an. Bạn nghĩ về bất cứ cái gì, chẳng hạn như MailChimp, hệ thống cung cấp sức mạnh để gửi hàng triệu email mỗi ngày, đã được xây dựng bằng PHP trước khi họ “sửa lại”? Thay vì đó, hãy tập trung làm tốt nhất công việc của mình và tạo ra sản phẩm có ích cho xã hội.

Nguồn: http://techmaster.vn/

12 Bí quyết để trở thành một web designer thành công

Các nhà thiết kế web thường chỉ quan tâm đến những kỹ năng có thể nhìn thấy được của họ, như là các kỹ năng về Photoshop hoặc jQuery. Tuy nhiên, để trở nên thành công trong lĩnh vực thiết kế website thì yêu cầu nhiều hơn là chỉ có những kỹ năng đó hay chỉ đơn thuần am hiểu sâu sắc trong thiết kế. Có một số thứ rất quan trọng mà bất kỳ một nhà thiết kế web nào cũng nên lưu ý khi xây dựng các kỹ năng cho nghề nghiệp của mình. Ngoài ra chúng tôi cũng sẽ cung cấp cho bạn một danh sách “những cuốn sách nên đọc” để bạn có thể thu được nhiều thông tin có chiều sâu hơn từ đó.

Những bí quyết nào giúp tôi trở thành một Web Designer thành công?Những bí quyết nào giúp tôi trở thành một Web Designer thành công?

Giới thiệu

Ngoài việc tạo ra một trang web bắt mắt và tiếp nhận một số lượng lớn thông tin, những thách thức mà các nhà thiết kế web phải đối mặt bao gồm việc quản lý hiệu quả trong nghề nghiệp của họ. Công việc của một nhà thiết kế web không chỉ kết thúc bằng việc xây dựng những trang web trông đẹp mắt; mà bạn cũng phải quản lý tất cả những thứ liên quan để tạo ra một mô hình kinh doanh thành công. Từ việc lên kế hoạch và thực thi cho đến tiếp thị và truyền thông, một nhà thiết kế web cũng phải khôn khéo như là một chuyên gia trong từng khâu đó.

Để trở nên thành công thì yêu cầu bạn phải có một số tính cách và đặc điểm riêng… một vài trong số này có thể bạn đã có, một số khác có thể bạn biết nhưng lại sao nhãng chúng. Có những thứ không thể thu được một cách nhanh chóng thông qua đọc sách hoặc bằng cách tham gia các lớp học; thực ra nhiều trong số các kỹ năng này cần thời gian và kinh nghiệm để luyện tập. Theo quan điểm của tôi, đây là những bí quyết vô giá, khi bạn áp dụng nó qua thời gian, chúng sẽ giúp bạn đạt được nhiều thành công trong thế giới phát triển web.

Là một nhà thiết kế website chuyên nghiệp, nếu bạn áp dụng theo những bí quyết này thì sẽ giúp bạn trở thành một “ngôi sao” trong lĩnh vực này:

1. Có kỹ năng giao tiếp hiệu quả

Có kỹ năng giao tiếp hiệu quảGiao tiếp hiệu quả là một trong những kỹ năng làm cho bạn gặp nhiều thuận lợi trong bất kỳ lĩnh vực nào, nhưng nó đặc biệt quan trọng trong thiết kế web nơi mà chúng ta cần giao tiếp với khách hàng, sếp, hoặc các lập trình viên để có thể quyết định sự thành công của một dự án. Một tâm hồn nghệ sĩ thường không thích nói chuyện phiếm; Tuy nhiên, khi cần phải thể hiện bản thân và tiếp thị công việc của mình, thì bạn cần phải mạnh mẽ và rõ ràng trong truyền thông đối với khách hàng. Bạn phải có khả năng nói một cách thuyết phục về những lựa chọn trong thiết kế của mình — tại sao bạn lại lựa chọn chúng và lựa chọn đó phù hợp với công việc kinh doanh của họ như thế nào. Hơn nữa, rất nhiều cuộc tranh cãi nhỏ có thể được giải quyết một cách dễ dàng nếu bạn là một người giao tiếp tốt. Vì thế hãy giao tiếp và truyền thông thật tốt, vì đó là yếu tố để sống sót và thành công.

2. Có khả năng tiếp thị bản thân

Có khả năng tiếp thị bản thânThiết kế web là một thế giới nhỏ bé, và từ góc nhìn của một người thiết kế wesite thì nó cũng là một khu rừng rậm nhiệt đới. Các nhà thiết kế web phải cạnh tranh với nhiều đối thủ như là những kẻ đổ xô đi tìm vàng ở Mỹ vào những năm 1848… và chỉ những kẻ mạnh nhất mới sống sót. Trong mục tiêu làm cho mình vượt trội hơn những đối thủ khác, bạn cần phải cho mọi người biết về bản thân và các kỹ năng của bạn. Các nhà thiết kế thường khiêm tốn theo tính cách tự nhiên, tuy nhiên khi muốn thành công trong nghề nghiệp thì bạn sẽ phải thúc đẩy bản thân leo lên vị trí cao và chứng tỏ sự có mặt của mình. Có một số cách khác nhau để bạn có thể làm điều đó. Tiếp thị theo lối truyền miệng, thông qua mạng xã hội, hoặc thậm chí là thông qua các tấm card visit cũng mang lại kết quả tốt. Tuy nhiên, nếu bạn chỉ muốn ngồi dựa lưng trên chiếc ghế êm ái của mình và đợi cho khách hàng biết tới và tự đến, thì bạn sẽ phải chịu số phận bi đát!

3. Lên kế hoạch trước khi bạn bắt tay vào thiết kế

Lên kế hoạch trước khi bạn bắt tay vào thiết kếTrong khi nhiều nhà thiết kế chọn cách tiếp cận dự án bằng một thái độ “đợi cho nguồn cảm hứng xuất hiện”, nhưng thực ra chỉ cần một chút lên kế hoạch đã có thể giúp nguồn cảm hứng đó đến nhanh hơn. Đúng vậy, một điều rất quan trọng là phải lên kế hoạch và nghiên cứu kỹ trước khi nhảy vào quá trình thiết kế web. Việc lên kế hoạch có thể chi tiết hơn bằng cách chia làm 3 phần như sau:

  1. Tìm hiểu về công ty của khách hàng.
  2. Hỏi vị khách hàng đó về điều mà anh ta muốn và mong chờ từ trang web.
  3. Cân nhắc về những sản phẩm mà đối thủ của anh ta đang làm và những xu hướng liên quan trong ngành.

Tạo ra một bản phác thảo về trang web trong tâm trí của bạn và sau đó vẽ ra trên giấy (nếu có thể). Mặc dù việc lên kế hoạch trước khi thiết kế là một quá trình khá nhọc nhằn và ít thú vị (vì thế mà có nhiều nhà thiết kế có khuynh hướng bỏ qua nó), nhưng bù lại nó sẽ tiết kiệm thời gian, tiền bạc và tài nguyên của bạn một cách tốt nhất.

4. Ước lượng công việc của bạn và nhận những phản hồi

Ước lượng công việc của bạn và nhận những phản hồiVòng đời của một dự án thiết kế web kết thúc tại bước phân tích và ước lượng công việc. Việc có khả năng chấp nhận và thực thi các phản hồi một cách hiệu quả là một nét quan trọng của những chuyên gia sáng tạo. Giống như tất cả các yếu tố đã đề cập ở trên, việc có một con mắt tinh tường nhằm chỉ ra những sai lầm của bạn trong công việc là một phẩm chất mà một nhà thiết kế web thành công nên có. Các nhà thiết kế web nên hành động như là đang xem xét và đánh giá trang web của họ trong vai trò là những người sử dụng. Thêm nữa, thỉnh thoảng nên nhờ một người khác kiểm tra công việc của bạn để tìm những điểm sai lầm cũng là việc rất tốt.

5. Một Web Designer không đồng nghĩa với Graphic Designer

Một Web Designer không đồng nghĩa với Graphic DesignerThường có một sự hiểu sai rằng người thiết kế đồ họa, sở hữu những kỹ năng trong đồ họa máy tính thì có thể cũng là một người thiết kế website và ngược lại. Trong khi điều này có thể đúng về mặt lý thuyết, nhưng thực tế có rất ít công việc liên quan giữa các dự án in ấn và các dự án trên web.

Thực tế là công việc thiết kế website là một lĩnh vực hoàn toàn riêng biệt trong thiết kế, nó có những kiến thức chuyên môn riêng. Có hai sự khác nhau về khách hàng và mục tiêu của các trang web thì hoàn toàn khác một sản phẩm của thiết kế đồ họa. Một người thiết kế đồ họa có thể nâng cao kỹ năng để trở thành một người thiết kế web, nhưng không phải một “cao thủ” thiết kế đồ họa nào cũng thành công khi chuyển sang thiết kế web. Để thành công trong lĩnh vực thiết kế web thì bạn nên cam kết và tập trung chuyên môn chỉ cho lĩnh vực này.

6. Cập nhật những công nghệ mới

Cập nhật những công nghệ mớiThế giới công nghệ thông tin thay đổi hầu như mỗi ngày, và để có thể bắt nhịp cùng với nó, một người thiết kế web cần có khả năng cập nhật công nghệ cùng với sự thay đổi trong ngành công nghiệp này. Hãy chia nhỏ công việc hàng ngày hoặc hàng tuần của bạn và tập trung để học thêm những điều mới trong lĩnh vực này. Nhận ra cái gì là mới, cái gì là xu hướng, và cái gì là đã lỗi thời rớt lại phía sau. Nếu bạn không muốn nhìn thấy các đối thủ của bạn chiếm lấy công việc làm ăn của mình bằng cách xuất hiện với một hình ảnh tươi mới hơn bạn, thì hãy để ý đến bí quyết này.

7. Đừng lờ đi những kỹ năng mềm

Đừng lờ đi những kỹ năng mềmNếu chúng ta cho điểm các yếu tố tạo nên thành công của một người thiết kế website, thì các kỹ năng mềm trong thiết kế web có thể là một trong những điều quan trọng nhất. Như đã đề cập từ trước, lĩnh vực thiết kế website luôn cập nhật với tốc độ rất nhanh. Hầu như mỗi ngày đều có một công nghệ mới được giới thiệu. Thậm chí nếu bạn không phải là một trong những người lập trình ra những thủ thuật mới đó, thì một nhà thiết kế thành công cũng cần học và hiểu cách làm thế nào để áp dụng những kỹ thuật đó cho tốt.

Gác qua một bên những kỹ năng thiết kế cốt lõi, điều quan trọng là bạn phải nắm rõ những chủ đề giống như, cách viết mã HTML theo phiên bản mới nhất, viết code CSS chất lượng cao để có thể tương thích trên nhiều trình duyệt, thực hành tối ưu hóa kết quả trên các bộ máy tìm kiếm, các kỹ thuật về JavaScript UI, và cách xây dựng một trang web nền tảng để từ đó bạn có thể bổ sung thêm các trang hoặc nội dung theo thời gian. Dù chỉ có một ít hiểu biết cơ bản của nhiều loại kỹ năng cũng sẽ giúp bạn có được một công việc tốt hoặc những khách hàng tốt hơn.

8. Thu nạp thêm nhiều kinh nghiệm

Thu nạp thêm nhiều kinh nghiệmKinh nghiệm rất có giá trị, đôi khi thậm chí nó còn có giá trị hơn cả bằng cấp và kỹ năng của bạn. Vì vậy, thành công của một nhà thiết kế web phụ thuộc rất nhiều vào kinh nghiệm của bạn ở trong lĩnh vực đó. Bất kể đó là ông chủ hay khách hàng tiềm năng của bạn, mọi người thường thích thú khi biết các kinh nghiệm trước đây mà bạn có, những công ty nào mà bạn đã trải qua, và những dự án nào mà bạn đã làm việc trên nó. Từ góc nhìn của bạn, việc có nhiều kinh nghiệm trong lĩnh vực này sẽ giúp bạn nhanh chóng nhận ra các giải pháp thiết kế ngay khi mà người ta mới chỉ đưa cho bạn trong buổi họp. Lời khuyên của tôi là, nếu bạn vẫn còn đang là sinh viên ngồi trên ghế nhà trường: thì đừng ngồi đợi cho đến khi tốt nghiệp rồi mới đi xin việc, nên tận dụng khoảng thời gian rảnh rỗi để bắt đầu làm việc trên những dự án thiết kế web ngay lúc này. Càng nhiều kinh nghiệm mà bạn kiếm được, thì bạn sẽ càng nhanh chóng thăng tiến trong thế giới thiết kế web.

9. Tổ chức công việc

Tổ chức công việcTổ chức tốt trong công việc sẽ mang lại rất nhiều hiệu quả. Không quan trọng là bạn làm việc trong lĩnh vực nào, ngăn nắp trong công việc là một yếu tố quan trọng để cho mỗi người có thể thành công. Cũng vậy, trong thiết kế web thì công việc của bạn có thể thực sự lộn xộn về mặt thời gian, và điều này có thể dẫn tới việc bạn sẽ đối mặt với nhiều vấn đề rắc rối. Vì thế hãy bắt đầu sắp xếp máy tính của bạn bằng việc phân loại văn bản, hình ảnh, đồ họa, video, và thậm chí là các file âm thanh trong các thư mục riêng biệt và đánh nhãn chúng một cách thích hợp. Tạo ra một danh sách những-việc-cần-làm-ngay cũng có thể giúp các nhà thiết kế web luôn giữ cho bản thân họ luôn ngăn nắp, tiết kiệm được thời gian để kết thúc được công việc của họ dễ hơn.

10. Có một sự nhạy bén trong kinh doanh

Có một sự nhạy bén trong kinh doanhCác nhà thiết kế website, cho dù làm freelancer hay làm nhân viên cho các công ty, nên có một tinh thần kinh doanh khi tiếp cận tới bất kỳ dự án nào. Thiết kế trong thế giới thật thì tất cả là nghệ thuật bán hàng, thông qua việc định giá công việc và cân bằng chi phí. Một nhà thiết kế web thành công thì không chỉ thiết kế website cho khách hàng của họ, mà còn tạo ra những giải pháp kinh doanh cho chính bản thân họ nữa. Nếu bạn là một người hiểu khách hàng và tiếp thị những thứ mà họ cần vì có thể đoán được suy nghĩ của các khách hàng tiềm năng, thì bạn sẽ chắc chắn có lợi thế vượt qua các đối thủ khác. Tuy nhiên, nếu bạn nhận thấy khía cạnh kinh doanh trong thiết kế hơi rắc rối, thì bạn nên tìm cách làm việc cho một studio lớn và họ sẽ chịu trách nhiệm chính cho bạn trong phần này.

11. Có khả năng làm việc nhóm

Có khả năng làm việc nhómCông việc thiết kế website hiếm khi là chỉ một người làm. Dù cho bạn đang làm việc cho một studio thiết kế lớn hay với một khách hàng nhỏ, thì làm việc nhóm là điều không thể tránh khỏi. Trong khi công việc của một nhà thiết kế web không yêu cầu một nhóm nhiều người (trong nhiều trường hợp thì nó có cảm giác giống như là bạn đang làm tất cả công việc một mình vậy), điều quan trọng là khả năng thường xuyên làm việc với những người khác và ủy quyền các công việc trong dự án. Việc trở thành một thành viên tốt nghĩa là hiểu vai trò của bạn trong một kế hoạch lớn, và có khả năng giúp đỡ những người khác – như là một câu thành ngữ xưa có nói rằng: hai cái đầu thì luôn tốt hơn một cái đầu. Hãy học cách cộng tác một cách hiệu quả với những người khác, và quan sát sự tiến bộ của bạn!

12. Hãy cập nhật trang hồ sơ Portfolio của bạn

Hãy cập nhật trang hồ sơ Portfolio của bạnViệc duy trì một trang hồ sơ portfolio tốt là một yếu tố quyết định tới bất kỳ sự thành công của nhà thiết kế nào… nhưng một nhà thiết kế website thì phải đối mặt với những vấn đề riêng: công việc của bạn cần phải luôn luôn cập nhật mới nhất! Trong khi một người thiết kế poster có thể khá ổn khi giữ những dự án từ những năm 1980 trong hồ sơ portfolio của họ bởi vì mẫu thiết kế đó vẫn không bị lạc hậu, còn bản hồ sơ portfolio về thiết kế website của bạn sẽ tệ đến mức nào nếu bạn còn giữ những dự án từ những năm 1990?

Bản hồ sơ đó là phương tiện tốt nhất cho các nhà thiết kế website có thể trưng bày các khả năng của họ và khiếu thẩm mỹ, nhưng quan trọng hơn, nó cho các khách hàng tiêm năng biết là bạn luôn cập nhật công nghệ, có năng lực, và tích cực trong thế giới thiết kế ngay lúc này, không phải là 5 năm về trước. Thay vì khoe khoang một cách bâng quơ về những trang web mà bạn đã làm, trang hồ sơ portfolio nên đưa bằng chứng chắc chắn cho mọi người thấy cái mà bạn có khả năng làm. Bạn sẽ muốn một hồ sơ portfolio chứa tất cả khía cạnh của thiết kế website… bao gồm các layout, quản trị nội dung, viết bài, typography, màu sắc, các kỹ thuật và thiết kế liên quan. Hãy cho khách hàng tiềm năng của bạn thấy đầy đủ các loại công việc của bạn, điều đó sẽ giúp bạn không chỉ kiếm thêm được các khách hàng mới, mà nó còn chứng minh cho việc tính thêm tiền cho dịch vụ của bạn là hợp lý!

Một số nơi để bạn có thể nhận thêm thông tin

Chúng tôi đã đưa ra những nguyên tắc trên theo một cách ngắn gọn súc tích nhất có thể, nhưng nếu bạn muốn nghiên cứu sâu và nhận thêm nhiều thông tin khác thì sao? Tôi đã liệt kê ra một danh sách các cuốn sách tập trung vào phần “ngoài thiết kế” trong việc quản lý của nghề thiết kế website.

Kết luận

Thiết kế website là một lĩnh vực đầy thách thức. Để thành công trong lĩnh vực này thực sự yêu cầu bạn phải kiên nhẫn, tập trung vào các kỹ năng nhất định và đừng bao giờ nản lòng khi mọi thứ không trở nên giống như mong đợi. Cái mà bạn cần để thành công trong nghề nghiệp thiết kế web là tính kiên trì và một thái độ ‘không bao giờ từ bỏ’. Có lẽ nhiều người trong số các bạn đã biết về các bí quyết ở trên; Tuy nhiên, mục đích của tôi là cung cấp chỉ dẫn tới những ai mà chưa biết những yếu tố tạo nên thành công đó, và cũng nhắc nhở tới những người mà đã biết rõ về chúng.

Nguồn bài viết: Hồ Sỹ Hùng, blog công nghệ vinacode.net. Bài viết đã được sự cho phép chia sẻ của tác giả bằng email.

Anh Hồ Sỹ Hùng, một developer thế hệ 8x, blog của anh có nhiều bài dịch từ các trang nước ngoài, rất phù hợp với những bạn khả năng Tiếng Anh còn yếu. Đây là blog hay cho các bạn là lập trình viên, các bạn quan tâm có thể đọc nhiều bài viết hay của anh tại vinacode.net

Javascript Popup Window to return value to Parent Window

Chào các bạn.
Khi lập trình, hay thiết kế web chúng ta có nhu cầu lấy dữ liệu từ một trang thứ 2 mà không muốn load lại trang chính. Chúng ta có thể dùng popup windows. Ví dụ như chọn một sản phẩm từ danh sách sản phẩm, chọn một nhân viên từ danh sách…. Tất nhiên cũng ta vẫn còn có nhiều cách khác nhau.

Javascript Popup Window to return value to parent window
Javascript Popup Window to return value to parent window

Hướng dẫn sau cho phép bạn tạo một trang popup và lấy dữ liệu đưa vào form của chúng ta. Đây chỉ là code HTML và Javascript, vậy nên bạn có thể áp dụng bất cứ chỗ nào bạn muốn (PHP, ASP.NET, MVC….).

Chúng ta cần 2 file. 1 file chứa form (parent) và 1 file chứa dữ liệu chúng ta muốn lấy (child).

Code trang parent.html

<body>
    <div class="container">
        <h3>Javascript Popup Window to return value to parent Window</h3>
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    Họ tên:&nbsp;
                </td>

                <td>
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Chọn nhân viên..." id="txtName">
                        <span class="input-group-btn">
                            <button class="btn btn-primary" type="button" onclick="SelectName()">Chọn...</button>
                        </span>
                    </div><!-- /input-group -->
                </td>
            </tr>
        </table>
        <br />
        <p>            
            <a href="http://tuanitpro.comjavascript-popup-window-to-return-value-to-parent-window">Hướng dẫn lấy dữ liệu từ Popup Javascript.</a>
        </p>
        <script type="text/javascript">
            var popup;
            function SelectName() {
                popup = window.open("/Home/Popup", "Popup", "width=400,height=300"); // Thay dường dẫn file bạn muốn mở
                popup.focus();
            }
        </script>
    </div>

Code file child.html

<body>
    <div>
        <h3>Danh sách nhân viên</h3>
        Click vào tên nhân viên để chọn
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td><a href="#" onclick="return SetName('Ngọc Trinh');">Ngọc Trinh</a></td>
                    <td>Otto</td>
                    <td>mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td><a href="#" onclick="return SetName('Phương Trinh');">Phương Trinh</a></td>
                    <td>Thornton</td>
                    <td>fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td><a href="#" onclick="return SetName('Lệ Rơi');">Lệ Rơi</a></td>
                    <td>the Bird</td>
                    <td>twitter</td>
                </tr>
                <tr>
                    <th scope="row">4</th>
                    <td><a href="#" onclick="return SetName('Bà Tưng');">Bà Tưng</a></td>
                    <td>the Bird</td>
                    <td>twitter</td>
                </tr>
                <tr>
                    <th scope="row">5</th>
                    <td><a href="#" onclick="return SetName('Kenny Sang');">Kenny Sang</a></td>
                    <td>the Bird</td>
                    <td>twitter</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script type="text/javascript">
        function SetName(value) {
            if (window.opener != null && !window.opener.closed) {
                var txtName = window.opener.document.getElementById("txtName"); // ID này là của parent form
                txtName.value = value;
            }
            window.close();
        }
    </script>
</body>

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

HTML là gì?

1. HTML là gì?

HTML (tiếng Anh, viết tắt cho HyperText Markup Language, tức là “Ngôn ngữ Đánh dấu Siêu văn bản”) là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web, nghĩa là các mẩu thông tin được trình bày trên World Wide Web. Được định nghĩa như là một ứng dụng đơn giản của SGML, vốn được sử dụng trong các tổ chức cần đến các yêu cầu xuất bản phức tạp, HTML giờ đây đã trở thành một chuẩn Internet do tổ chức World Wide Web Consortium (W3C) duy trì. Phiên bản mới nhất của nó hiện là HTML 5, với rất nhiều cải tiến. Có thể tương lai của web.

HTML nói chung tồn tại như là các tập tin văn bản chứa trên các máy tính nối vào mạng Internet. Các file này có chứa thẻ đánh dấu, nghĩa là, các chỉ thị cho chương trình về cách hiển thị hay xử lý văn bản ở dạng văn bản thuần túy. Các file này thường được truyền đi trên mạng internet thông qua giao thức mạng HTTP, và sau đó thì phần HTML của chúng sẽ được hiển thị thông qua một trình duyệt web, một loại phần mềm trực quan đảm nhiệm công việc đọc văn bản của trang cho người sử dụng), phần mềm đọc email , hay một thiết bị không dây như một chiếc điện thoại di động.

Ðể viết HTML cho trang Web, bạn hãy start chương trình NotePad của Microsoft có đi kèm theo với Windows. Ðó là một ASCII Editor. Viết xong, bạn hãy save nó vào một folder nào đó dễ nhớ. Tên của file này bắt buộc phải có tận cùng là .htm hoặc .html Ví dụ: file.htm. Ðể thưởng thức thành quả của mình, bạn hãy open file đó bằng một Browser.

2. Cấu trúc cơ bản:

Một document HTML luôn bắt đầu bằng <html> và kết thúc bằng </html> (trong đó bạn cũng có thể viết nhỏ hoặc viết hoa <html> và </html>). Nhờ có cặp TAG này mà Browser biắt được đó là HTML – document để trình duyệt. Những chữ đó chỉ để dành riêng cho Browser, người đọc chỉ nhận được những gì viết giữa cặp TAG <body> và </body>. Trong một document html, chú thích được dùng như sau:

<!-- Ðây là dòng chú thích, chỉ dành riêng cho bạn, browser bỏ qua dòng này -->

Cấu trúc chuẩn của một tài liệu HTML như sau:

<html>
   <head>
     <title>Tiêu đề của trang web</title>
   </head>
   <body>
           Phần bạn cần trình bày nội dung
   </body>
</html>

Trong “head” ta còn có thể đưa rất nhiều thông tin vào cho browser, search engine… Cái đó sẽ được đề cập đến trong một mục riêng.

3. Các thẻ cơ bản trong HTML:

Một tài liệu HTML được tạo nên từ các cặp thẻ html

  • Thẻ HTML được bắt đầu bằng dấu < (dấu nhỏ hơn) và kết thúc bằng dấu > (dấu lớn hơn)
  • Nội dung nằm giữa dấu <> là tên thẻ. Ví dụ <b>, ta đọc là thẻ b
  • Cặp thẻ HTML được tạo nên từ thẻ mở và thẻ đóng
  • Các tag đầu tiên trong một cặp là thẻ bắt đầu, các thẻ thứ hai là thẻ kết thúc
  • Thẻ Bắt đầu và thẻ kết thúc còn được gọi là thẻ mởthẻ đóng
  • Thẻ đóng kết thúc bằng dấu / (</tenthe>)
  • Nội dung của thẻ sẽ được nằm giữa thẻ đóng và thẻ mở
  • Một số thẻ chỉ có thẻ mở mà không có thẻ đóng (như các thẻ <img>, <br />,  <hr />)

Ví dụ:  Về cặp thẻ: <b>Nội dung thẻ</b>

Các thẻ thường sử dụng trong HTML

3.1. Các thẻ tiêu đề (HTML Headings):

  • Bao gồm các thẻ từ <h1> đến <h6>: thường được sử dụng để thể hiện cho tiêu đề bài viết, bản tin, các mục nhấn mạnh . . .
  • Font chữ (size) của nội dung trong các thẻ giảm từ <h1> đến <h6> (h1 lớn nhất, h6 nhỏ nhất).

Khi xuất ra ngoài thì các bạn sẽ thấy như sau:

  • Nội dung thẻ h1

  • Nội dung thẻ h2

  • Nội dung thẻ h3

  • Nội dung thẻ h4

  • Nội dung thẻ h5
  • Nội dung thẻ h6

3.2. Đoạn văn bản trong HTML (HTML Paragraphs):

Đoạn văn bản trong tài liệu HTML được định nghĩa bằng thẻ <p>

 3.3. Liên kết (HTML Links):

  • Một trang website bao gồm rất nhiều trang web (web page), các web page liên kết lại với nhau để tạo lên website.
  • Liên kết trong HTML được định nghĩa bằng cặp thẻ <a>

Các thuộc tính (Attribute) của thẻ <a>

  • href: quy định địa chỉ (url) mà liên kết trỏ tới
  • target: (đích) thuộc tính này sẽ quy định liên kết sẽ được mở ra ở đâu: _self (trang hiện tại), _blank (cửa sổ mới), . .

3.4. HTML Line Breaks <br/>:

Sử dụng <br /> để xuống dòng trong một đoạn văn bản

Tuy nhiên chúng ta không nên sử dụng thẻ <br /> trong tài liệu HTML (khuyến cáo)

3.5. HTML Lines (<hr />):

Thẻ <hr /> sẽ tạo một đường kẻ ngang trong trang HTML. <hr /> là thẻ đơn không có thẻ đóng

<hr/>

 3.6. HTML images (Hình ảnh):

Để chèn hình ảnh vào tài liệu HTML ta sử dụng thẻ <img>, đây là thẻ HTML không có thẻ đóng

Các thuộc tính của thẻ <img>

  • src=”images.jpg”: Chỉ ra đường dẫn tập tin hình ảnh (có thể là đường dẫn tuyệt đối hoặc tương đối, vấn đề này mình sẽ giải thích ở một topic khác)
  • alt=”Mô tả ”:  Nội dung sẽ được hiển thị khi đường dẫn tới tập tin hình ảnh không tồn tại
  • title=”Tiêu đề”: Nội dung hiển thị khi đưa trỏ chuột lên hình.
  • width, height: Độ rộng và độ cao của file hình được tính bằng px, nếu không có thuộc tính width, height thì mặc định sẽ lấy kích thước gốc của file hình

3.7. Các thẻ định dạng text (HTML Text Formatting):
<b> (bold): Chữ In đậm

<u> (Underline): Chữ gạch chân

<i> (italic): Chữ in nghiên

<big> (Big): Chữ lớn hơn

<em>(emphasized): Chữ in nghiêng, Nhấn mạnh hơn <i>

 Tổng kết: Bài viết này là những kiến thức cơ bản về HTML và cấu tạo cũng như các thẻ hổ trợ trong HTML. Hy vọng bài viết này sẽ là tài liệu bổ ích cho những bạn mới đầu làm quen với thiết kế website. Ở những bài viết sau chúng ta sẽ cũng tìm hiểu các vấn để khác nhằm để xây dựng một giao diện website hoàn chỉnh.

Ajax là gì?

AJAX, viết tắt từ Asynchronous JavaScript and XML (JavaScript và XML không đồng bộ), là bộ công cụ cho phép tăng tốc độ ứng dụng web bằng cách cắt nhỏ dữ liệu và chỉ hiển thị những gì cần thiết, thay vì tải đi tải lại toàn bộ trang web. AJAX không phải một công nghệ đơn lẻ mà là sự kết hợp một nhóm công nghệ với nhau. Trong đó, HTML và CSS đóng vai hiển thị dữ liệu, mô hình DOM trình bày thông tin động, đối tượng XMLHttpRequest trao đổi dữ liệu không đồng bộ với máy chủ web, còn XML là định dạng chủ yếu cho dữ liệu truyền. Đây đều là công nghệ sẵn có nhưng Javacript đã lắp ráp chúng lại để thực hiện những “sứ mệnh” đáng khâm phục.

Từ Ajax được ông Jesse James Garrett đưa ra và dùng lần đầu tiên vào tháng 2 nãm 2005 để chỉ kỹ thuật này, mặc dù các hỗ trợ cho Ajax đã có trên các chương trình duyệt từ 10 năm trước. Ajax là một kỹ thuật phát triển web có tính tương tác cao bằng cách kết hợp các ngôn ngữ:

  • HTML (hoặc XHTML) với CSS trong việc hiển thị thông tin
  • Mô hình DOM (Document Object Model), được thực hiện thông qua JavaScript, nhằm hiển thị thông tin động và tương tác với những thông tin được hiển thị
  • Đối tượng XMLHttpRequest để trao đổi dữ liệu một cách không đồng bộ với máy chủ web.
  • XML thường là định dạng cho dữ liệu truyền, mặc dầu bất cứ định dạng nào cũng có thể dùng, bao gồm HTML định dạng trước, văn bản thuần (plain text), JSON và ngay cả EBML.

AJAX hoạt động như thế nào?

Ứng dụng web truyền thống (trái) và ứng dụng AJAX.
Ứng dụng web truyền thống (trái) và ứng dụng AJAX.

Theo mô hình hoạt động bình thường, client sẽ gửi một HTTP Request lên Server, sau đó Server thực hiện một số khâu xử lý như lấy lại dữ liệu, tính toán, kiểm tra sự hợp lệ của thông tin, sửa đổi bộ nhớ, sau đó gửi lại một trang HTML hoàn chỉnh tới máy khách. Về mặt kỹ thuật, phương pháp này nghe có vẻ hợp lý nhưng cũng khá bất tiện và mất thời gian, bởi khi server đang thực hiện vai trò của nó thì người dùng sẽ làm gì? Có vấn đề gì ở đây? Mỗi lần như vậy Client sẽ gửi toàn bộ nội dung website lên Server, và Server cũng trả về tương ứng. Bạn hình dung, khi xem một bài báo, hay website chia sẻ hình ảnh, bạn chỉ quan tâm nội dung bài báo, hình ảnh đó mà thôi, không cần tải hết cả trang làm gì đó. Đó là hạn chế, bạn sẽ phải tốn thời gian chờ đợi thứ không mong muốn. Không ai muốn chờ đợi cả.

Để khắc phục hạn chế trên, các chuyên gia phát triển giới thiệu hình thức trung gian – cơ chế xử lý AJAX – giữa máy khách và máy chủ. Điều này giống như việc tăng thêm một lớp giữa cho ứng dụng để giảm quá trình “đi lại” của thông tin và giảm thời gian phản ứng. Thay vì tải lại (refresh) toàn bộ một trang, nó chỉ nạp những thông tin được thay đổi, còn giữ nguyên các phần khác, thời gian chờ có thể thay bằng thông điệp ‘loading…’, ‘đang tải dữ liệu…’… Vì thế, khi duyệt một trang hỗ trợ AJAX, người sử dụng không bao giờ nhìn thấy một cửa sổ trắng (blank) và biểu tượng đồng hồ cát – dấu hiệu cho thấy máy chủ đang thực hiện nhiệm vụ. Ví dụ, trong một website ảnh, với ứng dụng truyền thống, toàn bộ trang chứa các ảnh sẽ phải mở lại từ đầu nếu có một thay đổi nào đó trên trang. Còn khi áp dụng AJAX, DHTML chỉ thay thế đoạn tiêu đề và phần vừa chỉnh sửa, do vậy tạo nên các giao dịch trơn tru, nhanh chóng.

Tương tác đồng bộ trong ứng dụng web truyền thống (trên) và dị bộ trong ứng dụng AJAX. (
Tương tác đồng bộ trong ứng dụng web truyền thống (trên) và bất đồng bộ trong ứng dụng AJAX.

Các ứng dụng AJAX

Hiện nay thì khá nhiều website đã và đang ứng dụng ajax. Đơn giản thì chúng ta hay đăng ký thành viên trên các diễn đàn, website. Ngay sau khi chúng ta nhập xong username hay email, hệ thống đã phản hồi cho chúng ta biết tài khoản đó tồn tại hay chưa, mà không cần nhấn nút Submit như truyền thống. Đó là một trong vô số các ứng dụng của AJAX.

Ưu điểm và hạn chế

Cũng như bất kỳ công nghệ khác, AJAX có thể bị sử dụng quá nhiều trong một website, vì họ chỉ thấy những ưu điểm mà AJAX mang lại chớ không quan tâm đến những khuyết điểm của AJAX, để tranh tình trang trên, có thể liệt kê một số đặc điểm của AJAX như sau:

– Ưu điểm

  • Nó giúp việc thiết kế web đa dạng hơn và tăng tính tương tác của website với người dùng.
  • Nó sử dụng các công nghệ đã có sẵn nên dễ học và sử dụng
  • Nhờ tính phổ biến của nó, đã khuyến khích việc phát triển các khuôn mẫu mà sẽ giúp lập trình viên tránh khỏi các vết xe đổ trước.
  • Được hỗ trợ trong các trình duyệt phổ biến hiện nay.
– Hạn chế
  • Bạn không thể bookmark nó vào favourite trên trinh duyệt hay gởi link đến cho bạn bè, vì tất cả quá trình nó thực hiện ngầm và không hiển thị trên address.
  • Không thể hiện thị nội dung trên các trang tìm kiếm vì các trang tìm kiếm hiện nay vẫn chưa hỗ trợ tìm vì rất khó tìm và gần như không thể tìm đc.
  • Không thể sử dụng nút back vì back cũng là chính nó.
  • Với một số trình duyệt, do nhu cầu bảo mật, sẽ tắt chức năng thực hiện javascript nên ajax không thể chạy, hay trong một vài host, không hỗ trợ vào sâu cấu hình server nên hay bị lỗi “Access denied”

Nhưng với những điểm hạn chế nói trên thì AJAX vẫn đang được các lập trình viên sử dụng rộng rãi và đang nghiên cứu để cải thiện nó, ví dụ như vừa update thông tin trên web, vừa thay đổi trên thanh address để có thể sử dụng một số chức năng liên quan tới địa chỉ tuyệt đối này.

Kết: sử dụng ajax là cả một nghệ thuật.

Ví dụ về việc sử dụng Ajax đơn giản

(Note: Ở đây thực hiện trong ASP.NET, bạn hoàn toàn có thể thực hiện trên ngôn ngữ khác được)
Ví dụ sau đây chúng ta thực hiện việc lấy giờ trên Server. Thông qua AJAX sẽ cho chúng ta biết thời gian của Server mà không cần tải lại toàn bộ trang web. Chỉ lấy những gì chúng ta cần mà thôi.
Chúng ta sẽ có 3 file. ajax.js, Default.aspx, Ajax.aspx (Có thể khác với ngôn ngữ khác. defaul.php, ajax.php….)
Đầu tiên chúng ta tạo 1 file ajax.js (File javascript này đảm nhiệm việc gọi XMLHttpRequest để trao đổi dữ liệu)
Code
File ajax.js

/** FileName: ajaxcore.js
Project Name: Ajax
Date Created: 30/10/2014 10:28:58 PM
Description: File Ajax core, thuần JavaScript, dùng để gọi Server xử lý
Version: 0.0.0.0
Author:	Lê Thanh Tuấn - Khoa CNTT
Author Email: [email protected]
Author Mobile: 0976060432
Author URI: http://tuanitpro.com

License: 
*/
var xmlHttp = null;

function loadXmlHttp() {
    if (window.XMLHttpRequest) { // IE7, Mozilla, Safari, Opera
        xmlHttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        try {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE 5.x, 6
        } catch (e) {}
    }
}

function sendRequest(url) {
    loadXmlHttp();
    if (xmlHttp) {
        xmlHttp.open("GET", url, true); // true = async
        xmlHttp.onreadystatechange = onCallback;
        xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xmlHttp.send(null);
    }
}

function onCallback() {
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
            var r = document.getElementById('results');
            r.innerHTML = xmlHttp.responseText;
        } else {
            alert('Error: ' + xmlHttp.status);
        }
    }
}

function loading() {
    document.getElementById("results").innerHTML = 'Đợi em tí...';
}

function getContent(url) {
    loading();
    sendRequest(url);
}

Cách dùng:

Trang default.aspx Ajax Demo

1. Trên trang HTML tạo một div.
Nơi chứa dữ liệu
2. gọi hàm getContent('URL'); VD: Load Content

Ajax Demo

DateTime: Ajax DateTime:
Vùng chứa dữ liệu, sẽ bị thay thế
http://tuanitpro.com

Trang default.aspx.cs

/** FileName: Default.aspx.cs
Project Name: DateTime Ajax
Date Created: 30/10/2014 10:28:58 PM
Description: Default.aspx, hiển thị dữ liệu
Version: 0.0.0.0
Author:	Lê Thanh Tuấn - Khoa CNTT
Author Email: [email protected]
Author Mobile: 0976060432
Author URI: http://tuanitpro.com
License: 
*/
using System;

public partial class Ajax_Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            lblDatTime.Text = DateTime.Now.ToString();
        }
    }
}

Trang Ajax.aspx.cs. Không quan tâm phần giao diện HTML.

/** FileName: Ajax.aspx.cs
Project Name: DateTime Ajax
Date Created: 30/10/2014 10:28:58 PM
Description: Ajax.aspx, trả về kết quả hiển thị lên website
Version: 0.0.0.0
Author:	Lê Thanh Tuấn - Khoa CNTT
Author Email: [email protected]
Author Mobile: 0976060432
Author URI: http://tuanitpro.com
License: 
*/
using System;

public partial class Ajax_Ajax : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Response.Write(DateTime.Now.ToString());
    }
}

Demo kết quả:

ajax-datetime
Demo Ajax DateTime

10 trang thông báo lỗi 404 vui mắt và sáng tạo nhất

Trên thế giới Internet, đối với người dùng phổ thông, có thể nói lỗi 404 là một trong những loại lỗi thường gặp nhất. Theo đó, bạn sẽ gặp lỗi 404 khi một đường dẫn bị hỏng, không khả dụng hoặc đơn giản là bạn không được cấp quyền truy cập đường dẫn này. Thay vì để những thông báo 404 nhàm chán gây khó chịu người dùng, những website dưới đây đưa ra những trang thông báo lỗi 404 hết sức sáng tạo, và vui mắt.

Sad Server

tuanitpro.com-error-404-acm-sad-serverClick vào một đường link quan trọng nhưng lại gặp trang báo lỗi 404 có thể mang lại cảm giác khó chịu cho người dùng. Tuy nhiên, nếu gặp phải một trang báo lỗi như của website này, chắc chắn bạn sẽ… mủi lòng trước những gì website “tâm sự”: “Tôi đã cố gắng rất nhiều. Nhưng không có tác dụng. Tôi thực sự thất vọng. Bạn thấy đấy, tôi cũng chỉ là một máy chủ, cố gắng ghi nhớ cả vũ trụ và phục vụ bạn từng trang web một và rồi nó thậm chí còn chẳng tồn tại…”

Link

404 Pac-Man

tuanitpro.com-error-404-blue-fountain-mediaBiến trang báo lỗi nhàm chán thành giao diện trò chơi huyền thoại PacMan, có thể trang báo lỗi này sẽ làm bạn muốn… thường xuyên gặp lỗi hơn chăng?

Link

Underground Error

tuanitpro.com-error-404-bluedanielMô phỏng lại một ga tàu điện ngầm theo phong cách cực kì chi tiết và nghệ thuật, người dùng còn có thể tương tác với trang báo lỗi 404 này y như một bộ phim hoặc một trò chơi phiêu lưu nào đó. Hãy ở sân ga, đợi đoàn tàu tới mở cửa và click vào cánh cửa để cảm nhận.

Link

Screaming Goat

tuanitpro.com-error-404-blueggTheo trang báo lỗi 404 của website này, một trang báo lỗi có thể làm cả một chú dê phải gào lên vì bực tức chứ không riêng gì người dùng.

Link

Lloyd Christmas Can’t Believe What He’s Seeing

tuanitpro.com-error-404-codeoNo! No, no, no, no, no!!!

Link

Bubble Pop

tuanitpro.com-error-404-hot-dotSố 404 được thiết kế tạo thành từ rất nhiều bong bóng. Bạn hãy thử click vào số 404 để tận hưởng cảm giác thú vị mà trang báo lỗi này mang lại.

Link

Yes, Exactly

tuanitpro.com-error-404-kvartirakrasivoCó thể bạn sẽ không hiểu trang báo lỗi 404 này muốn nói đến điều gì nhưng ai quan tâm cơ chứ, hình ảnh âm nhạc và công trường xây dựng. Đây là một trang thông báo lỗi sáng tạo là nó rất thú vị phải không nào?

Link

Newman!

tuanitpro.com-error-404-nouveller

 

Park offline, reboot required. Park đang offline, yêu cầu khởi động lại.

Link

This Could Go On For Days

tuanitpro.com-error-404-visitsteve

Trang báo lỗi độc đáo mô phỏng lại nhiều thời điểm trong một ngày trên một sa mạc.

Link

Honorable Mentions

tuanitpro.com-error-404z-homestarTrang web thông báo lỗi với nhân vật hoạt hình vui nhộn, kết hợp giao diện thông báo lỗi 404 cổ điển của IE 6. Bạn có thể tìm thấy thú vị ở đây

Link

“We’ve Got Motion!”

Và cuối cùng, thông báo lôi 404 với một video thú vị.

Nosh: 404 from Firespotter Labs on Vimeo.

Link

Nguồn: http://time.com/3478874/best-404-error-pages/