Chia sẻ kiến thức IT ứng dụng: AI, Backend, Frontend, Full Stack, DevOps & Cloud, and More.

Showing posts with label Web UI. Show all posts
Showing posts with label Web UI. Show all posts

Saturday, July 24, 2021

Installation mdbootstrap 5

Step 1

Download the package

Step 2

Unzip downloaded package and open it in the code editor

Step 3

Open Dreamweaver editor and create a HTML site.

Find a template site and copy an index.html file to your project and compose your website. And yes, it's that simple! 

Importing CSS file

To import MDB stylesheet please use the following syntax:

<!-- Font Awesome -->

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />

<!-- Google Fonts Roboto -->

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />

 <link rel="stylesheet" href="css/mdb.min.css" />

Importing JS file

<script href="js/mdb.min.js"></script>

Run: click index.html file to open it on browser

and it works

Sunday, March 18, 2018

Introduction to Bootstrap

1. What is bootstrap

Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.
  • Bootstrap is a free front-end framework for faster and easier web development
  • Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
  • Bootstrap also gives you the ability to easily create responsive designs
What is Responsive Web Design?
Responsive web design makes your web page look good on all devices.
Responsive web design uses only HTML and CSS.
Responsive web design is not a program or a JavaScript.

Saturday, January 6, 2018

Introduction to Cascading Style Sheets

Cascading Style Sheets or CSS is the basic technique to separate the appearance of a web page from the content represented in HTML. In this section, we give an introduction to CSS and look how they are relevant to software development with Vaadin.
As we can only give a short intruction in this book, we encourage you to refer to the rich literature on CSS and the many resources available in the web. You can find the authoratitative specifications of CSS standards from the W3C website and other literature, references, and tutorials from the Open Directory Project page on CSS, as well as from other sources .

Friday, August 4, 2017

Cắt css cho trang web đầu tiên của bạn

Lập trình viên code java hay rất e ngại khi gặp phải phần thiết kế web, tuy nhiên một chút kiến thức căn bản có thể giúp java coder có thể tự tin hơn trong việc chuyển đổi từ thiết kế của UI/UX + CUT CSS team sang file jsp hay các dạng  view khác; hoặc có thể thiết kế thô sơ cho trang web của bạn sau đó sẽ chờ đến phase nâng cấp để cải tiến giao diện. Bài viết của tác giả Dirk với tiêu đề Slice and code your first website sẽ giúp chúng ta có cái nhìn cơ bản công việc của những thành viên nhóm design như thế nào. Thậm chí java coder có thể thiết kế một chút website với Photoshop trong khi chờ đợi kết quả thiết kế từ thành viên nhóm UI/UX. Chúc mừng bạn! Nhưng bây giời bạn phải làm cái gì? Bạn làm thế nào để website của bạn có thể chạy tốt. Trong bài viết này, tác giả sẽ giải thích làm thế nào để chia ra và code website bằng html/css.

Okay,
tác giả sẽ giải thích cho bạn làm thế nào để cắt ra thành từng lát template của bạn trong Photoshop và làm thế nào để code nó trong Dreamweaver sử dụng những thẻ DIV.
Tệp PSD & HTMLcủa template này đã có sẵn để tải về và bạn sẽ dễ dàng hơn làm theo những bước chỉ ra. Xem trước cái mà tác giả đã hoàn thành.

Bước 1:

Bạn có thể bắt đầu với việc tải Slice and Code PSD.
Mở nó với Photoshop CS6 và chọn slice tool (có thể dùng Crop tool + lệnh Trim).

Tuesday, August 1, 2017

Wednesday, July 26, 2017

Wednesday, February 22, 2017

Closures & callback function javascript & jQuery

What is a closure?

A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain. The closure has three scope chains: it has access to its own scope (variables defined between its curly brackets), it has access to the outer function’s variables, and it has access to the global variables.
The inner function has access not only to the outer function’s variables, but also to the outer function’s parameters. Note that the inner function cannot call the outer function’s arguments object, however, even though it can call the outer function’s parameters directly.
You create a closure by adding a function inside another function.
A Basic Example of Closures in JavaScript:

 

function showName (firstName, lastName) {


​var nameIntro = "Your name is ";

// this inner function has access to the outer function's variables, including the parameter​

​function makeFullName () {


​return nameIntro + firstName + " " + lastName;


}

​

​return makeFullName ();


}


​

showName ("Michael", "Jackson"); // Your name is Michael Jackson

Closures are used extensively in Node.js; they are workhorses in Node.js’ asynchronous, non-blocking architecture. Closures are also frequently used in jQuery and just about every piece of JavaScript code you read.

Tuesday, August 23, 2016

Ajax jQuery căn bản

AJAX = Asynchronous JavaScript and XML. In short; AJAX is about loading data in the background and display it on the webpage, without reloading the whole page.
Examples of applications using AJAX: Gmail, Google Maps, Youtube, and Facebook tabs.
jQuery provides several methods for AJAX functionality.
With the jQuery AJAX methods, you can request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post - And you can load the external data directly into the selected HTML elements of your web page!
Lưu ý:
$("selector").each(function)
=> gọi hàm function với mỗi phần tử  có cùng tên 'selector'
$("selector").click(function)
=> đăng ký hàm xử lý sự kiện click (có thể cả với change, change focus, focus mouseover, mouseover, ..) với onclick handler.

Monday, August 22, 2016

jQuery in action study - Phần 3

Nghiên cứu sử dụng các chức năng cao cấp của jQuery

3.1 Các hiệu ứng jQuery (jQuery Effects)

3.1.1 Show/Hide

Với jQuery, bạn có thể ẩn (hide) và hiện (show) các phần tử HTML với các method hide() và show().
Cú pháp:
$(selector).hide(speed,callback)
$(selector).show(speed,callback)

