Do developers need to be supplied SVG files in all sizes or is a master size sufficient for all instances? - user-interface

I'm a UI designer working and I want to get a better understanding of what is required for the most efficient and streamlined way to handover of assets to developers - both for the developer and also for me.
I was of the understanding that since SVG files are lossless, they can be resized "on the fly" using CSS/HTML and therefore can just be supplied once (instead of at all the various sizes) - is this a reasonable assumption?
I work with very detailed pages where there are a lot of instances of the same icons and I'm trying to avoid having to "mark for export" (I use Adobe XD) every single instance of an icon on every page. My preference is to provide a master UI file which contains once single instance of each icons in the project.
Any thoughts / input appreciated!
I have not been able to try anything because I'm not a developer and can't see how this works in the code.

Related

Plugins to set Bookmarks with Inherit Zoom in Acrobat (Mac)?

At work, we are required to set "Inherit Zoom" on all bookmarks and links within PDF files (using Adobe Acrobat). I have been surprised at how difficult it is to set this across multiple bookmarks. I.e., the only native way I have found to do this is by manually right-clicking on each link and editing the properties to Inherit Zoom.
This is a problem for a number of reasons. For one, when you set Inherit Zoom on a bookmark, you can no longer direct that bookmark or link to a specific destination within a page (aka an anchor). You must set the bookmark or link to bring you to a page number instead.
I could deal with that and work around it, if there was some way to set Inherit Zoom as the default for a document. Unfortunately, it appears that Acrobat requires you to manually edit every single link and/or bookmark. As you can imagine, this is a huge undertaking when working with large PDFs with many bookmarks and internal links.
I have been reading through forums (Adobe, here, elsewhere) and help pages for hours trying to find an answer and it seems the only successful ones are installing a plug-in that can change these settings throughout a document in one fell swoop. I'm hesitant to install 3rd party plug-ins for both security reasons, and the fact that they are often expensive. We're certainly willing to pay for a plug-in that takes care of this issue, but if there's a better way to do it then I would like to explore other options. There's also the worry that after we buy a 3rd party plug-in, there's no guarantee how long it will be supported by the devs or compatible with newest versions of Acrobat.
This has (apparently) been a common problem and request by Acrobat users for over 5 years. Someone out there has to have a good solution. Any advice or recommendations on a reliable plug-in would be much appreciated!
I have created an open-source (Java-based) app that allows you to apply
Actual size
Fit page
Fit visible
Fit width
Inherit zoom
to all bookmarks within a PDF document or entire directories of PDFs (enclosing subdirectories included) without selecting each item manually:
https://github.com/beatngu13/pdf-zoom-wizard/
In case anyone with the same problem finds this, I was able to work around the issue by creating documents in a LaTex editor first, then converting to a PDF. The anchors created in the Latex editor had the Inherit Zoom functionality, if not the explicit settings in properties.
I also used the software Debenu Aerialist, which would have worked for editing links or bookmarks en masse. It's not a perfect solution or product but it worked.

Mockup application for application with many pages?

I have been using Balsamiq to create mockups for a new application. It has been working very well initially, but now it feels like the application is becoming to large for Balsamiq.
I have connected many Balsamiq screens with the link function in Balsamiq. But that forces me to create way too many screens. Every click makes me create a completely new screen. So if I want to change a button that I am using on many linked screens, then I have to change all of them.
Is there a different application for creating mockups that doesn't force me to create new mockups for every click? I don't know exactly what I'm looking for but maybe something where only parts of the mockup application change when I click on a link?
There is also no functionality in Balsamiq for maintaining my mockups in a structure. Maybe that would help as well. What I'm looking for in essence is an application that let's me mockup more complex applications with many clicks and pages.
WireframeSketcher is a wireframe tool that has projects and lets you organize mockups in directories. It's based on Eclipse IDE and so it shares the same advanced way of organizing files. WireframeSketcher also supports refactoring which makes it easy to move files around or rename them without breaking links.
Look into using "symbols" in Balsamiq, that may help you out some. What you can do is take any group and make it a symbol. Then you can use the symbols on multiple pages. If you want to change the button in multiple places, all you have to do is change the symbol once, and the changes will be carried out throughout the rest of your design. Hope that helps.
MockupScreens has "master screens", similar to master slides in PowerPoint. You do create new screens technically, but you don't do them from scratch.
Since they derive most of their content from the master, you edit only the differences: value in some field, for example.
(I am m.screens developer)

A way to prevent 3rd-party elements to be loaded on Safari?

