Why Web Developers Should Blog

There are a ton of bloggers out there. Who wants to see any more? Well, there are actually a ton of reasons why more web developers should be on their own sites blogging about their experiences.

1. Your Own Portfolio

Show off your stuff! The work that you do should follow you wherever you go. Placing this on your blog is a great way to showcase what you did and how you did it. If you are a freelancer, this is a great place to put your money where your mouth is and display your finest work for all the world to see. Generally, portfolios can be pretty boring. Don’t just show your work. Talk about it. People like to know the back story about the different processes you took and decisions you made.

Why developers should blog

2. Promote Your Products

If you have your own plugins or WordPress themes that you support, it is a great idea to supplement this with a blog. This will allow you to showcase different features that you release to the public and field questions from the comment section. You can also feature different ideas about your plugins and brag about the unique ways people have used it. The more you blog about these things the better as many users will be searching for functionality, documentation, and updates as you continue to develop your products.

Additionally, you may want to share with you readers about the different plugins and products that you use for developing. Every single person has his own preference for developer tools, and this tends to spark up quite a conversation between coders and web designers. Give them a behind the scenes look at what you do and show them how you work.

3. Contribute Back to the Community

Every single developer has gone to Google in search of something that they need in order to fix some code or build something new. Why not contribute back? Believe it or not, there is a huge opportunity out there for coders to in blogging. If you have ever had a fairly specific issue with a piece of code and you can’t find the answer online, you have a perfect opportunity to blog about it. Explain the situation and share it among your fellow coding friends. When you find the solution, update your post explaining the whole process clearly so others looking for the same issue can find your post.

If you are the first to solve this issue, chances are you will be linked back to several times, which will only increase your SEO rankings. This will assist you in your own website efforts as it will organically promote your business and skills online through the Google search page.

Adobe Labs and New Betas

Adobe Labs

Adobe Labs provides you with the opportunity to experience and evaluate new and emerging innovations, technologies, and products from Adobe.

Labs fosters a collaborative software development process. This allows customers to become productive with new products and technologies faster and the Adobe development teams to respond and react to early feedback in order to shape the software in a way that meets the needs and expectations of the community.

At Adobe Labs, you’ll have access to resources such as:

  • Prerelease software and technologies.
  • Code samples and best practices to help accelerate your learning curve.
  • Early versions of product and technical documentation.
  • Forums, wiki-based content and other collaborative resources to help you interact with like-minded developers and Adobe.

If you are forward-thinking and enjoy the challenge of working with the most current technology and products—despite a few rough edges—we are looking forward to working with you in Adobe Labs!

New Betas

Adobe® Dreamweaver® beta

(May 27) New features help teams and individual developers alike reach the next level in performance and functionality.

Adobe Fireworks® beta

(May 27) Create, edit, and optimize web graphics more accurately and faster than ever with the enhanced toolset.

Adobe Soundbooth® beta

(May 27) New tools for video editors, designers, and others who need to accomplish their everyday audio work.

Adobe GoLive Goes Dead

Just incase you may have missed it…

Adobe has announced that it will discontinue its one-time flagship website creation tool, Adobe GoLive. The rumor mill has long held that Dreamweaver, a web development tool that came into the Adobe fold following the 2005 acquisition of Macromedia, would one day replace GoLive and now it seems that the day has finally arrived.

Although GoLive is still for sale on the Adobe site, Devin Fernandez, GoLive’s product manager, tells Macworld that the company believes Dreamweaver is a better fit for today’s web developer.

Adobe has been touting Dreamweaver over GoLive for some time, complete with a “switcher” website dedicated to convincing GoLive users that Dreamweaver was better suited to their needs.

The demise of GoLive shouldn’t come as too great of a surprise considering that the switcher site itself reads: “before purchasing Adobe GoLive 9 software, consider Adobe Dreamweaver CS3, the market-leading tool to design, develop, and maintain websites and web applications.” That’s not exactly the kind of faith in GoLive that inspires purchasing confidence.

If you’ve got a brand new shiny copy of GoLive 9, fear not, Adobe plans to support GoLive users with online tutorials and help, as well as assistance for those that want to migrate to Dreamweaver. There will also be special $200 upgrade price for GoLive users who want to make the leap to Dreamweaver.

GoLive isn’t the first app to bite the dust as a result of the MAcromedia acquisition, previously Adobe retired Macromedia’s Freehand app in favor of Adobe’s homegrown Illustrator CS3.

For more information, go to…

Adobe’s Open Screen Project

The Open Screen Project is dedicated to driving consistent rich Internet experiences across televisions, personal computers, mobile devices, and consumer electronics. The Open Screen Project is supported by technology leaders, including Adobe, ARM, Chunghwa Telecom, Cisco, Intel, LG Electronics Inc., Marvell, Motorola, Nokia, NTT DoCoMo, Qualcomm, Samsung Electronics Co., Sony Ericsson, Toshiba and Verizon Wireless, and leading content providers, including BBC, MTV Networks, and NBC Universal, who want to deliver rich Web and video experiences, live and on-demand across a variety of devices.

