Skip to content

Tutorials – Intro to Web

INET 1890: Introduction to Web Design (3 credits)   ==

Mon, Tues, Wed, Thurs from 1:00pm –1:50pm

Click here for Our Syllabus

The Big Presentation List —  FINAL — WED DECEMBER 14TH @ 8AM – 10AM

=================================

Your Presentation should be atleast 4 minutes… You might want to try using Prezi?

2 – Demonstrate in atleast 1 example how you manipulated the code.

3 — Show drawing outlines of your initial plan, the areas that you looked for research… Who are you building your site for… Why are you building it?

4 — Discuss your motive… what stylistic path did you take when you started out with your design?

For example: I wanted to move my header bar askew, because I was trying to

5 — Explain an emotion you tried to create…

For example: I wanted to create relaxation with the image of the sky… As the sky makes the viewer feel open space …

Here are some descriptions of the psychological effects:

http://www.precisionintermedia.com/color.html

========================================================================

First Things First… How was your thanksgiving?  How was your Black Friday?

Second thing is Second… Our final class is on the 14th of December… Your current work… will culminate to your final projects and final works!!  Be sure to give it your all.. and persuade us of its magnificence in your presentation/demonstration on the 14th of December beginning at 6pm!!

Class in the coming weeks will continue to demonstrate how to  add attributes that will enhance your pages…  you will be provided time to work on your projects in class… Don’t pass up the opportunity to discuss your sites with your fellow classmates and with me …  This is your new web developer community… ;)

======================================================

Ok… Lets get back in the mood of html and our content management systems with the creation of a favicon…

What is a Favicon?

Favicon’s are the little images… with the funny file ending… (.ico) … that appear to the left of the URL in web browsers.  The primary function of the favicon is for that little (.ico) or image to display in the bookmarks bar of individuals who have come to enjoy the bounty gifts that of your site has to offer… and ofcourse those individuals bookmark your page… to return later…

The mighty favicon also displays in browsers that are tabbed for browsing (almost all modern browsers), this will help you identify between each tab..

The First Implementation of Favicons

The first implementation of favicons was in Internet Explorer 4, and it required you to upload the file favicon.ico to the root of your web server which would in turn load that image into the bookmark section in IE4. Once other browsers started implementing this favicons a better technique was needed. It came by way of HTML, you could now link to the favicon.ico which means you could have multiple favicons for one website or be able to place the favicon wherever you please on the server.

======================================================

Here are some nice favicon examples:

http://www.colourlovers.com/blog

http://csstux.com/

http://www.youtube.com/

http://www.zukool.com/

——————————————————–

1st… DOWNLOAD –  the header.php… from the twenty ten theme…

(File path: Your site folder -> Wp-Content -> Themes -> Twenty Ten -> header.php )

download

2nd… UPLOAD — the header.php… into your child theme directory…

savetheheaderjpeg

======================================================

DISCUSSION:

– WHY DO WE NEED TO UPLOAD A DUPLICATE FILE INTO OUR CHILD THEME FOLDER?

– WHAT WOULD HAPPEN IF WE DIDN’T ADD THE DUPLICATE HEADER.PHP FILE TO OUR THEME?

– IF WE BUNGLED UP THE THE HEADER.PHP FILE… HOW COULD WE REFRESH OR REBOOT OUR SITE CONTENTS?

YOU CAN CLICK ON THIS LINK TO RECEIVE THE TWENTY TEN HEADER.PHP FILE

======================================================

YOU WILL RECEIVE A VARIATION OF A 404 ERROR.!!.. WHAT IS A 404 ERROR?

error58

========================

3rd…   ADD THIS – little bit of text into your new header.php… above the closing slash of the header…

<link rel=”shortcut icon” href=”http://www.buyadoo.com/adapter/wp-content/themes/Adapter/favicon.ico”/>
<link rel=”icon” href=”http://www.buyadoo.com/adapter/wp-content/themes/Adapter/favicon.ico” type=”image/x-ico”/>

