code-institute-submissions / website-launch Goto Github PK

Milestone Project - Oasis My site has been built around a 1990s UK rock band, Oasis. They shaped the brit pop culture and influenced an entire generation, having grown up listening to the band I found this project a fantastic opportunity to share their talent with others whilst delivering the project brief. UX My site has been designed and built with a focus on the fans, the people who want to listen to the band and see their superb live performances. The band have an extensive back catalogue and I have included several albums on the site with links to iTunes to enable the user to listen directly. You tube and media sharing sites have a lot of videos available to showcase the bands live performances, I’m really pleased that I have been able to include several live performances on the site, they are energetic and brilliant to watch and really capture the attitude of the band. I completed user stories prior to commencing my project and have included these below: “As a band member I want the site to sell our brand and to promote our image so that we can generate sales and revenue and create a legacy. Having links to our albums and external resource’s where fans can purchase our material really delivers this element”. “As a music fan I want to eb able to listen to the band and understand their back catalogue, awards and band persona to enable me become a more devoted fan, as above, having links to albums and videos should deliver the same”. “As a wedding planner I want to be able to listen to the bands repertoire of songs range to enable me to gain insight knowledge to whether they are suitable for weddings, having an album on there that is acoustic and reading about previous weddings will hep me to better understand this “. In order to assist the completion of my site I used a site called ‘Balsamiq’ to create a mock-up of the site, the mock-up isn’t delivered as originally planned. I wanted the site to have a minimalist looking landing page to draw the user in however a Jumbotron seems to clutter the site, so I decided not to use the element, I have attached a copy of the wireframe within my GitHub depository.

Features At design stage I had a clear idea of what elements I wanted to include in my site, I’m pleased that I have been able to deliver these as follows: Full background image in black and white to replicate the black/white imagery of the band logo. Band logo, this can be clicked from any part of the site to bring the user back to the ‘home page’. Navbar including links to each section of the site, the sections can be clicked on to take the user to the relevant part of the site. Each site section has a fixed back ground full size image that is viewable when clicked from the navbar. The music section has album covers Jpgs, the albums have glyphicon links back to iTunes that open in new windows when clicked on. The album section has three you YouTube videos, the glyphicon links take the user to anew web page opening the YouTube video, so the user can watch the band live. The band section has a brief biography of the two key band members with external links glyphicon links to their individual twitter accounts where the user can follow the individuals on twitter. The gigs section of the site includes a table of previous gig for information purposes and to demonstrate the fan base the band has. There is a contact form at the base of the site where users can register their interest in the band to stay in touch with band news etc. The footer includes glyphicon links to external resources such as iTunes, twitter etc for users to further enhance their abilities to follow the band. I am really pleased with the content that I’ve been able to include into the site however for future development I would like to include a sales section where users can purchase band memorabilia or album sales etc. The gig section is quite limited, and its time permitted I would like to include links to the gigs themselves, so users can watch the band performances live.

Features Left to Implement I would like to include a flip card on the album covers to enable me to list the tracks on the reverse of the album however I found this element very difficult to implement given my limited experience. I would also like to change the back-ground image for the site sections to videos rather than images. As the site expands a search bar would be beneficial. Technologies Used Most of my site has been implemented using Bootstrap and CSS. I have no experience of any other language such a jQuery so wanted to utilise the resources that I’m comfortable in deploying. I found some of the Bootstrap codes a little restrictive and tried to amend the CSS codes to suite the site design, this did create issues for my on smaller devices, so I tried to avoid this where possible. Testing I have tried my upmost to ensure all elements of my site work as intended and to do so I did go through many elements of testing. Navbar – my site sections were not linking back to the href links on my navbar as the source IDs were not included – I updated them accordingly. When my navbar links took the user to the site section the image wasn’t centred in the page, so I had to adjust the margins on the image element. Albums links were checked to ensure they took the user to the correct iTunes section along with opening the page in a new browser window. Video links were checked to ensure they took the user to the correct YouTube pages along with opening the page in a new browser window. The contact form was checked to ensure that the user must include names and email prior to the form being submitted, the email address must also include the @ symbol to ensure the form can be submitted. The footer links all take the user to the relevant pages by opening new browser window. The main issue i encountered was ensuring my site remained useable on multiple devices. Upon setting the site up I included multiple containers some fluid others not, I found that once I put the site onto smaller devices the format was all wrong, I went back through the containers and removed the once I felt I didnt need them. I also has issues with the setting out the site, aligning the glyphicns etc caused a few issues, I utilised the Chrome inspector to adjust the padding and margins in these areas to ensure ehte site looked uniform. Deployment I did initially set my repository up in GitHub and pushed the site at inception and once throughout the development, in hindsight I feel that I didn’t push the site to GitHub as much as I would have liked through its development as I was so engrossed inti overall development I have utilised GitHub Pages to host my site after downloading the software Credits Content Biography’s were taken from Wikipedia All other content is my own words and fictional Media All photos for the site were taken from Google images, videos hosted on YouTube Acknowledgements From my peers, friends and personal experience of attending the concerts and growing up listening the band