Blog 3: JavaScript

What is JavaScript? A common misconception about JavaScript is that many people believe the program is related to Java. Which is not true. JavaScript is a programming language that adds interactivity and custom behavior to sites. It is a client-side scripting language, which means it runs on the user’s machine and not on the server. JavaScript is reliant on the browser’s capabilities and settings. Overall, JavaScript is known as a dynamic and loosely typed programming language.

What are its advantages? JavaScript is a dynamic programming language so it does not need to run through any form of complier, which is a program that converts instructions into a machine-code or lower level form so that they can be read and executed by a computer, that interprets our human-readable code into something the browser can understand. JavaScript is also loosely typed which means you do not have to tell JavaScript what a certain variable is.

When do you use it? Incorporate JavaScript into your website when you want to incorporate interactivity to your page. JavaScript is the only language available that lets your website communicate with the browser and watch for events. JavaScript allows you to create highly responsive interfaces that improve the user experience and provides dynamic functionality. JavaScript can be used to request content and information from the server and insert it into a document, show and hide content based on a user clicking on a link, or test for browsers’ individual features and capabilities. JavaScript can also fill in gaps where a browser’s built in functionality falls short. These types of scripts are called polyfills.

How do you add the script to your html document? You can add JavaScript to your html document by adding an embedded script, external scripts, or script placement.

JavaScript Resources:

• 21 top examples of JavaScript
• 18 Best Creative JavaScript Examples
• JavaScript Tutorial

Blog 2: Social Media

 

Today, social media platforms are designed to have a light backgrounds and to be responsive on monitors, tablets, and mobile devices. Social media platforms usually have white backgrounds to better the readability of text on their site. Facebook and Twitter are social centers for a large amount of the world’s population. Many people throw a fit if they were unable to read posts or direct messages on social media sites. The responsiveness of social media websites are also important since people can visit their social media pages on at home on their computers or on a bus with their smartphones. So social media platforms should be responsive on all types of devices. In terms of design, some trends of 2017 include bold typography and emphasis on originality. Companies on social media platform, like Facebook, can make themselves stand out by using interesting and eye catching fonts. Companies can also draw attention to their sites by using designs that are different from other companies, like having banners hand drawn rather than computer generated.

Strategies to engage customers include communicating with the company’s audience and answering customer’s questions quickly. Another strategy to engage customers is to make the call of action on the page obvious. Strategies to acquire new followers include posting great content and staying active. Companies can avoid having a burst of updates by social scheduling when they plan to regularly post content on to their social media pages. Companies should also try to share positively by making sure that their tone does not sound sad, aggressive, or angry.

Coca Cola and Nutella are both successful organizations are have well designed Facebook pages. The pages are successful because they have high quality banners, videos, pictures, and engage with their customers. Facebook users like to see a different variety of contents from a brand they are following. Using a social media platform is a great way to connect with a company’s audience and get a chance to gain new customers.

Useful Links:

• Key Design Trends for 2017 [Infographic]
• 8 New Graphic Design Trends That Will Take Over 2017
• 13 Easy And Effective Customer Engagement Strategies
• 10 User/Customer Engagement Strategies for 2017
• 6 Science-Backed Strategies to Get More Followers on Twitter, Facebook, Instagram, and More 
• 39 Ways to Get More Social Media Followers

 

Blog 1: Content Management Systems

Content Management Systems (CMS) is defined as server-side software that is designed to simplify the creation and maintenance. Open source CMSs can be downloaded and tried out for an unlimited amount of time. Benefits of using a CMS include collecting content and storing the information in a database that can be reused, repurposed, and published at any time. CMSs usually have a template so a user’s site will be built around their content. As a result of these pre-made templates, users do not have to spend a lot of time developing an attractive looking website. Some drawbacks of using a CMS is system’s security and how well the CMS’s search capability works.  It is appropriate to build a website using a CMS when a company wants to quickly and easily publish content but CMSs should not be used in order to avoid learning HTML or CSS.

The three main open source web CMSs out there are WordPress, Drupal, and Joomla!. Drupal and Joomla! are both general purpose CMSs which means that they have no specific focus but are designed to give the user control over site architecture, content publishing, and site administration. While WordPress is a system that focuses on the publishing and repurposing of content, primarily articles and text. Drupal is more of a framework for content management than a CMS and Drupal also gives its users more flexibility with their content but it requires more technical proficiency. Joomla! is CMS capable of creating large, heavily trafficked sites and Joomla! fits a wide range of site needs. This CMS is great for experienced and novice web designers who want to create a site quickly. Joomla! Is not as flexible as Drupal but it is still a powerful CMS. WordPress has a large and active community of developers and WordPress also has hundreds of themes so customizing websites is easy. WordPress is also not as flexible as Drupal. Something I learned about using WordPress as a custom CMS was the WordPress loop, which is a PHP function that loops through the site’s content and displays the appropriate number of posts or a specific article.