place this chunk of code before… the closing of the head ( </head>  )

WHERE IS THE CODE SEARCHING FOR OUR FAVICON???

You can click here to download a file with the php code above…

========================

4thTIME TO GET CREATIVE — Now we need to create our favicon…

Extra points for creating a cool favicon on your own in photoshop or gimp…

A. make sure to use the save for web feature…

B. make sure that your file size is smaller than 5MBs

The second option would be to find an image that you like on the web to to use as your favicon…

Note… be careful not to choose an image that is too detailed…

=============================

5th… Ok… now that you have your image … go to the favicon generator at…

http://www.favicon.cc/

faviconwebsitejpeg

—————————

As you can see there are quite a few options to create your favicon…

… you can draw your own pixels to create a favicon…

… or you can upload import your image…

importimagejpeg

I recommend choosing the option of shrink to square icon… because we are dealing with a very small surface area… the image will become rasterized… etc…

importfilejpeg

… but you are welcome to try either option and decide your choose…

—————————–

you will notice that the choice you choose will be demonstrated at the top of the page… to provide you with an example…

faviconpreview

———————————

if you are happy with it … go ahead and download…

downloadfavicon

———————————–

6th Step... RETURN to your cpanel… and … UPLOAD –  your favicon.ico  to your child theme folder…

faviconuploadjpeg

—————————————————-

7th and Last Step… be sure that your file path in the header.php corresponds to the file path of your newly uploaded favicon!!  The file path is the http .. reference url…that is pointing to the .ico file…

<link rel=”shortcut icon” href=”http://www.buyadoo.com/adapter/wp-content/themes/Adapter/favicon.ico”/>
<link rel=”icon” href=”http://www.buyadoo.com/adapter/wp-content/themes/Adapter/favicon.ico” type=”image/x-ico”/>

You can click here to download a file with the php code above…

—————————————————-

CONGRATS!!!  YOUR SITE NOW HAS A UNIQUE URL IDENTITY!!!


==================================================

OK… HOW ABOUT WE TAKE A 10 MINUTE BREAK…

IS ANYONE CONFLICTED ON THE SITE THEY WOULD LIKE TO CREATE OR ARE THERE ANY DISCUSSIONS ABOUT THE STYLE THEY ARE THINKING OF?

AND… NOW FOR SOME MORE MODIFICATION TO OUR SITES…

relax_1

==================================================

IT’S WIDGET TIME!!!!

==================================================

Widget Technology is over 25 years old… They are essentially small compartments of customized desktop and web content… Other names used for widgets are:  accessories, a web part, a gadget…

We are now participators in the largest content management platform on the web… Our platform is used by 14.7% of Alexa’s Internet’s “top 1 million” websites..  Alexa is the global leader in analytics that provides an web analysis of the web demographics…

For web development and for our purposes… the advantage is that we are participators in a huge community that houses users, programmers, and designers… and when there are new features desired the community often offers them up for everyone in the community at no charge…

Can some people provide some examples of the widgets or accessories that we can add…??

WHAT IS A WIDGET AREA?  HAS ANYONE FOUND SOME FUN USES FOR WIDGET AREAS?

HAS ANYONE PLAYED WITH THE TEXT BOX WIDGET… AND ADDED THEIR OWN HTML CODE?

http://willgay.me/

http://www.vermilliondragon.com/

The programmers and designers offer up these bits of code, accessories, etc… and we can add them as a widget to our already burgeoning system…  ITS LIKE BLACK FRIDAY… ALL OVER AGAIN!!

black_friday_ads_562723074

Currently, where are the widgets locate?  How would you like more locations to take advantage of this powerful feature…

======================================================

LETS LEARN HOW TO CREATE MORE WIDGETIZED AREAS…

HERE IS THE POWER OF SOME WIDGETIZED AREAS USED ON OTHER SITES…


====================================================

WORKSHOP — Adding More Widgetized Areas

=============================================