The Open Screen Project is working to enable a consistent runtime environment – taking advantage of Adobe® Flash® Player and, in the future, Adobe AIR™ — that will remove barriers for developers and designers as they publish content and applications across desktops and consumer devices, including phones, mobile internet devices (MIDs), and set top boxes. The Open Screen Project will address potential technology fragmentation by allowing the runtime technology to be updated seamlessly over the air on mobile devices. The consistent runtime environment will provide optimal performance across a variety of operating systems and devices, and ultimately provide the best experience to consumers.

Specifically, this work will include:

  • Removing restrictions on use of the SWF and FLV/F4V specifications
  • Publishing the device porting layer APIs for Adobe Flash Player
  • Publishing the Adobe Flash® Cast™ protocol and the AMF protocol for robust data services
  • Removing licensing fees – making next major releases of Adobe Flash Player and Adobe AIR for devices free

For more information, go to…

Flash Elements and Web Standards: UNITE.

Including a flash movie in a basic HTML page.  Sounds easy enough, right?  How about including a flash movie in HTML that is standards compliant AND works with the major browsers used on the web?  If you’re like a lot of designers this probably yields frustration, as the markup for doing such can be a bit of a challenge. 

I came across an article a few months ago written by the author of Dreamweaver MX Web Development, as I struggled with creating my own website.  Drew McLellan provided much insight into the markup of Flash movies (or in my case, a navigation system I had developed) and led to what we’ll consider a coding theory: it works for me until I find a browser that disproves its functionality.

It should be noted that as I code, I test primarily (and most heavily) with IE, Mozilla, Opera, Safari, and Netscape.  I apologize if the explanation following alienates a favored alternative, and I welcome any amendments. 

Because Flash has come equipped with some kind of means of creating an HTML page to display the indigenous movies, the markup for the majority of Flash created HTML sites is very similar.  This hardly seems it should be a standard for embedding movies, as it proves to be quite a beast within the code.  Check this out:

<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000” codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0” width=“400” height=”300” id=”movie.swf” align=””>
<embed src=”movie.swf” quality=”high” width=”400” height=”300” name=”movie” alignt=”” type=”application/x-shockwave-flash” plug inspage=http://www.macromedia.com/go/getflashplayer>
</object> 

Pretty intimidating, no?  In addition it requires that most of the values be declared twice.  Much like me, my coding does not enjoy feeling bloated.  Surely there is a better way.

I’m not sure where it came from, but somewhere in my repertoire there existed an <embed> tag that I assumed would be a good place to start.  From what I understand, this element was developed by Netscape as a way of embedding multiple plug ins and players within their pages.  As I experimented, I did find that it worked in Firefox, but was not supported with IE.  Because <embed> is not standards compliant, it will prevent the page from being validated.  Thus I had to say goodbye to my <embed> tag. 

Without that- we are left with the <object> tag, which conveniently allows for child elements within the tag, and it is supported by almost every browser in regular internet rotation.  While nothing is required as far as attributes, there are several relevant attributes that may be used to reference other elements.  Take your own commercial break now if you would like to research what those may be. 

The attributes are a little dicey to implement, however, as some will simply cause the browser to ignore the object entirely.  This can occur, for instance, with the ‘classid’ tag.  Obviously this defeats the purpose of the entire ordeal.  They can, however, suggest to the browser which player it should use for the object.  A simple swap of ‘classid’ with ‘type’ attribute can tell a browser where to search for a necessary plug in.  I will show this code further down the closer we get to the final theory.

Other attributes that should be stripped for increased functionality include ‘codebase.’  While it does prompt a user to update what they are currently using, it can also prevent the movie from playing.  Thus, another attribute must be leaned on to continue efficient functionality.  To work around this, just add a movie with no intended purpose to the front of the site.  Add the codebase attribute to it, so that it still allows the user to be prompted if their plug in is outdated.  It will only be a few kilobytes of nothingness, but will allow the user to optimize their viewing experience.  Perhaps not the most efficient of approaches, but it will certainly get the job done. 

Adding the data attribute will enable the movie to play, but again we find problems with the existing coding.  IE required that the entire movie loads before playing what is embedded in the page.  So, if your movie of the small variety, you may consider stopping now.  BUT, if you have anything requiring some time to load, you’re not done yet!  Frustrated yet?  Stay with me…

Here is where we stand: 

<object type=”application/x-shockwave-flash” data=”movie.swf” width=”400” height=”300”>
<param name=”movie” value=”movie.swf” />
</object>

This is where Drew adds his brilliant hack to the code. By creating a very small container movie which loads in the first frame of the actual movie, the Flash element should be loading at an acceptable rate.  This requires a bit of coding in Frame 1 of the Actionscript, and a way to call back the movie with: 

    c.swf?path-movie.swf

