Posts in Category "CS5 Web"

May 15, 2013

One educator at MAX and three blog posts: Part 3: Interactive is Active

(I finally got off that airplane. And graded final project and papers for two undergrad and one grad class…and five independent studies and five practicums students. And did graduation and a birthday party and mother’s day. And slept. Oh, sweet sleep! And then I got to this third and final post about MAX. You can read my two other blog posts about the social aspects of CC and Adobe’s move to the subscription model if you missed them. Or not. I split this into three parts in case you want to read a la mode.)

The third aspect of MAX that I want to comment on as an educator and front-end developer is Adobe’s very smart strategy to support some great open-source solutions, better web tools and a good direction for Flash.

In November, I did a talk at the Adobe Education Summit in Toronto that discussed the HTML5 v. Flash debate. I do both. I love both. It’s tough to straddle both worlds and stay up-to-date, but when and because I do, my students get jobs. Not because I’m a great teacher that knows everything (but I am and I do). They get jobs because they not only know multiple solutions but how to evaluate and use the best solution for the challenge at hand.

Flash is not dead. It has, in many ways, the biggest and best support in the interactive arena. You can read the stats Adobe has out there on this. What’s killing Flash is not the reality, but the fear. One instructional multimedia designer at a university with thousands of online students told me that even when he argues that the best content-delivery solution for a specific problem is Flash, administrators just turn off immediately and shut him down.

Nonetheless, Flash still has a place. There are many companies in the Cincinnati area, particularly large companies that do their in-house training using Flash. There are more jobs in Flash in Cincinnati right now than in HTML5. It’s not easy for a large company to retrain their designers and front-end developers and rethink what’s already and still working.

I did see there was a session at MAX on what’s new in Flash Pro. I missed it because I was, ironically, at a PhoneGap/HTML5 session. One attendee told me it was all about Stage 3D, Adobe’s answer to moving gaming performance to the GPU for a faster, better experience. This is a good thing that Adobe has been pushing for a year now, but this year, they made it better by coupling it with Feathers, Starling and Dragonbones. All are free-open source solutions. Feathers is a JS framework for button assets that anyone can read and use. Starling is a great JS framework for 2D gaming with so many gaming methods and classes readily available. Dragonbones is an open source sprite generator that works directly with your assets in Flash Pro. There’s also Away 3D which brings to 3D what Starling brings to 2D. All are accessible. Under Michele Yaiser’s session, we used Flash Builder to construct and compile a game for both web and iPad. With Tom Krcha, we built a platformer with Flash Pro, Flash Builder, Starling, Dragonbones and the Citrus Engine. With the performance boost and multiplatform capabilities, Flash should hold their own in gaming at least for a little bit.

What I found particularly interesting and exciting was Adobe’s support of several free, open-source projects, namely CreateJS and PhoneGap Build. Never has Javascript, HTML5 and CSS3 been more creative. CreateJS offers four libraries and tools for a rich interactive experience on the web. EaselJS capitalizes on HTML5 canvas. TweenJS allows for animation and interactivity. SoundJS and PreloadJS improve on audio and preloading experiences, respectively.

Being a Flash developer, I got really excited when Grant Skinner, founder of CreateJS and CEO of gksinner.com, demoed a game he and his team were developing with CreateJS. When he showed us some of the code, it felt so right. While being true to JavaScript standards, it played on Flash’s conventions. Additionally, unlike many open source projects, the documentation is excellent and there are tutorials and examples to spare.

I just finished teaching my Media Scripting for Interactivity course this week—Flash Actionscripting for gaming—and I’m looking ahead to next spring. While I haven’t ruled out Flash, particularly in regards to jobs in the Cincinnati area as I mentioned above, I am considering the next wave of employer demands and I see frameworks like CreateJS at the forefront.

And, of course, there is PhoneGap Build. Accessible through Dreamweaver CS6, PhoneGap Build is also available online as an open source solution for compiling HTML5, CSS3 and Javascript assets into native applications for iOS, Android, Windows Phone, Blackberry, webOS and Symbian. I’ve played with PhoneGap with my responsive web students last fall and we had fun doing simple apps. This year, we’ll expand on that by tackling the PhoneGap API and device features more deeply. While ultimately maybe not as powerful as native development, PhoneGap gives Media Informatics students who tend toward front-end development a great entrée into the development world, particularly when we share best practices in programming and development with them.

That said, Rainn Wilson may have given the developers a lot of crap during Sneak Peaks, but this is going to be the year of the front-end developer. Mark my words. Or don’t. We’ll talk more about this later.

