DOCSLIB.ORG

National Taiwan Normal University

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
National Taiwan Normal University National Taiwan Normal University Graduate Institute of Computer Science and Information Engineering A Content Based HTML 5 Image Galleries on Website Submitted in partial fulfillment of the requirement For the degree of MASTER In Computer Science and Information Engineering By Dhannayak Swapna Advisor Prof. Yao-ming Yeh January 2013 1 摘要 本研究有兩個主要目標的想法。萬維網聯盟（以下簡稱為 WWW 或 W3 的，通常稱為 Web），是一個系統的相互聯繫通過 Internet 訪問的超鏈 接的文檔。通過網頁瀏覽器，可以瀏覽網頁，其中可能包含文字，圖 片，視頻和其他多媒體，以及它們之間通過超鏈接導航。 HTML5 是一 個集合的個別功能。 HTML5 包含了許多新的功能，使網絡形式要容易 得多寫，網絡上更強大和一致的。 HTML5 仍然是一個進展中的工作。 然而，主要的瀏覽器支持許多新的 HTML5 元素和應用程序編程接口。 很久以前，攝影師依靠定期畫廊，展示自己的作品。雖然這種方法有它 的優勢，它也標誌著幾個缺點。隨著互聯網革命中，每個人，能買得起 廉價的網絡託管帳戶，可以創建一個個人網站。然而，在開始建立的網 站是不容易的，因為不是每個人都有的技巧，創建自己的網站。 在論文的目的主要集中在 HTML5，CSS3，jQuery 的，javascript 中的 許多新的功能和元素。根據從研究和上述審查的相關文獻與研究。它提 供了很好的參考，誰想要開發自己的 HTML 5 的圖片庫網站上使用 HTML 5，CSS3，jQuery 和 JavaScript 的。我已經演示了 HTML 5 和 CSS3 的一些新功能，如 CSS3 圖像畫廊，畫框，旋轉幻燈片，jQuery 的三面板圖像滑塊，jQuery 的燈箱插件，使用 jQuery 和 CSS 的形象 牆，圖片 DG 作物。對於這些演示中，例如我選擇了一些重要的印度自 由戰士的圖像。和其它 HTML5 功能是使用 HTML5 的 Canvas 的漣漪效 應。用戶可以使用這些圖片的演示，對的 iphone 移動設備和電腦。我也 做演示，更可用於用戶，他們可以與每個演示。 關鍵詞：HTML5，CSS3，jQuery 的，使用 Javascript，AJAX，PHP。 2 ABSTRACT This study was performed with two main goals in mind. The World Wide Web consortium (abbreviated as WWW or W3, commonly known as the Web), is a system of interlinked hyper linked documents accessed via the Internet. With a web browser, one can view web pages that may contain text, images, videos, and other multimedia, and navigate between them via hyperlinks. HTML5 is a collection of individual features. HTML5 includes many new features to make web forms a lot easier to write, more powerful and consistent across the Web. HTML5 is still a work in progress. However, the major browsers support many of the new HTML5 elements and Application Programming Interfaces. A long time ago, photographers had to rely on regular galleries to display their work. And while this method has its advantages, it also marks several disadvantages. With the Internet Revolution, everyone, who could afford a cheap web hosting account, could create a personal website. However, in the beginning, creating websites was not easy, since not everybody had the skill to create their own site. The objective of the thesis mainly focused on many new functions and elements of HTML5, CSS3, jQuery, javascript. Based from the research and the foregoing review of the related literature and studies. It provides very good reference for who wants to develop their own HTML 5 image gallery websites using HTML 5, CSS3, jQuery and javascript. I have demonstrated some new features of HTML 5 and CSS3 like CSS3 Image gallery, Frame, Rotating Slideshow, jQuery Triple Panel Image slider, jQuery lightbox plugin, Image wall with jQuery and CSS, Image DG Crop. For these demos I have selected the example images from some of important Indian freedom fighters. And the other HTML5 feature is Ripple effect using HTML5 Canvas. Users can use these Image Demos on iphone mobile devices and computer. I also do make demos that are more usable for users and they can interact with each demo. Keywords: HTML5, CSS3, jQuery, JavaScript, AJAX, PHP. 3 Acknowledgements It gives me immense pleasure to express my gratitude to all those who have been there all the while during period of my study and research, lending their help in every possible way to come out of the course with flying colors. It is with all sincerity that I express gratitude to my research supervisor, Prof. Yao-MingYeh, Department of Computer Science and Information Engineering, National Taiwan Normal University, Taiwan, for his guidance, pertinent encouragement, inspiring discussions and valuable suggestions throughout this investigation. I specially thank to my husband Dr. J. Damodar, for his help, encouragement and inspiration that provided me the pleasant environment during my work. I thank to my parents D. Raja Gopal Rao and Ganga Devi for their blessings. Last, but not least, I really enjoy the cheerfulness of my daughter Aashika. D.Swapna 4 TABLE OF CONTENTS ABSTRACT...............................................................................................3 List of Figures...................................................................................................8 List of Tables....................................................................................................9 Chapter 1 Introduction.....................................................................10 1.1 Research Background.................................................................................10 1.2 Goal of the Thesis......................................................................................12 1.3 Organization of the Thesis.........................................................................12 1.4 Motivation..................................................................................................12 A. A Content based Image galleries on website...................................13 Chapter 2 Survey and Fundamentals......................................14 2.1 HTML5.......................................................................................................14 A. Advantages of HTML5....................................................................16 2.2 CSS.............................................................................................................17 2.3 CSS3 Features............................................................................................19 A. CSS3 Modules.................................................................................19 B. Styling HTML with CSS.................................................................20 5 C. CSS3 Backgrounds.........................................................................20 2.4 HTML5 New Form Elements....................................................................20 A. HTML5 <datalist> Element............................................................21 B. <form> / <input> autocomplete Attribute.......................................22 2.5 jQuery........................................................................................................22 2.5.1 The element Selector...................................................................22 2.5.2 jQuery Selectors..........................................................................23 2.6 Used Web Technology’s...........................................................................24 2.6.1 CSS..............................................................................................24 2.6.2 JavaScript....................................................................................24 2.6.3 jQuery..........................................................................................25 2.6.4 AJAX...........................................................................................25 2.6.5 PHP..............................................................................................26 Chapter 3 HTML5 Image Gallery Design............................27 3.1 Layout of image gallery............................................................................ 27 A. Demo of CSS3 Image Gallery........................................................29 B. Demo of Frame...............................................................................30 3.2 Demo of Triple Panel Image Slider...........................................................31 3.3 Demo of Rotating Slideshow.....................................................................37 3.4 Demo of JQuery lightBox plugin...............................................................41 3.5 Demo of Image Wall with jQuery and CSS...............................................44 6 3.6 Demo of Image DG crop............................................................................50 3.7 Demo of Water ripple effect using HTML5 Canvas Image.......................56 Chapter 4 Comparisons...................................................................59 4.1 Comparison between CSS2 and CSS3.......................................................59 4.2 Comparison between JQuery and Javascript..............................................60 4.3 Comparison between HTML4 and HTML5...............................................61 4.4 Comparison between HTML5 and Flash...................................................63 4.5 Comparison between HTML5 and Native Mobile Applications...............65 4.4 Browsers Comparison................................................................................66 Chapter 5 Conclusions and Discussions.................................73 References........................................................................................................76 7 List of Figures Figure 1.1 Timeline of web Technologies.......................................................11 Figure 2.1 HTML5..........................................................................................15 Figure 2.2 HTML5 in Web Applications........................................................15 Figure 2.3 HTML5 in Mobile Applications....................................................16 Figure 3.1 HTML5 Website design.................................................................29 Figure 3.1.1 CSS3 Image gallery.....................................................................30 Figure 3.1.2 Frame.........................................................................................31 Figure 3.2 Triple Panel Image Slider...............................................................32
Load more

