hands-on

GDA Lecture: Adobe Illustrator, a hands-on workshop

Posted on Updated on

On November 18th in the Engineering and Technology Building (ETB) at Wake Tech, Tyler Dockery spoke to the GDA about Adobe Illustrator.

Dockery Vector Demonstration

GDA Lecture: Adobe Illustrator, a hands-on workshop

The GDA opened their meetings with a quiet thank you to Marsha Mills and Tyler Dockery before holding an impromptu discussion on the best days and times for meetings. Shortly thereafter, the demonstration was begun.

Beginning with the basic tools of shapes, then text, and finally the pen tool, we got quickly acquainted with the basics of illustrator. We had a ten minute hands-on demonstration of the pen tool and the subtle nuances of P and S curves. Then we moved into the use of creating outlines with the text tool and also using the pathfinder element with shapes, outlines, and type on a path.

From there, participants pulled down internet pictures of ballet dancers, kung fu martial artists, and children at play. For each image, participants used the pen tool to outline their images. Each person received personal attention, and later discussions were opened for individual question and answer periods.

GDA Presentation: Dreamweaver and SEO

Posted on Updated on

It aint over until the fat man breaks it down

GDA Presentation: Dreamweaver and SEO

On September 16th, Tyler Dockery gave a presention to Wake Tech’s Graphic Designer’s Association on Using Dreamweaver for SEO. Freshmen, Sophomores, and graduating students met in the Engineering and Technology Building (ETB) on Main campus for an hour-long, hands-on demonstration of basic SEO descriptions, as well as its use in a standard web page creation.

After our descriptions and hands-on demonstrations, we took part in discussions of white hat techniques, black hat techniques, and grey hat techniques and how they might be used. We looked at current examples online of sites which use those tactics, and contemplated the use of black hat techniques and how a company might find profit or loss with them.

Ending things on a nice note, we discussed Robots.txt files and how they are used to hide pages from bots, scanners, and search engines. We looked into the robots.txt files associated with several larger websites, http://www.dockerydesign.com and some governmental websites to visit pages expressly forbidden to search engines via robots.txt.

Students were given handouts to take with them.

GDA Lecture: Responsive Web Design, a Hands-on Approach

Posted on Updated on

On Wednesday, February 13th, Tyler Dockery gave an hour-long discussion and hands-on training on responsive web design to the FDA.
Learn about responsive web design with Tyler Dockery

GDA Lecture: Responsive Web Design, a Hands-on Approach

The talk outlined the basics of responsive design, how it differed from adaptive design, and was concluded with a hands-on demonstration in which students could create their own responsive page from a template [ code provided below ].

The Mac Lab was filled and several students remained without computers to discuss the materials and observe the lecture. Q&A after the session covered numerous topics, such as how to use media calls in CSS to reconfigure your responsive pages, and how to organize your content for mobile devices.

He provided two files for the discussion:

First, a word document outlining the basics of responsive design, and giving some great links to websites which students can use to learn more of responsive design basics. The DocX can be downloaded below:

Responsive Discussion Document

Second, a Dreamweaver file with a basic website already coded. Additional CSS has been added BELOW the HTML which will make the page adapt if the screen size becomes 600px or smaller. Cut the commented CSS and add it within the bottom of the <style> tag.

 As this version of wordpress will NOT allow .html files to be uploaded, AND .zip files with .html files insider are also banned, the entire source code will be posted below for those interested.


<html><head><title>Responsive</title>
<style>
body {
background-color:grey;
width: 1024px;
}
.container {
width: 93.75%; /* 960 / 1024 = 93.75% */
height:auto;
margin: 0px auto;
background-color: white;
}
.head {
width: 100%; /* 100% */
height:80px;
background-color: lightgray;
}
.nav {
width: 31.25%; /* 300 / 960 = 31.25% */
height: auto;
float: left;
}
.nav a {
display:block;
}
.content {
width: 66.66666667%; /* 640 / 960 = 66.6666666666667% */
margin-left: 10px;
margin-right:10px;
background-color: lightblue;
height:auto%;
float:right;
}
.footer {
width: 100%; /* 100% */
background-color: pink;
height:80px;
clear: both;
}/* Media Screens Below */</style>
</head><body>
<div class=”container”>
<div class=”head”></div>
<div class=”nav”>
<a href=”#”>Link</a>
<a href=”#”>Link</a>
<a href=”#”>Link</a>
<a href=”#”>Link</a>
<a href=”#”>Link</a>
<a href=”#”>Link</a>
<a href=”#”>Link</a>
</div>
<div class=”content”>Whole biggity-bunch of content</div>
<div class=”footer”></div>
</div><!–@media (max-width:600px) {
.nav, .content {
float: none;
width: 100%;
Height: auto;
clear:both;
margin: none;
}
.nav a {
float: left;
margin-right: 10px;
display: inline;
}}
–>
</body></html>

If you’re interested in learning more about Responsive Web Design, please feel free to come and visit with me in my office, 321C in the ETB building. If you enjoyed this or any presentations, please let us know and let us know what you’d like us to present on in the future!