My last MAX concession: I told Claire Erwin I would blog once a week this summer. I’d say this more than counts for my first week considering I’m only two days out of the semester. I’m taking requests: What is media informatics? What’s in the media informatics curriculum at NKU? What should I do for my communication studies PhD dissertation since my committee keeps rejecting my ideas as too technical? (Seriously, help me out here…) Anyway, happy summer. It’s all good when it begins with an exciting MAX.

9:10 PM Permalink
January 29, 2013

Web development with HTML5

dreamweaver_cs5

Now the current trend of Web development with HTML5 is very popular. But if you want to develop a web site with HTML5, it is not difficult anymore since Adobe Dreamweaver CS5 has additional functions to support HTML5 by the following settings

1. Go to menu Edit > Preferences

11

2. Choose New Document, and then set the value in the Default Document Type (DTD) to HTML5

12

3. Then click OK

That’s all we need to do to create a new file for website using Dreamweaver CS5. When we insert a table, a web item or whatever, it will be in line with the standards of HTML5.

6:59 AM Permalink
June 17, 2012

Adobe Edge – Assistance Needed

I finally included an Adobe Edge file into one of my free-lance Website jobs.  The actual file works great and I don’t have to worry about it not working on iOS devices or the slow load time which occurs with a Photoshop animation file.  Unfortunately, I did come across two issues in which I hope to find help fixing.  Below is a link to a “draft” of the home page (“draft” – still not complete, hence the off alignment and missing text at the bottom) and the two issues which I am having….

Link to draft: http://natickhighwebdesign.com/anania/index_phone.html

Issues:
1.  Border: I can’t seem to remove the black border from the file. I found the two icons which you are able to change the stage color and border color in Edge.  You can see from the left image they appear to be black and gray, I changed them to be transparent and I save the file.  I close the file and quite  Adobe Edge and open everything back up again and the color keeps reverting back to black and gray.  I even tried to change the colors to red rather than transparent and no matter what they revert back to black and gray.  You can see the border when you visit the link above.   I also tried to look in the exported files to remove the border but that did not help. 

2.  Multi-Screen Viewing: I have this page set up to re-size depending on the screen size which the file is being viewed.  If you view it at a tablet size you will notice  the Edge file (scrolling animation piece in the middle) does not re-size itself but rather adds scroll bars.  In the Edge file I tried to change the “overflow” properties but nothing gave me what I needed.  Also in the Dreamweaver HTML file I set width=”100%” and height=”100%” Is there any way to make the edge file re-size itself and exclude the scroll bars?

Any guidance on either issue would be greatly appreciated!

P.S. Happy Father’s Day to all the dads out there!

Best,
Lori Cullen

2:48 PM Permalink
October 17, 2011

Multi Screen Development Issues

A student and I are working together on making my teacher site user friendly for a smart phone, tablet and desktop screen. We have been using Dreamweaver CS5 to accomplish this mission and the Media Query option.  Everything is working out ok (so far) except….The java script code from the mobile site is interfering with the ability to move to a different page on the desktop and tablet site.  We are using the mobile site  and javascript that Dreamweaver developed.  We are using images for the links. For example, when setting up on the desktop/tablet site <a href=”index.html” target=”_self” > the image will not work as a link at all (it acts as a regular image.) If we do not include a target is also does not work .  When we include “target=”_blank” the images do act as links but then go ahead and open up each internal link in a new window which clearly we do not want.  So in summary, the image links on the desktop/tablet file will not work unless we have target=”_blank” which then opens each link a new window (not what we want when they are internal links.)  Any solutions to this problem.  We did try changing the images to text and that did not work either (same issue.)  Any guidance would be greatly appreciated. Lori Cullen :-)

2:29 PM Permalink
November 26, 2009

Thoughts on workflow: Photoshop to Flash Catalyst

freeflow.jpg
I was recently commissioned by Web Designer magazine here in the UK to produce a two part tutorial to create and prepare an interface in Photoshop ready for Flash Catalyst.
I expected the design to port straight across from Photoshop without any problems but there are a couple of design features that didn’t make it across. I thought it would be a good idea to share with you what they are so you can get up to speed quickly. Once you are familiar with the workflow everything is very smooth.
The main problem I had was with text that that had layer styles. Keeping the text as ‘editable’ caused Catalyst to lose any layer styling. Flattening the layer to a bitmap worked okay, but if there was a semi-transparent region – with a drop shadow for instance, then this merged with elements of any layers below. This becomes a problem when layers turn off and on as you move from one page/state to another. The solution – flatten the layer in Photoshop first before importing to catalyst. While this loses the editability of text, visually the design remains intact. So there is a trade off here depending on what you need.
The second problem was with vector shape layers that also have layer styles applied – this gave very similar problems to those found above, but the solution here was much simpler. Check the ‘editable paths and layer styles’ for that layer in the advanced import.
Once the design was into Catalyst it was very easy to apply interactivity and transitions. The main problem seemed to be importing it 5 or 6 times in order to find the right way to get the visual appearance exact. Now as I understand how the design is treated on import, I think this will be very useful software.

