WEB501 Website Build

Final Blog

Well my website build has finally come to an end and I’m very happy with the final result, however, there are some aspects of it that I’m a little bit disappointed how they turned out but unfortunately, I just ran out of time.

I had to make quite a few adjustments to the overall layout and design because of my limited experience with bootstrap, Small things like image and video placement.

I’m not happy with how my Navbar came out, it looks good on desktop, but when you shrink it down to device mode there are some issues with sizing and some of the images are not the best quality.

Today I put in all my meta tags, installed google analytics, sorted out my media queries and corrected all the niggling little issues I had with images sizing, Putting in image responsive fixed a lot of the sizing problems.

I have finished now and are looking forward to showing Maegen the end result along with getting it marked 🙂

 

 

WEB501 Website Build

Blogs 7-10

After completing the initial base build of the index page, i once again went to http://www.layoutit.com/ and generated the layout for my gallery, products, and contact pages.

The next step was to start implementing some color, image insertion and text/font insertion.

I made an ID with the background color #c49ad6 (pale purple) that I wanted to use as a background color. After inserting the ID in a lot of the ‘boxes’ and noticing large white gaps in between the elements, it dawned on me that I can just use the color scheme in the container which fixed up the white gaps.

I then remembered in one of our classes that we could insert a background image to use instead of a solid color, so I googled ‘website’ background color and found a great image which I then inserted into my container-fluid bootstrap override in my css instead of a solid color.

1

 

I then looked for two suitable fonts for my website which I found at http://www.1001freefonts.com/. I downloaded a font called great vibes to use for the page-header, slogan, and some headers. I downloaded a font called redressed to use for all paragraphs.

3

4PNG

5

I then started the process of inserting images. I had some difficulty with the images as my sister-in-law didn’t supply me with many good photos, There were some really good ones taken from professional photographers but many were of bad quality. Luckily Maegen had done the makeup for the bride and bridesmaids at my wedding so I used some of them as well as the professional ones that she supplied. I am not entirely happy with the images on the website at this stage as some of them do not look great due to resizing issues, I will come back to them at a later stage.

Inserting content into the index page, I googled beautiful wedding photos to find a great one for the page header, I found a good one, inserted it, and then put a banner text ID in with the correct attributes I wanted such as the great vibes font.

I then inserted three images into the first columns located under the slogan which I had inserted under the page header. Under those three images, I then inserted my text with the <p> tags and wrote my text that had been written with SEO in mind.

The gallery page was very quick and simple, but like i said, I wasn’t entirely happy with the image quality and will come back to it.

I created an image ID for the gallery which i used and also overrode some attributes of the carousel.

7

6

The final part of the gallery page was inserting a YouTube video on makeup tips and tricks, very simple and it worked a treat. I had to of course, adjust some size settings which went to plan.

8

The next step was to insert all the content into the Products page. I’m really happy with how the page come out, it looks fantastic.

The first step of building the products page was to find png file format images of all the logos of makeup brands Dramateyez Make Up uses, This was a difficult process as it took lots of downloading different images to find transparent backgrounds, I got there in the end. I also inserted links into the images to their respective websites, Revlon, Maybelline etc. To finish off the product page, I inserted a couple images of Maegen applying makeup to clients.

The last page  I built was the contact page, which went according to plan, however, I need to work out how to position the foxy form centered.

9

I am very happy with how the website is looking, however, I have a few issues which need fixing up.

Some of the issues I am having are with the Navbar, Image positioning, Image quality and Media queries. I will have these sorted out for the final hand in.

 

 

 

 

 

 

 

 

Digital Technology and Our Kids

kids-tech

Two New Lectures For ITC501

Well, the first semester is coming to an end and we have been given the task of coming up with two lectures we could see put into ITC501.

As a parent, I have both great joys and concerns for me kids with the ever-evolving technologies in the world, in particular, digital technology.

I am very excited  what the digital technology in the future may offer our children, it’s already clear as daylight now that kids all around the world are benefiting from digital technology and it really makes you wonder what’s going to happen. Schools are already encouraging children to use devices such as Ipads and with how fast digital evolution is advancing, who knows what’s coming.

Now, as i stated in the introduction to this blog, I am also very concerned with how much digital technology is a major part of not just our lives, but children’s. I’ve seen it many times where a parent is out and about with their children and the child is playing on an Ipad or a Cellphone. I know that these devices offer us parents a ‘break’ from our kids at times but in my opinion, digital technology is not the answer. My ex’s child was a good example of this, all he wanted to do and i mean ALL was to play video games on his mother’s cellphone. Beautiful day outside….. didn’t matter, he wanted that phone twenty, four, seven!.

The two lectures I would like to see added to ITC501 would be, first, the positives of digital technology for our children, then second, the negatives of digital technology for our children.

