An information website for Blender software. It gives a quality overview of the open source software. Users can learn how to use Blender, see example uses and get involved in developing the software. They can also download the software.
Hosted on GitHub Pages Repository on GitHub
The project is shared for use with the GNU General Public License v3
This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
Expected users of the website include 3D artists, educators, software developers and students of all kinds. They come to the website with questions in need of answering.
- A student user wants to learn more about the blender software
- A 3D artist user wants to download the latest version of blender
- A technology enthusiast user wants a prerelease version of the software
- A law student user wants to learn about the open software licence structure
- An education professional user wants learn about the research process of blender
- A 3D artist user wants to learn the software
- A 3D artist user wants to improve their skills
- An education professional user wants to share learning material with their students
- A developer user wants to become involved in the developing of blender software
- Colour scheme made taken from blender logo colors
- blender-orange:
#EA7600 - blender-blue:
#0E548B
- blender-orange:
- Custom designed logo using base shapes of the blender logo
- Profile style image box for the About page gives a personality to the software
- roboto font used throughout the website
- font-family: 'Roboto', 'helvetica' sans-serif;
Features planned, implemented and outlined for later development
- Documentation - ReadMe File & Mockups
- Bootstrap - HTML, CSS Framework
- Grid System - Columns and Rows
- Cards
- Icons
- Responsive design - Mobile First
- UX elements
- User Flow
- Animations
- Transitions
- Smooth Scrolling
- Accesibility
- Large Landing Page - Full screen landing image
- Semantic HTML - nav, article, etc
- Call to Action - Download Button
- Alert - Open Movie Call Out
- Social Buttons - Twitter, Discord, Linkedin
- Feedback Form
- Colour Scheme
- Custom Logo
- Favicon
- Testing
- Git - Version Control System
- GitHub - Remote Repository
- Deployed - Hosted on Github Pages
- Documentation - ReadMe File & Mockups
- Bootstrap - HTML, CSS Framework
- Grid System - Columns and Rows
- Cards
- Icons
- Responsive design - Mobile First
- UX elements
- User Flow
- Transitions
- Smooth Scrolling
- Accesibility
- Large Landing Page - Full screen landing image
- Semantic HTML - nav, article, etc
- Call to Action - Download Button
- Alert - Open Movie Call Out
- Social Buttons - Twitter, Facebook, Slack, YouTube
- Colour Scheme
- Custom Logo
- Favicon
- Git - Version Control System
- GitHub - Remote Repository
- Deployed - Hosted on Github Pages
These features may be added at a later time.
- Add Blender organisation description to About page
- Add Blender organisational chart to About page
- Video backgrounds
- Full page image background
- Resizible sections
- Auto-update software version downloads
- Animations
- Feedback Form
- Live feed
- HTML
- HTML for strucutre
- CSS
- CSS for Styling
- Google Chrome
- Used for browser and dev tools
- Mozilla Firefox
- Used for browser and dev tools
- Figma
- Development made use of figma for creating mockups.
- Inkscape
- Custom logo created using Inkscape.
- Google
- Google was used for research.
- Bootstrap
- HTML and CSS Framework from Bootstrap
- JQuery used by Bootstrap components
- JavaScript used by Bootstrap components
- Font Awesome
- Icons used are sourced from Font Awesome
- Cloud9
- This project was built using the Cloud9 IDE
- Git
- Git used for Version Control
- GitHub
- Repository hosted on GitHub
- Github Pages
- Website hosted on Github Pages
- Colour Scheme Designer
- Colour scheme developed using Colour Scheme Designer
- Google PageSpeed Insight
- Used to test the websites performance efficiency
- InfoByIp Resolution Test
- Used to test the websites resolution testing
- Nu HTML checker
- Used to test the website for errors
The site was tested through a number of means.
The user stories created during the design phase were inacted:
- A student user wants to learn more about the blender software
- From the Home page through the others the user learns about the software
- A 3D artist user wants to download the latest version of blender
- On the Home page the user clicks the main download button
- The user clicks ok in the dialog box
- The file is downloaded
- A technology enthusiast user wants a prerelease version of the software
- On the Home page the user clicks the 2.80 download button
- The user clicks ok in the dialog box
- The file is downloaded
- A law student user wants to learn about the open software licence structure
- On the About page the user reads the allowances provided by the GNU General Public License
An education professional user wants learn about the research process of blender- This task is outside the purview of the completed site
- A section could be added at a later date to include this information
- A 3D artist user wants to learn the software
- The software is downloaded from an available link
- From the Learn page the user finds the Blender Cloud link
- A 3D artist user wants to improve their skills
- From the Learn page the user finds lessons on using the software
- An education professional user wants to share learning material with their students
- From the In Use page the user finds links to complete projects to share with students
- From the Learn page the user finds links to dedicated study websites
- A developer user wants to become involved in the developing of blender software
- From the Help Out page the user learns about the process of developing for Blender
- From the Help Out page they connect to the Blender developer hub
Using W3's Nu HTML Checker the website was checked for structure and syntax validation.
Issues returned were of the following type:
- Warning: The document is not mappable to XML 1.0 due to two consecutive hyphens in a comment
- These were a straightforward fix, changing hyphens for asterisks.
- Error: Bad value opens dropdown on mobile screens for attribute role on element button.
- This was solved by removing unneccessary roles and adding correct roles where neccessary.
Solving the remaining errors and warnings is outside of the current scope of the project
The websites CSS was tested with W3's Jigsaw CSS Validation Service. Many Errors and warnings were returned. These originate at the Bootstrap CSS files. Fixing these issues is outside the scope of the project.
Using Google's PageSpeed Insights the website was tested for network performance. The results were:
Suggestions provided to improve mobile performance include:
- Serve images in next-gen formats
- Eliminate render-blocking resources
The website was viewed at various resolutions using InfoByIp Resolution Test. The website looks well at high and low resolutions.
- Home screen - large image fit changes by screen
- On mobile the browser bar pushes down the webpage.
- Bottom of the page is off screen
- This Google Developers page describes solutions to this issue
- These solutions are either hacky or outside of the current scope of the project
- They may be revisited at a later date
- Irregularly occuring image error on firefox.
- [Image corrupt or truncated.]
- Does not appear on every refresh.
- This StackOverflow link refers to JQuery as the source of the issue
- Bootstrap jquey links added to the bottom of the pages are the likely culprit
- Further investigation required
- There is what looks like a single pixel gap to the right of the page
- It can be detected by increasing the page zoom and looking at the footer
- It appears this gap is found on many websites including blender.org and getbootstrap.com
- If it is a bug at all it is outside the scope to the project to solve it
- Raised a question on StackOverflow regarding this.
- test-file.txt not downloading after dialog box
- The file was not stored in assets folder so that addresses were incorrect
- Moved test-file.txt to the assets folder
- Issue resolved
- Cannot move navbar items to the right
- navbar div had a mr-auto class holding it in place
- Changed it to ml-auto
- Issue resolved
The project is hosted on GitHub Pages
The process involved:
- Host a git repository on GitHub. Explained here.
- root folder contains README.md and index.html files
- On GitHub repository settings page move to GitHub Pages section
- Change source to master branch. (Or any desired branch)
- Provided link will be your projects home (index) page.
To deploy your own version of the website:
- Have git installed
- Visit the repository
- Click 'Clone or download' and copy the code for http
- Open your chosen IDE (Cloud9, VS Code)
- Open a terminal in your root directory
- Type 'git clone ' followed by the code taken from github repository
git clone https://github.com/Pattern-Projects/blender-ucd-project.git
- When this completes you have your own version of the website
- Feel free to make any changes to it
- The website can be run by opening one of the HTML files within a web browser
- Visit the link provided
- Your website with any made changes will appear
- Saved changes to the website will appear here after refreshing the page
The benefits of hosting your website on GitHub pages is that any pushed changes to your project will automatically update the website. Development branches can be created and merged to the master when complete.
It may take a moment for changes to appear on the hosted website.
During development the site is hosted using cloud9's local server feature. It runs in the browser.
The text on the website has been copied from:
The images for the website are taken from:
- blender.org
- Manuel Peter
- Matuesz Wielgus
- Guilherme Henrique
- Lukas Walzer
- Rico Cilliers
- Lester Banks
- Grant Abbitt
- Blender Nation
- LinkedIn Learning
- Udemy
- User Elbrujodelatribu - Stack Exchange
Thank you to the following for inspiration, motivation and the direction I needed:
-
Andrew Price
-
Grant Abbitt
-
Ton Roosendaal
-
Blender Institute
-
Seun Owonikoko @seun_mentor
-
Anna Greaves @Anna_lead
-
Simen Daehlin @Eventyret_mentor
-
Joke Heyndels @JoWings
-
Code Institute