1:56 AM Permalink
September 19, 2009

How do I prepare my students for the Adobe Certified Associate Exam?

My students, their parents and our business advisory board are all very excited about earning the Adobe Certified Associate credentials. Of course I want all my students to be successful so I have been searching for resources that will provide my students with the skills and knowledge they need to succeed. Here is a list of what I have found.
Study Guides
Did you know that Adobe has posted detailed study guides for each exam at: http://www.adobe.com/education/instruction/ace/ These are .pdf files with both written tutorials and the sample files for the lessons all wrapped up in one Adobe Acrobat file!
adobe_curriculum.jpg
Adobe Curriculum
Adobe has worked closely with classroom teachers like myself to develop curriculum that is aligned with the ISTE standards and teacher tested.
http://www.adobe.com/education/resources/k12/instructional/
Visual Design is a yearlong, project-based curriculum that develops career and communication skills in print production and graphic design, using Adobe tools.
Digital Design is a yearlong, project-based curriculum that develops IT career skills in web design and production, using Adobe tools.
Adobe TV
It is time that instructors learned about this incredible resource. Adobe has developed hours of fantastic instructional video resources and offers it free through the Adobe Media Player. Check out all that they have to offer at:
http://tv.adobe.com/channel/students-educators
learnbyvideo.jpg
Learn by Video
This is the first resource that I have found that is specifically design to prepare students for the ACA exam. It has a easy to use interface, tutorials that you download to your iPod and well delivered content that will help your students prepare for the exam. I have really appreciated the book that accompanies this because it helps to explain the non-software specific topics covered on the exam. I also appreciate the test at the end of each unit both monitoring my students progress and helping them prepare for the type of exam questions they will face in the real ACA exam.
Classroom in a Book
Of course these books have been around for year providing a great resource for students and teachers. They provide great instruction on the application but you will need to supplement the lessons to fully prepare your students for the exam.
Online Software Training
If you or your students are looking for high quality online training on Adobe software then I strongly recommend the following resources:
Lynda.com: http://www.lynda.com/Member.aspx
Total Training: http://www.totaltraining.com/
Atomic Learning: http://www.atomiclearning.com/
Of course my own software workshops (free): http://www.mountsihighschool.com/directory/_dockeryj/conferences/index.html
Professional Development
Faculty workshops through Knowledge Network Solutions
Master education consultants from Knowledge Network Solutions come to your school to run workshops for faculty on how to use Adobe tools and effectively integrate them into their courses. Workshops are available to higher ed and K-12 institutions.
For more information about the Adobe Certified Associate Exam go to:
http://www.adobe.com/education/instruction/ace/

3:00 PM Permalink
May 28, 2009

New exam study guides for Adobe Associate Certification (ACA)

Adobe just released free exam study guides to prepare students and educators for the new Adobe Associate Certifications. In addition, Adobe Press has released three new offerings in the Learn by Video series.
The free exam study guides include:
- Web Communication using Adobe Dreamweaver CS4
- Rich Media Communication using Adobe Flash CS4
- Visual Communication using Adobe Photoshop CS4
Versions for the older CS3 are also available.
The Learn by Video series includes:
- Learn Adobe Photoshop CS4 by Video: Core Training in Visual Communication
- Learn Adobe Dreamweaver CS4 by Video: Core Training in Web Communication
- Learn Adobe Flash CS4 Professional by Video: Core Training in Rich Media Communication
See details>

2:50 PM Permalink
April 28, 2009

Encouraging Student Success

I supervised a state SkillsUSA web design contest on April 24, 2009 (both secondary and post-secondary divisions) and thought it appropriate to summarize some of my observations. These comments are divided into two separate areas (business professionalism and knowledge of web design and development). Although I see the cup as “half full,” there is definitely room for improvement in both areas. I believe it is up to us as educators to encourage our students to improve in these areas.

