COURSE NOTES (CODE)

C O U R S E N O T E S ( C O D E )

S A R A H WA G N E R W E B I I FA L L 2 0 1 6

The following notes are a documentation of concepts learned in Web II, with instructions to allow for execution of these concepts in the future beyond the class.

STYLING LINKS IN CSS | 9/1

a:link = unvisited link.a:visited = visited link.a:hover = mouse over link.a:active = selected link.

UL IMAGE GRID | 9/20

Each image is put in its own <li>, and given the CSS property {list-style: none} to remove the default bullet points. {float: left} is applied to the li to allow the images to sit next to each other, rather than on top of each other, and {clear: both} is applied to the footer to make sure the image grid doesn’t overlap the the footer.

IMAGE OPACITY ON HOVER | 9/20

To change the opacity of an image on rollover, apply {opacity: .5 (any number between 0.0-1.0, with 1.0 being opaque)} to li img:hover. To do a color overlay, assign a color to the background of the <li>, not the img. The background color will show up when the image becomes transparent.

Using CSS3 filters such as -webkit-filter: grayscale(100%); is another way to achieve overlays.

RGBA COLOR | 9/20

An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). A semi-opaque white will be rgba(255,255,255,.5).

STICKY NAV BAR | 9/22

Use “position: fixed” in CSS. When using this technique, you might need to add some extra padding to the top of your container to ensure all your content is displayed below the header on page load.

CONFIGURING WORDPRESS FOR MAMP | 10/4

Download MAMP. Create a new PHP document, named index.php, and save it to the htdocs folder in Applications > MAMP. You may place this new PHP document inside a PHP_test folder.

Inside the body of your new index.php, insert <?php phpinfo();?>. This command outputs a large amount of information about the current state of your PHP. You may configure the rest of index.php the same as a basic HTML5 document with tags for doctype, meta, head, title, etc. From the MAMP webstart page or from localhost:8888, you should now be able to view where your local files are being hosted.

Download Wordpress from Wordpress.org. Unzip it and place it in the htdocs folder. Locate wp-config-sample.php, delete “-sample” from the file name, and open in Dreamweaver. Update the credentials in this file as you work through the next few steps.

From the MAMP webstart page, access phpMyAdmin in the Tools dropdown menu. Create a new database, and take note of your database name. Under Privileges, add a new user account, again taking note of your new credentials. EXAMPLE: user:sarahdbadmin, host (local): localhost, pass: 123456. In a local hosting environment, complex passwords are not necessary. Check the “All” box for Global Privileges.

You should now be able to access Wordpress from localhost:8888/(name of Wordpress folder in htcdocs). Create and take note of your username and password (Ex: sarah_admin, 123456). Check the box to discourage search engines.

In the wp-config.php file, line 23 should be your database name. Line 26 should be your mySQL phpMyAdmin username and password, and line 29 should be that password.



IMPLEMENTING BASIC PHP | 10/6

Select from <!doctype html> to </header> in index.php and cut and paste into a new php document, called header.php. Repeat this step for the index and footer. NOTE: This php is specific to WordPress, not real php. Codex.wordpress.org provides a database of WordPress functions.

In header.php, insert <?php bloginfo(‘name’);?> into the title tag. Replace stylesheet.css in the link tag with <?php bloginfo(‘stylesheet_url’);?>.

WORDPRESS NAV BAR: For the nav bar, delete all the li’s, and add <?php wp_list_pages(‘sort_column=menu_order&depth=1&title_li’);?>. The ampersand indicates that another parameter is coming. ‘Depth=1’ means there are no dropdowns in this nav bar; 2 would mean one level of dropdowns, 3 would mean two levels, etc. ‘Title_li’ reinserts the names of the pages.

Add credits to stylesheet (theme name, theme URL, description, author, and author URL). Screenshot your original HTML and rename as screenshot.png, placing in your theme folder (wp-content>themes>theme name). This will be the thumbnail for the theme on the WP dashboard.

In your index.php file, insert <?php get_header();?> at the top to run the header. Repeat at the bottom with get_footer to run the footer.

IMAGES IN WORDPRESS TEMPLATES | 10/6

For any images, you must write <?php bloginfo(‘template_url’);?>/ before writing the location for the image. This tells php to retrieve the image.

RUNNING THE LOOP | 10/11

Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. Put simply, the Loop calls in posts and pages from the WP dashboard.

