Tuesday, April 16, 2019

Assignments Week 5

Wordpress Tutorial 1: Wordpress Tutorial For Beginners Part 1 - Intro and Goals

There are WordPress.com and WordPress.org and there are differences between them

Main differences are:

The WordPress.com
cloud hosted by the team of WordPress or third party hosting
No access to core files, user only own the contents
It requires subscription and paid service for additional functionalities like getting your own URL, but you can use the basic installation for free.
The WordPress.org
It requires self hosting and user can own everything with some under Creative Commons License.
Full access to core files and site owner can customize the site at will.
Owner needs own domain and the site ownership can be very expensive

Wordpress Tutorial 2: Wordpress Tutorial For Beginners Part 2 - The Dashboard

WordPress.org is a content management systems and it has a backend for managing and building the site. The WordPress site is a combination of creating static web pages and creating a blog with commenting capabilities. It can be customized through plugins and a theme. You can customize the WordPress dashboard and the site you are building with it with ease.

WordPress is a well structured program that doesn't require any programming knowledge, but knowing few basic like html can greatly help. All the programs in WordPress are kept up to date through an update section.

Wordpress Tutorial 3: Wordpress Tutorial For Beginners Part 3 - General Settings

After installation of WordPress, you get a general setting you can customize such as updating your site name, and description.

Wordpress Tutorial 4: Wordpress Tutorial For Beginners Part 4 - General Settings Part 2

Under Writing in Settings, you can decide the landing page between a blog and a static page. There are a lot more customization you can do about how your posts and pages are displayed.
You can setup categories for your blog and setup the default category. You can setup your blog to post after you sent it an email.

Wordpress Tutorial 5: Wordpress Tutorial For Beginners Part 5 - Appearance Settings, Menus and Widgets

This section teaches how to customize your site with theme and plugins, custom menus and widgets. You can decide to update each description, title, and location of your widgets.

Sunday, April 7, 2019

Assignment Week 4

CSS Building Blocks (Chapter 7)

Bellow is how CSS is constructed.

It's a rule composed of a selector and a property that get assigned a value. Comments are added as notes for future reference. A child inherit rules from a parent element and some properties are automatically inherited.

Working with Style Sheets (Chapter 8)

There are three methods of applying CSS to webpages, individual page, or a HTML element: inline styles, embedded style sheets, and external style sheets.

    the style attribute are directly added to elements of HTML
    CSS elements are added in the head section of HTML inside
    text file with the extension .css that contains the CSS is linked to HTML in the head section

Due to its close proximity to an element, inline style has priority. Between external and embedded style, the latest to be called gets the second place. The latest CSS of two same properties has the priority, but this can be reverse with !important. Media-Specific Style Sheets can be added by either specifying a media type in the link element or use the @media at-rule in the style sheet.

Defining Selectors (Chapter 9)

The Selector is the element the style is applied to. That element can de selected by name, by class or id, by context, by its position or location within a block of HTML element, by first letter of line of an element, by many more like link, attributes, or groups.

Formatting Text with Styles and Layout with Styles (Chapter 10 & 11)

CSS can change all aspect of text and give a whole new feel of a page as shown in the before and after example of my own blog bellow.

When you separate content from style, you have the flexibility to change layout of the webpages at will and that include positioning relatively each element or controlling where they float.

Building Responsive Webpages (Chapter 12)

Responsive Web Design makes webpages render good in multiple devices while keeping the good feel. The elements of the webpages are flexible enough to adapt to the new screen size and position without loosing their coherence with one another. This is done through querying the needed style based on media type, size, and position.

Working with Web Fonts (Chapter 13)

Web fonts are specified font files to be downloaded along webpages, those web fonts are hosted in the clouds like Google Fonts, third parties, or within the webpages.

Web fonts are specified and located

Web fonts are added to the style sheet

Enhancements and Effects with CSS (Chapter 14)

Web pages can be now enhanced with added effects using CSS. The separation of content and design due to CSS not only makes update and maintenance easier, it also help reduces the needs for unnecessary contents like images and extra HTML that give space to new advanced CSS. The progress of Browser Compatibility, Progressive Enhancement, and Polyfills helps maintain uniformity and accessibility of contents. CC2 and CSS3 take on to replace a lot of proprieties of images and specific Vendor Prefixes can help maintain compatibility of those proprieties across the board in different Browsers.

Setting up specific Browser rules in CSS

User & Task Analysis of PlantLanta.org

Please refer to numbering from Task Analysis

  • PlantLanta is an NGO helping to educate about sustainable urban agriculture in Atlanta (About)
  • Their Community is interested Volunteers (volunteers)
  • The Goal is to get people involved and get things like financial support (donations, partners, products sales)
  • This website requires participation through social media, partnership, educating the public, etc.. (social media)

Site Structure