Regardless of the nature of the Flash element, this method should work.

At last we arrive. And obviously we have eliminated a lot of the bloating our poor coding had fallen victim to in the above coding.

<object type=”application/x-shockwave-flash” data=”c.swf?path=movie.swf” width=”400” height=”300”>
<param name=”movie” value=”c.swf?path=movie.swf” />
</object> 

If you recall the discussion of the child element above, feel free to play with that and add your own image, for instance, for users who do not have the Flash plug in for your page.  It can be amended to the above coding within the <object> tag.
 

Later days!

Adobe Spry Tabbed Panels meets Sliding Door and CSS Sprites

So you like the functionality of the Adobe Spry Tabbed Panels, but their drab appearance doesn’t go well with the overall design of your Web site. Meanwhile, you have been hoping that Adobe would eventually give you the ability to change their appearance with little or no CSS experience. Perhaps I have the solution you have been hoping to find and use on your Web site using the Sliding Door and CSS Sprites technique.

I would recommend using Macromedia Dreamweaver 8 or Adobe Dreamweaver CS3 (or better) with the Spry Framework widget already installed. If you don’t have Spry preinstalled in Dreamweaver, go to it’s homepage and download the extension…
http://labs.adobe.com/technologies/spry/home.html

Spry Tabbed PanelsAfter it is installed, try adding a Spry Tabbed Panels widget on one of your Web pages. The widget will automatically embed code into your HTML as well as create a javascript (SpryTabbedPanels.js) and CSS (SpryTabbedPanels.css) file. Besides the embedded HTML code, javascript and CSS file, you will need to create, or edit, a GIF (spryTabbedPanels.gif) file that would work well with the overall design of your Web site. Place this GIF file in the images folder on the root of your Web site (example: /images/spryTabbedPanels.gif).

You will need to add some additional HTML to your Spry Tabbed Panels unordered list.

Find the following HTML…
<ul class=”TabbedPanelsTabGroup”>
<li class=”TabbedPanelsTab” tabindex=”0″>Tab 1</li>
<li class=”TabbedPanelsTab” tabindex=”0″>Tab 2</li>
</ul>

Add a hyperlink around both Tab 1 and Tab 2. I would also recommend sequentially numbering the tabindex as illustrated below…
<ul class=”TabbedPanelsTabGroup”>
<li class=”TabbedPanelsTab” tabindex=”0″><a href=”#Tab1″>Tab 1</a></li>
<li class=”TabbedPanelsTab” tabindex=”1″><a href=”#Tab1″>Tab 2</a></li>
</ul>

Open the SpryTabbedPanels.css and go to the very bottom of the page in Dreamweaver’s code view. Copy and paste the following beneath all of the original CSS…

/* BEGIN: Spry Horizontal Tabbed Panels meets Sliding Door and CSS Sprites */
/* Revision by Craig Malcolm Petrou of cpetrou.com */
.TabbedPanels {
margin: 0 5px 20px 0;
width: 570px;
}
.TabbedPanelsContent {
background-position: bottom;
padding: 9px;
}
.TabbedPanelsContentGroup {
background-color: #FFF;
border: 1px solid #4E4087;
}
.TabbedPanelsTab {
background-color: #FFF;
border: solid 0 #FFF;
font: bold 90% “Trebuchet MS”, Trebuchet, Verdana, Arial, Helvetica, sans-serif;
text-align: center;
height: 30px;
}
.TabbedPanelsTabHover {
background-color: #FFF;
}
.TabbedPanelsTabSelected {
background-color: #FFF;
}
ul.TabbedPanelsTabGroup a {
display: block;
}
ul.TabbedPanelsTabGroup li.TabbedPanelsTab {
background: url(/images/spryTabbedPanels.gif) no-repeat 0 0;
margin: 0 0 0 -1px;
padding: 0 0 0 10px;
}
ul.TabbedPanelsTabGroup li.TabbedPanelsTab a {
background: url(/images/spryTabbedPanels.gif) no-repeat 100% 0;
padding: 7px 10px 5px 0;
}
ul.TabbedPanelsTabGroup li.TabbedPanelsTabSelected {
background: url(/images/spryTabbedPanels.gif) no-repeat 0 -31px;
}
ul.TabbedPanelsTabGroup li.TabbedPanelsTabSelected a {
background: url(/images/spryTabbedPanels.gif) no-repeat 100% -31px;
}
/* END: Spry Horizontal Tabbed Panels meets Sliding Door and CSS Sprites */

Examples of sites using this updated Adobe Spry Tabbed Panels code include…

Craig Petrou is a Webmaster for Pennsylvania’s largest credit union, PSECU; owner of cpetrou a Harrisburg, Pennsylvania, based advertising and marketing agency focused on web, print and multimedia; and Marketing Director for Tap ‘n Arts Dance Studio.