If there are posts, while there are posts, display them. Else, simply display else.

The php statements the_title and the_content tell php to grab just the title and contents of the posts. You can format php with HTML, as shown.



QUERYING WORDPRESS POSTS | 10/11

To assign certain WP posts to show up only on certain pages, you can use template pages with categories and themes. You can simply copy your index.php and save it as about.php, then added /* Template Name:About */ at the top of the page.

Query the post before the start of the loop using <?php query_posts (‘category_name=about’);?>, telling php only to grab posts within the About category. After saving the document, you should be able to change the theme of the page in the Page Attributes section on the WP dashboard.

BLOG URL | 10/11

The link to your site’s homepage is <?php bloginfo (‘url’);?>.

ADVANCED CUSTOM FIELDS (FOR IMAGE UL’S) | 10/13

After installing and activating Advanced Custom Fields through the WordPress Plug-ins tab, add a new custom field group named ‘portfolio.’ Within that Custom Fields tab, create three new fields called ‘port_thumb,’ ‘port_medium’, and ‘port_large,’ with each classified as image field types. Now, when you view any post, you should have the option to add images in any of those fields.

Since you only want the ul to run one time, start and end it around the outside of the loop. Add the following line of code before beginning your li within the ul: <?php $image = get_field(‘port_thumb’);?> The $, within Advanced Custom Fields, indicates a variable. A variable is essentially creating an empty bucket and filling it with data.

To the left is the code for the li itself. Note the added code for the alt tag and the a href. The permalink, according to the WP Codex, “displays the URL to the post currently being processed in the Loop.

Here is an example using ACF and CSS together in a div.

CONFIGURING A NAMECHEAP SITE WITH FETCH | 10/25

Upon purchasing a domain name, Namecheap will provide you with a temporary cPanel username and password. Log in to cPanel at urlname.com/cPanel with these credentials. Change your password to something you’ll remember. Using your web address as the hostname, your cPanel username as the username, and your new password, login to Fetch.

In the www folder in Fetch, delete everything but .htaccess. You can test an index.html and stylesheet to make sure it all works properly. Download a fresh copy of WordPress and drag the contents of the wordpress folder to your www folder. Change wp-config-sample.php to wp-config.php.

Open mySQL Database Wizard in cPanel. Set up your new database and username, keeping note of any new usernames and passwords, and update your wp-config.php file. Go to your web address and log into WordPress, again keeping track of any new usernames and passwords. WordPress is notorious for being hacked, so make sure your password is secure.

CREATING AN EMAIL ADDRESS ON cPANEL | 11/1

