Start of the site or web application development

Transcription

1 Web applications and multimedia technologies Lecture 2 Start of the site or web application development Prof. N.K. Trubochkina Department of computer engineering, HSE 2015 Lecture 02 Start of the site or web application development 1

2 Site with course materials Mobile versions Lecture 02 Start of the site or web application development 2

3 To view the site on a mobile device download Boat Browser wser_free.html and connect the Flash plug-ins Lecture 02 Start of the site or web application development 3

4 Algorithm of the site or web application development Lecture 02 Start of the site or web application development 4

5 You Lecture 02 Start of the site or web application development 5

6 Then Examples of sites or Web applications templates on site Lecture 02 Start of the site or web application development 6

7 Web Templates Lecture 02 Start of the site or web application development 7

8 Template Lecture 02 Start of the site or web application development 8

9 Lecture 02 Start of the site or web application development 9

10 Responsive template Lecture 02 Start of the site or web application development 10

11 Features Lecture 02 Start of the site or web application development 11

12 Sources and development tools Lecture 02 Start of the site or web application development 12

13 Examples of sites or Web applications Lecture 02 Start of the site or web application development 13

14 Web application examples 01 Lecture 02 Start of the site or web application development 14

15 Web application examples 02 Lecture 02 Start of the site or web application development 15

16 WA 03 Lecture 02 Start of the site or web application development 16

17 WA 04 Lecture 02 Start of the site or web application development 17

18 WA 05 Lecture 02 Start of the site or web application development 18

19 WA 06 Lecture 02 Start of the site or web application development 19

20 WA 07 Lecture 02 Start of the site or web application development 20

21 WA 08 MotoCMS Lecture 02 Start of the site or web application development 21

22 WA 09 Lecture 02 Start of the site or web application development 22

23 WA 10 Lecture 02 Start of the site or web application development 23

24 3. Develop a zero pattern (wireframe) page layout and site structure Lecture 02 Start of the site or web application development 24

25 3.1. Wireframe diagram (example) A wireframe diagram shows the structure of a web page, using only outlines for each content type and widget. Lecture 02 Start of the site or web application development 25

26 Parts of the web page Logo The name of the site (may be contained in the logo) Navigation (one or more). There should be opportunity for feedback The search string (static websites can be omitted) Slider (Advertising) (optional) Main content (text, images, audio files, video files, animations, etc.) Widgets, banners (not necessarily) Main navigation and background information in the footer (bottom of the web page) (optional) Copyright (Mandatory parts are marked in red) Lecture 02 Start of the site or web application development 26

27 3.2. Site diagram A site diagram indicates the structure of the site as a whole and how individual pages relate to one another. Lecture 02 Start of the site or web application development 27

28 In simple handmade sites is enough to indicate pairs: Link title (Page) - the name of the page file or code Link title (Page) Номе About company Projects Services Page file or code index.html about.html proj.html s.html mailto:yourname@gmail.com Lecture 02 Start of the site or web application development 28

29 4. Coding. What languages do you need to learn? Hypertext Markup Language (HTML/HTML5) is the language used to create web page documents. There are a few versions of HTML in use today: HTML 4.01 is the most firmly established and the newer, more robust HTML5 is gaining steam and browser support. HTML is not a programming language; it is a markup language. Cascading Style Sheets (CSS/CSS3 ) While HTML is used to describe the content in a web page, it is Cascading Style Sheets (CSS) that describe how that content should look. Lecture 02 Start of the site or web application development 29

30 JavaScript/DOM (Document Object Model) scripting JavaScript is a scripting language that is used to add interactivity and behaviors to web pages, including these (just to name a few): Checking form entries for valid entries Swapping out styles for an element or an entire site Making the browser remember information about the user for the next time she visits Building interface widgets, such as expanding menus Lecture 02 Start of the site or web application development 30

31 Example of widgets <script type="text/javascript"> (function () {if (window.pluso) if (typeof window.pluso.start == "function") return;if (window.ifpluso == undefined) {window.ifpluso = 1;var d = document, s = d.createelement("script"), g = "getelementsbytagname";s.type = "text/javascript"; s.charset = "UTF-8"; s.async = true;s.src = (" == window.location.protocol? "https" : "http") + "://share.pluso.ru/pluso-like.js"; var h = d[g]("body")[0];h.appendchild(s);}})();</script><div class="pluso" data-background="transparent" dataoptions="big,square,line,horizontal,counter,theme=08" dataservices="vkontakte,odnoklassniki,facebook,twitter,google,mo imir"></div> Lecture 02 Start of the site or web application development 31

32 5. Module 2. (For dynamic sites) Server-side programming Some simple websites are collections of static HTML documents and image files, but most commercial sites have more advanced functionality such as: forms handling, dynamically generated pages, shopping carts, content management systems, databases, and so on. These functions are handled by web applications running on the server. There are a number of programming languages and frameworks (listed in parentheses) that are used to create web applications, including: PHP (CakePHP, CodeIngniter, Drupal) Python (Django, TurboGears) Ruby (Ruby on Rails, Sinatra) JavaScript (Node.js, Rhino, SpiderMonkey) Java (Grails, Google Web Toolkit, JavaServer Faces) ASP.Net (DotNetNuke, ASP.Net MVC) Lecture 02 Start of the site or web application development 32

33 Using a CMS A content management system (CMS) is a computer application that allows publishing, editing and modifying site content Lecture 02 Start of the site or web application development 33

34 The best way to learn webapplications development is to write out some pages in HTML by hand Lecture 02 Start of the site or web application development 34

35 Thank you for attention! Lecture 02 Start of the site or web application development 35