On the business side, I must stress the importance of arriving on time for the contest and staying until the end of the contest. As a practicing professional, I am always hoping for a little extra time to polish a site for a client. Those that left early should have used the extra time to improve upon their work. Less than 25% stayed for the optional briefing after the conclusion of the contest where we shared a significant amount of information. One of the main differentiators many employers look for is passion and dedication in their employees. Staying for the debriefing confirms a desire to learn and improve.

It is also important to verify that your work has been properly copied. In many instances, although given the opportunity to check their work on the USB drive used to collect the final entries, very few opened more than the initial folder. Attention to detail is an issue of major importance as several sites had inadvertently pointed to a folder on their desktop (which will not work when the challenges are judged). This leads to broken links to images and CSS (and lost points).

Part of the competition also included an interview. As an aspiring professional, it is permissible to state that you do not know the answer to a given question but would like to find out more about it. Less than 10% of those presented with such a question took that approach (the remainder tried to guess their way through without success).

On the technical side, there was a heavy reliance upon tools (which is fine – provided one understands how to use those tools effectively). Of the tools used, Adobe Dreamweaver CS3 captured the major share (being used by over 85% of all participants). However, it is clearly evident that there is only a superficial knowledge of how to use the selected tool (resulting in errors such as pointing to an absolute location [on the desktop] for an image or CSS document). Likewise, reliance on templates (such as the Spry framework for the JavaScript challenge) is permissible, but one should definitely test prior to submitting (to make certain regions are properly defined in the HTML). Similarly, if there is a challenge to create a two column layout using only CSS, one should not use a Dreamweaver layout table to accomplish that challenge.

The quality of code is important (for example, there is no p2 element; there should not be HTML body elements placed above the DOCTYPE declaration). With the majority of contestants using Dreamweaver, one can easily test for valid code (and the tool actually helps one write such code). Unfortunately, it would appear that this feature was not employed on most challenges.

In my work with numerous business and industry professionals, it is clear they are looking for individuals who have a solid understanding of web standards and can use tools to effectively accomplish tasks. This is why the individual challenges were selected for this contest.

I implore those educating the next generation of web professionals to focus on the following areas to better prepare students for the workforce.

  • Develop a good understanding of web standards (and why they are important – for maintainability of the code, for improved search engine ranking, for increased accessibility and all the other reasons). Tools are important, but students need to know the fundamentals before they can effectively employ those tools.
  • Increase the emphasis on web accessibility and usability in the curriculum.
    Increase the emphasis on professional behaviors (arrive on time, test your work before turning it in, admit when you don’t know something and so forth).
  • Help students develop a solid understanding of the use of the appropriate tool and when one must go beyond a given tool.

It is up to us as educators to raise the bar to help our students succeed in the workplace.

6:14 AM Permalink
October 23, 2008

Changing Lives through Web Design

Sawyer.jpgSimmons Career Center is a little different than most traditional high schools. Simmons is for students who want to learn a trade and get out of school as quickly as possible. Eligible students are at least a year behind and in jeopardy of dropping out of school. Unfortunately, for a majority of our students, poor success in school has also led to other destructive behavior outside of school. Like many other schools, we have gang members, students with criminal records, and students who struggle with poverty. Students who are able to manage their personal challenges and reach the Web Design IV class are required to do a project based exit activity to complete the program. The students act as a web design firm and work with a real client from start to finish. The guidance counselor referred a woman from a non‐profit agency called Advocates for a Safer Community to be our real life example. Before long, we found ourselves learning a lot about choices in life.
A tall slender woman came into the conference room where the students were all seated. We all stood and introduced ourselves and began by discussing how the web site should look and feel. Mrs. Saunders began to pull out news articles and pictures from her bag and spread them across the table. Each article and photo represented a young person who was murdered within the city limits of Tampa, Florida. Case by case, the students, by their own accord, began reading the articles and looking at the pictures. The students very quickly realized their project would have a significant impact on others’ lives. From that very first meeting, our students began to feel really needed.
Mrs. Saunders pulled out a picture and began to tell us how “he didn’t like getting his picture taken, so that was the best she could find”. One student asked, “Who is he?” She replied, “My son”. Mrs. Saunders started the organization after her son was murdered while waiting outside for a friend to come out and play. Mrs. Saunders pulled out another photo of her son. She said,” I like this one because he was not wearing a hat.” I could actually see and feel a change as my students empathized with this complete stranger and accepted her burden as their own.
The meeting was over and the students brought the notes back to the classroom. We began to discuss and build low level storyboards on roll paper. A couple of the students began to get nervous about doing such an important project, but we kept them on it anyway. Everyone agreed the pictures of the victims needed to be improved in Photoshop to make the faces larger and easier to see. We decided to create a Flash file that would have the mission and information in a center box with thumbnail images of all the victims presented. The students wanted every victim to be equally as important on the home page. As the user moved the mouse over the thumbnails, the center would change to a larger picture of the victim. We also included the name, the date of their death, and whenever possible, a word that family and friends used to describe the victim. There were links included to get more information about each case.
Now the hard part, there were nearly three hundred cases. Students began the tedious task of scanning pictures and recreating articles to build the Flash file and sub‐pages. One might think, or at least I did, that the students would eventually return to being unmotivated and lazy, with poor attendance and off task behavior. The opposite was true; the students were giving up their lunch, coming in early, and
finishing work in their other classes so they could work on the website. The seniors’ last day was fast approaching and the students were feeling the crunch. I offered to finish the project so they could enjoy some of the senior events and the last couple of days with their friends and none of my students would accept my offer. The last day for seniors came and there were still some finishing touches we needed to do. The seniors showed up to school as volunteers and worked on the project. When we sat with Mrs. Saunders to review and get her feedback, she was very surprised. One of our students even used Photoshop to edit the picture of Mrs. Saunders’ son. The student removed the hat and re‐created her son’s hair and features from the other photo where he was not wearing a hat.
In nine years of teaching, I have never seen dedication like my students gave to this project. What made the outcome even better were the conversations the students had with each other while working. These students discussed choices, their future and options for themselves. Nine weeks earlier, these same students were talking about who fought whom and their crazy weekends. No one could have predicted that a project used to teach Dreamweaver, Flash and Photoshop could actually change my students’ lives.
Michael Sawyer
Technology Resource Teacher
Simmons Career Center