1.  First Step… we will learn how to add new widgitized areas on our site… ooooh yah!!  For Review:  where are the widgets located?   How do I add more widgets to my page?  Has anyone used the text box widget?

————————————————————————————-

2.  Second Step… Lets download the header.php file and move it over to our child theme.  Why should we be careful with the header on the wordpress content management system?

…..  You will see if we take the same approach as we did with footer.php … we will get a blank screen…

————————————————————————————-

YOU CAN CLICK ON THIS LINK TO RECEIVE THE TWENTY TEN HEADER.PHP FILE

Note — if you did the excercise above… you should already have this file…

————————————————————————————-

3.  Third Step….  add some code to our functions.php file….

// Area 7, located in the header. Empty by default.
register_sidebar(array(
‘name’=>__(’Your Widget Area’, ‘Adapter’),
‘id’ => ‘my-widget-area’,
‘description’ => __(’The primary widget area’, ‘Adapter’),
‘before_widget’ => ‘<li id=”%1$s” class=”widget-container %2$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h3 class=”widget-title”>’,
‘after_title’ => ‘</h3>’,
));

if (!function_exists(’theme_special_nav’)) {
function theme_special_nav() {
//  Do something.
}

You can click here to receive a zip file of the above code to place in your functions.php file

————————————————————————————-

4.  Change the ‘Adapter’ tags to the name of your childtheme…. so if your child them is named CasperCollege… you would want to change within ‘Adapter’ to ‘CasperCollege’

————————————————————————————-

5.  Be sure to either type this code yourself or go into Buyadoo.com’s –> adapter child theme and take the code file, or you can use the links below the code to download… as… you don’t want any syntax to be working improperly…

————————————————————————————-

6.  Now add this little chunk of code to the header.php file that we just created and placed in our child theme…

<?php

if ( is_active_sidebar( ‘my-widget-area’ )) {

dynamic_sidebar( ‘my-widget-area’ );
}
?>

You can click here for a php file with the code to the side bar…

————————————————————————————-

7.  Time to Check in on the Backend… open  your wp-admin backend, –> Appearance —> Widgets

widgets1

…and you will see the new widget area… a place where you can place widgets in your header….

YourWidgetArea

————————————————————————————-

8.  Place a text box in that new widgetized area… and for example I placed the casper college banner there:

textbox

————————————————————————————-

9.  There you go… you have just added a header widget area!!!

headerwidget

————————————————————————————-

—  Homework/Challenge:

1.  Add other features  to the widgetized area…

2.  Try to figure out how to move the header widget around… hint… style.css

3.  Add another widget to the header area… or to another area on your page…  me oh my !!!

Extra Credit…

Add a dynamic plugin to the widget area… something with jquery, lightbox, etc…

=============================================


==================================================

November 9, 2011
——————————-
– Ok… lets automate a thumbnail on our front page…

———————————————————————

1. — make sure that you have a thumbnail set

———————————————————————

2. — create a new file called function.php in your child theme folder…
add this chunk of code…

<?php
add_action(’after_setup_them’, ‘magnitude_setup’);
function magnitude_setup() {
//Sets the dimensions for the thumbnails displayed on the homepage
add_image_size(’home-post-thumbnail’, 370, 160, true);
}
<?php
add_action(’after_setup_theme’, ‘adapter_setup’);
function adapter_setup() {
//Sets the dimensions for the thumbnails displayed on the homepage
add_image_size(’home-post-thumbnail’, 600, 300, true);
}
?>

———————————————————————

3. — copy loop.php from the twenty ten theme and paste it in your child theme folder…and call it loop-index.php

———————————————————————

4.– look for the code
<?php/ * How to display all other posts */?>
– Right after line (137) … and < div class = “entry_content”>
enter the following
<?php the_post_thumbnail(’home-post-thumbnail’);?>
———————————————————————

5.– Now return back to your main page and view your changed thumbnail … :)


==================================================

