Practicing with jQuery

In a workshop today we began looking at jQuery.

            “jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility”

We used the function .toggleClass  which is defined as: “Add or remove one or more classes from each element in the set of matched elements, depending on either the class’s presence or the value of the state argument.”

Once a box was clicked it changes colour, then if it is clicked again it returns to the original colour. The css, javascript and html is shown below:

Screen Shot 2015-03-18 at 10.33.25 Screen Shot 2015-03-18 at 10.33.29 Screen Shot 2015-03-18 at 10.33.34Below is a screen recording of the result from the workshop:

Learning about jQuery will help with making our website more interactive and will also help for the future Collaborative project we have recently been set.

jQuery.com, 2015. Available from: https://jquery.com/ [Accessed: 19.03.2015]

Advertisements

Using Bootstrap for the ‘About Us’ php page

We have been set the task to create a ‘Meet the team’ or ‘About Us’ page that includes an description of each group member and myself. Along with an explanation of the website we have agreed as a group to make. In a workshop with our workshop teacher Kyle, he suggested to use a website called Bootstrap.

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Bootstrap essentially provides you with a template to build a functioning website, by downloading the source code (Source Less, JavaScript, and font files, along with our docs), download bootstrap (Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included).

Screen Shot 2015-03-23 at 01.41.15 Screen Shot 2015-03-23 at 02.19.28

For the ‘About Us’ webpage, we decided to use the ‘jumbotron’ template as it has a clear navigation and a user friendly approach. As seen below:

Screen Shot 2015-03-23 at 02.24.24

From here, I placed all the downloaded bootstrap files into the local host/public/includes/css folder then opened it in brackets ( A modern, open source text editor). I then experimented and edited the code to suit the requirements of our webpage. I haven’t targeted my focus directly to the CSS and design of the webpage, as my other group members are more keen to design the website.

For the ‘About Us’ webpage I included 3 images using an id as they all include the same design requirements and made a few adjustments to the css of the page so it wasn’t an exact replica of the bootstrap template. Below is the result:

Screen Shot 2015-04-14 at 18.17.05

References:

Getbootsrap.com, 2015. Getting started. Available from: http://getbootstrap.com/getting-started/#examples [Accessed:27/02/2015]

Getbootsrap.com, 2015. Bootstrap. Available from: http://getbootstrap.com/ [Accessed:27/02/2015]

HTML & CSS – Positioning

Screen Shot 2015-03-03 at 22.27.43

In the lecture with Phil we learnt how a user experience is built out of the following layers:

Surface – this describes finished visual design aspects

Skeleton – this describes the screen layout and functional compartments in the screen

Structure – this defines navigation from place to place in the user interface

Scope – the places in the user interface are built to support user task-centric scope

Strategy – business goals drive user constituencies and contexts supported to form strategy
Screen Shot 2015-03-03 at 16.13.49

In our last lecture and workshop on HTML & CSS we began learning about positioning, and were set the task of producing the web browser above. Below is my outcome of the task and a screenshot of the CSS used:

Screen Shot 2015-03-03 at 16.51.25 Screen Shot 2015-03-03 at 16.51.35 Screen Shot 2015-03-03 at 17.40.24

HTML & CSS – Typical Web Browser

Screen Shot 2015-03-03 at 18.47.52

During a lecture with Phil, we were shown the basic typical web page layout and were asked to create something similar. In the workshop I did struggle but towards the end I produced the result for the task. Below is my result and the code:

Screen Shot 2015-03-03 at 19.16.05Screen Shot 2015-03-03 at 19.15.58

At the end of the workshop we were asked to create the below image using HTML & CSS for homework and to then post it onto our blog, so that will be my next HTML & CSS post.

Screen Shot 2015-03-03 at 16.13.49

HTML & CSS Lecture Practice

Screen Shot 2015-03-03 at 18.01.44

Above is a lecture slide describing how padding is used in CSS and that it is the space between the border and the text. Below are my own examples of a element without padding and then an element with padding.Screen Shot 2015-03-03 at 18.21.42 Screen Shot 2015-03-03 at 18.22.07 Screen Shot 2015-03-03 at 18.01.52

Above is a lecture slide describing how margins are used in CSS and that it is the space outside the text/content. Below are my own examples of a element without a margin and then an element with a margin.

Screen Shot 2015-03-03 at 18.26.15This practice on the open source code editor Brackets has helped me to understand how padding and margin affect the positioning of an element.