Online Identities & Designs

Part I

According to the article “10 Steps to Creating Your Freelance Brand” by Martha Retallick, a freelancer should take the following steps to solidify their brand:

• Step 1: Decide what part of your personality you wish to showcase in your brand
• Step 2: Make your brand personality memorable
• Step 3: Are you going to be “in character” some of the time or all of the time?
• Step 4: If you’re going to play a part, what props will you use?
• Step 5: What benefits does your personal brand offer to your clients?
• Step 6: Seek kindred spirits
• Step 7: Watch how others react to your brand personality
• Step 8: Evaluate and adjust
• Step 9: Start a swipe file
• Step 10: Recognize that there’s an appropriate time and place for your personal brand

Melanie DaVeid and Riccardo Zanutta created two strong portfolio websites that show off their brand identities. DaVeid’s logo shows that she is a great illustrator and is very creative. In his “about” section Zanutta describes himself as “a weird guy who likes making weird things with web technologies” and the design of his home page shows this well since the design is a bit odd. His home page consists of his name and a bunch of random shapes floating on his page. Both designer also include their services on their sites. Zanutta is an interactive front-end designer who likes “to create smart user interfaces…developing rich web experiences & web applications” while DaVeid is a UX Designer and an Art Director. Their websites also have strong designs.

      

Part II

The following sites are examples of good web pages:

• “Portfolio/Work” sections:
  • Stereo: “Work” sections should have large, high quality photos. Stereo’s work page include great images and when a user’s mouse hovers over a picture information about the case pops up including some animation.
  • Charlotte Tang: Tang’s website also include big, clear images and when a mouse hovers over the pictures, the image changes from black and white to color. And when a user clicks on the images, they are taken to another page with a larger version of their work and a description.
• “About Me” sections:
  • Lounge Lizard: “About me” sections should give a lot of details about who you are and what you do. Lounge Lizards pack a bunch of information in their about page but it is designed in such a way that the information is easy to read.
  • Bert:  Bert splits their information up in to different sections so their information is also easy to read. Their page also includes a video.
• “Resume” sections:
  • Devon Stank: Stank’s resume is large and easy to read but he also allows his visitors to download his resume. He includes sections about his skills, work experience and education.
  • Pascal van Gemert: Gemert also includes information about his work experience and abilities. What makes his resume stand out is the fact that he gives himself a rating of his own skills.
• “Contact Info” sections:
  • Nate Cover: Contact pages should include information like your email address and phone number in order for employers to know how to contact you. Cover’s contact page is really simple but it still has all of the information a client needs.
  • Riccardo Zanutta: Zanutta’s contact information can be found at the right and bottom of his page. But if you click on the contact tab in his navigation, you will be taken to a form which can be filled out and sent directly to Zanutta.

Blog 2: Responsive/Mobile Web

In order for users to have a good mobile experience, designers must decide if the mobile site will be used for information, entertainment, or as a utility.  Depending on which objective the designer chooses to focus on, the elements included on a responsive or mobile website will vary. One site may have more functions than the other or it may have more pictures. Every mobile website should have a menu for navigation (which is usually concealed in the hamburger symbol), buttons should be simple, easy to find and they should be a size big enough for a consumer to actually press, large, view-able photos and general information that can also be found on the traditional website. A responsive website should also be able to stretch and shrink as the user change the size of their window of browser.

Mobile webs should not have the same layout as its desktop version. The information seen on mobile webs should be short and sweet. Smart phone users usually have small attentions spans so whatever is on the site should get to the point. The design of the mobile website should also pop in order to keep users on the page and keep them interested in the site’s content. Traditional websites should also try to make their design or layout stand out so users will stay engaged on the site. The layout will obviously have more space for information on the desktop version of the site. The mobile web should be a smaller size than a traditional website. The designs and layouts of mobile websites and traditional websites should give users a good experience by also engaging and motivating its users. Users can be motivated through rewards and through a clear understanding of what an application offers them. Users can become engaged in a mobile website through entertainment, humor, and game play. This is how designer create good user experience on the mobile websites.

Links:

Research: A Beginner’s Guide to Mobile Responsive Design

Responsive Website: bonobos.com

Mobile Website: flikr.com – mobile version, desktop version

Blog 1: The Pros and Cons of Web Fonts

While designing for  websites, one must consider the characteristics of fonts on the web. Web fonts must be installed onto computers in order for other to see the same font. The size of web fonts also vary from computer to computer depending on what operating system, browser, device, or screen resolution the computer possesses. So a Mac will display type differently than on a Windows operating system. Aligning web fonts on a webpage can also be difficult because column depth varies on the web too. Thankfully, there is a way to get around this problem. Another thing that can vary from computer to computer is the color of a font. Once again this can be due to the computer’s monitor, operating system or browser. Using web fonts is completely up to the web designer to decide.

Web fonts are defined as text that have been specifically made to be displayed on the internet. This makes life easier for web developers and designers since they no longer had to worry if a certain font would show up on an old computer browser. Web font’s @font-face property allows web developers to choose fonts that can be on a proprietary host server or can be hosted by a third-party service provider. Web fonts have many advantages such as:

• Greatly expanding creative and typographic freedom,
• Consistently branding for websites, blogs, and web advertising
• Being text that is editable, updateable, resizable, copyable
• Having faster loading than many graphics
• Being search engine friendly

Despite having so many benefits, web fonts still have some issues such as:

• Font rendering and overall onscreen quality varies depending upon the font, browser, and version
• Appearance of web fonts can vary on a Mac and a PC
• Font quality and suitability for the web varies widely
• Text performance is less reliable than headline or display type

So in conclusion, web fonts have their good points and bad points but they do make choosing type for the web easier.

Week 14

Lesson: Complete Project 3

Finalized the Diva website!

 

 

Week 13

Lesson: Project 03

Finalized the build of the website’s general page design and updated the navigation links.

Helpful Links:

Browser Testing –

• Browserstack – http://www.browserstack.com/
• Sauce Labs – http://www.saucelabs.com/

Ecommerce Tools –

• 12 Free Ecommerce Tools for Small Businesses – http://mashable.com/2014/01/17/ecommerce-small-business/#kJ2qJHPCU8q3
• Best Open Source Shopping Carts  –http://www.cio.com/article/698227/10_Open_Source_Shopping_Carts_to_Run_Your_Ecommerce_Business
• Best Shopping Cart Software – http://shopping-cart-review.toptenreviews.com/

Highlight Navigation –

• Creative Pro – http://www.creativepro.com/article/dreamweaver-how-create-you-are-here-navigation-links

Breadcrumb Navigation –

• Web Monkey – http://www.webmonkey.com/2010/02/build_dynamic_breadcrumbs_with_javascript/
• BrightHub – http://www.brighthub.com/internet/web-development/articles/74417.aspx

Menus: Dropdown Navigation –

• Dynamic Drive – http://www.dynamicdrive.com/dynamicindex1/indexb.html

Gallery Large Overlay –

• Dynamic Drive – http://www.dynamicdrive.com and
  http://www.dynamicdrive.com/dynamicindex4/lightbox/index.htm

Background Images –

• Creating Rotating Background Images (CSS/jQuery) – http://michaelsoriano.com/create-rotating-full-paged-background-images-with-css-and-jquery/
• Background changes on refresh of the browser window (CSS/jQuery – http://www.jqueryscript.net/other/jQuery-Plugin-For-Random-Background-Image-randomBackground.html

Slideshows Galleries –

• 12 Simple, Pure, CSS Sliders – http://xdesigns.net/2013/08/css-slider/
• Super Simple Slider – http://supersimpleslider.com/
• Thumbnail Slider – https://designshack.net/articles/css/thumbslider/

Week 12

Lesson: Project 03

Finalized the home page for Diva website.

Helpful Links:

• Understanding CSS Shorthand – http://www.impressivewebs.com/understanding-css-shorthand/ 
• Making the Most of a META Description  –  http://www.seomoz.org/learn-seo/meta-description 

Week 11

Lesson: Website Hosting and Domain Names

It’s important to remember that once you’ve reserved your domain name, you’ll need to secure hosting for your website. Your class webspace expires once the semester is over. Here are some recommended website hosts – this is not a definitive list, but just a few suggestions:

1. Blue Host
2. GoDaddy
3. Network Solutions

Helpful Links:

• Google Web Fonts – http://www.google.com/fonts
• CSS3 Generator – http://css3generator.com/
• CSSmatic (with preview) – http://www.cssmatic.com/