LETS TAKE A STEP BACK AND ANALYZE WHAT WE ARE DOING…
WE WILL BREAK UP INTO GROUPS… AND I WOULD LIKE EACH GROUP TO READ OVER THE LINK AND THE ARTICLE FROM THE LINK…

AND BRAIN STORM TOGETHER AND DISCUSS THE WAYS IN WHICH YOU WOULD USE THE ADVICE IN THE ARTICLES TO MAKE YOUR SITES BETTER…


==================================================

HAPPY HALLOWEEN!!!

Halloween Spirit at the Aquarium


=====================================================

1. HOW DID THE RE-CONFIGURING GO ON YOUR SITES SO FAR?

2. WAS ANYONE ABLE TO FIGURE OUT THE EXTRA CREDIT ON FIXING THE HEAD BANNER… WILL YOU SHOW US?

3.  WAS ANYONE ABLE TO FIGURE OUT HOW TO DO SOME REPOSITIONING?  TELL US ABOUT YOUR EXPERIENCE AND SHOW US?

4.  OK … LET’S FIND OUT HOW TO FIX UP THE FOOTER…

======================================================

FOOTER

1st Step — go into the twenty ten them folders and download the footer.php file onto your desktop…

2nd Step — upload the footer.php file into your child theme folder … the same folder that stores your style.css file… for example my folder is the Adapter folder…

3rd Step — go into the footer.php file and move the

<?php
/*
* move the wrapper up under the main…
*/
?>
</div><!– #wrapper –>

4th Step — Now you are ready!!  You can go back into your style.css and begin to play with the footer and its contents…

#footer {
background:none repeat scroll 0 0 #242424;
color#837E76;
margin: 60px auto;
padding: 0 60px;
width: 860px;
height: 300px;
}

5th Step — check out the tricky little colophon — and figure out what you want to do with it…

======================================================

======================================================

In Class Assignment:

– Change around the Positioning of the objects on the page and add your Own Header

– Work on the Footer  and the Widget contents in the Footer…

– Find out something creative to do with the colophon…

—————————————

Super Extra Credit  — Get Rid of the WordPress Titling :)

—————————————

==================================================

==================================================

======================================================

OCTOBER 26TH  –  WORDPRESS WORKSHOP… FOLLOW THIS LINK…

========================================

– we will first install wordpress on our sites by using the cpanel

– next we will take a little tour of wordpress

– a discussion of the layout of wordpress

===================================

Now we will begin adapting our own theme

===================================

— we will check out the file folders in the cpanel

— refresher on firebug for firefox

— we will begin learning how to create a child theme for own own personal adaptation of the wordpress themes….

===================

Ok… first things first…

1.  Lets take a look at our Cpanel!! — Go ahead and log in … and together we will look where the files are ….

2.  There are 3 main folders:

WP- Admin == back end stuff … what is that?

WP – Content == themes… like the one will create (adapter)

WP- Includes == the stuff for the front end

3.  Without closing your Cpanel, make a new browser window or tab and log into your front end panel (via an internet browser like safari/firefox/etc.) and log into your WordPress Site … do you know how to find it?  do you remember your passwords? Make sure to place it in a place you can always get to it….

4.  Notice how the folders in the theme folder are also provided under your selections on the back end….

– Go ahead and switch the themes and look at the changes…  How are the themes designed (For example:  Header, Sidebar, Footer, Body, etc?

——————————————————————————————–

Ok… cool… now we have an idea about the relationship to the cpanel and front end…. do we?

5.  Next step…. lets download the plugin of firebug to our browsers if you have not done that already…

http://getfirebug.com/

— can someone come up to the front and show us how firebug works?

——————————————————————————————–

6.  We are going to use firebug in order to bring code from our wordpress theme/site, change it and build a new theme… OUR OWN THEME!!  Alright!!  — Otherwise known as a child theme… Why is it called a childtheme?

– First lets go to our cpanel again… go to our themes folder… and create a new folder…

– I created Adapter

7.  Now go inside Adapter … and page called: style.css

8.  On that page… we are going to begin typing a comment area that identifies our theme:

/*
Theme Name: Adapter
Theme URI: http://www.justinhoffman.net
Description: A child theme of Twenty Ten
Author: justin
Author URI: http://www.justinhoffman.net
Template: twentyten
Version: 1.0

*/

9.   Next we are going to add a link to the twenty ten theme:

@import url(../twentyten/style.css);

10.  Now we can use firebug … go to our previous wordpress site …take some of the code and add updates to the previous theme… for example I chose to change the  Menu

/* Menu :D
————————-  */

#access {
background:#580000 ;
}

