Một số vấn đề cần quan tâm

Chia sẻ bởi Nguyễn Việt Vương | Ngày 29/04/2019 | 139

Chia sẻ tài liệu: Một số vấn đề cần quan tâm thuộc Bài giảng khác

Nội dung tài liệu:

Một số vấn đề cần quan tâm
Đào Việt Cường
Khoa CNTT-ĐHSP Hà Nội
Nội dung
XML
Lập trình AJAX
RSS
RDF
Một số chức năng
XML
Giới thiệu
XML = eXtensible Markup Language
XML được thiết kế để miêu tả dữ liệu, tập trung vào dữ liệu đó là gì.
XML là ngôn ngữ đánh dấu tương tự như HTML
các thẻ của XML không được định nghĩa trước.
XML sử dụng Document Type Definition (DTD) hoặc XML Schema để mô tả dữ liệu
XML được W3C khuyến cáo sử dụng
Đặc điểm
XML được thiết kế để lưu trữ, làm công cụ trung gian để trao đổi dữ liệu.
XML không thể thay thế HTML
XML có thể mở rộng
XML có thể sử dụng để bổ trợ cho HTML khi thiết kế web.
Cú pháp các thẻ XML
Tương tự thẻ HTML, tên thẻ do người sử dụng tự định nghĩa.
Mọi thẻ XML phải có thẻ đóng.
Thẻ XML phân biệt chữ hoa, chữ thường.
Thẻ XML có thể lồng nhau, không thể “cắt” nhau
XML bắt buộc có 1 thẻ gốc.
Mọi giá trị thuộc tính của XML phải để trong ngoặc kép.
Khoảng trống trong XML được bảo toàn.
Ghi chú trong XML giống với HTML:
Thẻ XML
Thẻ:
Có thể gồm chữ, số, và một số ký tự khác.
Không được bắt đầu bằng số hoặc ký tự đặc biệt.
Không được bắt đầu bằng “XML”.
Không được chứa khoảng trống.
Thuộc tính: tương tự HTML
Thẻ có thể có thuộc tính.
Giá trị thuộc tính phải đặt trong nháy đơn hoặc kép.
Ví dụ XML



1
Nguyễn Văn A
Hà Nội


2
Trần Văn B
Hà Nam


Xem trang XML
Sự hỗ trợ của các trình duyệt
Mozilla Firefox 1.0.2.
IE 5 hỗ trợ XML nhưng chưa hoàn chỉnh, IE 6 hỗ trợ đầy đủ.
Xem file XML trên trình duyệt:
Hiển thị dưới dạng cây.
Cho phép mở rộng
hoặc thu gọn các cấp
File XML không đúng
sẽ bị báo lỗi.
Kết hợp XML và CSS
Có thể dùng CSS để quy định cách hiển thị file XML.
Cách quy định:

Có thể dùng CSS để quy định cách hiển thị file XML.
Ví dụ
id{
display:block;
}
ten{
color:#FF0000;
font-weight:bold;
display:block;
}
que{
font-style:italic;
display:block;
}




1
Nguyễn Văn A
Hà Nội


2
Trần Văn B
Hà Nam


