SMART Board Workshop (Basics) - [revised]

The workshop went well!

Currently developing a follow-up to the workshop to see what the Teachers have created. Need to sit down and nail a date for the follow-up. In the meantime, I have revised the list below of resources that can be used with a SMART Board.

And for those who are wondering on whether or not an iPad can be used with SMART Boards. There is an app which will allow your iPad to speak to your laptop and control many of its features. Connecting the laptop to a presentation system grants you the ability to walk around the room and control things on the screen, regardless on whether it's a SMART Board or not. The app can be found here @ http://doceri.com/

New editions to the Web 2.0 list:

HomeStyler - http://www.homestyler.com/
WeVideo - http://www.wevideo.com/
Splash Up - http://splashup.com/splashup/
Glogster - http://www.glogster.com/
WallWisher - http://www.wallwisher.com/

GeoGebra - http://www.geogebra.org/cms/

Some Web 2.0 technology will include:

JigZone - http://www.jigzone.com/
Body Browser - http://zygotebody.com/ (formerly from Google Labs)
Prezi - http://prezi.com/
SymbalooEDU - http://www.symbalooedu.com/
Scribblar - http://www.scribblar.com/
Interactive Drawing Board - Muro.Deviantart.com/
Animoto - http://animoto.com/?gclid=CLa99Pr8tKsCFSM65QodICltcg
Poll Everywhere - http://www.polleverywhere.com/
MindMeister - https://www.mindmeister.com/
LovelyCharts - http://lovelycharts.com/

A couple of free downloads include:

Personal Brain - http://www.thebrain.com/
Scupltris - http://www.pixologic.com/sculptris/

And to tie it all together I'm inviting the participants of the workshop to join me in EdModo -

http://www.edmodo.com/

Catch you later.

-VegaDMS

Getting Started in Website Design

Hello Everyone,

If you have ever thought about creating your own website, but didn't know where to begin, I have created some online video tutorials to help you build your first website.

I have "unofficially" identified six levels to Web Design & Development. These include, but are not limited to, the following:

6 - Content Management Systems (Joomla, Drupal, Plone, etc.)
5 - Interactive Design & Integration (Adobe Flash & Microsoft Expression)
4 - Template Design & Modification
3 - Visual Design (Extensive knowledge of Photoshop and Code is extremely essential.)
2 - Code (HTML/HTML5, CSS3, XML/RSS, JavaScript, JQuery, PHP, etc.)
1 - WYSIWYG Editors (a.k.a. "Web Editors", "Text Editors", etc.)

Now, I have creating professional websites for more than a decade and I am a coder (HTML, CSS, XML, RSS, JavaScript, etc.) but I am also trained to use web editors such as Dreamweaver. I've used it [Dreamweaver] way back when it was just version 3, no, not CS3, but simply 3 and Macromedia was the company that created the software. And although Dreamweaver is the king of the web design world, its price tag maybe out of the financial reach of many people. Even for students who have academic discounts - it can still be costly.

But, there are alternatives! KompoZer and Amaya are both Free Open Source Software for PC, Mac and Linux.

I'm currently conducting Graduate-level courses which require students to design, create and upload their own creations to the campus servers. Some students are familiar with Dreamweaver and have been encouraged to continue to utilize the multitude of features and flexibility this software has. However, many more students have never experienced the art of designing and creating their own sites.

Mind you, these students are not Comp Sci Majors. So, this experience should be as stress-free as possible. I'm having the majority of them begin at level-one and work with WYSIWYG Editors. For those who gravitate towards more challenging projects, I'll introduce them to some level-two coding. As well as for those who possess some Graphic Design chops, we'll touch on a bit of both level-two and level-three.

To begin, students can download either (or both) Amaya and KompoZer. As I stated earlier, I have created some online video tutorials to take them (or you) step-by-step in creating a basic website using a "cookie-cutter method". Why, you ask? Simply put, Graduate-level students have a lot on their plate. Projects and assignments will usually have deadlines around the same timeframe as everything else - so, this method ensures that the website is done as quickly and is fully functional in a short period of time. This method is not just for students, but for anyone who is looking to design and create their own site for whatever reason.

