Webpage that lets user draw a picture - on iPhone - iphone

I am making a webpage for iDevices and need to allow the user to draw pictures. There would be a box and they would scribble in whatever they need. Don't need color or fancy brushes. When they are done, I would need some way of collecting that input and getting it back to the server, vector or bitmap format would be fine.
Is this possible?

There is a premium Tutorial on Net TutsPlus. It covers CSS3, HTML5 and the canvas element. The Canvas element is supported by Mobile Safari.
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-web-based-drawing-application-using-canvas-new-premium-tutorial/

Related

Force small image in WhatsApp link preview for IPhone

So when I create the OG tags for my website I have 2 image tags, the first for other social media and the second that is meant to only be used for whatsapp.
I intentionally make the whatsapp one smaller so that it can appear more compact with the image positioned to the left of all the content, as appose to displaying big at the top of the content.
This has worked until recently, but then IPhone changed it to use the bigger image (the one used for other social media platforms), which is a problem for my client (its a branding thing).
Is there a way to force it to use the compact layout in the whatsapp link preview?
EDIT: I say IPhone, but a better term to use would probably be iOS.

Confusing about Resolution and Screen size in MobileDevice, can we design mobile Website that has Gui enlarged according to screen size?obile

Ok, now most mordern smartphone has 720p or 1080p resolution. That mean even screen size is small like 4 in, we still can see all text, gui (such as email textbox) of the whole website when first time opening it in Galaxy s3.
However, though we can see the very little email textbox in mobile browser, it is too small for us to enter data. So we need to magnify the page and that is very time consuming.
My question is, can we make the gui of GWT app automatically enlarges itself so that mobile users do not need to enlarge it?
Also the gwt could shpw the gui in Portrait direction.
you need to follow responsive web design principles to achieve your objective. Also have a look here bootstrap provides widgets that are flexible

Icon design and jagged edges

I thought I had my ios app icon all settled. I designed in Photoshop and tested in the prescribed sizes and it looks great (resizing in photoshop and saving to .png). I also tested via the "add to home screen" to see how it would look and looks nice and crisp (via a cool little webpage that lets you upload icon and bookmark on your device).
However, when I upload it as the large 1024 x 1024 icon (png) you do via iTunes Connect my shapes look all jagged. At least in the preview you get when initially getting ready to submit a new application.
Wondering what causes this and what I need to take into account as it pertains to how Apple resizes icons for delivery. Any help in pointing me in the right direction would be great.
What resolution did you design it in? If you designed it in Photoshop, it is a raster image and I would suggest you design in illustrator as a vector, but at the very minimum make sure your designed resolution is higher than the proportions required for the icon by Itunes.

How to capture entire webpage in iPhone safari?

Like in Firefox (Desktop version) I can take using Fireshot
and in Android mobile I can take using Dolphin Screen Cut
I already know that we take screendump using wake+home it doesn't take screencapture of whole webpage including the area under the scroll and it would be difficult to take multiple screenshots by pressing wake+home and scrolling in between but with this there will be small overlap between shots and thee combine screenshot will not be precise
Barry — Webpage screenshot does the trick. You can capture full length webpage screenshots and save them to Camera Roll or Copy to clipboard for pasting into any app that supports pasting in images.
After-all I found the solution
This app worked for me perfectly
Website Screenshot (iPhone app)
You wouldn't be able to do this in Mobile Safari.
If you're developing an application (and since this is stackoverflow I'll assume that's what you're talking about) and using a UIWebView you could do this - you would need to:
Calculate the total height of the webpage you want to capture
Use a UIWebView with the height obtained above to display your webpage at actual size
Render that UIWebView as an image in an off-screen buffer.
Webpage Capture for iPhone | iPad : https://itunes.apple.com/us/app/webpage-capture/id348797820?mt=8

Creating an interactive full motion video game using HTML5

The basic parts of this full motion video game is:
The user is shown a video clip which either plays to the end or can be skipped. A clip could be something like a character talking or of a location. Some of the clips might loop until the user clicks something e.g. the clip might show birds flying in the park.
The user is presented with several choices that are overlaid over the video clip at some point where the choices are things like "1. go to the park" or "2. ask the man about the park".
Each choice is linked with another video clip and another set of choices e.g. if the user picks option 2, they are shown a video of the man responding and can then follow up with more questions.
I'd like the above to look seamless and presentable. For example, video clips and text options should fade in and out and I'd like the page to be fullscreen.
Would it be possible to do the above in HTML5 while supporting most desktop and mobile browsers? Would some other language be more appropriate? I'd rather not use Flash, primarily because then I cannot easily support iOS.
From doing some research, the above seems easily possible in all modern browsers on desktop machines with the caveat that there doesn't appear to be any reliable way to make an HTML5 page go full screen, unlike Flash. The iOS situation looks grim: as far as I know video clips will only play once the user has clicked on the clip and I'm not sure if I can overlay buttons on these. I've also read that the video tag can be buggy on Android.
Can anyone comment on what approach I can use for addressing these issues?
Edit:
More info:
I have no constraints about it being server or client hosted.
I know I can't realistically get this to work on every browser out there so I'm really asking: without having to write several ports of the game, what approach can I use to target a sizeable audience?
Can HTML 5 embed video? Certainly. Will it work on most desktop and mobile browsers? Well, define 'most'. If we're talking pure numbers, then no. Lots of the planet still using IE <8 on the desktop and Symbian on the Nokias.
The bigger issue, IMHO, is that video on a mobile device is typically handled by the device. I'm not sure you can over-ride that. For instance, on an iPhone, if I click an embedded video, it pops it out as it's own full-screen video. You'd have to experiment and see if you have any control over that.
Finally, is this a server hosted game? If so, grabbing a bunch of videos over a cell network may not be the idea user experience.