Showing posts with label design. Show all posts
Showing posts with label design. Show all posts

Friday, October 9, 2009

Free SketchUp 7.1 without 2D DWG and DXF Import - Ways Around

Recently the new SketchUp 7.1 was released. The most negative surprise from its free version is that import of 2D drawings in DWG and DXF standards has become impossible. Now this option is available in Pro version only.

It was a strange decision of Google to strip off the option: http://sketchup.google.com/support/bin/answer.py?hl=en&answer=161784, but anyway there are some ways to deal with it:
  1. It seems Google feels that they have done something bad and to sweeten the pill a little bit they are offering optional temporary plug-ins: one for Windows and another for Mac... But it can not last forever and with the next version most likely the option will be gone completely.

  2. One of possibilities is to keep an old working Sketchup version around. It can be kept on a hardware computer or on a virtual one. The former costs more as Hardware + MS license, but it should be fine if there is one extra Windows box around , the latter - is just for MS license (I don't know the deal with Mac). It's a pity there is no Sketchup for Linux, so the only option is to run it under Linux with WINE - some people say that it works.

  3. Use another program to import DWG and DFX and then convert it into SketchUp file. I know one such program - Alibre. Alibre is a true dimension/parameter driven 3D mechanical development tool (SketchUp as we know is not) and there is a free Xpress version offered. The free version has some limitations as 5 unique parts in assembly, for example, but it still enough for a small project. I actually prefer to use Alibre for part and assembly development and then if needed I export design to SketchUp format. For the exporting there is a plug-in for Alibre called Alibre3DPublisherForGoogleSketchUp.exe. The bad news is that Alibre stopped providing the plug-in for download from its site officially and seems they do not want to support this option in the future, but it is still available from Alibre FTP libraries: http://www.alibre.com/alibrelibraries/ftp/addons/Alibre3DPublisherForGoogleSketchUp.exe; the good one is that the plug-in is still working fine with the new 12.0 version of Alibre.
Read more...

Saturday, September 12, 2009

Add Atom and RSS Feeds to Blogger Template

Atom and RSS are two similar methods of web content syndication. The idea of feeds is not to check all web sites of interest one by one, but automatically collect updates from them with one tool called "feed reader" or "aggregator", so feeds can be considered as an advanced alternative to bookmarks. Subscribing to feeds really helps to save time and stay informed. Blogger supports both Atom and RSS feeds.

The truth is that nowadays web browsers can work directly with feeds, so a special program is not really needed. For example, Firefox shows available feeds as an icon in the end of the address field:and Internet Explorer - in the Command Bar: Click the icon to open available feeds from the web page, choose the one you prefer and that will take you to a subscription page. Firefox can save a feed as a "live" bookmark which references not just a website at whole but each article individually from it. IE puts it under tab "Feeds" in the "Favorites" window.

While it is possible to subscribe to the feeds directly from a web browser it is still can be good for the sake of convenience to add them to a web page. Blogger has some variants of the feeds - Blogger Help describes them in the "Blogger Feed URLs" article.

For instance, I decided to put Atom and RSS full site feeds in the right top column along with the "Bookmark and Share" button. In Blogger layout all the three buttons are sitting inside one HTML/Javascript gadget - you can check the source of the page to see how it looks like as code.

For more information a great description of Atom and RSS can be found in Wikipedia.
Read more...

Sunday, August 30, 2009

SketchUp - Changing Dimensions

SketchUp is a nice free program from Google for 3D modeling. It is very intuitive, easy to use for the most of it, however there are still some not that obvious operations like, for example, changing dimensions of different shapes to exact value.

The fist what should be said is that SketchUp model is not driven by dimensions which are setup by "Dimension" tool - those dimensions are just text and arrow objects, so one can click the text and change it to any other text not even related to any dimension. Furthermore, in most cases you really do not want to modify them this way - such a change will kill the possibility of the dimension value to track the true size.

The unpleasant thing about changing dimensions is that it should be done different way for different shapes:
  1. For a line segment - right click on it and choose "Entity Info"

    Type a new value in the "Length" field, hit "Enter" and that will make the change.

  2. For 2D shapes - select a 2D face with "Scale" tool

    then select a green box which corresponds to the dimension you are intending to change


    The "Red Scale" field ("red" indicates that the scaling is along the red coordinate axis) in the right bottom corner of the SketchUp window by default is in scale mode. Just type a new exact dimension with a unit (1m in this example)


    and press "Enter" - the dimension will change and the value will follow.

  3. For 3D shapes (mostly the same as for 2D case) - with "Select" tool select a whole shape

    switch to "Scale" tool

    and select a green box corresponding to the dimension you're going to change.


    Type a new exact dimension with a unit (1m in this example)


    and press "Enter" - the dimension will get changed.
For more complicated shapes it is easier to create a reference at required position and then modify the shape with "Move", Push/Pull", "Scale" or other tools to align with the reference. A simple line segment, a guide line or a guide point (created with "Tape Measure" or "Protractor") can serve as such a reference.
Read more...

Sunday, August 9, 2009

Blogger Template with Rounded Corners and Adjustable Column Width

While I liked the general style of the "Rounders 3" Blogger template, I really wanted some things to be modified:


  1. to add the third vertical column to the left of the main post section;
  2. the third column should be consolidated with the main post section in one visual block;
  3. I'd like to keep rounded corners.
All those are definitely feasible, but adjusting column width in the original "Rounders 3" could become some headache.

In the "Rounders 3" rounded corners are defined with background pictures in two wrappers: one for two top corners and the other for two bottom ones.
In this case every adjustment in width of a column would require redrawing of the corner picture to follow the change.

A simple solution to make width easily adjustable would be to employ a 4-wrap structure each wrap with one of the corners.
For that 4 corner pictures need to be at a reachable web hosting.
I uploaded them to Picasaweb - anyway it is the default Blogger's storage for images.

Since I planned to use the corners for all of the blocks in the blog page the template styles should be updated with new classes of <div>

/* Round corners div wrappers --------------- */
div.wrap-1 {
float:$startSide;
background-image: url("http://lh5.ggpht.com/
_6uhqGhAnYS8/SoDG27WBpuI/AAAAAAAAAR8/
7W7XN9gbIKY/s800/RCorner_TopLeft.png");
background-repeat: no-repeat;
background-position: $startSide top;
padding:0;
}

div.wrap-2 {
float:$startSide;
width:100%;
background:transparent url("http://lh3.ggpht.com/
_6uhqGhAnYS8/SoDKOuKcJ3I/AAAAAAAAASI/
FO8GZlpdnGU/s800/RCorner_TopRight.png")
no-repeat $endSide top;
padding:8px 0 0;
}

div.wrap-3 {
float:$startSide;
width:100%;
background:transparent url("http://lh3.ggpht.com/
_6uhqGhAnYS8/SoDKXk4wLwI/AAAAAAAAASM/
vZCNY04HzOs/s800/RCorner_BottomLeft.png")
no-repeat $startSide bottom;
}

div.wrap-4 {
float:$startSide;
width:100%;
background:transparent url("http://lh6.ggpht.com/
_6uhqGhAnYS8/SoDKowtWYZI/AAAAAAAAASQ/
j8KRoSoiN9c/s800/RCorner_BottomRight.png")
no-repeat $endSide bottom;
}
/* Round corners div wrappers END ----------- */

HTML wrapping structure looks like this:

<div class='wrap-1' id='header-wrapper'>
<div class='wrap-2'>
<div class='wrap-3'>
<div class='wrap-4'>
<b:section class='header' id='header' maxwidgets='1'>
.......
</b:section>
</div>
</div>
</div>
</div>

Adding "width" attribute to the <b:skin> (CSS) section:

#header-wrapper {
width:$BlogWidth;
background-color:$titleBgColor;
margin-top:22px;
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding:0 0 0 0;
color:$titleTextColor;
}

and the corresponding variable at the top of the <b:skin> section:

<Variable name="BlogWidth" description="Total Blog Width"
type="automatic" default="920px" value="920px">

makes adjustment of the section width a snap.

It should be said that many people are interested in rounded corners techniques for web design. While my current goal was only to make width of a rounded corner block easily adjustable from a variable but my choice of rounded corners implementation was straight forward - there are many very interesting approaches allowing to create rounded corners with fancy graphic effects as 3D profiles, gradients, reflections, shadows, etc. Recently I bumped on an interesting post with a list of different techniques: "25 Rounded Corners Techniques with CSS" - check it out.
Read more...

Wednesday, July 15, 2009

Adding Favicon to Blogger Template

Favicon or Shortcut Icon is a small picture which appears in web-browser address field, tab and bookmark of the corresponding web site. Blogger has a default icon assigned, but it seems pretty nice to add an original favicon to your blog: it would give a distinctive, easier to remember view to the bookmark and to the web page itself. Adding a favicon is not difficult at all, but the solutions I found on the Web were not quite correct, at least they did not work for my Blogger and web-site.

Considering that a desired image have already been prepared the following issues should be resolved:
  1. A proper internet storage for ico file should be found. While some web browsers are flexible to work with different picture standards (jpeg, png, gif) as a favicon the main limitation comes from IE which can work with ICO images only. On the other hand not many sites including Blogger itself accept ICO files for uploading. I chose 1 Pixel Host - so far it seems working fine. Convert your image into ICO format of 16x16 or/and 32x32 pixels and upload to the host. Have to say: while favicon file probably should stay with the *.ico extension unchanged, it may have any name, not only "favicon.ico". 1 Pixel Host replaces the original file name with a random mess. For instance, mine got the name "yjtxmkry15su2xsg8em.ico", so copy Direct Link carefully.

  2. Reference to the ico file should be added to the blog template. There are direct instructions from Mictosoft how to do it in "How to Add a Shortcut Icon to a Web Page" , but it does not work by some reason neither for my Blogger nor for my home page at ISP (Internet Service Provider). Somehow the problem was resolved by changing position of the "Shortcut Icon" line. Microsoft suggests it like this:

    <head>
    <link rel="SHORTCUT ICON"
    href="http://www.mydomain.com/myicon.ico">
    <title>My Title</title>
    </head>
    To make it work I had to put the "Shortcut Icon" line below the "title" line:

    <head>
    <title>My Title</title>
    <link rel="SHORTCUT ICON"
    href="http://www.mydomain.com/myicon.ico">
    </head>
    Replace the "href" value with the Direct Link to your ICO file, add the line to your Blogger template, save - and that's it. From now the favicon should appear at every page of your blog.
Adding a favicon to a web-page is similar besides that you don't need to find external file storage - upload the picture to the web-site hosting directory and put a proper direct link to it in the web-pages.

If you have any questions regarding favicon you can check out source code of any website which has favicon including mine.
Read more...

Saturday, July 4, 2009

Blogger Template modification for "Read More..."

Some templates for Blogger do not have "Read More..." feature by default, but it is not very difficult to add it the way you like. The idea is to display post differently when it is in the home page or in any of other multi-post pages as a page of selection by a tag, for example, and when it is the page of the post itself. That condition can be checked directly with the page attribute data:blog.pageType: it is equal to "item" when the page shows the post itself.
  1. Backup the original template for the case: Blogger Layout/Edit HTML tap, Download Full Template;

  2. In the Blogger Layout/HTML tap make "Expand Widget Templates" checked;

  3. Find the structure showing a post, it looks like this:
    <div class='post-header-line-1'/>

    <div class='post-body'>
    <p><data:post.body/></p>
    <div style='clear: both;'/>
    </div>

    The line responsible for showing a post is <p><data:post.body/></p>

  4. The original unconditional structure should be replaced with the following one:
    <div class='post-header-line-1'/>

    <b:if cond='data:blog.pageType == "item"'>
    <style>.prepost{display:none;}</style>
    <style>.fullpost{display:inline;}</style>
    <div class='post-body'>
    <data:post.body/>
    <div style='clear: both;'/>
    </div>
    <b:else/>
    <style>.prepost{display:inline;}</style>
    <style>.fullpost{display:none;}</style>
    <div class='post-body'>
    <data:post.body/>
    <a expr:href='data:post.url'> Read more...</a>
    <div style='clear: both;'/>
    </div><br/>
    </b:if>

    This is pretty much the same as it is suggested in the Blogger Help on "How can I create expandable post summaries?" The difference is that I wanted to have three sections in a post instead of only two, so I added a "prepost" section which would be showed only in the pages with post lists, and not on the post page.

  5. In Setting/Formatting tag modify "Post Template" to:

    This part will appear unconditionally.
    <span class="prepost">This part will appear only in the list of posts.</span>
    <span class="fullpost">This part will appear only in the post itself.</span>

    The "prepost" section is useful in cases when post appearance in the list should be different to the "fullpost" section as it is done, for example, for "Big Green Egg BBQ Ribs - the path to success".

  6. Do not forget to save all the changes!
Read more...