3.20.2015

new design tutorial website - but this one is not for blogger, it is for HTML5...


What every instructor knows is that the best way to learn something is to actually teach it. This semester, after a break of 3 years, I am again teaching the web design course at our university. Which means that I have to learn new software since just about everything in web design has changed between the last time that I taught the class and now. So, in order to learn Adobe Muse I built a graphic design/web design tutorial website for my students:

2.01.2013

Microsoft "Expression Web" is now freely available for download!

What once used to cost quite a bit is now available for free - which makes MEW one of the few split view web editors available at no cost:

Apparently, the only thing that differs from the full version is that there is no company support for the free product. However, there is a community forum that you can access from the link above; and many tutorial videos can be found on YouTube, here:

Also check out Microsoft "Expression Design" (now also free) which you can download from the link above as well.
:)

.................................................................................................................................  

10.25.2012

Would you like to go for an online web design degree?

A very nice, informative site for all who are interested in pursuing web design on a professional level. Deanna Carter, one of the leaders of this venture says that "the project as a whole presents a wide range of insightful articles for web design professionals, both current and future. The project aims to be an objective, authoritative resource in the ever-changing design space." Check it out here:

................................................................................................................................. 

10.22.2012

great little template gallery

Just came across this, and very nice it is too - although many of them will need to be modified of course. Check it out here: http://www.probtheme.com/

.................................................................................................................................

7.13.2012

trying out the dynamic templates on blogspot



I am trying out the dynamic viewer that blogspot has recently added to their template collection: shapeshifterisland.blogspot.com/

Admittedly, there are a few problems with it - like no link list for example. The post titles are too big and you cannot make them smaller, so I did not give any of the posts titles. The bottom line is, unlike all other blogspot templates, this one does not allow you to edit the HTML. And the advanced customization editor is also very limited in what it can do. Just change colors and fonts basically. As I said, even changing font sizes won't work... Ouch!

And not all the viewing versions look good - the one called "snapshot" looks awful in fact. And you cannot disable them, the visitor gets the choice, which is always listed at the top. (Although I did sort of get around that one by making the type color the same as the background color - teeee heeee).

But still, for something like this that contains photos only, with no big explanations or anything to go with them, it is quite a neat little display system.

.................................................................................................................................

7.02.2011

embedding a wix site into blogspot (or any other type of site)



Wix is great - of course! Embedding a wix file someplace else is even better! The photo gallery above was made with wix, using their photos. I just made a simple little page which is the post width of this site. However, you could get far more fancy and do some really great headers or side bar elements using wix and the custom HTML/Javascript widget here on blogspot.

Unless you have a premium wix site, you will of course have the wix preloader and their little logo on the side, however personally I find these completely appropriate and inoffensive for something which is after all free!

The embed code is given to you as you are publishing the site, shown in the image below:


And below is how the code will look. If you do not want all the social networking stuff which is located at the bottom of a regular wix site, simply remove the black highlighted bits:

<object width="513" height="310" type="application/x-shockwave-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10.0.0"><param name="allowFullScreen" value="true"/><param name="allowNetworking" value="all"/> <param name="allowScriptAccess" value="always"/><param name="base" value="http://static.wix.com"/><param name="movie" value="http://static.wix.com/client/app.swf" /><param name="quality" value="high" /><param name="FlashVars" value="pageId=xBcJA71T1Y8-a&embedFormat=websites&embedID=0b5fc474-1689-4d89-9a28-f51fb88064e7&partner_id=WMGs4POB1ko-a" /><param name="scale" value="noScale" /><param name="salign" value="tl" /><embed src="http://static.wix.com/client/app.swf" quality="high" allowNetworking="all" allowScriptAccess="always"  allowFullScreen="true" FlashVars="pageId=xBcJA71T1Y8-a&embedFormat=websites&embedID=0b5fc474-1689-4d89-9a28-f51fb88064e7&partner_id=WMGs4POB1ko-a" style="border: Xpx solid #yourhexcode;" type="application/x-shockwave-flash" width="513" height="310" base="http://static.wix.com" scale="noscale" salign="tl" ></embed></object><br/><a href="http://www.wix.com"><b>Free website</b></a> - <a href="http://www.wix.com/create/website" ><b>Powered By Wix.com</b></a>

(Note: The border code from the previous post will work just as well with an object embedded from wix. In this case you place it before type="application/etc inside the embed tag like I am showing you above with the bit which is highlighted in red. For the wix file, which I embedded above, I used a 1 pixel border in a medium gray (#888888).

One thing to bear in mind is that if you want a border do not forget to size your output in wix accordingly before you import it to your blog/site. As an example, the post width on this site is 515 pixels, however I published the wix file at 513 pixels in order to accommodate the 1 pixel border around it).

http://www.wix.com/

.................................................................................................................................

6.04.2011

how to add a border around objects embedded into blog posts (such as a google map or a youtube / vimeo video)

If the images on your blog have borders you may wish to have them around other visual material as well, so as to achieve design consistency. Google maps are one such bothersome element, I think. In order to place a border around a google map, look for the embedded code in your post and add what is highlighted in black:

<iframe style="border:Xpx solid #yourhexcode" frameborder="0" width="X" height="X" marginheight="0" marginwidth="0" scrolling="no" src="yourmapurl" width="X"></iframe>



And just tried the same snippet, placed in exactly the same location on a youtube video. Yayy! Same exact result!

<iframe style="border:8px solid #111111" width="500" height="410" src="hhttp://www.youtube.com/embed/rHZUPJji6w8" frameborder="0" allowfullscreen></iframe>



And vimeo too! With this one, although the aspect ratio is the same (3 x 4) as the youtube video, I had to tweak the overall box size a bit since the player configuration seems to be slightly different. But no biggie, done in a second!

<iframe style="border:8px solid #111111" src="http://player.vimeo.com/video/3699840?title=0&amp;byline=0&amp;portrait=0" width="500" height="380" frameborder="0"></iframe>

(Note: One thing to bear in mind is that if you want a border do not forget to size the embedded output accordingly. As an example, the post width on this site is 515 pixels, however I set the video files at 500 pixels in order to accommodate the 8 pixel border around them).

.................................................................................................................................

blogspot stuff: adding a background color to the date header of the awesome.inc template

Find this code in the HTML editor (widgets expanded, of course):
.main-inner .widget h2.date-header span {
  font: $(date.font);
  display: block;
  padding: .5em 15px;
  border-left: $(date.border.size) solid $(date.border.color);
  border-right: $(date.border.size) solid $(date.border.color);
}

Then replace that one with this one:
.main-inner .widget h2.date-header span {
  font: $(date.font);
  padding: 1px;
  margin-left: 14px;
  border-left: $(date.border.size) solid $(date.border.color);
  border-right: $(date.border.size) solid $(date.border.color);
  background: #yourhexcode
}

As you can see I have removed one line and also changed the padding. I also added a left margin in order to align stuff, your values may again be quite different than these. These are things that looked good with my particular design, you may want to go with other values or even keep the block display altogether, in which case the colored area will stretch across the width of the post as a bar.

.................................................................................................................................