Kết hợp XML và XSL
XSL (eXtensible Stylesheet Language)
Mở rộng của CSS
XSL “chuyển đổi” XML thành HTML trước khi hiển thị.
Xử lý XML
Có các công cụ xử lý. Thường được tích hợp trong ngôn ngữ lập trình.
….
….
Lập trình AJAX
Giới thiệu
AJAX = Asynchronous JavaScript And XML
AJAX không phải là ngôn ngữ mới mà là một cách mới sử dụng các ngôn ngữ đã có.
AJAX giúp ta tạo các trang web nhanh hơn, tiện lợi hơn, thân thiện hơn khi sử dụng.
AJAX dựa trên JavaScript và các yêu cầu HTTP.
Đặc điểm AJAX
Là công nghệ của web browser. Độc lập với web server.
Sử dụng JavaScript để gửi và nhận dữ liệu giữa client và server.
AJAX dựa trên:
JavaScript
XML
HTML
CSS
AJAX sử dụng XML và yêu cầu HTTP
Ví dụ minh họa
Truy xuất dữ liệu từ server trong JavaScript
Với IE6: sử dụng Msxml2.XMLHTTP:
XMLHttp =
new ActiveXObject("Msxml2.XMLHTTP")
Với IE5.6: sử dụng Microsoft.XMLHTTP
XMLHttp =
new ActiveXObject("Microsoft.XMLHTTP")
Với trình duyệt khác: XMLHttpRequest
XMLHttp=new XMLHttpRequest()
Mã lệnh tổng quát
function GetXMLHttpObject(){
var oXMLHttp=null
try{
oXMLHttp=new ActiveXObject("Msxml2.XMLHttp")
}
catch(e){
try{
oXMLHttp=new ActiveXObject("Microsoft.XMLHttp")
}
catch (e){}
}
if (oXMLHttp==null)
oXMLHttp=new XMLHttpRequest()
return oXMLHttp;
}
Đối tượng XMLHttpRequest
Các phương thức
open(): Thiết lập yêu cầu đến server (địa chỉ trang cần kết nối đến)
send(): Gửi yêu cầu đến server.
abort(): Hủy yêu cầu hiện tại
Các thuộc tính
readyState: Trạng thái hiện tại của đối tượng.
onreadystatechange: Địa chỉ hàm gọi lại (callback)
responseText: Chuỗi dữ liệu trả về.
Phương thức open
void open(
in DOMString method,
in DOMString url);
void open(
in DOMString method,
in DOMString url,
in boolean async);
void open(
in DOMString method,
in DOMString url,
in boolean async,
in DOMString user);
Phương thức open (tt)
void open(in DOMString method,
in DOMString url,
in boolean async,
in DOMString user,
in DOMString password);
Thuộc tính readyState
readyState=0: Chưa khởi tạo: sau khi tạo đối tượng XMLHttpRequest nhưng chưa gọi open().
readyState=1: Vừa khởi tạo: sau khi gọi open() nhưng chưa gọi send().
readyState=2: Vừa gửi đi: ngay sau khi gọi send().
readyState=3: Đang xử lý: sau khi kết nối đến server nhưng server chưa trả lời.
readyState=4: Xong: sau khi server tính toán xong, dữ liệu đã gửi về xong.
Minh họa
RSS
Giới thiệu
RSS = Really Simple Syndication
RSS là cách sử dụng XML để phát tán nội dung của 1 website đến nhiều website khác.
RSS cho phép ta có được những thông tin cập nhật nhất một cách nhanh nhất.
RSS có nhiều phiên bản. Phiên bản đầu tiên năm 1997, từ 2003 là phiên bản 2.0
Đặc điểm
Viết bằng XML
Có thể tự động cập nhật
Có cú pháp chặt chẽ nhưng đơn giản, dễ học, dễ sử dụng
Ví dụ RSS



Khoa CNTT Home Page
http://cntt.dhsphn.edu.vn
Gioi thieu khoa CNTT

Dien dan CNTT
http://cntt.dhsphn.edu.vn/forum
Noi trao doi tin tuc cua GV va SV


Thu vien CNTT
http://cntt.dhsphn.edu.vn/itlib
Danh muc tai lieu cua khoa CNTT



