ade-web

[ade-web]

Planning and researching in website development

Give me six hours to chop down a tree and I will spend the first four sharpening the axe - Abraham Lincoln (Braining quote, n.d). Successful website development requires strategy, planning, build and promotion. More time is required for researching and planning stage in website development compared other stages

(https://slideplayer.com/slide/5756493/) Panning stage - begins with an idea, define goals, audience and resources. Research similar flaws and positives - How long to load, responsiveness, etc. Perform site map or architecture - How all the pages link together Perform initial aesthetic thoughts on typography, colour, Layout, typography Perform wireframe - sketch of user interface static page Make list of content  Build the site  Evaluate the site if it works on major browsers

[ade-web]

Wordpress

Wordpress is a content management system (CMS) useful in creating modern dynamic website.  Primary content are stored as posts and include  

 Posts: Articles that appear in the blog 

Pages: Free-form website pages Media

 Images, videos, documents, etc.    

Wordpress is downloaded from www.wordpress.org, uploaded unto the server and configured. Themes, child themes and plugins installed and customized. Before any changes can be made, user must log in through the login page.

Below are pictures of the first Webpage I build with Wordpress

Part of the method I used.

“Basic theme” template was downloaded from www.wordpress.org and transferred unto knuth server with filezilla. Then, “basic child theme” was created with following css. /* Theme Name: Basic Child Theme URL: http://yourdomain.com Description: My first child theme, I'm so proud. Theme Author: Adetunji Adesemowo Author URL: http://yourdomain.com Template: basic Version: 1.0.0 Text Domain: basic-child */ @import url("../basic/style.css"); /*******CUSTOMISATION STARTS HERE*******/

Using the “pages” > “Add new” menu, three pages namely “home”, “blog” and “contact” were created and populated with contents. The “blog” page contains all the posts that were created and were put in categories. Using “Settings” > “Reading” menu, “A static page” was created and the homepage was set to the “Home” page and the post was set to the “Blog” page. The following customisations was done on the basic child theme. ➢ /*Change background color to grey*/ Body { background:#f6f6f6; } ➢ /*Change h1 in post.page class to hide theme h1 */ .post.page h1 { display: none; } ➢ /*Reduce white space under the header, targeting the .wp-block-column class */ .wp-block-column { padding:-10px !important; margin-top:-10px !important;

[ade-web]

10 posts!

[ade-web]

Flexbox Continued

As noted earlier, the flexbox is a better alternative to float in layout style.

Below is a note from Gemma Deery from Griffith College Dublin.

[ade-web]

Flexbox

Float layout common problem is that the floats’ container doesn't want to stretch up to accommodate floats. For example, if you want to add a border around multiple float containers. This makes flexbox a better alternative to float as it is easier to use and create complex layouts.

Below is a note from Gemma Deery from Griffith College Dublin.

FOR EXAMPLE

Reference: Gemma Deery

[ade-web]

Float continuation from https://css-tricks.com/almanac/properties/f/float/

[ade-web]

Interesting article below from https://css-tricks.com/almanac/properties/f/float/

[ade-web]

CSS

CSS

CSS stands for cascading styling sheet which can be used to style HTML codes.  Basically, we can use it to control Text (style, colour, line-height, etc.), Colour (background, borders etc.), Size (text, columns etc.) and Position (of text, of images, of divisions)

While there are many ways to link the css file to the html codes, the external method is preferable. The syntax uses the i<link> element. For example, to link a CSS file called "style.css" which is contained in the css, we use on the head tag of the html

  <link rel="stylesheet" href="css/style.css">

A CSS rule have two main parts, a selector and one or more declarations:

https://www.tutorialrepublic.com/css-tutorial/css-syntax.php A selector uses an element in the html for target. There are many types such as

1. Universal selector, denoted by an asterisk (*), which matches every single element on the page. 2. Element type which matches all instance of the element in the document with the corresponding element type name. 3. Id Selectors, which is defined with a hash sign (#) immediately followed by the id value. 4. The class selectors is defined with a period sign (.) immediately followed by the class value. 5. Descendant use to select an element that is the descendant of another element,

h1 em {color: blue;}

This rule h1 em selector will be applied to only those <em> elements that contained inside the <h1> element and has not effect on other <em> elements. 6. Child selector is to select only those elements that are the direct children of some element. A child selector is made up of two or more selectors separated by a greater than symbol (>).

Reference:

Gemma Deery, Griffith College Dublin

https://www.tutorialrepublic.com/css-tutorial/css-syntax.php

[ade-web]

Typography

One of the important concept in visual communication and website development is typography. Indeed it is part of my course, post graduate diploma in interactive digital media at Griffith college Dublin.

Typography is a way of arranging letters and characters. While a character is just any symbol written on a document, a letter is a character that is part of the English alphabet. This arrangement refers to spacing, line length etc on a page of a document.(Leaning, n.d.)

Typography is ubiquitous. Media is a medium of exchange of information and every form of media contains typography. Print media, mass media and digital media  and others such as billboard are examples where typography are found.

Like myself, many people believe tat typography and fonts are all but same but discovered they are different. What is seen is the typeface while what is used is the font.

Here are four different types of fonts classification. A font can be serif style or sans serif style. San serif means without serif. Serif is the slight projection finishing off a stroke of a letter in certain typefaces. Furthermore, another classification is decorative style or script style. Serif style includes Glyphic Serifs, Clarendon Serifs , Slab Serifs, Transitional Serifs,and Neoclassical & Didone Serifs.(allan, n.d.)

References

allan,  haley. Type Classifications. Fonts.com. Available at: https://www.fonts.com/content/learning/fontology/level-1/type-anatomy/type-classifications (Accessed: 14 November 2020).

Leaning, B. Typography Tutorial for Beginners: Everything You Need to Learn Typography Basics. Available at: https://blog.hubspot.com/marketing/typography-terms-introduction (Accessed: 14 November 2020).

[ade-web]

Photocredit:

https://www.politico.com/news/magazine/2020/03/19/coronavirus-effect-economy-life-society-analysis-covid-135579 https://www.irishtimes.com/news/ireland/irish-news/it-s-like-28-days-later-coronavirus-turns-dublin-into-a-ghost-town-1.4212191 https://www.dublinlive.ie/news/coronavirus-dublin-lockdown-level-four-19046399 https://www.franceireland.ie/news/n/news/covid-19-coronavirus-ireland-latest-updates.html

[ade-web]

Colours

My introduction to colors

For any artwork of design to feel appealing and elegant selection of good colors cannot be overlooked. Colors arguably are believed to affect viewers mood, reaction and appreciation of an object. Artwork of design such as web design, pictures etc require best color combination to communicate for attraction.

Using color design principles and color associations are valuable in finding the best color combination.

Color Wheel: Sir Isaac Newton developed the color wheel in 1666. Colors are categorized into the following:

Primary colors –Colors that cannot be derived from mixing other colors. These are Red, yellow and blue.

Secondary Colors: Colors that can be derived from mixing primary colors. These are Green, orange and purple

Tertiary Colors: Colors formed by mixing a primary and a secondary color. These are Yellow-orange, red-orange, red-purple, blue-purple, blue-green & yellow-green

The arrangement of different colors known as color harmony and how a color relates to others known as color context are methods used in selection of colors.

Types of color harmony: 1. Analogous colors – colors adjacent on the color wheel 2. Complementary colors – Colors opposite on the wheel 3. Colors based on Nature

Color context – This is how a color relates in contrast to others. For example red looks better with black background than any other.

Color Association: Colors are commonly associated with some values as stated below:

White – Purity, clean, honesty Pink –Softness, warmth Red – Activity, excitement, dominance, attention Orange – Energy Yellow- friendliness, happiness, cheerfulness Blue-Trust, efficiency, intelligence, competence, security, relaxation Black – Beauty, sophistication Purple – Quality, Luxury, royalty Brown –ruggedness, nature Green- Nature, Outdoor

#webdesign

#web development

#colour

[ade-web]

Working with links and Images in HTML

A website without links and beautiful images is not just boring but lacks communicating the full story about the topic. Today 31st of October, 2020, my web authoring lecturer, Gemma Deery introduced us to the following:   HTML Directories/Folders Setting up the website file structures using directories also known as folders and the naming conventions of folders which forbids space.

Links How to link objects and html files using the <a> tag. This is usually done with the href attributes. href=“ “  How to use absolute and relative links. With absolute the full URLof the external website is included in the href attribute while relative links depends on the file path relationship to other files. Links to access a file in parent directory requires ../ in the href attribute Target attribute can also be included in the <a> tag to allow browser open links in another window. 

Images  How to link images files such as .png, .jpg, .gif, using the <img> tag which is a void tag. This is usually done with the src attributes, additional attributes such as width attribute and alt attribute can also be included.

HTML entities, Charset attribute and lang attribute In the lab we practiced and observe the importance of lang attribute and charset in rendering of webpages. charset=‘UTF-8′ allows special character to be rendered correctly by browsers while lang=‘eng’ allows browsers render webpages in correct language. Entities always use &; which allows special characters rendered correctly for example © is rendered  ©

[ade-web]

Web Authoring Module

Web authoring is a major module as part of my course at Griffith college in Dublin.  The module is expected to introduce me as a student to the theories and methods behind building modern websites, which includes planning, researching, designing and coding. This is my my second week into the program and I find the course materials and content very interesting. I have started learning HTML (Hypertext Markup Language) which is a markup language comprising of elements/tags for documents to be displayed by the browser. The version of HTML we focus on is HTML5  which is the fifth and latest major version of HTML that is a World Wide Web Consortium (W3C) recommendation. The relationship between W3C and WHATWG working together on HTML and DOM, was learned.  The highlight of the week is  learning elements and closing elements such as headings, paragraph, bold, italics, break, comments,etc Finally created some web pages in the lab with basic structure as below <!DOCTYPE html> <html lang=“en”>       <head>            <meta charset= “UTF-8″>                       <title> </title>       </head>       <body>            <h1>            </h1>            <p>            </p>       </body>  </html>