By the 'Prezi-like animation' I mean that your canvas rotate/zoom/shift to the tiny little portion in a sequential manner.
P.S.: The question is not limited to AE. Any animation sw would be relevant.
Some suggest HTML5, but that targets web design (my purpose is only creating some animation for self entertainment.)
Still, if HTML5 is an option have a look at layerJS, an open source library which can create Prezi-like web interfaces. It even allows multiple layers if you need some elements to move independently of each other.
It's super simple: just add a stage div put one or more layers in and add as many frames as you want between you can have zooming, panning and rotating transitions.
The HTML code would look like this:
<div data-wl-type="stage">
<div data-wl-type="layer" data-wl-layout-type="canvas">
<div data-wl-type="frame" data-wl-name="frame1" data-wl-x="100" data-wl-width="1000" data-wl-rotation="45" ...>
</div>
<div data-wl-type="frame" ...>
</div>
</div>
</div>
Yes.
You could do it manually. A little tedious, but you would place your text layers in 3d space and push your camera around. You will spend a lot of time tweaking everything like the things in the visible things in the background and the easing moves into and away from the text.
Sure Target is free and could be a big time saver. You basically use it to square up the camera to null objects and it takes a lot of the tedium out of the process, even though you have to spend a few minutes up front to figure out how it works.
http://www.videocopilot.net/tutorial/energetic_titles/
Webpgr does offer this. It's HTML5 based and comes with a Photoshop-like online editor. It's in beta but you can request an account.
Related
I'm working on web application and our team wants to make it more accessible. In particular, we want to do a better support for people who can't see (using screen readers).
One of the popular solutions is NVDA. After reading their doc here, it's not clear - do they support a custom markdown?
Can I use some attributes/tags/metadata so that NVDA read stuff differently? For example:
Google will be read as 'Google'. Can I decorate it in some way, so that it will be read as 'Link to Google'?
Thank you.
There is no such thing as a custom mark-up for screen readers. Well, there is something like that, I'll tell you about it below.
Basically, when you try to make your web site more accessible (a very good thing to do, btw!), you should minimize your impact on screen reader users. By "impact" I mean that your goal should be that your blind user would see just the same thing as a sighted user, but as the web site developer, you give him/her this ability to see, navigate, open, click and so on, and so forth.
There is a way to customize the layout, though. It is called WAI-ARIA. You can do lots of crazy (and smart) stuff with it, it is great and mighty, but the first rule of the fight club, I mean, WAI-ARIA practices is:
If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property
to make it accessible, then do so.
— from here.
I.e.: If you can not to use ARIA, don't use it.
Let's take your example with the link to Google: you want your blind user to see the "Google" text and to understand that it is a link, right? Well, I'll tell you what you should do to achieve this. And you need to do... drum roll... nothing! NVDA, or JAWS (which you definitely should test with, it's a major player!), or TalkBack on Android, or VoiceOver on Apple devices, will say: "Link Google", or "Google link" (depends on the screen reader and on particular user's settings). that's all.
Of course you might have done this (but don't do it in any way!):
<span aria-hidden="true">Google</span>
See how crazy (and mighty!) it is? Thus you're telling the screen reader that you need your custom text to be read and hide your main link text (just in case; I've just tested with JAWS, everything works even without the aria-hidden attribute, so it's merely for an example).
However, if your link is a span with some fancy styling, ARIA is your everything: you just say <span role="link">, and your users will get a pleasant experience instead of trying to find which word to click.
And a last example: in Bootstrap there are lots of decorations like
<i class="fas fa-arrow-up"></i>
If they are on a link (and mostly they are), some screen readers such as JAWS would report two links, one with text, and one empty, just "link". In those cases it is really good to hide this stuff from screen readers:
<i class="fas fa-arrow-up" aria-hidden="true"></i>
NVDA, like JAWS, VoiceOver, Talkback, and several others, is a screen reader. A screen reader is software that a low-vision or no-vision user will use to access their computer. If you write semantically correct html, then your app will automatically work with a screen reader.
To create semantically correct html, the W3C has created a set of guidelines, call the Web Content Accessibility Guidelines (WCAG) that outlines things you can do to improve your web application to make it available for the greatest number of people.
It includes things like having alternate text for images, having labels for form elements, using well-worded text for links, and using the proper html tags for semantic elements, such as <h1> for headings, <ul> for lists, <table> for tables of data, etc.
When native html semantic elements can't be used, for whatever reason, then there are ARIA attributes and roles that can be applied to give screen reading software a clue as to what type of object you are trying to convey.
So, there is no markdown for NVDA or any other screen reader. You just have to be smart in your use of html.
Let me explain a little bit what I'm working on :
I am an intern and I have to create a friendly website back-office for people who are not really used to computer.
Thus, the back office management has to be as simple as possible ! I already put a lot of drag & drop in my plugins, the front-end is cool etc.
But a problem subsist :
the templates and placeholders.
I managed to create a demonstration template page with multiple placeholder, some in full width and some in 6 columns, 4 columns etc.
So I have something like that :
<div fullwidth>
{% placeholder "title1" %}
</div>
<div 6 columns>
{% placeholder "text1" %}
</div>
<div 6 columns>
{% placeholder "Picture1" %}
</div>
<div fullwidth>
{% placeholder "text2" %}
</div>
Each place holder has default plugin, in order to helps users.
Ok it works great.
But what happen now if we want, in the website back-office, move the placeholder "text2" before the 2 six columns ?
It seems to be impossible to manage it dynamically.
If you have used wordpress, you must have experienced how easy is it to manipulate content, if you want to move a Title to an other location juste drag and drop it etc.
Then I was thinking about the multiple column, by default you would have a multiple column with one 100% width column. Up to you to reduce it.
But the problem is that it is complicate to integrate and modify.
And it is absolutely not friendly-user !
Well, in case I am not very clear, I need to manage placehoder positions dynamically or have something to manage multi columns in an easy way for the user !
I am totally lost and without idea about it.
Have you already experienced it ? What kind of option did you choose ?
It would be really great if you could share some point of view with me :)
By the way,
thank you in advance for reading my post.
EDIT :
Have you seen this : http://www.mir.de/django-cms-demo ? This is perfectly what I want to have. But I don't know how they are doing it... And it is in German language...
Have you tried djangocms-cascade? I allows one to create placeholders on the fly and it should allow to order thus created placeholders.
According to its github page:
DjangoCMS-Cascade allows web editors to layout their pages, without having to edit Django templates. In most cases, one template with one single placeholder is enough. The editor then can subdivide that placeholder into rows and columns, and add additional elements such as buttons, rulers, or even the Bootstrap Carousel.
I would like to recommend:
https://github.com/divio/djangocms-column
or
https://github.com/divio/djangocms-grid
Its a lot simpler compared to djangocms-cascade.
I'm having a hard time coming up with a solution for this problem.
I'm building a WYSIWYG designer, for micro sites. The templates for these microsites will be supplied by an intermediate user, and the end-user will manipulate these templates. So, there are really two groups of users of the app: template-buiders, and end-users. Think MailChimp.
This means my Ember app will start off with a template from a template-builder, say
<h1>An awesome product</h1>
<h2 contenteditable="true">Subtitle away</h2>
<p>{{#if optionA}} One thing {{else}} Another thing {{/if}}<p>
and the end user, having chosen this template, will then be able to customize it. There are a few requirements:
There will be static, uneditable portions of the page (h1 above)
There will be static, editable portions of the page (h2 above)
There will be options that affect the layout, style, etc. (p above)
So far, my attempts have lead me to build a handlebars helper that takes a string and a context, and returns a rendered template. This is because the above template will actually be coming over from a database, as a string - remember, it's user-generated.
That means, in my application's template, it would look like
<div class="preview">
{{preview-userTemplate template context}}}
</div>
where
template: '<h1>An awesome product</h1><h2 contenteditable="true">Subtitle away</h2><p>{{#if optionA}} One thing {{else}} Another thing {{/if}}<p>',
context: {optionA: true}
Now, this actually works, in the sense that it will update if context is updated, so I can add controls along the sides for the end-user to manipulate those options. So I have those (more of less) under control.
It's the WYSIWYG content editing that is giving me trouble. In the above template (from my template-builder users), I want them to be able to add contenteditable="true" to places in their templates where the end-users can change the content.
Now, these changes need to be saved. Ideally, I would be able to retrieve the instance view's template back from the DOM, after the inline edits have been made. Is this possible? The original {{data}} placeholder would need to be preserved.
Alternatively, I could make a view/component, so the template-builder would do something like this:
<h1>An awesome product</h1>
{{#editable}}
<h2>Subtitle away</h2>
{{/editable}}
<p>{{#if optionA}} One thing {{else}} Another thing {{/if}}<p>
but this seems like it would require a good deal of finagling to get the edits to stick - I'm not even sure right now how I'd go about it.
What do you guys think? Is there an easier solution that I'm overlooking? Thanks for any pointers!
Morning,
I wanted to find out if its possible to make a change to the current foundation 5 navbar without breaking it for mobile and desktop views.
basically the current one sits the left text/image to the far left and the nav menu to the far right, which is great when the design is across the entire page, but if the content is centralized in the middle sort of like the normal 960 web layouts, it looks a bit weird at times.
is it possible to have the left image/text and nav menu links centralized in the center like it would be seen if it was in a 960px wrapper.
this all ofc without stopping the responsiveness of it.
Thanks
It sounds like what your are trying to accomplish is to center a top-bar navigation within a row.
If that's the case then you can use <div class="contain-to-grid"> to keep your top-bar within your grid layout and something like <div class="small-9 small-centered columns"> to center the row that the top-bar is in. I created a codepen example for you to look at here: http://cdpn.io/jJhyn.
The classes mentioned above are all part of Foundation so you will not be affecting the responsiveness of your design.
For a complete list of the options available to customize the top-bar see the Zurb Foundation Top Bar documentation.
If I have misunderstood your question let me know, and code is always appreciated.
I hope that helps.
EDIT: 02/13/2014
I was looking into another issue when I stumbled upon this, How to center top-bar nav?. It center's the buttons/links within the top-bar, not the top bar itself. They page they used as an example is Mister Dutch. I updated the codepen above to reflect what I found on the Foundation Forum.
Again, if I have misunderstood your question let me know.
So I have been looking around for a couple hours for a solid solution to handling site navigation in CakePHP. Over the course of a dozen projects, I have rigged together something that works for each one, but what I'm looking for is ideally a CakePHP plugin that handles the following:
Navigation Model
Component for handing off to the view
Element View Helper for displaying the navigation (with control over sublevels displayed and automatically determining the "active" item based on URL and/or controller/model/slug
Admin pages for managing a tree of navigation
Any suggestions for an all-in-one solution or even the individual components would be very appreciated! Or even suggestions on how you have handled it in the past
We had this issue at work recently and i ended up whiping up a helper that would take query from the contents table and convert that into a menu. As it needed to become more flexible the code got worse and worse up to the point where i am currently rewriting it.
Don't hold your breath though as i will be taking my time to make it work right as it needs to be very flexible but it cant be confusing to use.