PROJECT 2. Development of Internet Applications

Transcription

1 PROJECT 2 Development of Internet Applications Description of available elements within specification Specification of basic construction elements of the project is delivered as a project in Visual Studio. This however, does not restrict the use of single files in other development environments. The task is to create a minimum of 3 pages that will be based on defined rules and will contain all the necessary particulars. Ideally, this should be the following pages: 1. Homepage the use of features such as content slider, counter, newsletter subscription, a list of articles, etc. 2. Content page the use of features such as photo galleries, more text content to style, etc. 3. Contact the use of features such as form, maps (API third party), etc. Of course, it is possible to create even more complicated site structure with regard to meaningful content and intent of the presentation. The site has to be responsive and functional in all nowadays commonly used browsers (Firefox, Chrome, IE / Edge). During the creation of content and appearance, use a special font for symbols, which enable you to easily enrich defined content. How to use it can be found: Awesome/examples/ (font is already integrated in index.html template). Within the basic structure definition there is also included JS library jquery. Do not change HTML elements of individual modules. You can change only the content of these modules (for example articles in a list of articles, etc.). Use already defined classes for module styling. Index.html The basic structure of the HTML document.

2 Your elements and code segments can be added anywhere within particular sections. It is not allowed to modify this main structure (remove elements or change them in any way). You can add your own elements if it is needed. The main content will be inside the element DIV with CLASS = main. In addition to styling of individual modules, minimally these elements will be styled: Headings H1 to H6 Links Tables Bullet and number list (custom indent through your own image or icon FontAwesome) Forms (input, textarea, select, checkbox, radio, etc.) Layouts.html This is set of base layout structures. Copy individual layouts to the concrete document (when you need it). There are 4 variants of layouts with a different number of columns. You cannot modify structure of these layouts, but you can nest each layout to each other.

3 For the purposes of the styling CSS classes or IDs can be assigned to each layout. Article-list.html HTML structure for the list of articles (news, etc..). You can modify the content but not the structure. New articles can be added (or removed). Structure for a single article is listed below.

4 Contact-form.html HTML structure for contact form. Custom JavaScript validation will be applied to this form. HTML code for error messages is outlined in the basic HTML structure. Content-slider.html This is an interesting and now widely used feature that allows you to visually and dynamically present content. In this case, the basic template already contains style and script for the basic functionality of the slider (slider is jquery plugin Here you can use the available parameters of the plugin. It is expected to create such a slider where each item will have eg. different background with different content styling. You can add or remove slides like in the case of the Article-list. Below is the basic HTML structure of the single slide. Gallery.html Basic HTML structure of photo gallery. You can add or remove photos. Each photo can have a description. This description must be adequately styled. Integration of jquery plugin called FancyBox is required ( Note: there is class lightbox, that should be used for this plugin.

5 Menu.html Basic HTML structure of the menu. There should be two menus (vertical and horizontal). The HTML structure is the same for both menus. Whether it will be vertical or horizontal depends on CSS styles. It is not required to use both in your web page, but you have to include styles for both variants. You can add or remove menu items, but the HTML structure has to be preserved (and it has to be multi-level menu). Menu will be responsive. It means that it will be easily accessible even on mobile devices. Newsletter.html Basic HTML structure for newsletter subscription. There will be JavaScript validation. Button with icon CUSTOM There is no basic HTML structure for this. The design of this HTML structure is up to you. It is assumed to use the element <a> and the subsequent styling. Use FontAwesome for the icon. There is some inspiration (this is just an example): Countdown CUSTOM There is no basic HTML structure for this. The design of this HTML structure is up to you. This countdown has to display some number that will be increasing (or decreasing) based on configuration. There will be animated transition between values (or some visualization of the change). All styles and JavaScript will be written by the student! No plugin will be used for this. There is some inspiration (this is just an example):