speed parameter đặc tả tốc độ của việc hiding/showing, và có thể lấy một trong các giá trị sau: "slow", "fast", "normal", hoặc milliseconds.
callback parameter là tên của một function được thực thi sau khi hoàn thành hàm hide (hoặc show).
$(selector).hide() sẽ ẩn đi những phần tử được chọn
$(selector).show() hiển thị những phần tử được chọn

Sunday, August 21, 2016

jQuery in action study - Phần 2

Cài đặt và sử dụng giản đơn jQuery trong ứng dụng Web
Có 3 cách để cài đặt jQuery:
- Cài đặt jQuery lên một thư mục ở ổ đĩa cứng máy tính
- Cài đặt jQuery vào database
- Cài đặt jQuery từ một địa chỉ trên mạng internet, ví dụ Google's CDN.
Trong tài liệu này, người viết chỉ giới thiệu cách thứ nhất là cài đặt jQuery vào một thư mục ở ổ đĩa cứng máy tính.

Saturday, August 20, 2016

jQuery in Action study - Part 1

1.1 Các định nghĩa

1.1.1 Định nghĩa jQuery

Dịch từ http://jquery.com/ url:
jQuery là một thư viện JavaScript nhanh và chính xác mà làm đơn giản hóa các công việc lập trình JavaScript như duyệt tài liệu HTML, xử lý sự kiện, hoạt hình(animating), và những tương tác Ajax cho việc phát triển web một cách nhanh chóng. jQuery được thiết kế để thay đổi cách chúng ta viết JavaScript.
Bởi vì jQuery là JavaScript nên nó có thể được nhúng vào trong bất kỳ một project nào mà ở đó JavaScript được áp dụng.

1.1.2 Định nghĩa jQuery function

jQuery function là method trong jQuery được định nghĩa trực tiếp bắt đầu bằng dấu dollar $ hoặc hàm jQuery().
Cú pháp:
$(selector)
hoặc
jQuery(selector)
Trong đó hàm $(..) là một cách viết tắt của hàm jQuery().
Hàm jQuery sẽ trả về một đối tượng JavaScript đặc biệt chứa đựng một mảng các phần tử DOM mà match với selector.
Ví dụ:
$(“p a”)
Lấy về một nhóm các links nằm bên trong một phần tử <p>

Monday, November 5, 2012

Màu cộng - Additive color & Màu trừ - Subtractive color

What Is Color?
Color is the byproduct of the spectrum of light, as it is reflected or absorbed, as received by the human eye and processed by the human brain.

Additive Color
The tools we use to describe color are different when the color is printed than from when it is projected. Projected color is additive. Printed color is subtractive.
Visible light is a small part of the electromagnetic spectrum, between the wavelengths of 400 and 700 nm (nanometers = billionth of a meter). In 1666 Sir Isaac Newton used a glass prism to refract white light at different angles according to wave length. He saw a rainbow of colors, which he passed through a second prism to re-form white light. He concluded that white light is a mixture of all the colors of the visible spectrum.

Sir Newton was playing with additive color. No light (or color) is black. All light (all colors) is white.

Each color of the spectrum has a specific frequency. Adding different colors of light together increases the number of frequencies present and the more colors you add the closer it becomes to white. Therefore, light is called an additive color mixing system. This type of color mixing is used in computer monitors, TV sets, and to illuminate actors on stage.
=> Có thể hiểu màu cộng là màu của quang phổ ánh sáng biểu kiến (nhìn thấy) với cách tiếp cận trên nền màu đen.

Subtractive Color
The color we see on paper is created using a subtractive model, where the frequencies that are not absorbed form the color we see.
When you project light, you are sending out frequencies of light that add together to form a certain color beam. Think of it as painting with light. In contrast, the color we put down on paper works exactly the opposite. The color we we see is the spectrum of light which is reflected by the paper or by the ink, crayon, or marker we put on the paper.
Historically artists and designers have not worked with light but with paints and pigments. Colors of paint absorb most of the light frequencies and reflect back only the wavelength that defines the color you see. Mixing different paints makes a darker color because more of the light frequencies are absorbed. This method of mixing colors is called subtractive because each color absorbs, light frequencies, subtracting them from the total mixture.

A subtractive color model is the very first type of color we learn as a child, when we are taught that the three primary colors of red, yellow, and blue can be mixed to form all colors. The printing inks magenta, yellow, and cyan are essentially a more sophisticated version of our childhood crayons.

=> Để rõ hơn về mô hình màu trừ, chúng ta có thể xem thêm đoạn tài liệu sau:
Subtractive color: Illuminate objects that contain dyes or pigments that remove portions of the visible spectrum. The objects may either transmit light (transparencies) or reflect light (paper, for example). The subtractive primaries are C, M and Y. Cyan absorbs red; hence C is sometimes called "minus red" (-R). Similarly, M is -G and Y is -B. The two approaches are illustrated on the right and described in the table below. 
=> màu trừ có cách tiếp cận trên nền trắng, có sự trộn lẫn các màu cơ bản cyan, magenta, yellow (thực tế có thêm màu đen - black, ký hiệu là K); chính sự trộn lẫn đã làm mất đi một số thành phần màu đơn sắc (do bị hấp thụ) vì vậy mà người ta gọi cách tạo màu này là mô hình màu trừ.

Monday, April 9, 2012

Css căn bản

CSS là gì?

  • CSS là viết tắt của Cascading Style Sheets
  • Styles xác định làm thế nào để hiển thị các phần tử HTML
  • Styles bắt đầu có ở phiên bản HTML 4.0
  • External Style Sheets được lưu trữ ở các tệp CSS

PHỔ BIẾN

CHUYÊN MỤC

TỔNG LƯỢT XEM