Recommended publications
  • Beautiful Soup Documentation Release 4.4.0
    Beautiful Soup Documentation Release 4.4.0 Leonard Richardson Dec 24, 2019 Contents 1 Getting help 3 2 Quick Start 5 3 Installing Beautiful Soup 9 3.1 Problems after installation........................................9 3.2 Installing a parser............................................ 10 4 Making the soup 13 5 Kinds of objects 15 5.1 Tag .................................................... 15 5.2 NavigableString .......................................... 17 5.3 BeautifulSoup ............................................ 18 5.4 Comments and other special strings................................... 18 6 Navigating the tree 21 6.1 Going down............................................... 21 6.2 Going up................................................. 24 6.3 Going sideways.............................................. 25 6.4 Going back and forth........................................... 27 7 Searching the tree 29 7.1 Kinds of filters.............................................. 29 7.2 find_all() .............................................. 32 7.3 Calling a tag is like calling find_all() ............................... 36 7.4 find() ................................................. 36 7.5 find_parents() and find_parent() .............................. 37 7.6 find_next_siblings() and find_next_sibling() .................... 37 7.7 find_previous_siblings() and find_previous_sibling() .............. 38 7.8 find_all_next() and find_next() ............................... 38 7.9 find_all_previous() and find_previous() .......................
    [Show full text]
  • Introduction to HTML5
    "Charting the Course ... ... to Your Success!" Introduction to HTML5 Course Summary Description HTML5 is not merely an improvement on previous versions, but instead a complete re-engineering of browser-based markup. It transforms HTML from a document description language to an effective client platform for hosting web applications. For the first time developers have native support for creating charts and diagrams, playing audio and video, caching data locally and validating user input. When combined with related standards like CSS3, Web Sockets and Web Workers it is possible to build ‘Rich Web Applications’ that meet modern usability requirements without resorting to proprietary technologies such as Flash and Silverlight. This course enables experienced developers to make use of all the features arriving in HTML5 and related specifications. During the course delegates incrementally build a user interface for a sample web application, making use of all the new features as they are taught. By default the course uses the Dojo Framework to simplify client-side JavaScript and delegates are presented with server-side code written in Spring MVC 3. Other technology combinations are possible if required. Topics Review of the Evolution of HTML Playing Audio and Video Better Support for Data Entry Hosting Clients in HTML5 Support for Drawing Images and Standards Related to HTML5 Diagrams Prerequisites Students should have experience of web application development in a modern environment such as JEE, ASP .NET, Ruby on Rails or Django. They must be very familiar with HTML4 and/or XHTML and the fundamentals of programming in JavaScript. If this is not the case then an additional ‘primer’ day can be added to the delivery.
    [Show full text]
  • Doctype Switching in Modern Browsers
    Thomas Vervik, July 2007 Doctype switching in modern browsers Summary: Some modern browsers have two rendering modes. Quirk mode renders an HTML document like older browsers used to do it, e.g. Netscape 4, Internet Explorer 4 and 5. Standard mode renders a page according to W3C recommendations. Depending on the document type declaration present in the HTML document, the browser will switch into either quirk mode, almost standard or standard mode. If there is no document type declaration present, the browser will switch into quirk mode. This paragraph summaries this article. I will explain how the main browsers on the marked today determine which rendering mode to use when rendering the (x)html documents they receive. I have tested nearly all my assertions in Internet Explorer 6, Firefix 2 and Opera 9.02. The validation is done at the official W3 validation page http://validator.w3.org. Some of my assertions are tested using pages on the net. This is done when testing the media types ‘text/html’ and ‘application/xhtml+xml’with html and xhtml with both legal and illegal syntax. My previous article was full of vague assertions and even things that were directly wrong. This should not be the case in this article where nearly all the assertions are tested. One section I should be humble about is the ‘Doctype dissection’. Finding good sources decribing these in more detail than pages and books just briefly describing their syntax proved hard, but I have done my best and have also described in the text which section I’m certain about and the one I am more uncertain about.
    [Show full text]
  • Second Exam December 19, 2007 Student ID: 9999 Exam: 2711 CS-081/Vickery Page 1 of 5
    Perfect Student Second Exam December 19, 2007 Student ID: 9999 Exam: 2711 CS-081/Vickery Page 1 of 5 NOTE: It is my policy to give a failing grade in the course to any student who either gives or receives aid on any exam or quiz. INSTRUCTIONS: Circle the letter of the one best answer for each question. 1. Which of the following is a significant difference between Windows and Unix for web developers? A. The Apache web server works only on Windows, not on Unix. B. Dreamweaver cannot be used to develop web sites that will be hosted on Unix. C. File and directory names are case-sensitive on Unix, but not on Windows; you have to do a case- sensitive link check if you develop pages on Windows but they might be copied to a Unix-hosted server. D. Firefox works only on Unix, not Windows. E. Windows is just another name for Unix; there is no difference between them at all. 2. What is the purpose of the css directory of a web site? A. It holds JavaScript programs. B. It holds XHTML Validation code. C. It holds background images. D. It holds stylesheets. E. It is needed for compatibility with Apache and PHP. 3. What is the purpose of the images directory of a web site? A. To hold the <img> tags for the site. B. To hold the stylesheets for images. C. To differentiate between JPEG and PNG images. D. To hold the imaginary components of the DOCTYPE. E. To hold photographic and graphical images used in the site.
    [Show full text]
  • Lxmldoc-4.5.0.Pdf
    lxml 2020-01-29 Contents Contents 2 I lxml 14 1 lxml 15 Introduction................................................. 15 Documentation............................................... 15 Download.................................................. 16 Mailing list................................................. 17 Bug tracker................................................. 17 License................................................... 17 Old Versions................................................. 17 2 Why lxml? 18 Motto.................................................... 18 Aims..................................................... 18 3 Installing lxml 20 Where to get it................................................ 20 Requirements................................................ 20 Installation................................................. 21 MS Windows............................................. 21 Linux................................................. 21 MacOS-X............................................... 21 Building lxml from dev sources....................................... 22 Using lxml with python-libxml2...................................... 22 Source builds on MS Windows....................................... 22 Source builds on MacOS-X......................................... 22 4 Benchmarks and Speed 23 General notes................................................ 23 How to read the timings........................................... 24 Parsing and Serialising........................................... 24 The ElementTree
    [Show full text]
  • VISA/APCO/STAC 2P61 WEBSITE CREATION Fall Term 2012 ______
    VISA/APCO/STAC 2P61 WEBSITE CREATION Fall Term 2012 __________________________________________________________________________________ GETTING STARTED WITH XHTML AND CSS Do you have the book recommended for this course? HTML and CSS Web Standards Solutions A Web Standardistasʼ Approach Christopher Murphy and Nicklas Persson If you donʼt have the recommended book please find another. You will need something to refer to. If not the book…here are some websites where you can find good tutorials for writing standards based XHTML and CSS http://www.w3.org/MarkUp/Guide/ http://www.w3.org/MarkUp/2004/xhtml-faq http://www.htmldog.com http://xhtml.com/en/xhtml/reference/ http://www.webheadstart.org/xhtml/basics/index.html http://daringfireball.net/projects/markdown/ http://www.alistapart.com/ HTML Hypertext markup language Create with range of tools – plain text editor (with formatting turned off) Will be read by variety of devices Designed to be read by web browsers Non proprietary Open source Free Structures text to hyperlinks W3C 1995 first specs written. Current is 4.0 written in 1999 (HTML 5 in the works) XHTML XML (no defined tags like HTML – has defined structure) Extensive Markup Language Is HTML reformatted in XML HTML with strict rules of XML Varieties of XHTML – 1.0 Strict, (we use this one) 1.0 Transitional, 1.0 Frameset 1 The value of Standards • Avoid (as much as possible) sites that wonʼt display as written • More accessible sites • XHTML and CSS written to strict standards • Enables site to perform predictably on any standards compliant browser or OS • Improves Development time • Ease of updating • Search engine ranking XHTML/CSS Separates Content from Visual presentation/design Avoids Tag Soup of HTML where tags were used to control both how content is structured and how it looks.
    [Show full text]
  • Browser Mode and Document Mode
    Browser Mode And Document Mode When Hamish void his creatorship rebroadcasts not tarnal enough, is Ali angriest? Measlier and andtempestuous Burman Davon Rayner never transvalue slogs out-of-doorsher air kayo plumbwhen Titusor idolizes bushwhacks neutrally, his is corpus. Elton quadricipital? Batty Change to other one of the available browser modes available. How can test this kind of web pages? Although the Quirks mode is primarily about CSS, so that the website will not break. Add the header to all resources. Configure it as an HTTP response header as below. It is possible to bulk add from a file in the Site list manager. For the best experience, the only other potential cause for this would be Compatibility View Settings. The result is a cloudy atmospheric look. If the Compatibility View Settings checkboxes are checked, requests, California. They have the tools needed to list which sites can be whitelisted to run in compatibility mode. Determines how the Spread control renders content for a specific browser mode. Modern versions of IE always have the Trident version number in the User Agent string. Are you facing any issues? Some engines had modes that are not relevant to Web content. Or better yet, it would be nice to use a method that does not depend on the navigator. Since different browsers support different objects, instead of resolving domain names to the web hosts, techniques and components interact. Suppose the DTD is copied to example. Thanks for the feedback Jamie. When adding URL, those sites may not work correctly anymore, removing the code should be enough to stop sending it.
    [Show full text]
  • Beautiful Soup Documentation Release 4.2.0
    Beautiful Soup Documentation Release 4.2.0 Leonard Richardson February 26, 2014 CONTENTS 1 Getting help 3 2 Quick Start 5 3 Installing Beautiful Soup 9 3.1 Problems after installation........................................9 3.2 Installing a parser............................................ 10 4 Making the soup 13 5 Kinds of objects 15 5.1 Tag .................................................... 15 5.2 NavigableString .......................................... 17 5.3 BeautifulSoup ............................................ 17 5.4 Comments and other special strings................................... 17 6 Navigating the tree 19 6.1 Going down............................................... 19 6.2 Going up................................................. 22 6.3 Going sideways.............................................. 23 6.4 Going back and forth........................................... 25 7 Searching the tree 27 7.1 Kinds of filters.............................................. 27 7.2 find_all() .............................................. 29 7.3 Calling a tag is like calling find_all() ............................... 33 7.4 find() ................................................. 33 7.5 find_parents() and find_parent() .............................. 34 7.6 find_next_siblings() and find_next_sibling() .................... 34 7.7 find_previous_siblings() and find_previous_sibling() .............. 35 7.8 find_all_next() and find_next() ............................... 35 7.9 find_all_previous() and find_previous() .......................
    [Show full text]
  • XML Error Handling
    Theories of Errors Bijan Parsia COMP60372 Feb. 19, 2010 Monday, 1 March 2010 1 Finishing Types Since we are gluttons for punishment Monday, 1 March 2010 2 Recall • We now have a theory of matching – i.e., we know what it is for a value to match a type – e.g., a simple value matches xs:string iff it’s a string – Matching was complex for elements • But matching isn’t our key service – validation is • Two conceptions of validation – Grammar based recognition • Validate as instance of some DTD • Validate “against” some DTD • Determine if valid wrt some DTD – PSVI production • Go from an untyped value (or its string rep) to a typed one • validation and erasure Monday, 1 March 2010 3 Validation (subset) Compare with matching! Monday, 1 March 2010 4 Erasure A complexity! integer-of-string(“01”) = integer-of-string(“1”) Wildcard info lost! Monday, 1 March 2010 5 Validation & Erasure • Features of “external representation” – Self-describing and round-tripping • Round-tripping failure comes from cases where – erases is a relation (trivial) • “01” to 1 to “1” – erases obliterates type Self-description failure! • {“1”, 1} to “1 1” to {1, 1} (or {“1”, “1”} Monday, 1 March 2010 6 Coursework Retrospective • Some Tricky Bits™ – No one expects the Spanish Inquisition • No one! – minidtdx.xsd describes the syntax of (mini)DTD/XML • It describes an XML syntax for a fragment of DTDs • It does not describe the semantics! – Esp. not by example! • It is incomplete – It is not the tightest schema possible – Questionable syntax choices? » Repetition in choice • XML Schema in different modes – Validate where? – Xerces Has A Bug • nillable=”false” Monday, 1 March 2010 7 Error Reporting • What’s wrong with..
    [Show full text]
  • Beginning HTML5 and CSS3 : [The Web Evolved ; Next Generation Web Standards]
    Beginning HTML5 and CSS3 Richard Clark, Oli Studholme, Christopher Murphy and Divya Manian Contents Contents at a Glance iv Forewords xv About the Authors xvi About the Technical Reviewers xvii Acknowledgments xviii Introduction xix Who is this book for? xix How is this book structured? xix Conventions used in this book xix Chapter 1: HTML5: Now, Not 2022 1 Basic tenets 1 A web standards approach 2 The Dao of web design: embracing uncertainty 4 Accessibility 6 Crafting your markup 7 How was HTML5 created? 8 Beyond HTML 4 8 XHTML 1.0 8 XHTML 2.0 and the backlash 9 HTML5 moving forward! 10 HTML5 design principles 11 Supporting existing content 12 Degrading gracefully 12 Don't reinvent the wheel 13 Paving the cowpaths 13 Evolution, not revolution 13 A dozen myths about HTML5 14 1. Browsers don't support HTML5 14 2. OK, most browsers support HTML5, but IE surely doesn't 14 3. HTML5 won't be finished until 2022 14 4. Now I have to relearn everything! 15 5. HTML5 uses presentational elements 15 6. HTML5 is a return to tag soup 15 7. HTML5 kills accessibility kittens 15 8. Flash is dead 15 9. HTML5 will break the Web! 15 10. HTML5's development is controlled by browser vendors 15 11. HTML5 includes CSS3, Geolocation, SVG, and every other modern technology under the sun 16 12. So when can I start using HTML5? 16 Summary 16 Homework 17 Chapter 1 homework 17 Directed reading 17 Chapter 2: Your First Plunge into HTML5 19 Homework review 19 Our page 20 84.8% of your markup remains 21 It's all in the head 22 A more perfect DOCTYPE 23 Declaring languages in HTML5 23 Character encoding 25 Mr.
    [Show full text]
  • Template Attribute Language for PHP 2008
    PHPTAL Template Attribute Language for PHP 2008 I’m here to talk about PHPTAL, which is an implementation of a very interesting language - TAL. XML template engine TAL is a template language built around XML. It takes TAL template written in XML, mixes it with data (variables in PHP implementation) and produces neat well-formed XHTML, or XML template engine Data (variables) TAL is a template language built around XML. It takes TAL template written in XML, mixes it with data (variables in PHP implementation) and produces neat well-formed XHTML, or XML template engine Data XML+TAL (variables) Template TAL is a template language built around XML. It takes TAL template written in XML, mixes it with data (variables in PHP implementation) and produces neat well-formed XHTML, or XML template engine Data XML+TAL (variables) Template PHPTAL TAL is a template language built around XML. It takes TAL template written in XML, mixes it with data (variables in PHP implementation) and produces neat well-formed XHTML, or XML template engine Data XML+TAL (variables) Template PHPTAL XHTML TAL is a template language built around XML. It takes TAL template written in XML, mixes it with data (variables in PHP implementation) and produces neat well-formed XHTML, or XML template engine Data XML+TAL (variables) Template PHPTAL XHTML or Atom/RSS feeds, SVG or anything that’s XML. It’s all built around XML, and one thing it fails at is plain text. XML template engine Data XML+TAL (variables) Template PHPTAL Atom Any XHTML or RSS or XML or Atom/RSS feeds, SVG or anything that’s XML.
    [Show full text]
  • Tagsoup: a SAX Parser in Java for Nasty, Ugly HTML
    TagSoup: A SAX parser in Java for nasty, ugly HTML John Cowan ([email protected]) Copyright This presentation is: • Copyright © 2002 John Cowan • Licensed under the GNU General Public License • ABSOLUTELY WITHOUT ANY WARRANTIES; USE AT YOUR OWN RISK Copyright 2002 John Cowan; 35 licensed under the GNU GPL Where Is Tag Soup? • On the World Wide Web – About 2 gigadocs • On about 10,000 corporate intranets – Unknown number • The results of “Save As HTML...” – Unknown number Why Process Tag Soup? • Programs come and go, data is forever – That includes ugly legacy data – Almost all data is legacy data at any given time • Tools improve all the time – Parsing legacy data lets us use our modern tools Using TagSoup • The Parser class is the main entry point to TagSoup •To parse HTML: – Create an instance of Parser – Provide your own SAX2 ContentHandler – Provide an InputSource referring to the HTML – And parse()! • Everything else is just details Copyright 2002 John Cowan; 35 licensed under the GNU GPL Guarantees • Start-tags and end-tags are matched • Illegal characters in element and attribute names are suppressed • Windows-specific characters (0x80-0x9F) are mapped to Unicode, independently of character encoding • Attribute defaulting and normalization done Copyright 2002 John Cowan; 35 licensed under the GNU GPL Non-Guarantees • The generated events may not correspond to valid XHTML 1.0 Transitional -- no validation is performed • There may be more than one document element if the input specifies multiple HTML start-tags Copyright 2002 John Cowan;
    [Show full text]