Basically, I'm looking for RequestPolicy for Safari. GlimmerBlocker, Privoxy and BFilter etc, those work well but none of them support "block 3rd party elements" feature.
I use GlimmerBlocker, and to imitate (barely) the function, I mainly put this code to filter script flooded website.
replace(/<(script|noscript|iframe)([\s\S]*?)<\/(script|noscript|iframe)>/img, "")
However I'm tired of repeating creating filters for each websites. Vice-versa, whitelisting will be the same.
If anybody had an idea to solve this, that would be so great. Thanks.
I made this proof-of-concept Safari extension to block external resources (images, objects, and scripts, but NOT link elements, such as stylesheet links) until allowed. It has a bare minimum number of features, but if you are interested, I might develop it further.
I say "external" and not "third-party" because I don't know to tell reliably if a resource is third-party or not. This extension just blocks all resources that come from a different host than the web page. As a result, it blocks too many resources by default.
You can right-click a blocked image and use a context menu command to whitelist the image host. If the blocked image didn't have a specified width and height, it will be invisible, so you won't be able to right-click it. (To remedy this, I will need to add code to make the empty image visible as a box.)
The whitelist command does not show up for blocked plugin objects (such as Flash objects) or scripts. I will have to add code to deal with that.
You can also whitelist the current site itself, meaning that all external resources will be allowed on that site. Again, this is done with a context menu command.
As yet, there is no way to remove items from either whitelist. This can be added.
Download the extension from here.
You can extract the source files from the extension package using this command:
xar -xf PartyPooper.safariextz
You are welcome to do whatever you like with the source.

How to approach implementing a layout editor using Cocoa

I want to build an OS X application, in which one of the requirements is for the user to be able to generate PDF output according to a layout that they, the user, will create. Typical items on the page would be things like a corporate logo (a JPEG or PNG), an address (a block of text) and a narrative (another block of text).
I'd like the user to be able to move and resize the items using the mouse to drag handles around on-screen.
Is there an Interface Builder object that will let me do that, or some third-party library that exists for this purpose?
Try GCDrawKit if you're looking for a drop-in solution. It's still in beta (and has been for ages) but you might find it useful.
You seem to be looking for an all-encompassing, self-contained "Pages" control or some sort of reporting suite. That's asking a bit much.
There is nothing in the Cocoa frameworks that gives you this. Unfortunately, there's no Cocoa equivalent of Crystal Reports either. You'll have to roll your own.
I suggest using standard CSS / HTML templates with WebKit. The only drawback is WebKit doesn't yet support CSS pagination, so there's no concept of "8.5"x11" page 1...15" but it's the closest you'll come without writing your own Pages application (NOT an easy project by any stretch of the imagination).

Best way to make a newsletter slideshow kiosk for the office?

So, I've been tasked with making a kiosk for the office for showing statistics about our SCRUM progress, build server status, rentability and so forth. It should ideally run a slideshow with bunch of different pages, some of them showing text, some showing graphs and so on.
What is the best approach for this? I first thought of powerpoint, but It should be able to take the images from a webserver so I can automate the graph generation procedure. I would also like to take text from an external source when showing "Who broke the build" or some page like that.
I have no doubt that ready-made systems exist, but I don't really know where to look for them.
Is this easy/hard in powerpoint? Or are there an ubiquous app that everybody but me knows about?
I would recommend creating it as a series of web-pages, which uses Javascript or the meta refresh tag to cycle though the different pages. Simply full-screen the browser on a spare machine, and connect it to a projector/monitor/big TV.
This has lots of benefits:
it's trivial to display images from an external server (an <img> tag)
it will cost nothing to setup (it can run on basically any functioning machine), and runs in a browser
it is quick to do (you do not have to worry about cross-browser compatibility, or different screen resolutions as you know the exact machine you are developing for
it's expandable - while what you describe is probably possible within Powerpoint, but if you do it as a web-page, you can use Javascript (or a JS framework like jQuery), and it's very easy to serve the pages via a web-server, then you can use any server-side scripting language.
Basically, you would have a series of files, say slide001.htm, slide002.htm and slide003.htm. Slide 1 would redirect to slide002 after 30 seconds, slide002 to slide 003, and slide003 would redirect to slide001..
The specific things you mention: graph generation and "Who broke the build" text:
Not sure which CI tool you use, but many of them generate graphs anyway, so that would be required is having one "slide" with something like <img src="http://hudson.abc/job/proj042/buildTimeGraph">
For the who-broke-the-build text, you would be easiest to run the slides as .php files served though a web-server, using XAMMP.
Then you would have a function that scrapes your CI server for whoever broke the last build, and in one of the slides, you would have <?PHP echo(who_broke_build()); ?>
(Obviously if you know some other language/system better, use that!)
The final benefit I can think of is that, if you serve the files through a web-server, you can allow people display it locally, say as their browsers home-page.
Thanks. I found jqS5 which did most of what you mentioned.
It requires 1 document where every h2 becomes a new slide.
I can then use the meta-refresh to reload to next page every 10 seconds. When I reach the end of the slides, I pull data from an aggregated RSS feed from all the different systems in order to pull information.
http://staticfree.info/projects/jqs5/

Resources