Go to your email accounts through the main cPanel page, then fill out the form to add a new account. You can set up your Mail application to receive email from your domain name by entering the provided address (i.e. https://server114.web-hosting.com) as the incoming and outgoing server address.



E-COMMERCE | 11/10

Many e-commerce sites have plug-ins or widgets available to include your store on your site. RedBubble has a widget available under Account Details> Promote. Zazzle has a WP plug-in called z-Store manager. Do some research to find something that works.

LOADING SCREEN | 11/29

If you have issues with unsightly page loads when things load out of sequence, you can implement a loading page with some simple script and CSS.

Simple call the above script in your header, and use the CSS to the right to customize your screen.

SMOOTH SCROLLER | 12/2

Include the following script in your head. It is only necessary to call in jquery once in your document. Create links in your nav such as <a href=”<?php bloginfo(‘url’);?>/#link”>, and create anchors with <a id=”link”>. Putting the php for your url allows these links to still work from other pages of the site.

STICKY FOOTER | 12/4

The purpose of a sticky footer is that it “sticks” to the bottom of the browser window. But not always, if there is enough content on the page to push the footer lower, it still does that. But if the content on the page is short, a sticky footer will still hang to the bottom of the browser window.

To achieve this, you need a wrapping element around all your page content excluding the footer. There are a few different ways to make it work from this point, one of which is to apply min-height: calc(100vh - footer height) to the wrapper. calc() is a native CSS way to do simple math right in CSS as a replacement for any length value (or pretty much any number value). This has some compatibility issues, however.

C O U R S E N O T E S


C O U R S E N O T E S ( P R O C E S S & R E S E A R C H )

These notes are a record of my progress throughout Web II, documenting my creative thought process, homework assignments, and research.

THURSDAY, SEPTEMBER 1

PORTFOLIO CRITERIA: • Mock up in Photoshop • Include 9 minimum portfolio pieces, and consider what happens when they are clicked. • Include a homepage, About, Portfolio, Contact, and single pages for individual pieces.

Make a wireframe, 1200 x length. Portfolio pieces must be included as <ul>’s. Turn in a printed version to allow for markup.

<Header>, <footer>, <main>, <article>, and <nav> are now tags in HTML5. See http://www.w3schools.com/html/html5_new_elements.asp for a list of new tags and their functions.

In class, we practiced making a website with a header (logo left, nav right), a main (paragraph and image side by side), and

a footer (centered social media logos). We included fonts from Google Fonts. Because browsers load from top to bottom, we place the link for the fonts above the link to the stylesheet.

TUESDAY, SEPTEMBER 6

Our homework for this class was to select 10 inspirational portfolio websites and write a short commentary on each one. During our class time, each student reviewed their selections and shared them with the class.

Everything we talked about in class was essentially a reiteration of the two articles we read last week. Design for purpose, simplicity is good, you are selling yourself as a brand, etc. After looking at a large collection of portfolio sites, I think the best method for my own site would be to keep it clean and to the point, and try to add just enough personality and visual interest without being distracting.

ASSIGNMENTS: Start reading 2 blogs, and write 2 blog posts every week with class notes, article commentaries, or progress updates. By 9/20, develop 3 portfolio concepts based on your inspirational sites (one main idea, and two derivations of that idea). Design and print out wireframes for each page. Pay special attention to how your portfolio pieces are laid out (what happens on click?). Nav and portfolio thumbnails must be in <ul> <li> format. Begin HTML if possible.

INSPIRATIONAL PORTFOLIOS

• http://melaniedaveid.com/ Her animated graphic on the page load is amazing – so unique and eye-catching – and sets the tone for the rest of her website. I also love the way the sections of the site scroll, with half of the page scrolling at a time. She has a consistent theme/motif with the colors, lettering, and hand graphic, and overall I think her portfolio site is just very well done.

• http://www.youandigraphics.com/ This homepage has a very unique grid layout, which responds well to resizing. It introduces the design theme of the site well, and it’s pretty easy to navigate. I also really like the layout for the What I Do page, with the opposite scrolling, and the option to take a closer look at a project by hitting the View Project button. One downside to this site, however, is that you don’t get an immediate view of the artist’s portfolio, since it isn’t shown anywhere on the homepage.

• http://www.hihayk.com/ This portfolio is a great example of designing with a purpose – it’s easy to navigate and to the point. The navigation is unique, and I like the way projects are displayed on click, sliding in from the right. I like that the website it simple, but I think it’s close to not enough information.


• http://www.mypoorbrain.com/ I like the options for sorting portfolio pieces on the homepage, and in general the way the pieces are organized according to the shape shown over the thumbnail. I actually also really like his profile; his bio shows a lot of personality.

• http://thereis.co.uk/ The vertical display of portfolio pieces on the homepage is striking. The scrolling effects on the Bits & Pieces and About pages is interesting, and I like the wide range of work on display throughout the site. Since there are so many images, it seems like the loading time is slower, but it could be my internet

• http://smallstudio.com.au/ The three-page layout is nice, and I like that the page never needs to reload no matter what you click on. In general I just really like when one element remains stationary while others scroll, as shown in the pages on the right and left of the homepage. The subtle textures on some of the backgrounds add interest, too.

• http://www.bleed.com/ This site is under construction, but there’s still things to be gained from its analysis. I think the background color changing on scroll is interesting, but I’m not sure on its execution. I like how the overlay on the portfolio pieces changes on mouseover, as well as the inclusion of a manifesto at the bottom of the page. The navigation leaves something to be desired, however.

• http://www.jonathanfaust.com/ Another simple and to the point portfolio, but I think it’s something much closer to what I could do myself. With such a clean design, the portfolio pieces are clearly what is on showcase, whereas many web designers try to show off their coding skills and put together something fancier. When your work is strong, it should speak for itself (although fancy visual effects, when used properly and in moderation, can’t hurt!

• http://danielgivens.com/ I can’t even begin to image how he made the transition between his about page and homepage, but regardless, this highlights how beneficial it is to create an eye-catching, dynamic first impression. At the same time, his portfolio isn’t the easiest to navigate, highlighting the importance of user experience.

• http://robin-noguier.com/ I like the way the about/contact page flies in from the sides. I think this is also an example of an unconventional nav bar that’s still pretty straightforward and easy to use (although the load/animation times are lengthy). It’s interesting how the color of the logo changes depending on the page you’re viewing.

9 ESSENTIAL DESIGN PRINCIPLES

Web design is one of the ultimate combinations of form and functionality: Collis Ta’eed lists 9 principles for designing an effective website.

• Precedence. Create a visual hierarchy. This is more than just an eye catching logo in the corner of the page, but a step by step visual process for the viewer to follow, using position, color, contrast, size, and design elements.

• Spacing. Negative space is a good thing! Consider line spacing, padding, and white space.

• Navigation. It’s an absolute necessity that the user knows how to get around your site. Buttons should be easy to recognize and clear to understand. (Side note: I’ve seen too many websites where the navigation has all these fancy animations, but the time it takes for the animation to play out is long enough for me to lose interest.)

• Design to build. You may need to sacrifice complex features to simplify coding. Functionality is essential.

• Typography. Consider font choices, sizes, spacing, line length, color, and paragraphing. Difference choices will say different things about your site.



• Usability. Users are conditioned to think and do certain things (underlines mean links, nav bars are usually near the top, etc.) Don’t stray too far from what an average person couldn’t easily figure out.

• Alignment. “Aligning makes your design more ordered and digestible, as well as making it seem more polished.”

• Clarity. When working on designs in Photoshop, go to extra lengths to make sure text and shapes are sharp and clear.

• Consistency. Create a coherent theme, not just from page to page, but within the page itself. Colors, font choices, etc.

10 DESIGN CONCEPTS THAT EVERY WEB DEVELOPER NEEDS TO KNOW

Kyle Fiedler of Creative Bloq created a similar list to Ta’eed’s, discussing ten design concepts for developers. Some of his ideas overlap with Ta’eed’s, but it’s still great information nonetheless.

• Design isn’t just visual. It’s the whole user experience, from what it looks like to how it functions.

• Be user-centric. Your purpose is to “enable your users to reach their goals with speed, effectiveness and, most importantly, pleasure.” Consider who the user is, what they are on your site for, and the feeling you want the site to give them. User experience is everything.

• Design is in the detail. Take on the bigger picture, then focus on the details. They can make or break your site.

• When designing, sketch often. Sketch out ideas for hierarchy, content, and flow. Don’t move to the computer until you’ve explored all your options.

• Use white space. Give the user a visual break, but keep it balanced.

• Grids aren’t just CSS frameworks. Grids can be used to create relationships between objects, provide a base system for alignment, create rhythm, and create optical balance.

• When everything has emphasis, nothing does. The most important element should be clearly placed at the top of the hierarchy, and any elements after that should flow from that.

• Keep an inspiration folder. Anything that can help spark ideas. Selecting pieces for an inspiration folder also forces you to practice your design analysis and evaluation skills.

• Design is all about problem solving. Every part of a design, from placement to color choice, should have a specific purpose and solve a specific problem.

• Know how to talk about and critique design. Constructive feedback is crucial. Again, there needs to be specific reasons behind critiques. Something can’t just be bad or good – there needs to be an explanation.

5 DESIGN BLOGS

http://www.creativebloq.com/ https://www.typewolf.com/ http://www.webdesignerdepot.com/ http://designrfix.com/ https://every-tuesday.com/


No class today, so I just worked on research and concepts for my website. I looked at the work from previous UA students, and I checked out some of the blogs I chose last week. Here’s my response to a Web Designer Depot article:

ESSENTIAL DESIGN TRENDS, AUGUST 2016 (WEBDESIGNERDEPOT.COM/2016/08/ESSENTIAL-DESIGN-TRENDS-AUGUST-2016/) In an effort to decide what I want my portfolio website to look like, I wanted to find out more about current design trends; Carrie Cousins from Web Designer Depot talks about the role of colors and layers in contemporary design. Layered elements, when done with the right amount of subtlety, can add three-



dimensionality and realism to a website (http://ollestudio.com/). Parallax scrolling, intersection and interaction of elements, and open compositions all help to create the illusion of depth. Dark color schemes are also a trend sweeping the internet, replacing the minimalist, stark white scheme. These colors are more tricky to work with due to legibility, but when extra care is given to proper contrast of elements, the result is a dynamic, unique design. Cousins also mentions the comeback of gradients, often mixed with bold, flat designs again creating depth and dimensionality. As with nearly any element of design, use of gradients has to be done sparingly without overwhelming the content of the page.


Again, no class today, so I took some time to sketch out and conceptualize my website, reviewing my notes and looking through some articles to get tips.

I really like the look of sites with parallax scrolling effects. I think it’s a subtle way to add depth and interest without being distracting, and I think it will challenge me to figure out how to make it happen. For my portfolio pieces, I think I’ll do a lightened/desaturated version of the thumbnail until mouseover. I might include some blank squares to break up the space. I’ll only show a maximum of 3 rows (15 pieces) on the homepage, and have an option to click to view more.


We still didn’t have class on Thursday, so I worked on my portfolio concepts, creating an alternate version of my homepage, and created wireframes.

The content of my home will include an about section, a portfolio section, and a contact section, but will link to extended versions of the about and portfolio. This will keep the homepage from being too cluttered and overwhelming, and allow for a more in-depth view of my portfolio. I’m just going to pick my best/favorite pieces to show on the homepage.

On my single view pages for portfolio work, I’ll probably do a “click to enlarge” on the images there, so I can work on my lightbox skills. I’ll try putting in a slider across the bottom to link to other pieces, and a link to go back to the full portfolio. If I have a good selection of process work for a project, I want to show that too. Either way, the slider will just stay at the bottom of the page.




Today we reviewed our concepts and wireframes in class, and I added a few details to my wireframes to make them more complete. I also completed my secondary homepage concepts, and started working with HTML.

We also learned how to create an image grid in a ul li format in class, and how to change the opacity of an image on rollover. To do a color overlay, assign a color to the background of the <li>, not the img. The background color will show up when the image becomes transparent.

An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

HOMEWORK: Write a blog post, and revise your concepts/wireframes. As a bonus, try making the nav bar in our class example stretch to 100%.


I spent time in class getting the framework of my homepage laid out in HTML. I still need to decide exactly how I’ll be dividing up all the space on the page, but I certainly made some progress.

We reviewed how to make a sticky navigation bar, using “position: fixed” in CSS. We also did a brief introduction to Bootstrap, a free front-end framework for faster and easier web development. It provides you with templates to insert into your page, and often includes a mobile version.

For the next class, I will have to be prepared to present my full portfolio site, with 5 pages worth of content, on my gozips website.




Over the weekend and in class, I finished up most of my HTML and put my website on the gozips server. All that’s left for me to do is put in a working contact form on the homepage and add any other portfolio pieces I want to include. Class was just a work day, so we didn’t learn any new code.


Everyone presented their semi-finalized websites in class today, and I got some suggestions to improve my own site.

• Revise contact section. No one uses contact forms anyways, so don’t include that, and don’t put your personal phone number online. It should be

• Include resume somewhere.• Introduce accent color more prevalently. “|” in the header.• Consider inclusion of the logo on the homepage slider (distracting?), and consider making the slider full

screen.



TUESDAY, OCTOBER 4

Today, we downloaded MAMP and WordPress and learned the basics of how to set them up.

MAMP is an application serving as a local server environment, and housing all your files. MAMP is an acronym that stands for:• Macintosh, your operating system.• Apache. Apache is the most widely used web server software, running on 67% of all web servers

worldwide.• MySQL is the database management system used by WordPress. A database is essentially a collection of

data, and MySQL lets you store and retrieve that data efficiently. SQL (Structured Query Language) is the language in which databases are interpreted.

• PHP is a server-side scripting language used by WordPress, and can be embedded into HTML. According to PHP.net, “what distinguishes PHP from something like client-side JavaScript is that the code is executed on the server, generating HTML which is then sent to the client. The client would receive the results of running that script, but would not know what the underlying code was.”

By installing MAMP, you get all the necessary applications and languages to run WordPress on your computer. There are two environments: local and global. Local is tethered to the machine you are working with, while global is only associated with your domain but hosted somewhere else on the internet.

THURSDAY, OCTOBER 6

We reassembled the test page (index.html) we’ve been working with in class into 3 separate php documents: header.php, index.php, and footer.php. Last class, we just talked about php and prepared our machines to use it; today, we actually implemented it. Using php, you can make a header, for example, that is universal for all your pages, and editable from one file, which sounds amazing. The steps for this process will be listed in my other compilation of notes under Implementing Basic PHP.

The parentheses () in php is for implementing parameters, while the semicolon is for closing. Inserting the ‘name’ value, for example, in the parentheses indicates which parameter is to be run. The ampersand indicates that another parameter is coming. In a nav bar, ‘Depth=1’ means there are no dropdowns; 2 would mean one level of dropdowns, 3 would mean two levels, etc. ‘Title_li’ reinserts the names of the pages.

To prepare for next class, we added 4 post categories (About, Portfolio, News, and Contact), and put at least one post in each category using the WP dashboard.

TUESDAY, OCTOBER 11

We left our test index.php on Thursday simply calling in the header and footer in php. Today we worked on filling in the main content of the page with php.

Using WordPress php, all the content of our pages will come from our posts on our WP dashboard. This is done by using The Loop. “Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post.”

The Loop seems to be about logic; if there are posts, while there are posts, display them. Else, simply display else.

To assign certain WP posts to show up only on certain pages, you can use template pages with categories and themes. We copied our index.php and saved it as about.php, then added /* Template Name:About */ at the top of the page. Next, we queried the post before the start of the loop using <?php query_posts (‘category_name=about’);?>, telling php only to grab posts within the About category. After saving the document, you should be able to change the theme of the page in the Page Attributes section on the WP dashboard. This process was repeated for the Portfolio, Contact, and News pages.

Lastly, we opened header.php and replaced the link to index.html with <?php bloginfo (‘url’);?>.

For homework, we should have corrected any mistakes on our HTML portfolio designs, and we need to have our single portfolio piece page layouts done.



THURSDAY, OCTOBER 13

Today, we started working with WordPress plug-ins, specifically Advanced Custom Fields. WordPress extensions and plug-ins are what make it so powerful, extending its functionality far beyond that of a blog. Below are the steps taken in class to set up our image ul’s for our portfolio:

After installing and activating Advanced Custom Fields through the WordPress Plug-ins tab, add a new custom field group named ‘portfolio.’ Within that Custom Fields tab, create three new fields called ‘port_thumb,’ ‘port_medium’, and ‘port_large,’ with each classified as image field types. Now, when you view any post, you should have the option to add images in any of those fields.

In portfolio.php, cancel out the php script pulling in the title and content by adding // before the statements, turning the lines into comments and rendering them dysfunctional. We will be filling in the content of this page with our image ul’s instead.

Since you only want the ul to run one time, start and end it around the outside of the loop. Add the following line of code before beginning your li within the ul: <?php $image = get_field(‘port_thumb’);?> The $, within Advanced Custom Fields, indicates a variable. A variable is essentially creating an empty bucket and filling it with data.

We tested out a layout for a single portfolio page, in which two divs were created: ‘content_right’ and ‘content_left.’ We edited the provided CSS for these divs so that the width of one was 960px, and the other 389px, and added images to the port_medium sections of our WP posts.

Homework: Convert HTML portfolio to php WP site. For a single-scroller, you’ll need a loop for each “page.”

TUESDAY, OCTOBER 18

Over the weekend I worked on converting my site to php. It’s mostly done, aside from adding a carousel to the bottom of my single portfolio pages, but I was having issues with multiple plugins working together.

Today we purchased our domain names (I got mine at namecheap.com) and continued working on our php sites. All I have left to work on is finding a carousel plugin that doesn’t interfere with my slider plugin.

TUESDAY, OCTOBER 25

We didn’t have class on Thursday, so today we worked on getting our sites online.

I used NameCheap to buy my domain name, so I logged into cPanel at smwagner.com/cPanel, and logged in using the username and password provided to me in the email NameCheap sent when I made my purchase.

HTTP, HTTPS, SMP for email, FTP for file transfer (file transfer protocol).

For homework, we have to redo all of our pages, posts, themes, categories, plug-ins, etc., to make our site work online.

THURSDAY, OCTOBER 27

I rewrote all my pages, posts, etc. for my smwagner.com website, and made it a mostly-functioning site. This was all repeating things we have reviewed (and I have taken notes for) in class, so I have no new information to share.

Although the site is functional, and I think it displays all the necessary information in a fairly straightforward way, I think the design and usability leaves something to be desired. I think it’s confusing to have two portfolios, although I agree with the idea of not showing your entire portfolio right on the homepage. I like the rose digital painting, but I almost think it looks too low resolution to be such a large image on a homepage.

My contact section is also a mess. I think I could find a way to display such a minimal amount of information in a much more elegant format.

Overall, it’s okay, but it could be much, much better, and I should reconsider whether or not my layout makes sense. My current status is shown on the next page.



TUESDAY, NOVEMBER 1

Over the weekend, I set up an email account via my website’s cPanel. It’s a pretty straight-forward process: go to your email accounts through the main cPanel page, then fill out the form to add a new account. I set up my Mail application to receive email from my domain name to make checking email as easy as possible. The Mail application prompted me to enter an incoming and outgoing server address, which according to cPanel is https://server114.web-hosting.com.

Class was canceled, so I didn’t do much besides this.

THURSDAY, NOVEMBER 3

We reviewed everyone’s newly published sites in class. I had to fix one of my links that I had forgot to update with php, and I added a link to my resume. Is an arrow necessary on the landing page to indicate that the page extends downward?

Next, we are working on making our websites responsive to smaller screen sizes. The corrections I had to make after presenting my site were very minor, but while I work on my mobile site, I really should consider making some pretty major changes to my whole site’s layout.

TUESDAY, NOV 8

Since we’ve had several work days the past few classes, we haven’t learned any new information, so I decided to look up some blog posts that might be helpful while trying to make a mobile site. I found this article on SitePoint that seemed pretty beneficial.

The article opens by pointing out how such a massive amount of Internet usage is on mobile devices now rather than on desktops, so having a good mobile site is almost a necessity. You may want to consider what kind of people may be using your client’s site, and whether a mobile version really is necessary, but I certainly want to include responsiveness on my portfolio site. The following are seven practices for a good mobile experience:

• Have clear, focused content. I think this is absolutely true of any website, mobile or not, but when you’re on a tiny screen and in a hurry, it’s certainly applicable. Add instructions for swiping if you have to. Make it easy for the user.

• Keep navigation simple. No one wants to click through three levels of menus to find what they’re looking for.• Create fluid layouts. Don’t limit yourself to one specific device width, as there are tons out there. This is a

pain, but realistically your site really should work for everyone.• Design for touch. People have fat fingers, so make sure they can click what they want. Err on the side of

too big for things like menus and links and buttons, and make sure adjacent clickable elements are not too close to each other.

• Keep forms minimal. This doesn’t really apply to my portfolio site, since I’m not planning on including a contact form, but I can definitely attest to how awful filling out mobile forms is.

• Drop the images. Your site should load pretty fast no matter whether on a desktop or mobile device, but I think it’s more expected for a mobile site to load instantly. Don’t make people wait around for your fancy images.

• Leverage mobile specific features. I think this is beyond my expertise, but you can consider things like GPS and gyrometers that are only present on mobile devices.

THURSDAY, NOVEMBER 10

You can sell products on sites like Etsy, if you make things by hand, or sites like CafePress, SpreadShirt, Zazzle, and RedBubble, which will fulfill printed products for you. Zazzle even has a plugin you can use.



We are required to have 12 items up for sale on our completed site. It doesn’t have to be linked in your navigation, but you should at least set up a template to display your products. Try something besides t-shirts, like a mug.

Class was yet another work day, so I removed my extended About and Portfolio pages to streamline my site. I want to figure out smooth scrolling, but plug-ins are the worst and they all hate each other. I plan to make each section of my site full-screen to give better opportunity for a nice typographic layout.

TUESDAY, NOV 15

I worked on adding items to my RedBubble portfolio, and found the code for the widget to display my store on a webpage (viewable under Account Details> Promote). After my junior review, I will work on incorporating the store into my website. newconcept

I created an alternate layout for my site (which, unfortunately, I like much more than my current one), so I may try to update it when I have time. I made each section full-screen, and added more scale in typography, as well as another row of portfolio items. I really like the addition of color, and may try to add a little more in the header to tie the whole site together. Lowercase type seems to add much more personality.

TUESDAY, NOV 22

Due for final, 12/15 by 2:00 p.m.:

Email to Markus- Files uploaded to dropbox

All in a folder with your name: PDF of site (consider iPhone mockups) Code of the theme – zipped. Sections for portfolio, min 12-15 pieces in well designed pages. Name, year, medium, role E-commerce. News (instagram). About + design statement. Email address @ domain name. Resume. Comprehensive pdf of class notes


COURSE NOTES (CODE)

Documents

Transcript of COURSE NOTES (CODE)