#access a {
color: #888888;
display: block;
line-height: 38px;
padding: 0 10px;
text-decoration: none;
}

11.  You can keep doing this to change all sorts of different parts of the site…  go ahead and try yourselves… Feel free to go to the Adapter folder on the buyadoo server and take the code from the style.css or you can take the entire file…

====ASSIGNMENT / IN CLASS LABORATORY =========================

How to do it?  Make a new folder in the cpanel …

— link that folder when you create the style.css  file …

— and change your theme to see the result…

1. use this example of wordpress to find code to change…

2. change it yourself with your impressive html skills …

3. or use this link here which is a basic example of the twenty ten theme that we are modifying….

===========================================================

HOMEWORK:  Remember… yes you will be graded on participating in the activity … but don’t worry about the appearance… worry more about playing around with learning about design implementations…

===========================================================

==================================

OCTOBER 19TH – PROJECT PRESENTATIONS OF YOUR CSS SITES

3 PAGES — CONTROLLED BY CSS

3 BUTTONS

BUTTONS PERSONALLY CREATED IN PHOTOSHOP, GIMP, ETC…

1 ANIMATED GIF

==================================

SEPTEMBER 28TH — CSS PROJECT WORKSHOP :

3 PAGES — CONTROLLED BY CSS

3 BUTTONS

BUTTONS PERSONALLY CREATED IN PHOTOSHOP, GIMP, ETC…

1 ANIMATED GIF

—-  TODAY’S CLASS —

– We Will Learn how to make a pop- up link

Here is a good link that provides a tutorial to how to create html and java pop-ups

==  it will work like the link on this class page

This is a good site with code to create a pop up when the page starts…

==  it will work like this class page

–  We Will Learn how to make an animated gif

==================================

SEPTEMBER 14TH

Creating a Button with CSS —

Check out our two pages on the server:

ex2.css

and

www.buyadoo.com/page3.html

Krystiana’s Presentation References for brushes:

http://browse.deviantart.com/resources/applications/psbrushes/

==================================

SEPTEMBER 7TH — CASCADING STYLE SHEETS

What are Cascading Style Sheets??? HMMM??? Here is a short definition and historical background with references and Links…

Here is a link with the code to make a really basic site !!! please read the basic html document tutorial carefully Here is a link with the code to make a site a little more advanced !!! please read the more advanced code ….

NOTE: YOU MAY HAVE TO RE-WRITE SOME OF THE QUOTATION MARKS IN THE CODE…

www.buyadoo.com/myfirstsite.html

www.buyadoo.com/mysecondsite.html

Here is a link with the code for a css site —  !!! please read the basic css document and basic html document … you will need two files!!

www.buyadoo.com/class2.html

check the file:  ex1.css  – on the server

Here is a link with the code for a little more advanced css site!!! please read the css document and 1page.html document and 2page.html document… notice how easy it is to make more documents with the same style!!

www.buyadoo.com/page1.html

www.buyadoo.com/page2.html

check the file:  ex2.css  – on the server

—– for more styles, shapes, images, etc… check out W3 Schools reference for CSS :

http://www.w3schools.com/css/

What happens if I place an image on the server?

www.buyadoo.com/image.png

making your pictures “web safe” in photoshop and using photoshop for design

Here is a cool grid layout manager for css…

===============================================================================