I am currently designing a portfolio website with wordpress. The idea is that it's going to be all in one page, and use js to scroll up and down.
After coding the whole thing in fixed width, I thought of the responsive design. I started reading and I think I got the idea. Before doing anything else I am going back to photoshop and re-editing the design for mobile - to quickly see what I want for mobile (almost mobile first, at least on photoshop, kind of ignoring what I already have)
In my current design I display my work examples in slideshow. I am using this plugin http://css-tricks.com/3412-anythingslider-jquery-plugin/. my first instinct is to remove these slideshows when for mobile and use only one image for one each work. is that good idea?
Also I seen some responsive design tutorials which use the same images for all resolutions and then scale them down with css. Should I have different (sized) images for mobile? for example
#media screen and (max-device-width: 480px) {
.img {
background:url(site-small.jpg)
}
}
#media screen and (max-device-width: 600px) {
.img {
background:url(site-large.jpg)
}
}
As I said my portfolio site is all in one page, and I use the jquery ScrollTo() feature to get this effect on navigation http://two24studios.com/. For mobile version, should I remove that or not?
I have some decorative images which simply look impressive and adds very little more to the interaction, would it be better if I remove them when screen gets smaller. And on this note (though I didn't look into it yet) if I what to remove some content when on small screen, do I only use display:none or is there a way to prevent the content from loading for no reason.
I am using one embedded font for the design, is it ok to keep that for the mobile version or is there any restriction on that, such as do mobile browsers support #font-face embedding.
And the very final thing, I am planing to create a new page within wordpress, and call it something like "playground" which would have a list of demos on html5, CSS3 and the like just to show off my skills. should I include that in the mobile version or not. As I think a mobile user can't really take advantage of that?
I hope you can help me with any of these uncertainties that I have
Mobile users have more limited bandwidth and slower connection speeds. That's something you want to keep in mind when considering how quickly the page will load as that can greatly impact user experience.
I would avoid using the slideshow for mobile -- or at least doing a slideshow that uses smaller images appropriate to the screen size. You don't need to download an image that's 720px wide when you're on a 360px wide screen, for example.
Scroll to will probably work fine. One consideration you may want to take is to use touch events rather than click events if you're using JavaScript for the "scrollTo" functionality. (A presentation on touch events.)
As for your playground page, that will depend entirely which demos you're planning to put there. I'd test out your examples on mobile to see if they make sense and function properly there; if they do, then display them. If not, either improve them to work on mobile or don't show them on mobile.
Related
Any chance to make it possible to build special WinRT application that would run in lock screen mode on Windows 8 like it "works" for default Slide show option setting?
I don't think this is possible. The Win 8.1 API lets you provide an rss feed of images that fuel the lockscreen slideshow, but you don't appear to be able to provide your own app to replace the lockscreen background.
I agree this would be really useful. The lockscreen could be used to turn your device into an ambient data source. For example, custom slideshows, streams of social network posts & pictures, graphs tracking stats you care about (stocks, server load etc.), streams of trending headlines etc.
You can do things with Badges, such as outlined here and here. Unfortunately, I don't think you can do exactly what you are asking, aside from possibly disabling the Lock Screen and building a facsimile of your own, though I don't know to what extent this will be allowed in the store, and will likely be largely up to the users settings with regards to things like working on battery or not.
I'm already aware of this
http://blogs.msdn.com/b/windowsappdev/archive/2012/03/15/combining-xaml-and-directx.aspx
But I'm not clear if this is possible since the example is a single page game.
I want to construct a complete XAML/C# application with multiple XAML pages, used to deliver content. But on one of the pages the user navigates to I want to render something using DirectX3D in the full screen.
Can I do this? If so can I build my full XAML/C# project and then just add a single page that uses SwapChainBackgroundPanel?
Any advice is appreciated.
It's unfortunately impossible at the moment with SwapchainBackgroundPanel, because your root visual element must be the SwapChainBackgroundPanel. (and add your other UIElements, frames, widgets etc. on top). You can achieve this with SurfaceImageSource, but at the cost of much more memory bandwidth (and most ARM based devices lack decent memory bandwidth).
Windows 8.1 leaked info and dumps of the 8.1 winmds seem to indicate that this is going to change soon however :).
I have a ASP.NET Web Application. I want to access this application in Smart phones and tablet computer. So please help me on this. What are the changes required?
The answer to your question could range from nothing to everything. At the end of the day, it all depends on what you existing app looks like in a target mobile device (iPad, Android, etc). If your existing app looks and functions properly, then you don't have to do anything. If not, well, you figure out what's wrong and make it work.
Your question really isn't suited for StackOverflow because it is way to broad and impossible to answer.
Asp.net applications can run in web browsers, including the ones that come with smart phones and tablets. The main concern would be the various screen sizes of the various devices. Because they vary so much, a good design concept for your asp.net application would be to layout content in a way it can adapt to the screen size.
The best technology for this within an asp.net application, especially for an application that was already built, would be to implement style sheets (.css)
Look at these styles as an example:
float, clear, max-width and max-height
Check these and other styles at: http://www.w3schools.com/css/
Now, there is also the concept of having your asp.net application detect which device is being used and then generate UI code (or load .ascx controls) accordingly to provide device specific displays.
Check:
Request.Browser.IsMobileDevice
Request.UserAgent (http://msdn.microsoft.com/en-us/library/system.web.httprequest.useragent.aspx)
However, I would only suggest using this to a minimum, because if you make a change to your UI, you won’t want to keep updating multiple instances of the UI for different devices.
A good compromise would be to build a style sheet for each group of screen sizes (smart phone, tablet, PC, etc.) and then detect which device is in use and include the respective style sheet.
NB: there are many open source projects, which could get you running more quickly with mobile development in mind. Check sourceforge.net and codeplex.com for examples.
I don't want to use flash because it won't allow me to dynamically modify (add, remove) the pictures through my application so I thought about javascript (JQuery Plugins). but the problem is visitors can save the pictures and I don't want that to happen! .. so any ideas ?
Edit
I really appreciate your help and honesty but is JavaScript to have a dynamic modifiable SlideShow for my websites ? .. I don't care about screenshots, what's important is the original picture that I think will be downloaded to the visitor temp files!
The best you can do is a mild deterrent. I've written an HTML5 slideshow used by many. It offers right-click warning to those using it, but it is best referred to as a warning rather than a protection.
First off, if a browser can display an image, any viewer can get them too - no matter what you do - that's just the way the web works. If you really need them protected, then you need to use a significant semi-transparent watermark that touches important parts of the image or limit the viewing only to people who you trust.
If you're interested in a mild deterrent that can still be bypassed quickly by anyone who understands how a browser works, but might slow down non-sophisticated users, then you can implement a couple forms of click protection that make it harder to right-click save your images. Right click protection works best when the actual image you are displaying is not the top level image. This can be done by displaying a transparent image over the top of your slides. This will not be seen, but if a viewer succeeds in getting to a right-click-save menu, all they will succeed in saving is the empty transparent image on top. You can literally use a 1x1 transparent gif image which is tiny and then scale it up to the size of your image to cover it. It will not be seen, but it will defeat right-click save.
It is also common to also put in some javascript that attempts to intercept the right-click operation to prevent that, though this protection is blocked by more and more browsers now (like Firefox 4+) and is far from foolproof. It should not be relied upon.
In the end, these extra steps are only a mild deterrent and will only work with non-sophisticated viewers who aren't very determined. Because, even with the maximum protection in place, one can still look at the media list in the browser and see all the image URLs in the web page or look at the source or DOM or network trace of the web page to see what the URL is of the images that are being displayed. Once the URLs are known, the images can be saved easily. The danger of this kind of protection is that content owners believe it's real protection and they put images at risk that they shouldn't (without good watermarks on them). But, if you fully understand what you're getting (and not getting), you can do it.
It is impossible to Really protect them. If the user can see the image, then the user's browser has downloaded it. So the user has the image on their computer and can do anything they want with it.
There are lots of ways of making it harder for the user though. Disabling right clicking is one way.
If you really need to hide them badly you could use the data uri scheme too, but it really won't stop someone who really wants to get it:
http://en.wikipedia.org/wiki/Data_URI_scheme
You will not be able to protect your images unless you use a watermark which not what you're looking for as I understand you.
You need to remember that the user will always have his printscreen button and many tools that can do the job and that you can't control anyway
Break up your images into pieces, or possibly even embed them in larger junk images. Then use CSS to display the multiple overlapping divs with appropriate background styles to position the pieces where they need to be so to the user they look like one image, kinda like how google maps looks like one large image but is actually made up of many small ones. The user won't know the difference, but if they try to save them locally they'll just get one piece at a time.
Of course, that only works until they realize they can do a print-screen, but it's something. :-)
It is impossible to completely protect your images.
Seriously, if the user can see it in their browser they can save it to their computer.
You are fighting a losing battle here.
Even if you watermark your images, a good graphics program can countact that.
The best thing to do is only display small, low quality images that people wouldn't want to keep anyway.
Does anyone know how to apply effects to the entire screen, in c# or any programming language.
I'm mostly interested in making the screen monochrome (specifically green-white instead of black white).
I know a cross-graphic card solution is possible because I found a program that can do it:
http://www.freedomscientific.com/products/lv/magic-bl-product-page.asp
Anyone knows how to accomplish something this or where to look?
Thanks !!
There is no easy Windows API to modify the entire screen contents. But this could be done at the device driver level.
Otherwise you have to resort to some Windows API tricks: place a "fake" window over the entire desktop, in a loop: grab the entire screen contents without grabbing fake window contents, do your processing to get the monochrome effect, then display that on the fake window. Yes, it's hacky and slow, but possible. Even more hacky, when you get mouse clicks to "go through" the fake window (lots of SetWindowsRgn calls).
So cross-platform here means using GDI, though some older DirectDraw APIs might work, in that case, you have a much easier time with hardware overlays (and better performance). Though I'm not sure how many cards actually support hardware overlays, and if newer versions of windows support the older DirectDraw APIs.
One more possibility is if the video card has a C# or C++ or C API, then you can do whatever you want with the card without writing device driver code.
Then there's CUDA, but I haven't yet tried that out. I know it's for stream processing on nVidia boards, but I wonder if it could get you an easy backdoor into the video display stuff.
To help people in the future who are interested in this:
This is possible with the Magnification API's color effect method. This allows one to use a matrix that can be applied to the whole screen.
NegativeScreen is an open source project that implements the feature you are describing in C#.
Unfortunately, this only works with affine transformations, as the API takes only an augmented matrices rather than a delegate or something.