Name Ella Swain Assessment Number. East St Cafe. Project Name ORGANISING AND PLANNING

Transcription

1 This template is for recording a journal of your development process. It provides evidence of how skilfully and efficiently you implemented your plan. You can copy and paste the entire contents of this page into a new Google Doc. Here is an example of a completed Journal of Evidence. Name Ella Swain Assessment Number AS91635 Project Name East St Cafe ORGANISING AND PLANNING What I plan to do Why will I do it that way What checks will I use Screenshots or noted evidence of the checks to ensure specifications are met Teacher Comment - When I first started my website, I wasn t happy at all with the layout. I had something much more different in mind, and it didn t turn out how I thought it would. By having this visual image, I saw the header simply wasn t working, the padding and margins were off with the container, and everything looked too busy and chaotic. - I started with an image that would have worked as a horizontal header, with a gradient background on a city skyline. I thought this went with the theme of the restaurant, only to figure out it didn t look clean and sophisticated.

2 - So, I took what went wrong with the previous banner, and tried to make a completely new one that would work. I found that the horizontal banner wasn t aesthetically pleasing as it had to either stretch unnaturally across the page or have the text extra small for it to look proportionate, so I tried a different shape - a circle. I really enjoyed this header look, and decided to add separate white lines that went with the text and through the circle itself to create a cutout effect. - I also become slightly obsessed with the detail of my background. I played around with several versions of the same image, with smaller/larger circles, of different transparencies, colors, and borders.

3 - Once I implemented my header into my website (which I had fixed the container of, using CSS to change the padding, width and borders), I saw that it still looked too random. I played around the the background options, and decided to have it fill the container instead of the entire website s background. To still tie in some more color, I added some colorful outlines to the banner, so the top of the website, the first part that is seen, isn t too black and white/plain. - I did this by adding background-image: url(" kground.png "); to the container s CSS.

4 - I wanted to add a rollover effect to my header, as I thought it would add something more to the website, and stop it from being too blank. I also remembered that when we were meeting with Tejas and Vicky, they emphasized that some animation would be appreciated (I later added the lamp effect, hover links and to the top button to add to this). So I created an image of the header which would be seen when rolled over onto, with cool outlines and silhouettes and animals and various decorations, to add to the essence of East street. I replaced the simple header code I had with a code which ruled onmouseover and onmouseout effects for this. - I decided to add a google maps into one of the wells that I had created, so I copied the appropriate html embed link into the well <center><iframe id="googlemap" src=" ed?pb=!1m18!1m12!1m3!1d !2d !3d !2m3!1f0!2f0!3f0!3m2!1i102 4!2i768!4f13.1!3m3!1m2!1s0x6d3bed057d bda373%3a0x789e5ffadbd22aa7!2seast+ St+Vegetarian+Cafe+Bar!5e0!3m2!1sen!2s nz!4v " frameborder="0" style="border:0" allowfullscreen></iframe></div></center

5 > to do this. - I saw that the map wasn t quite lining up how I wanted it to, even though it was slightly better once I added the <center> tag. I managed to fix this quite easily by adding an id to it, so I could edit it in CSS. - I created my navbar by giving it a header navbar class, and adding the appropriate buttons & links that I would need. I also made sure that it was collapsible, so I added the appropriate div class. - I changed the names of the links according to the links I had on my site, making sure they all linked up to the correct headers and containers. It also allows each link to be highlighted in the navbar when the user has scrolled onto the relevant container, as the same tag was added in

6 these containers. - I decided that I wanted to create some more wow affects, so I looked into creating some hover effects. I implemented a hover effect html code, which I then proceeded to change to my own colors and shadow intensity, along with the length of transition between hover on/off. - To add to the design, I added a CSS code for all the headers (h2 s) of my containers. I loaded the script for the text I wanted, then added it to the font-family in CSS. I added more effects like the size, color, and underlining it to make it more legible. - As I decided I wanted to add an accordion effect in my About Us container (Folds in/out when you click on the header), I wanted to further design this. Thus I did so, by altering it s appearance in CSS. - When I tested out the responsiveness of my website, I was slightly disappointed. My images (menu images) were all responsive as I added a class= img-responsive to them, as were my containers. However, the padding didn t become responsive

7 proportionately, so when the browser was minimized, the padding around the container in proportion to the background didn t work. So I added a width: calc(100%-250px) which allowed this correlation when the browser was minimized and maximised. - This is a simple fix, but for my Contact section of the website, the submit button was too close to the bottom of the container. To fix this quickly, I added an id to the button so I could alter it in CSS, which I did - with a margin to the bottom. - To add to my wow effects, I found a code which I was really excited about, and which I thought completely worked with the essence of East St Cafe. It s a page which loads when first visiting the page (also works when refreshed), which shows a dark cover over the original website with a street light on the side, which when clicked, illuminates the page to the original website. It also stays on the page, which I really liked because it added something to the somewhat blankness of the header. - I edited the comment to relate the East Street.

8 - The button that is featured when the user scrolls down, and brings the user back to the top of the page when clicked on, was a simple script that I embedded for extra fluidity.

9 - I had the accordion effect for my About Us page, but I wanted the quote panel to be closed when loaded, so that users have to click on the header to open it. The original code was <div id="collapse-2" class="panel-collapse collapse in"> so I deleted the in to make it inactive upon refreshing. The new code read <div id="collapse-2" class="panel-collapse collapse">

10 - I wanted to alter the CSS of the About section, so I added id tags for each section of the accordion feature (the title of body of the about and the open/me quote, and added background colors, text edits, and made them have slightly rounded bottom corners - suitable for all browsers.

11 - I created a separate file for my CSS, and then linked it into my HTML file using the following <link> tag. - I also removed the repeated javascript in the html, and moved all javascript scripts into the header. - To limit HTML coding used, I was able to compress the two lines I used for the two fonts I used, into one. I decided to remove the LAMP effect. This was because it added unnecessary bugs to my code, despite it showing up successfully on the page. As it came from a somewhat unknown source, I deemed it unsafe to use, as I didn t know exactly what was going into it.