Posted by
Stephen A
| Filed under
New feature, General
Over the last month, we have been working on a new and exciting premium feature that will enable users to edit images with a proper image editor.
It's has been a hell of a rollercoaster ride trying to get the image editor into production. Our first prototype had major issues with the speed of rendering the image on IE. Out went that one and the dev team decided to take a new approach, this time developing and testing primarily within IE, as developers, we all know how scrupulously painful that can be, unfortunately it was the only way we could guarantee that we did not commit too much development time and effort into prototype that would have to be scrapped yet again.
The second prototype performed relatively well, speed wise within IE 7 and was even surprisingly snappy in IE8. The only gripe we had was with IE 8's dynamic positioning of absolute elements, it just does not like repositioning fixed elements once it has been rendered. We hacked away, back and forth and after a few more days, we were able to get a satisfactory result.
Eventually, we were able incorporate the prototype into the portal, fine-tune it and test with various image sizes, types and formats.
How does it work?
As of this release, when an image tag matches a snippet definition, it will attempt to use the image Editor as opposed to a WYSIWYG to modify the image. The image editor can be used to modify the image if:
- It goes without saying; a src attribute is specified.
- The src value has to be relative to your website URL. Hence if your website address is www.websitename.com and you store an image called family_pet.jpg in a folder called “images", the recommended src attribute should be “/images/family_pet.jpg". You may also specify an absolute URL path of http://www.websitename.com/images/family_pet.jpg
- It is recommended that you specify an alternative (alt) value for the image
- It is also recommended that you specify an image “width" and “height" value within the image tag, for precise image preview rendering.
Image editor features
Fallback editor
We do appreciate that some users would haply rather use the WYSIWYG editor to edit images. Also there might be times when an image may not be accessible due to in-sufficient access rights on your FTP space. Hence, we have still provided the option to edit an image with the configured WYSIWYG rather than the image editor.
Happy Snippeting
|
Monday, August 30, 2010 8:00 PM
Posted by
Stephen A
| Filed under
New feature, General, Tutorial
A new basic editor has now been deployed on the latest build of the portal. A popular demand amongst designers was the ability to automatically use a basic editor as opposed to a rich text editor when editable content within HTML tags such as <h1>, <h2> etc are parsed.
Hence, from now on, editors would be presented with a Text area editable regions are detected within such tags.
Take for example the following HTML fragment.
Welcome to our site
A text area will be used as the default editor for the content "Welcome to our site"
Please browse through our site
The website pre-configured Rich text editor will be used to edit the content "Please browse through our site"
We are also working on a configurable option on a website level which would allow Designers to turn this feature off if it’s not needed.
Happy Snippeting
|
Thursday, May 20, 2010 11:40 AM
Posted by
Stephen A
| Filed under
New feature
SnappySnippets has now been in public beta for the past 6 weeks now and overall, feedback has been very positive. I would like to take this opportunity to thank everyone who went through the closed beta stage programme for helping us further shape the direction of the service.
One of the few features that many of you have requested is a built-in coherent support ticket module within the portal, which will enable your editors to raise issues that they need assistance with.
A few designers and developers pointed out that the current support mechanism is slightly confusing for two main reasons
1) It Is not integrated within the portal, hence users have to leave the editing environment to raise support tickets.
2) Tickets were not associated with websites.
With the new ticketing system which will be put in place on the next build scheduled for the 22nd of April, your editors are now able to raise a support issue within the portal, and an email is sent to the editor’s designer/developer alerting him/her of the new ticket status. This process creates a forum thread-like discussion between you and the editor who raised the ticket. We would also be looking to update the documentation for this new functionality.
As a designer, you may then add comments to the ticket update the status or request more feedback.
It is worth noting that this is a very simple but effective ticketing system, the idea, as with all other modules within the Editor is to keep it simple and straight forward, hence you won’t be seeing many advanced bug tracking features on it.
Here are some of the features of the new ticketing Module
1) Filter tickets by websites.
2) Filter tickets by status (Raised, Investigating, Parked, Resolved).
3) Subscribe/Un-Subscribe to email alerts for a ticket.
New SnappySnippets editor to designer Support module
Please not that this module does not currently support ticket raised by designers for the attention of SnappySnippet’s technical support group.
Happy Snippeting
|
Monday, April 12, 2010 11:11 PM
Posted by
Stephen A
| Filed under
Tutorial
One of the fundamental features of SnappySnippet is the ability to define your client’s
editable content regions within an HTML document in a flexible way. SnappySnippet
niether restricts you to using a specific CSS class nor make you upgrade to a premium
account for you to use this feature.
One of the fundamental features of SnappySnippet is the ability to define your client’s
editable content regions within an HTML document in a flexible way. SnappySnippet
niether restricts you to using a specific CSS class nor make you upgrade to a premium
account for you to use this feature.
At the design stages of SnappySnippets, we were very wary of the notion of over-engineering
this feature, after all, as designers and to some extent developers, do we really
want to start messing around with XPath queries?
As with most advanced features within SnappySnippets, they are there purely for
your convenience should you need to use them at any stage. As a default, we have
assumed that most designers will use class="snippet" within their document which
is in my opinion, the most semantically correct way to tag up your HTML. However,
believe it or not, by the time you start to configure your 3rd or 4th web site for editing, a simple
class="snippet" identifier may not cut it.
This tutorial features many of the ways in which you can define editable regions
within your HTML document, and will eventually replace the XPath section within
the designers documentation guide.
I'll try not to run the risk of boring you with too much technical jargon, basically,
The SnappySnippets engine uses XPath v1.0
to traverse your HTML document. When you configure a website within SnappySnippets,
the field titled X-Path for snippets with a default
value of //*[@class="snippet"] represents the
XPath query with which SnappySnippet will use to retrieve your editable content
regions.
Intro: The default and probably the most common
way to configure your editable regions within SnappySnippets
In your HTML documents: assign a class of snippet
to your HTML elements
In your SnappySnippet website configuration form, use the XPath:
//*[@class="snippet"]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Welcome to Total Design</title>
<meta name="keywords" content="total,designs" />
<meta name="description" content="total design for your web pages" />
</head>
<body>
<div class="snippet" title="Our mission intro">
Our mission is to provide you with an expertise service ...
</div>
<div class="snippet" title="Our customer promise">
Our Customer Promise sets out the standards of service...
</div>
</body>
</html>
NB : It is worth noting at this point, as mentioned
earlier in this post, you do not have to use "snippet" as your content region class
identifier. Assuming you wanted to use a class of "totaldesigns", you can simply follow the steps below:
In your HTML documents: assign a class of totaldesigns
to your HTML elements
In your SnappySnippet website configuration form, use the XPath:
//*[@class="totaldesigns"]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Welcome to Total Design</title>
<meta name="keywords" content="total,designs" />
<meta name="description" content="total design for your web pages" />
</head>
<body>
<div class="totaldesigns" title="Our mission intro">
Our mission is to provide you with an expertise service ...
</div>
<div class="totaldesigns" title="Our customer promise">
Our Customer Promise sets out the standards of service...
</div>
</body>
</html>
Intro: This particular method is mostly useful
in a scenario when your editor has medium to advanced HTML skills and he or she
is unlikely to make a dog's meal out of your design template. You basically want
to give the editor editing control over a chunk of HTML as opposed to mini snippets
within the document.
In your HTML documents: assign an id of snippet
to your HTML element
NB: Although SnappySnippets will happily parse your document
if you specify more tham one id attribute with the same attribute value within the
same HTML document, this is semantically in-correct and will cause your web page
to fail the W3C markup validation
In your SnappySnippet website configuration form, use the XPath:
//*[@id="snippet"]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Welcome to Total Design</title>
<meta name="keywords" content="total,designs" />
<meta name="description" content="total design for your web pages" />
</head>
<body>
<div id="snippet" title="Our mission intro">
At total designs, our mission is to provide you with the Internet
tools and services that will grow your business. The core of our
operation is the offering of technical solutions and Internet
marketing consultation, along with the graphic design and
writing expertise that will elevate your website to a new level
of effectiveness and functionality.
<br />
At all stages of your web solution - flexibility is our hallmark. If you
have your own writers, designers, or marketing personnel with which you
wish us to collaborate, we are happy to develop a project plan that will
meet your needs and exceed your expectations.
</div>
</body>
</html>
Intro: You wish to just make
ANY HTML element that has a specific attribute editable, for the sake
of this argument, say "title"
In your HTML documents: assign an attribute of title
to your HTML element
In your SnappySnippet website configuration form, use the XPath:
//*[@title]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Welcome to Total Design</title>
<meta name="keywords" content="total,designs" />
<meta name="description" content="total design for your web pages" />
</head>
<body>
<div title="Our mission intro">
At total designs, our mission is to provide you .....
</div>
<p title="How can we help you">
We have many ways we can help you depending on your problem.
Find the description below that matches your current.....
</p>
</body>
</html>
Intro: You wish to make all HTML elements of
a particular element type editable, for the sake of this argument, all
<p> tags
In your HTML documents: ensure that you have at least one <p> HTML node
In your SnappySnippet website configuration form, use the XPath:
//p
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Welcome to Total Design</title>
<meta name="keywords" content="total,designs" />
<meta name="description" content="total design for your web pages" />
</head>
<body>
<p title="Our mission intro">
At total designs, our mission is to provide you .....
</div>
<p title="How can we help you">
We have many ways we can help you depending on your problem.
Find the description below that matches your current.....
</p>
</body>
</html>
Intro: You wish to make the nth
HTML elements of a particular element type editable, for the sake of this argument,
the very first <div> element within the
HTML document
In your HTML documents: ensure that you have at least one <div> HTML node
In your SnappySnippet website configuration form, use the XPath:
//div[1]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Welcome to Total Design</title>
<meta name="keywords" content="total,designs" />
<meta name="description" content="total design for your web pages" />
</head>
<body>
<div title="Our mission intro">
This content will become editable .....
</div>
<div title="How can we help you">
This content will NOT become editable
</p>
</body>
</html>
Intro: I have been recieving a lot of enquiries
with regards to this method and it seems to be a very common scenario. You already
have a class assigned to an HTML element, however you wish to make the element editable.
In your HTML documents: Append your class attribute value to your already existing
class eg class="bodyText snippet"
In your SnappySnippet website configuration form, use the XPath:
//*[contains(@class,"snippet")]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Welcome to Total Design</title>
<meta name="keywords" content="total,designs" />
<meta name="description" content="total design for your web pages" />
</head>
<body>
<div class="missionStatement snippet" title="Our mission intro">
At total designs, our mission is to provide you .....
</div>
<div class="helpStatement snippet" title="How can we help you">
We have many ways we can help you depending on your problem.
Find the description below that matches your current.....
</p>
</body>
</html>
Intro: Using custom attributes, again this is
not recommended as introducing custom attributes within your HTML document makes
it anything else but HTML.
In your HTML documents: Append your custom attribute and it's value eg
editable="true"
In your SnappySnippet website configuration form, use the XPath:
//*[@editable="true"]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Welcome to Total Design</title>
<meta name="keywords" content="total,designs" />
<meta name="description" content="total design for your web pages" />
</head>
<body>
<div editable="true" title="Our mission intro">
This content will become editable .....
</div>
<div editable="false" title="How can we help you">
This content will NOT become editable .....
</p>
</body>
</html>
In this post, I have attempted to give examples on various ways in which designers can attempt to tag up their editable regions in an HTML document within SnappySnippets.
Happy Snippeting
|
Saturday, February 06, 2010 7:20 AM
Posted by
Stephen A
| Filed under
General
I’ve been collecting user feedback on SnappySnippets for the past few days and overall, generally feedback has been very positive. I received an interesting comment form an ex-colleague of mine who was participating in the closed beta testing stages of the service who asked me why I regard SnappySnippets as a Content Management System; after all, its main functionality is to enable end users to edit defined sections within their web pages. In his opinion, this basic functionality does not warrant the Tag name "CMS" per se
While the term CMS is most synonymous to the idea of being able to define templates, assign them to pages and drop components within it with more advanced features such as workflows, content authoring and such, the basics of the operation I find is still the creation and manipulation of content that are visible to the end user.
A lot of thought went into the process of writing the site content for SnappySnippets.com and one of the key phrases we thought about emphasizing on was “snippet management system” as we also did feel at that time that it was not entirely a content management system.
After doing a bit of research and goggling, I cam across this article by Greg Johnson who simply categorises such systems as "Remote content editors" (RCE). I personally think this is a closer descriptor of the service compared to content management systems as it emphasizes does what it says on the tin; "a system that enables you to edit your remote content".
Just before I got on the phone to the Marketing Guru I get free advice from to ask him whether we should start branding the service as an RCE, I paused for a minute and thought to myself, as SnappySnippets.com gives you both the ability to clone pages and even edit the entire documents structure, one can argue that it does have the basics functionality of a fully fledged CMS, it is to a designer what a designer wishes for a simple CMS to be, it incorporates the features of remote content editors whilst giving you more functionality if required.
In the next few weeks, I will be publishing a few articles regarding customising your editable regions on a web page, which elaborates on various techniques that you may use to define what part of your web page is editable.
Happy Snippeting
|
Wednesday, January 20, 2010 4:30 PM
Posted by
Stephen A
| Filed under
General
The team at SnappySnippets are pleased to announce that the first stages of the closed beta testing has commenced. So far we have had very few issues, which is always a good sign. We are targeting 50 core designers to launch on the portal and so far, we have had over 20 people sign up. This is great given that we are yet to broadcast the release of the service to major technology blogs.
If you are interested in participating in the closed beta testing program, you can get an invite code by making a request on the invite page.
In addition to issuing beta invites to access the portal, we can also create an FTP account space for you to test with should you require one. A demonstration site would also be pre-installed within the FTP space to get you started quickly.
What we intend to achieve within the next few weeks in the beta testing program are your suggestions and recommendations. We want the system to work for you and we would like to hear about any issues of features that you would like for us to consider including within the roadmap of the service.
All approved beta testers will be given a free premium account for at least 2 years commencing from the commercial launch date of the service.
Happy Snippeting
|
Sunday, January 17, 2010 3:49 PM
Posted by
Stephen A
| Filed under
General
We are looking for volunteer translators within the community for the following languages
Spanish
Portuguese
French
German
If you would like to help, kindly get in touch by posting a comment on there or use the contact section of the website @ http://www.snappysnippets.com/contact/
|
Sunday, October 04, 2009 12:00 AM
Posted by
Stephen A
| Filed under
General
It’s been a little over 7 months now since my mates and me at Impulsion technologies thought of the idea of providing a simple, lightweight hosted CMS platform. After experimenting with various technologies along the way, we have all finally come to the conclusion that technology itself is just a by-product of our intrinsic nature as developers. Don’t get me wrong, technology plays an inherent role in the stability of an online offering; however, with the vast armour of tools available for providing software as a service these days, the middle tier is starting to take a back row and becoming less and less important.
What we have learnt over the past months is that Business analysis is "key". Understanding the problem domain you wish to tackle before delving into too much code is vital. We first started off by writing a few thousand lines of code within the first few weeks, again our intrinsic developer mindset kicking in overdrive, and then we realised that the first front end prototypes we produced were neither the most visually appealing nor user friendly designs that deserved the enterprise level backend we were about to build upon. Our first control users (many thanks to Adeola Oyegbite and Sarah Jones) who where semi tech savvy users themselves just did not "get it" at first. That sent a very strong signal and we had to take one or five steps backwards to asses our primary goals for the product offering.
In no particular order, these goals are
1. Usability - Should be dead simple for your editors to use, almost full proof
2. Affordability - You should be able to afford a pro account that does not break your bank account.... basically, a pint of beer money (in the UK it is! :)
3. Highly configurable - You should be able to turn features on or off when not needed, furthermore, advanced features should not get in the way of mainstream features... they are there when you need them, but you should not have to notice then if you do not wish to use them
4. Security - Your data should be highly secure
After assessing these goals, we decided to just use the right technology for the right job; out came the fancy flash prototype, it would have been costly and a nightmare to maintain, out came the windows presentation foundation (wpf) interface, it's adoption rate on the web is still abysmal to say the least, in came well established standards and technologies. We've implemented technologies such as the ExtJs JavaScript library as it provides you with desktop like widgets which are highly customizable and scalable, the right database for our persistence layer, and .net web services which is not so great in terms of flexibility "BUT" we will be looking to port it over to WCF very very shortly.
We want this product offering to be a product of the people, hence any major new features that we intend to write for it will be put forward to the designer community. The direction of the service has to be driven by you; after all, it is your product. As we roll out the Alpha stage of the product, please kindly report all bugs and ask as many questions as you need to using the contact section of the website.
Happy snippeting!
|
Saturday, October 03, 2009 12:00 AM