5:46 PM Permalink
August 12, 2008

Web Galleries

As well as playing with Flash to get my seminar presentation on line in a fashion that sort of reproduced the look and feel of the Keynote in which it was created, I have spent the last couple of weeks getting my end of year exhibition up on our departmental website – a job that I do every summer.
So I thought that I might share the process for any who may be interested.
The site is http://www.artatsidcotschool.org.uk and the link is to ‘current exhibition’ (the site is a bit wobbly at the moment, so if it is down try later…)
If you click on ‘digital’ at the bottom of the page, and ‘Key Stage 3’ at the bottom of the menu, you will get examples of the different galleries that I have created.
For much of the work I simply edited the photos in a combination of Aperture and Photoshop – I guess that I should be using Lightroom, but Aperture came out first…
Most of the galleries were then created directly from Aperture – very simple and very quick to do, but not much in the way of templates. I am sure that I could as easily have used Lightroom, and Photoshop has lots of templates for web galleries – lots of choice for simple web galleries these days. The Yr 7 Land Art is an example of this sort of gallery.
For galleries with lots of images, I used a Dreamweaver plug in called Image Gallery Pack from a company called Project 7. They do lots of cool plugins for Dreamweaver. The menu on the digital page is also from them – Popup menu magic. I really like their concertina plugin too. The Holborne Museum photos are an example of this type of gallery.
The book effect in the Time Capsule project has been created with a bit of software called Banner Zest Pro from Aquafadas – with the images created pretty directly from Acrobat files. The project itself was originally created with Comic Life from Plasq. A slightly cheaper alternative is a Flash plugin called FlippingBook, but this is a little more comlex to use.
Another example of Banner Zest Pro is the kiost effect in the GCSE panel – either Meg or Sasha’s photos, or Holly’s (my daughter…)
And finally the animations and films that have been put together using the template that I created for the seminar presentation, which is done in Flash, with an extra component called TweenMax. I can offer instructions and a template if folk would like – contact me.
ross.wallis@virgin.net
In terms of showing good practice in relation to digital photography, the work of Alex Hughes-Games is spectacular. I have included flipbook versions of his workbook/journals – but in order to keep them to a reasonably sensible size I have had to compromise on quality, so they may be hard to read. Useful on a mac is the alt apple = shortcut that magnifies text (if it is on in preferences). There is also three of the movies that he created with a binary application called mathmap.
The Paris photos of Nathan Al’Shebab are worth a look too. He has created a beautiful website to display them using msql and php.
Because these journals will be really useful to me (and I hope others) in demonstrating good practice to future students, I have also included one as an Acrobat 9 portfolio (thank you Adobe – thank you Steve) The downsite is that it weighs in at 25.6mb.
It strikes me that acrobat – the portfolio, and form creation are a simply perfect digital solution for the International Baccalaureate record book.
- Ross

4:12 AM Permalink