type of site structure used is Table of Contents

    • 1- Login/Signup
    • 2- Social Media Links
    • 3- About Us
      • 3-1- Farming & Food Access
      • 3-2- Economics
      • 3-3- Education
      • 3-4- Environmental
    • 4- Volunteers
      • 4-1 Information
      • 4-2 Logged in Users
        • 4-2-1 Volunteer
          • 4-2-1-1 Opportunities & Map (color coded)
        • 4-2-2 User Profile
          • 4-2-2-1 Volunteer Points
          • 4-2-2-2 Preferences
          • 4-2-2-3 Edit Information
    • 5- Events
      • 5-1 Registration
    • 6- Partners
      • 6-1 Active Partner
      • 6-2 Partner Opportunities
    • 7- Social impact
      • 7-1 Stories/Mission
      • 7-2 Statistics
    • 8- Donations
      • 8-1 One Time Donation Button
      • 8-2 Contact Donations
    • 9- Contact Us

Sunday, March 31, 2019

Assignments of Week 3

1- Project Plan

Developing a Project Plan

A project plan consists of making decisions about the steps that will be taken based on the scope of the project and what outcome is desired.
A successful Project Plan will also account for a defined scope that is always in track, a defined target audiences ,an attainable goal within an allocated time frame, and a way to measure the success of your objectives based on visitors satisfaction.

A successful project is defined by a well-developed project plan as defined by the User-Centered Design Process Map from Usability.Gov bellow.

2- Analysis of Current Site

PlanLanta is a non-profit organization looking to be present online through their own website to share and let others participate in their projects.

The purpose of site analysis is to better understand what the user want to accomplish with their website and how to help them accomplish their intended goals. We are taking into account the user experience with similar websites such as what the like or dislikes, their environment, their ability, and steps taken to get to their goal.

When to perform The analysis is to gather details for creating the website such as Website requirements gathering, Developing your content strategy and site structure, Wireframing and Prototyping, and Performing usability testing.

Two Types of Task analysis are more common, Cognitive and Hierarchical.

An example of The task analysis is to go through the steps necessary to achieve a task.

3- Creation of New Site

To create a website, you have to go through certain planning such as a project plan where everything necessary to accomplish the project is designed and discussed. Afterward, the finding and what the client want to accomplish is visually put together as a wireframe and then a prototype. The wireframe will consist of a drawing of what the website will visually represent and its different section such as navigation and location of the website elements and processes hierarchy for accomplishing intended tasks. All of these are refined by editing and making adequate changes based on feedback from user.

Tuesday, March 26, 2019

Organization Task Analysis

Organization: Windex - Glass cleaner - SC Johnson


Windex is a SC Johnson company and it's a line of products for cleaning glasses.


With the product line of Windex, SC Johnson is placing its as the best product to clean any glass or shiny surface free of spot.


Windex is provided under different fragrances and embedded into some other material like sponges and wipes in order to provide versatility in its usage. It is cleaning product, that in addition to cleaning also get rid of bacteria or germs and provide pleasant flagrance


SC Johnson is looking to make of Windex as a household brand indispensable for cleaning inside and outside the house. To accomplish it objective, Windex is available everywhere and the product is created with regard to allergens so it can be user friendly to every member of family and community.

Tools for users

On the product's website an automatic process click and select to answer consumers questions can help find a specific type of Windex based on desired usage.
The company maintain its edge in the surface cleaning industry by continuing to develop Windex products and responding to every day challenges by adapting to the needs of consumers.

Website Argument

Good Design

1- Google Search

Google Search is the ultimate web search engine. Putting its efficiency aside, Google Search has a very simple and effective design with a good sense of minimalism. On the lading page, you know it is simply question to type or speak into your microphone if installed by clicking the microphone icon and your search result are immediately displayed. Anybody can use it and there is no constraint to access Google other services.

2- WordPress Org

WorPress.org utilizes a very attractive modern design of a landing page that tells visitor everything you need to know about the product. Visitors are encouraged to get the product by a strong call to action button.

Bad Design

1- Bing Search

Bing Search is a another product from Microsoft that is a great search engine as well. If you get used to it is quietly a strong competitor to Google Search. However its landing page's simplicity is over killed due to the addition of a colorful background that make it difficult to read the navigation links and is very distracting to users.

2- Zencart

Zen Cart looks simply outdated compared to similar product. It has no esthetic appeal. The main navigation can easily lead users away from the getting the main product.

Usability Report

Website to be analyzed: http://www.cssmania.com/


CSS Mania is a gallery of Websites that separate design and content which are mostly built using XHTML/html5 & CSS without Tables. It was created in 2004 as a section for a blog and launched in 2006 as a standalone website. It is not only a collection of great websites submitted by like minded designers, but it also provide inspiration and knowledge to developers and help businesses to keep track of the online presence of their competitors by following their trends.

In despite of a group to conduct the usability report, I will do it myself by examining how easy is it to use the website and get the information it is intending to offer. All of these through a series of tasks like understanding of the site objective, depicting a product (a submitted design in this case) and learning as much as possible about it, finding and navigating through the website, etc..

Executive Summary

In general, CSS Mania is a great website that really showcases good designs as intended. Since it was practically a website now managed by league designers for other like-minded, only few links were redirected elsewhere to cover for unavailable targets and one aspect of submitted websites' link was confusing to me. In fact I was expecting the images of submitted websites and their title under to point to same page or have have something that clearly indicate otherwise.