So onward to designing a website.

1.0 - Make a list of items you want to have on your website. Its good practice to group like items into categories which will later on become the main links of your site.

2.0 - Once the list is completed, create a "storyboard". This "storyboard" will serve as a "blue print" to create your site. It may look like a flowchart, a wireframe, a schematic, etc. The purpose is to visualize how your site is going to connect one web page to another.

This website can help you create you "blue print": Love Charts - http://www.lovelycharts.com/

2.1 - Following the "storyboard", you'll want to sketch out at least two of your web pages. You don't need to have drafting skills to design these two pages, but this is another way to help solidify your vision on how your finalized website will look once its completed.

3.0 - Now, you'll need to download a web editor. Both amaya and KompoZer are free (and legal) to download. Adobe Dreamweaver is available for a 30-day free trail. Believe it or not, Microsoft Frontpage is still kicking around in various circles, even though Microsoft killed it in Novemeber of 2006. Why is it still around? Well, it used to be free.

Downloads:
Amaya - http://www.w3.org/Amaya/
KompoZer - http://kompozer.net/
Adobe Dreamweaver - http://www.adobe.com/products/dreamweaver.html

3.1 - Some have asked about creating a website using online tools such as Wix.com, Weebly.com and Webs.com - and although they do serve a purpose, they are still very limited in their features, functions and flexibility.

To learn how-to work with any of the software mentioned here, I have included the links to my YouTube Videos along with descriptions for each.

[A] Installing Software onto a Jump Drive -
http://www.youtube.com/watch?v=hK0UwMiCEIs

Description:

Educational Technology -
I'm demonstrating a video on "how-to" download and install software onto your jump drive. The reasoning behind this is a simple one - You may go into a computer lab/Internet Cafe, to do some work, only to find that the software you need is not installed.

With this method, you can sit on virtually any computer; plug in your jump drive; launch the software; do your work; and then save it!

In this demonstration, I'm focusing on properly installing KompoZer - a Free Open Source Web Design Editor - onto my jump drive. However, the software can be whatever you need it to be, The final stages of the video is a bonus, since the video shows you how to SAVE back to the jump drive.

[B] Create a web page in Amaya and save to jump drive -
http://www.youtube.com/watch?v=aFwRmcrgxrI

Description:

Web Design: Beginner Level - Amaya is a Free Open Source application for creating websites. A variety of tools that most people will find intuitive. This module will demonstrate how-to create a basic web page and then save it to a jump drive.

[C] Create an entire website in Amaya -
http://www.youtube.com/watch?v=--7gZcxXcOE

Description:

Web Design: Beginner Level - Amaya is a Free Open Source application for creating websites. A variety of tools that most people will find intuitive.

In this module, we'll create a basic website. First up, design one "perfect" page. This page will have a HEADER, NAVIGATION BARS, space for the BODY of text (which comes in later), and FOOTER information.