As a parent, I think people, not only parents would benefit from such lectures.

Positive’s of Digital Technology and our Children

There’s no doubt that there are lots of positive effects technology have on children, ranging from better hand-eye coordination to problem-solving skills.

Let’s have a look at some positive factors of technology on children:

Better Hand-eye Coordination

  • Through engaging applications, children develop their hand-eye coordination further. This occurs when children visually follow an object on the screen and actively participate in the activity the application presents.

Improves Language Skills

  • Active screen time help children develop language skills. By reading eBooks or accessing stories online, they learn new words and proper ways to pronounce them.

Promotes School Readiness and Cognitive Development

  • Many developmentally appropriate computer programs increase a child’s readiness to learn Reading and Math.

Higher Capacity for Visual Attention

  • Gaming and learning applications equip children to pay more attention to details in order to complete these activities.

Enhance’s Social Interaction Skills

  • As children develop their language skills, they are able to absorb ideas that equip them with skills necessary in relating with other people. When technology is used appropriately, technology can be used in collaboration with other people.

Increases Motivation to Complete Tasks

  • Many apps and computer activities are created to encourage children to complete a level in order to unlock the next level.

More Dynamic Spatial Skills

  • Games and educational content allow children to develop dynamic spatial skills through interactive screen time. Through technology, they can learn how big a building may be compared to a cat; or how small an ant may be compared to a dog. Such skills will then develop their understanding for the world around them.

Develops Problem Solving Skills

  • Younger children are more interested in the short-term goals of games, which are essential in problem-solving.

This information was retrieved from https://digiparenthood.wordpress.com/2013/08/23/10-benefits-of-exposing-young-children-to-modern-technology/ 16/6/2016

Negatives of Digital Technology and our Children

Like I said in the introduction, I have big concerns about technology and my children, I would be gutted if my son got ‘hooked’ on digital devices or games and did not want to do the things that every father wants to do with his son, such as fishing, camping or hunting.

Here is a look as some well know negatives of technology and children

Health Problems

Increasing use of gadgets like Ipads and cellphones are causing children such health problems like back pain, weak eyesight etc. Due to less physical activities, obesity is common to see in today’s children.

Social Relationship

Children are addicted to gadgets. They don’t have time to sit with their parents and to spend some good time with them. They prefer to connect with their friends and relatives via text messaging, chatting etc., rather than meeting them actually.

 

 

Negative Impact on Writing Skills

Writing is an art which every person must own. Technology has its negative effect on writing skills of children. Standard English is not used in the text messaging, chatting. While writing text messages, no one cares about the spelling, punctuation and grammar. This is resulting in poor writing skills of children.

 

Questions

What’s the relevance to ITC  students?

Whether people admit it or not, children are the future and digital technology is relevant to not just us adults, but our children too.

What would be the key points of learning, or added awareness they would get out of this? 

The key points would be just how much technology affects children, both positive and negative.

What questions would you want students to answer or reflect upon for their blog post?

How do you encourage children to take full advantage of technology without crossing the line risking problems such as health issues and lack of social interaction?

What would you do to help a child that has crossed that line and is showing signs of issues?

What resources would you use to point students towards to help them answer these question?

There are a lot of articles on the internet that discuss both the positives and the negatives of technology and children.

here are some good links to interesting arguments on the positive and negative affects of technology on children.

http://www.emergingedtech.com/2012/06/pros-and-cons-of-digital-devices-in-the-hands-of-young-students/

https://sites.google.com/a/dresden-is.de/parent-internet-training/benefits-of-growing-up-digital

And here’s one last article that says technology  is essential to children’s success according to a  professor:

 

http://phys.org/news/2013-01-technology-essential-children-success-professor.html

Summary

To summarise, I love technology, I love what it can offer and how much it can help or make our life easier. However, I have huge concerns over my children’s wellbeing with the use of technology and will always monitor my kid’s usage of anything digital.

WEB501 Website Build

Blogs 1-6

I’m designing a website for my sister in law Maegen based on her Make-up business.

First step I did was create all my pages i will be building in web expression 4, Index, Gallery, Products and Contact.

Base 1

The next step was going to http://www.layoutit.com/ to design a layout for my index page.

The reason i chose to use bootstrap was for the mobile responsiveness it will give me.

Base 2

As far as content decisions go, I built the layout using an online bootstrap generator for the simple reason of it being super quick and easy to insert content in and also not having to physically build each content box.

I will be using a lot of ID’s when i start to insert content, for example, text, images and videos.

Next step was merging  all the bootstrap content into the folders i had already created and then overriding them in the CSS to accommodate for my layout, i.e Container at 80%, Navbar at 100% in the container.

I’m having a hard time implementing my Navbar override, got the container to represent 80% but still can’t get my head around the Navbar.

Base 3

Base 4