In order to perform the usability testing of CSS Mania, I looked at:

  • What a first timer could grasp on the landing page? - Finding information on Home page
  • How organized the website information is? - Keeping track of location on website
  • Can users easily self guide their search for information? - Accuracy of predicting which section contained the information

Examining the above questions will lead me to answer eight subjective measures bellow:

  • Ease of use
  • Frequency of use
  • Difficulty to keep track of location
  • Learn ability - how easy it is to learn to use the site
  • Information facilitation - how quickly I could find information
  • Look & feel appeal - does homepage make me want to look further
  • Site content - would I continue to visit the page
  • Site organization

Evaluation Tasks

    Landing page
    As a first visitor can I visually understand what the website is about?
    Listing of designs
    Are the designs listed with possibility to find whatever my interest is
    Submit a design
    Check out if as a designer can submit my work


CSS Mania is a great website that showcases designs from other professionals. I could pinpoints the main objective of the website during my first visit. I was able to filter the design based on my interest without design limitation from the developer. The website was able to grab my attention and eager to learn more, but I was not satisfied about the full story and origin of the website.

I notice few missing information on the website and the developer did tried to hide or replace broken target, but fail to satisfied my curiosity.


Rating on the scale of 1 (strongly disagree) to 5 (strongly agree).

    Intuitive design : 5
    From the landing page I could immediately understand what the website is about after due to headers and display of images.
    Ease of learning : 4
    I could learn about the website by simply visiting the different top navigation links of the menu
    Efficiency of use : 5
    It was extremely easy to perform the three advertised tasks of the website; browsing designs, learning more about each design and rating each, and submit my own design to the gallery.
    Memorability: 5
    The website has a straight forward naming of links that describe the tasks in a real world. Therefore, I could remember every aspect of the listing and navigate straight to where I need to be to my find information I am seeking.
    Error frequency and severity : 4
    Due to some outdated links was not able to find corresponding content for those links and the most annoying error was where to find the link directing me to rating and reviews instead to the design own url.
    Subjective satisfaction : 5
    I was breathtaking to see all the best design in one place and the website has become a source of inspiration where i can find every topic in timely fashion.

What I Like, Dislike, and my Recommendations

I love the website overall, but I did not like that the project was halted and crucial details are missing about on the about page. I wanted to know more about the original creator.


Without question this website was built by innovators in design and they have applied all trending with effective result. I like all aspect of the website to the exception keeping it up to date because no new design has been added since February 2018. I would love to see someone continue the gallery and trace the original developer.

Sunday, March 17, 2019

Reading Summary of Chapters (1 through 6)

Chapter 1: Webpage Building Blocks

HTML stands for Hypertext Markup Language which is the language of the web and it is a must to create web pages.
HTML contains three major components:
Text content
textual content on a web page

References to other files
call and or link to additional contents like scripts, video, audio, stylesheet that can add resources or functionalities to the web page.

is the defining instructions and rules for interpreting the HTML file; examples are the meta tags, defining the web page's language, etc..
The Text content and the References to other files are visually display on the Web page while the Markup is an underlining element that provides instruction on how to render the information.

Chapter 2: Working with Webpage Files

A file is first created and located before adding content to it. A good planing and well structured layout with visitor in mind lead to a better web page

Chapter 3: Basic HTML Structure

There is a basic structure that defines and HTML file. It starts with a DoCTYPE that tells what type of document is been created.

Fortunately many versions of Doctype went by and the current one can be more streamlined to a single line of codes. The HTML has two distinct parts which are the head and the body, each can only contain specific elements within a section.

Chapter 4: Text

Text explicitly conveys information to visitors and its content and layout are very important. The Text is controlled by markup elements like i italic, b bold,

paragraph and many more. the best practice is to separate content from design through the use of StyleSheet. The StyleSheet serves to provide customized positioning to the element of text such as navigation, headers, section, etc..

Chapter 5: Images

Images add visual details and information to web pages. How a web page image is displayed is based on its file format like PNG, GIF, or JPEG, file size and file resolution. Web page images are specifically created, uploaded, stored, and called within a webpage in order to be displayed. Images can be displayed by size, quality, and can be dynamic as well. A special type of image called favicon is used in the head section of HTML to brand a web page

Chapter 6: Links

links are used to connect internal and external parts of a web page. There is a target and a label. the target of a link define the object of the link while the label is simply the visual representation of the link that guides visitors.

Saturday, March 16, 2019

Basic of User Experience and Methods

Based on Usability.gov; User Experience (UX) is understanding the users, their needs, what they value, their abilities, and their limitations. The business goals and objectives can be reached through User Experience by promoting products and services while improving the delivery of information to users.

Peter Morville mentioned in his book User Experience Honeycomb what information must be in order for a meaningful and valuable user experience to exist; Useful, Usable, Desirable, Findable, Accessible, and Credible.

User Experience is a growing and morphing field that will only continue to expand.


Nice to meet you!
I am a student at Mercer University majoring in Informatics. Learn more about me by following this blog.