You can, at this time select a background color. If you decide to go with a dark background, select light-colored text. (i.e.: Black background works with text that are white, yellow or even orange.

We then use "SAVE AS" to save the page as the different web pages for the site. Important to remember to give each individual page its own TITLE. The TITLE is what appears in the upper left-hand corner of all browsers.

In the next module, we'll go over linking the NAVIGATION BARS.

[D] Create External Links -
http://www.youtube.com/watch?v=tV2DZdJXixI

Description:

Web Design: Beginner Level -
This module will demonstrate how to create external links to other websites from your own site. This demo uses the following software: Dreamweaver CS3, KompoZer, FrontPage.

Chapters:
FrontPage = 0m14s || KompoZer = 2m01s || Dreamweaver = 3m24s

[E] Creating Internal Links in Dreamweaver -
http://www.youtube.com/watch?v=pch7rmH4ZOY

Description:

Web Design: Beginner Level -
In the module, we will cover the following:
1.0 - Create additional web pages
2.0 - Create internal links with the Navigation Bar
3.0 - Copy & Paste the Navigation Bar
4.0 - Save the web page you are working in

This demonstration uses the following software: Dreamweaver CS3, KompoZer, FrontPage

Chapters:
1.0-Create a New Page = 0m33s || 2.0-Save The Page = 0m59s || 3.0-Linking Your Navigation Bar = 4m04s || 4.0-Copy The Navigation Bar = 5m43s

[F] Adding TITLES to Web Pages -
http://www.youtube.com/watch?v=sRPuRijhHmw

Description:

Web Design: Beginner Level -
This module will demonstrate how and where to create the TITLE for your web page(s). This demo uses the following software: Dreamweaver CS3, KompoZer, FrontPage.

Chapters:
FrontPage = 0m16s || KompoZer = 1m46s || Dreamweaver = 2m32s

I am currently working on additional video tutorials to supplement the course content. If the information found here is helpful to you or if you have questions, comments and/or suggestions, please feel free to post your thoughts here in the comments or on YouTube.

To quickly find all these videos on YouTube, in the search box, type in the following: VegaDMS (It is cap-sensative.)

Thank you very much. Til next time...

You have been Teknolized!
-VegaDMS

SMART Board Training

Currently Designing and Developing a series of hands-on workshops around the SMART Board. SMART Boards are a HOT topic in K-12 schools, so it's only right to have some resources on how-to utilize this technology in the classroom.

First workshop will be in a few weeks. We hope to address issues and concerns from those who have little or no experience with the boards. We also want to know what more experienced individuals are doing to bring this highly innovative technology into their classrooms.

We are going to provide an overview, a brief demonstration, then escort the participants to their classrooms with our own student/teachers to assist (and learn) in this workshop. I will be bringing in some newer technology to showcase within the SMART Boards interface.

I will also set-up an on-line environment similar to Facebook, but only accessible by the participants of the workshop.

Additional details as the dates get closer.

Til then...

-VegaDMS

3D Objects in Photoshop CS3+

Hi Everyone,

Its been a while.
I've been busy with re-organization and re-scheduling things around for the coming Fall 2011 semester as well as for my company. Any way, let's jump right in with a sweet little workflow to go from creating a 3D Text to importing it into Adobe Photoshop CS3 or newer.

This goes out to all of my Graphic Designers, Comic Book Creators, Animators, Motion Graphics Designers and anyone who is interested in creating 3D Graphics and using Photoshop.


Keep in mind the following ONLY works with Photoshop CS3 and UP.


Steps:
1.0 - Create, say, some text in any 3D program.
Use: Maya, 3DS Max, LightWave or Blender (which is FREE to download).


2.0 - Give your text a 3D look via the EXTRUDE tool.
You'll need to become familiar with the interface of the software you're working with.


3.0 - Set-up the lights around your text.
I usually set-up a three-point lighting scheme - sometimes more lights depending on the complexity of the design. I found 3-pt lighting works well on 3D static text.


4.0 - Save your work in its native format. Then EXPORT your work as an OBJECT (.obj).


5.0 - Open Photoshop CS3 or higher.
I've tried in Photoshop CS2 and the tools needed to pull off the following are not available in this version.


6.0 - Open a new canvas with the desired aspect ratio.
Your aspect ratio is based on the final outcome of your design. In other words, what do you wish to do with the finished design? Will it be wallpaper? What is the aspect ratio of your desktop? If you're going to use it in video - what was the video shot in 4:3 (standard) or 16:9 (widescreen)?


7.0 - Once this new canvas is open - go to LAYERS > 3D Layers > New Layer from 3D File Browse for the OBJECT (.obj) you saved earlier.


8.0 - Your 3D Text will now appear on the screen. Look at your LAYERS palette. You'll notice there is a small icon within the icon of the layer. Double-clicking this small icon will give you a 3D Toolbar at the top of the Photoshop interface.


9.0 - With these new tools, you will be able to manipulate the angle of your text and position it exactly how you want it.


10.0 - There are several ways to add color to your 3D text. One is to place your mouse on the larger icon in the LAYERS palette, hold down CTRL and click to select the entire 3D Text.


10.1 - Add a new layer. Select a color and apply it. Use the BLEND modes til you see something you like.

[design sample]

Let me know what you think of this feature and I'd like to see some of your creations.


Currently designing 3D/Photoshop workshop for the 3rd or 4th week of the semester. If you have any ideas for a workshop, please let me know - A.S.A.P. since I have to request the lab very soon.


Thanks.


-Vega

FOSS Presentation - Follow Up

Hi Everyone,

Yesterday's presentation on FOSS (Free Open Source Software) went extremely well! What should have been an hour long discussion turned into a 2 hour one. Three camera shoot and an audience full of Educators and Techies in the studio at MountainLake PBS.

Everyone did an awesome job. The Production crew gave us (my wife and I) full freedom without time restrictions. The "Q&A" session ran throughout our discussion as we covered a variety of software, demos, training sites and resources. Also, we discussed how-to bring some older technologies back to life in the K-12 environment.

PBS will begin editing the presentation next week and they're looking to have it streamed online.
Most cool!

I'll post when the video becomes available.

If you have any questions about FOSS, please drop me an email.

Have a great weekend! I have to get back to work now.

-VegaDMS

FOSS Presentation

Hi Everyone...

Tomorrow I'll be conducting a presentation on FOSS - Free Open Source Software - for local area Teachers, Administrators and Technology Personnel at out PBS Station. Although this workshop is not open to the general public, you can still find out more about FOSS from my workshop web page:
http://faculty.plattsburgh.edu/edwin.vega/education/workshops.html

I'm looking to conduct another FOSS workshop on campus as part of the Digital Media Workshop Series this semester that will be open to all students, faculty and staff. Details are forthcoming!

I hope this information is helpful to anyone who wishes to learn more about FOSS.
As always, please feel free to contact me if you have any questions about this.

-VegaDMS

New Site...

Hi Everyone...
My new Faculty site is up and running!
Check it out and drop me some feedback.

http://faculty.plattsburgh.edu/edwin.vega/

Thanks.
-VegaDMS

Re-structuring and Re-organizing!!!

Hi Everyone,

A New Year and a New Outlook will bring all of this together. Let me explain: this blog is on Technology, and what I'm working on will bring together this blog and Facebook into the classroom as far as learning tools go.

On the list of re-vamps is my Faculty website at SUNY Plattsburgh, which is under a major overhaul. I'm working on bring in some new coding methods to the design and development of the site. Dubbed, "Project-9", this version of the site is the stepping stone for next version of the site which will include such technologies as HTML5 and CSS3 to name a few. Project-9 does have some CSS3 components as well as heavily coded CSS2 to allow for transparent backgrounds, built-in Google Calendar, JavaScript (for dimming the lights), and more. The site is also connected to social media.

Coupled with a Facebook site set to "officially" launch for the Spring 2011. We've already tested the site during the Fall 2011 semester with our first "Digital Media Workshop Series" for our Anime Club members and "Digital Media Design" for our Teacher Education students in both the Graduate and Undergraduate programs. The site seems to be gaining momentum. I have brought in SlideShare.net, slide-show presentations to the FB site along Animoto video capabilities. This is turn allows our students to create, design and share their work among their peers as well as keeping everything mobile. I would like to bring in Prezi and Scribd to FB.

To continue with the whole mobile movement, I'm currently experimenting with Twitter and LinkedIn. The purpose is to keep the active learners engaged an connected as well as expanding on the aspects of networking via social media.

The Facebook sites focus is also on Technology and Digital Media. It lists resources from the Open Source Communities as well as provides information and tutorials from a variety of other websites.

Another project I'm currently involved with is to design our very own "interactive whiteboard". Details to this will come soon, since the project is to be showcased just prior to January 21, 2011. No pressure.

So, these are some of the reasons why I've been away from this for too long. Now, I don't have any excuses - I'm working on a way to tie Blogger, WordPress and the FB site together.

That's it in a nutshell.

Til Next Time...

-VegaDMS