I think i will have to come back to the Navbar at this stage as i need to ask help from a fellow student.

Ok upon further investigation I realised i had a Navbar media query in place.

Base 5

I have just built a custom navbar on the websitehttp://bootstrapdesigntools.com/tools/bootstrap-menu-builder/

http://bootstrapdesigntools.com/tools/bootstrap-menu-builder/.

Once again something is wrong as none of the colors are being implemented. Grrrrrr.

Base 6

The navbars are both working as intended, linking to their respective pages but yeah, unfortunately, they don’t ‘look’ how i wanted them too, i will keep looking into it until i find the problem.

I’m stumped for ideas why the colors aren’t showing,I’ve searched for ideas to no luck so  I will have to meet up with another student and ask for help.

I have uploaded the site to Altervista for testing and implementation until a later stage when the client will upload it to a paid server.

Base 7

 

Connected

Funny-Computer-60
Image sourced from googleConected

Everyone takes away something different !

And I thought I knew a lot about computers….Ha!!!

Well, when I contemplated leaving my old job fixing fishing nets and starting my career in the IT world, one argument I kept telling myself was “Its all good, you will do fine, you know lots about computers” Well I can sure as hell tell you now that after nearly completing the first semester at NMIT, I knew sweet bugger all about computers!

How am I going to stay connected?

Well, I know it’s early days at the moment in my IT career but I’m really leaning towards the web development side of things. It’s very challenging but I enjoy  a good challenge and seeing the final result of a built website I think will feel very rewarding.

I have been looking online for some decent sources of information and news about web development and I stumbled across some good sources. The first one that grabbed my attention was a website called

These sources of information I think will be of great value in my IT journey, in particular with web design and development which at this stage I plan to make my career choice.

Six Revisions

The first one that grabbed my attention was a website called Six Revisions. Six Revisions publishes web design tutorials, news, and articles and are also listed as the number one blog according to this website that a web developer should be following.

 

677
Snip retrieved from Usersnap

 

Six Revisions is a web publication for web developers and web designers. We publish articles, guides, tutorials, news and other forms of content for people who design and build sites and apps.

Six Revisions is a web publication for web developers and web designers. They publish articles, guides, tutorials, news and other forms of content for people who design and build sites and apps.

Six Revisions was launched in 2008 by Jacob Gube.

Bannersnack design content marketing Jacob Gube

There is a lot of articles about Jacob Gube on the internet but some of the information that I came across really stood out.

Smashing Magazine is a popular website for web designers and developers and feature a tonne of article written by Jacob Gube. Here is a link to those articles : https://www.smashingmagazine.com/author/jacob-gube/.

I came across this really interesting interview with Jacob Gube: http://line25.com/articles/an-interview-with-designer-developer-jacob-gube

Six Revisions also have a website dedicated to CSS reset stylesheets and can be found  here: http://sixrevisions.com/css/css-reset-stylesheets/

Jacob Gube constantly updates his twitter feed with great links and sources of information for web designers and developers: https://twitter.com/sixrevisions.

Here is a great guest article featured on Six Revision’s website about the future of web development. The article was written by the InVision team.

http://sixrevisions.com/web_design/reimagine-web-design-process/

Clark Wimberly is a Content Designer at InVision, makers of a popular design prototyping tool. He spends his days writing and creating design content (screencasts, UI kits and ebooks). Previously, he was a UX Designer and founded the online community Android and Me. Check out ClarkLab, his personal website. Connect with him on Twitter and GitHub.

 

Capture
Six Revisions can be “followed” by numerous methods.

 

Speckyboy

Speckyboy is an online magazine for designers with its focus on sharing helpful resources, exploring new techniques, sharing useful tips, and inspiring you to achieve greatness in the world of web design and development.

https://speckyboy.com/

Speckyboy can be followed in numerous ways:

wrgerg

The Speckyboy blog calls itself a design magazine. Paul Andrew – the publisher of Specky Bloy – not only focuses on design resources but also provides useful insights on the latest web technologies. Especially for front-end developers the blog is definitely a great source for staying up-to-date.

A great article about web design pitfalls as featured on Speckyboy’s website:

https://speckyboy.com/2016/05/30/web-design-pitfalls/

Paul Andrew

Paul is the founder and editor of Speckyboy Design Magazine. He has many years experience within the web design industry and a passion for the latest web technologies and design trends. He lives in the small town of Inverness in the north of Scotland. Follow him onTwitter, Facebook or Google+.

Here’s a great link to  profile information about Paul Andrew:

https://nz.linkedin.com/in/paulandrew

Summary

To summarise, I found quite a lot of sources of great information that no doubt will help me in my journey to become a great web designer or developer. I will continue to follow Jacob Gube and Speckyboy for up to date news along with continuing to look for more great sources of information on the latest news and trends in web development.