The project is for exercise task 1 and 2 of the course "Web and Multimediaengineering".
Learning goal: Basics client with side technologies: HTML5, CSS3 & JS and PHP
Basic construction for a website as an interface for world_data
- HTML
- CSS (Font Awesome Free, Webfont Roboto)
- Java Script
- PHP
Extract "WME_Aufgabe1_Kim" ZIP-Archive
-
HTML, CSS and JavaScript only
-
Only selected libraries, frameworks, etc. include:
- Font Awesome Free (> = 5.15), https://fontawesome.com/free
- CSS Reset, https://github.com/murtaugh/HTML5 Reset / blob / master / assets / css / reset.css
- Webfont Roboto, https://fonts.google.com/specimen/Roboto
-
File coding / encoding: UTF 8 (and line end Unix LF)
-
Use valid HTML5 and CSS3, validator https://validator.w3.org/ org /)
-
HTML header information: at least title, description, author, keywords
-
HTML5 elements: header, footer, nav
-
Footer: First and last name
-
Note: Don't forget the readme
-
Base font: Roboto, 14px, line spacing: 145%, style: normal Icon font "Font Awesome" for nav and column sorting Hover for standard links: color and underline
-
Header with logo and 7 menu items / links
- Color gradient in the header
- "Clickable" logo with hover effect to colorless / gray
- Unordered List (ul) for menu items
- "Font Awesome" icon for menu items
- Hover of menu items: Short animation for changing the background color in the header
-
Data display table
- Use thead and tbody elements
- Min. the following columns: ID and Country, as well as five attributes
- Min. 25 countries (ID and Country) with any data (random, CSV, ...)
- "Hide" functionality for five attribute columns
- Sorting of the table (ascending and descending, without framework / plugin) according to country
- "Font Awesome" icons in the Country column
- Changing background color of the lines (e.g. # e0e0e0 for even lines)
-
Responsive design (e.g. "mobile first" approach)
- three explicit, meaningful threshold values:
- <768 phones
- > = 768 and <1200 tablets
- > = 1200 desktops: fixed container width (page wrapper) 1170px, centered left right
- three explicit, meaningful threshold values:
-
Responsive design: based on the above Threshold values Adjustment of the number of columns for text boxes above the table (1/2/3 columns)
-
Responsive design for header / navigation:
- Combine / collapse menu items
- Server-side parsing of a CSV file
- Server-side creation of an XML file
- Transformation from XML to HTML (XSLT processing)
The original web "world_data license is from the course "Web und Multimedia Engineering"
Taeeun Kim: taeeun.kim@mailbox.tu-dresden.de
Project Link: https://github.com/Taeeun-Kim/World_Data_Website/