Cú pháp RSS
Dòng đầu tiên là khai báo XML, quy định phiên bản XML và mã ký tự:
Dòng thứ hai là khai báo RSS. Xác định phiên bản RSS qua thuộc tính version:
Dòng tiếp theo là thẻ sử dụng để diễn giải kênh RSS.
Thẻ này bắt buộc phải có 3 thẻ con:
: Tiêu đề<br><link>: Liên kết<br><description>: Mô tả<br>Mỗi thẻ <channel> có thể có 1 hoặc nhiều thẻ <item> bên trong. Mỗi thẻ <item> xác định một nội dung thông tin RSS. Mỗi <item> cần có 3 thẻ con quy định các thuộc tính:<br><title>: Tiêu đề<br><link>: Liên kết<br><description>: Mô tả<br>Cuối cùng là các thẻ đóng<br>Công bố RSS<br>Tạo tệp chứa RSS. Có đuôi là .XML<br>Kiểm tra tính hợp lệ VD: (http://www.feedvalidator.org)<br>Đưa file chứa RSS lên server<br>Đặt 1 trong 2 ảnh màu cam liên kết đến file XML vừa tạo lên trang web <br>Đăng ký vào danh mục RSS (Tìm từ "RSS Feed Directories“)<br>Đăng ký với các máy tìm kiếm<br>Thường xuyên cập nhật RSS của mình<br>Đọc RSS<br>RSS Reader (http://www.rssreader.com)<br>News Gator (http://www.newsgator.com)<br>…<br>Mozilla Firefox (www.mozilla.com/firefox/)<br><br>Đọc RSS bằng PHP<br>Sử dụng thư viện mã nguồn mở lastRSS<br>Download: http://lastrss.webdot.cz/<br>Hỗ trợ các phiên bản RSS 0.9, 1.0 và 2.0<br>Cache<br>pubDate/ngày lastBuildDate có thể chuyển đổi sang các định dạng<br>Chuyển đổi mã ký tự (tất cả các bộ mã đều được hỗ trợ bằng cách sử dụng thư viện iconv)<br>Kết quả trả ra là mảng<br>Tốc độ cao<br>Cho phép tách HTML từ trường mô tả<br>Tùy chọn giới hạn số lượng tin trả ra<br>Hai cách xử lý với CDATA (get/strip CDATA content)<br>Mã nguồn mở<br>Mã lệnh<br>Minh họa<br>RDF<br>Giới thiệu<br>RDF stands for Resource Description Framework<br>RDF is a framework for describing resources on the web<br>RDF provides a model for data, and a syntax so that independent parties can exchange and use it<br>RDF is designed to be read and understood by computers<br>RDF is not designed for being displayed to people<br>RDF is written in XML<br>RDF is a part of the W3C`s Semantic Web Activity<br>RDF is a W3C Recommendation<br>RDF - Examples of Use<br>Describing properties for shopping items, such as price and availability<br>Describing time schedules for web events<br>Describing information about web pages, such as content, author, created and modified date<br>Describing content and rating for web pictures<br>Describing content for search engines<br>Describing electronic libraries<br>RDF Rules<br>RDF uses Web identifiers (URIs) to identify resources.<br>RDF describes resources with properties and property values.<br><br></div> </div> </div> <div style="font-size:12px;">* Một số tài liệu cũ có thể bị lỗi font khi hiển thị do dùng bộ mã không phải Unikey ...</div> <hr> <div class="row"> <div class="ad-container"> </div> </div> <div class = 'clearfix'></div> <div class="row"> <div class="col-md-6 col-xs-12"> <div><b>Người chia sẻ</b>: <a href="#">Nguyễn Việt Vương </a></div> <div><b>Dung lượng</b>: | <b>Lượt tài</b>: 3 </div> <div><b>Loại file</b>: </div> <div><b>Nguồn</b> : Chưa rõ </div> <div style="font-size:12px;">(Tài liệu chưa được thẩm định)</div> </div> <div class="col-md-6 col-xs-12"> <div class="btn-preview download-file-btn" style="width:150px;background:#f26c4f;margin:3px;" data-lesson-id = "5cc5f89b831f1210308b56f4"> <a data-href="https://thuviengiaovien.com/lesson/download/id/5cc5f89b831f1210308b56f4" href= "javascript:void(0)" style="color:#fff;" rel="nofollow"> <i class="fa fa-download" aria-hidden="true" style="font-size:20px;"></i> Tải tài liệu </a> </div> <div><a href="#">Báo cáo sai sót </a></div> <div><a href="#">Đề suất chỉnh sửa , phân lại mục</a> </div> </div> </div> </div> </div> </div> <div class="u-face-cm lazy"> <div class="fb-like" data-href="https://thuviengiaovien.com/mot-so-van-de-can-quan-tam-753114.html" data-layout="standard" data-action="like" data-show-faces="false" data-share="true" data-width="300"> </div> <div class="fb-comments" data-href="https://thuviengiaovien.com/mot-so-van-de-can-quan-tam-753114.html" data-width="100%" data-numposts="5" data-colorscheme="light"> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-12 pdr-b hidden-xs"> <div class="u-learn-what"> <div class="alert alert-success" role="alert"> <h3>Thư Viện Giáo viên có gì ?!</h3> <hr style="margin:3px 0px;"> <div><i class="fa fa-check" aria-hidden="true"></i> Thư viện tài liệu giáo viên đủ các bậc học </div> <hr style="margin:3px 0px;"> <div><i class="fa fa-check" aria-hidden="true"></i> Tải và chia sẻ tài liệu miễn phí , lưu trữ không giới hạn ... </div> <hr style="margin:3px 0px;"> <div><i class="fa fa-check" aria-hidden="true"></i> Cộng đồng chia sẻ kinh nghiệm dạy học ... </div> <hr style="margin:3px 0px;"> <br /> <center><a class="unica-log-acc" href="/register">Tham gia thư viện > </a></center> </div> </div> <div class="u-learn-what"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4649191202673214" data-ad-slot="2171434249" data-ad-format="auto" data-full-width-responsive="true"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script> </div> </div> </div> </div> </div> <br /> </main> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> <footer> <div id="footer2"> <div class="container"> <div class="row"> <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6 pdr pdl" style="padding-top:20px;"> <span class="logo-footer"> <a class="navbar-brand" href="/"><img src="/images/logo/logo-tv-gv.png" width="100%"></a> </span> <!--<ul> <li> <i class="fa fa-map-marker" aria-hidden="true"></i> <a href="#">Mai Dịch Cầy Giấy Hà Nội </a> </li> </ul>--> </div> <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6 pdr pdm des-unica"> <h4>Về chúng tôi </h4> <ul> <li><a href="/gioi-thieu">Giới thiệu</a></li> <li><a href="/faq">Câu hỏi thường gặp</a></li> <li><a href="/dieu-khoan-dich-vu.html">Điều khoản dịch vụ</a></li> <li><a href="/blog">Blog chia sẻ </a></li> </ul> </div> <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6 pdr pdm des-unica"> <h4>Hoạt động</h4> <ul> <li><a href="/teacher">Đăng ký / Đăng nhập </a></li> <li><a href="#" target="_blank">Đăng ký hợp tác </a></li> </ul> </div> <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6 pdr des-unica"> <h4>Liên kết hữu ích </h4> <ul> <li><a href="#">Dạy online </a></li> </ul> <span class="social-connect"> <p>Kết nối với </p> <ul> <li><a href="https://www.facebook.com/hoctaphay/" data-bg-color="#3B5998" style="background: rgb(59, 89, 152) !important;"><i class="fa fa-facebook"></i></a></li> <li><a href="# data-bg-color="#C22E2A" style="background: rgb(194, 46, 42) !important;"><i class="fa fa-youtube"></i></a></li> </ul> </span> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 pdr facebook-box"> <div class="fb-page fb_iframe_widget" data-href="https://www.facebook.com/hoctaphay/" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" fb-xfbml-state="rendered" fb-iframe-plugin-query="adapt_container_width=true&app_id=1639709859601244&container_width=137&hide_cover=false&href=https%3A%2F%2Fwww.facebook.com%2Funica.vn%2F&locale=vi_VN&sdk=joey&show_facepile=true&small_header=false"><span style="vertical-align: bottom; width: 180px; height: 230px;"></span></div> </div> </div> </div> </div> <div id="footer3"> <div class="container"> <div class="row"> <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12"> <p>© Thư viện giáo viên - Chia sẻ phướng pháp, tài liệu dạy học trực tuyến </p> </div> <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"> -- </div> </div> </div> </div> </footer> <script type="text/javascript" src="/templates/default/new/js/jquery-3.2.1.min.js?ver=201904261832"></script> <script type="text/javascript" src="/templates/default/new/js/bootstrap.min.js?ver=201904261832"></script> <script type="text/javascript" src="/templates/default/new/js/slick.js?ver=201904261832"></script> <script type="text/javascript" src="/templates/default/new/js/bootstrap.offcanvas.js?ver=201904261832"></script> <script type="text/javascript" src="/templates/default/new/js/sidenav.min.js?ver=201904261832"></script> <script type="text/javascript" src="/templates/default/new/js/amazonmenu.js?ver=201904261832"></script> <script type="text/javascript" src="/templates/default/new/js/sticky-sidebar.js?ver=201904261832"></script> <script type="text/javascript" src="/js/ViewerJS/viewerjs.js?ver=201904261832"></script> <script type="text/javascript"> $.fn.isOverflowed = function(){ var e = this[0]; return e.scrollHeight > e.clientHeight || e.scrollWidth > e.clientWidth; }; </script> <script type="text/javascript"> <!-- $(document).ready(function() { $('.download-file-btn').click(function(){ var _this = $(this); if(_this.data('downloading') != true){ _this.data('downloading',true); _this.data('downloading-error',0); $(this).find('i').addClass('fa-spinner'); $(this).find('i').addClass('fa-spin'); var callback = function(result){ console.log(result); if(result.success == true){ _this.data('downloading',false); // _this.find('i').removeClass('fa-spinner'); // _this.find('i').removeClass('fa-spin'); window.location.href = result.href; }else{ var error = _this.data('downloading-error'); if(error < 3){ _this.data('downloading-error',error + 1); getDownloadUrl({ id : _this.data('lesson-id'), },callback); } } }; getDownloadUrl({ id : _this.data('lesson-id'), },callback); } }); }); function getDownloadUrl(options,callback){ $.ajax({ url : '/lesson/get-download-info', type : 'POST', data : options, success : function(result){ callback(result); }, error : function(){ callback({success : false}); } }); } (function () { function b(a, b) { var c = new XMLHttpRequest; c.onreadystatechange = function () { var a, f; 4 === c.readyState && ((200 <= c.status && 300 > c.status || 0 === c.status) && (a = c.getResponseHeader("content-type")) && q.some(function (b) { return b.supportsMimetype(a) ? (f = b, console.log("Found plugin by mimetype and xhr head: " + a), !0) : !1 }), b(f)) }; c.open("HEAD", a, !0); c.send() } function r(a) { var b; q.some(function (c) { return c.supportsFileExtension(a) ? (b = c, !0) : !1 }); return b } function f(a) { var b = r(a); b && console.log("Found plugin by parameter type: " + a); return b } function x(a) { a = a.split("?")[0].split(".").pop(); var b = r(a); b && console.log("Found plugin by file extension from path: " + a); return b } function s(a) { var b = {}; (a.search || "?").substr(1).split("&").forEach(function (a) { a && (a = a.split("=", 2), b[decodeURIComponent(a[0])] = decodeURIComponent(a[1])) }); return b } var k, q = [function () { var a = "application/vnd.oasis.opendocument.text application/vnd.oasis.opendocument.text-flat-xml application/vnd.oasis.opendocument.text-template application/vnd.oasis.opendocument.presentation application/vnd.oasis.opendocument.presentation-flat-xml application/vnd.oasis.opendocument.presentation-template application/vnd.oasis.opendocument.spreadsheet application/vnd.oasis.opendocument.spreadsheet-flat-xml application/vnd.oasis.opendocument.spreadsheet-template".split(" "), b = "odt fodt ott odp fodp otp ods fods ots".split(" "); return { supportsMimetype: function (b) { return -1 !== a.indexOf(b) }, supportsFileExtension: function (a) { return -1 !== b.indexOf(a) }, path: "./ODFViewerPlugin", getClass: function () { return ODFViewerPlugin } } } (), { supportsMimetype: function (a) { return "application/pdf" === a }, supportsFileExtension: function (a) { return "pdf" === a }, path: "./PDFViewerPlugin", getClass: function () { return PDFViewerPlugin } } ]; $(document).ready(function() { if($('#preview_url').length != 0 && $('#viewer').length != 0 ){ var a = $('#preview_url').val(), e = { 'title' : $('#preview_title').val() }, c; if(a != '' && a != undefined ){ a ? (e.title || (e.title = a.replace(/^.*[\\\/]/, "")), e.documentUrl = a, b(a, function (b) { b || (b = e.type ? f(e.type) : x(a)); b ? "undefined" !== String(typeof loadPlugin) ? loadPlugin(b.path, function () { c = b.getClass(); new Viewer(new c, e) }) : (c = b.getClass(), new Viewer(new c, e)) : new Viewer })) : new Viewer } } }); k = document.createElementNS(document.head.namespaceURI, "style"); k.setAttribute("media", "screen"); k.setAttribute("type", "text/css"); k.appendChild(document.createTextNode(viewer_css)); document.head.appendChild(k); k = document.createElementNS(document.head.namespaceURI, "style"); k.setAttribute("media", "only screen and (max-device-width: 800px) and (max-device-height: 800px)"); k.setAttribute("type", "text/css"); k.setAttribute("viewerTouch", "1"); k.appendChild(document.createTextNode(viewerTouch_css)); document.head.appendChild(k) })(); //--> </script> <script> $(document).ready(function () { $(".remove-navibar").click(function () { $("#js-bootstrap-offcanvas").trigger("offcanvas.toggle"); }); }); jQuery(function () { amazonmenu.init({ menuid: 'mysidebarmenu' }) }) resizeWindow(); window.addEventListener('resize', resizeWindow); function resizeWindow() { $('.slider').slick({ responsive: [{ breakpoint: 2500, settings: "unslick" }, { breakpoint: 640, settings: { dots: true, infinite: true } } ] }); } $('.u-blog-slide').slick({ infinite: true, slidesToShow: 1, slidesToScroll: 1, responsive: [{ breakpoint: 1025, settings: { slidesToShow: 1, slidesToScroll: 1, infinite: true } }, { breakpoint: 769, settings: { slidesToShow: 1, slidesToScroll: 1 } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } } ] }); </script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-114571019-15', 'auto'); ga('send', 'pageview'); </script> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=292835638303077"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> </html>