I am in a specific situation that I could not find an answer to by searching here. I am a .net developer just getting my feet wet with asp/html/css/javascript. I haven't done too much actual training with them, I am simply trying things out with a template called "Flat" to guide me.
I work for a medical billing company and was tasked with creating a few web pages for productivity for our billing departments. These web pages are displayed on 60" TV's throughout the building so that employees can look up and see how they are doing. The pages not only contain a good amount of data, but it also must be displayed so that someone can see it from their desk. Within reason of course.
I have thrown something together and it is functionally fine, but it is a little dull. I simply do not know all of the interesting tools out there to make a site more flashy, or rather the tools I have found don't work too well within the confines of the rules, in that all of the data needs to be onscreen at once and it must be highly visible.
Here is a screenshot of what I have worked out, as the site isn't public. Click on the screenshot to enlarge it.
This just barely fits the TV when the browser is full screen.
Anyone have any tips or ideas to make this look better? Maybe something subtle that makes all the difference in a page like this?
You could give a slight demarcation between each cell in the table. Similar to he vertical gutter between the columns. This is because horizontally viewed, one might tend to get confused due to the amount of data in each cell.
Provide a 4-5px space between each vertically adjoining cell
Hope this was useful
Related
I am attempting to scrape details from two archived webpages, here and here.
As you can see, the content lives in a paginated table (10 records are shown out of 30+) that I believe is being controlled with javascript - if you hover over the right arrows at the bottom of the table, you can see they are advanced through a doPostBack call. Unfortunately, these arrows are non-functional in the archived pages themselves, as is the drop-down that allows you to change the number of visible rows in the table.
Does anyone know how to either (a) get the javascript working to advance the table correctly or (b) gather the information some other way from this webpage? I've attempted to look at the request/response objects as well, but I'm quite a novice with web scraping so there is a good chance I missed something.
Any direction (or being told its a fool's errand!) is helpful, thanks in advance to whoever takes a look!
I'm creating a 1 page dashboard that will run fullscreen on a monitor on which I want to display some graphs. I made the graphs already all I need now is a proper template for the page. I was thinking something like this
I really dig the look but I'm clueless on how to make something like this using presumably css/js. Especially the lines in the background and a titlebox.
First of all, you have to code all of the man div-containers including your graphs and data-visuals. For that, a css-framework could help you managing the different views for all devices (http://getbootstrap.com/).
Later on, you could add inner divs for the title box and the background. Also get yourself some inspiration. For example: this is the admin-theme I am using for my actual project: http://admindesigns.com/framework/dashboard.html
After digging into that, you may ask some deeper questions about styling your Dashboard, so it's easier for us to respond to an actual problem ;)
Cheers,
Chris
My 9 year old son has very low vision, 1/10. Currently the support people in his school provide him with pdf scans of the textbooks and provide good training for him to access his textbooks on a PC.
However, I consider that this is less than ideal for a number reasons :
Large file size (One geography book is 300Mb, the people who do the
scanning are not tech people)
The text size is only controlled indirectly via zoom, my boy need
40pt text at least the whole time
Difficult to navigate, i.e. there's lots of scrolling over and back
just to read a phrase making the whole reading thing a bit tiring.
No ability to take notes and/or fill in areas for answers in the
textbook.
No access to a TOC/index/
PC problems (weight/power/totallackofcoolnesscomparedtoatablet)
So, I'm thinking that the world of html5 has an answer for me. The process I'm hoping to move towards is the following :
I scan the textbooks and run them through an OCR program like ABBY
FineReader.
This gives me the raw text and the images
Twist this raw data into html5 format with a structure something like
<div class="book">
<div id="TOC"></div> (This TOC will be built dynamically)
<div class="page" id="1"> (Important to keep the notion of pages to allow him to have the same reference as the rest of the class)
<div class="text"></div>
<div class="img"></div>
<div class="answerzone"></div>
<div class="footer"></div>
</div>
</div>
Next, the javascript kicks in and adds the following functionality
Large, semi-transparent Left and right arrows always on screen on bottom corner
Large, semi transparent page number is always apparent, for example on top right corner
Large, semi-transparent symbol on top left corner which gives access to the following features
Access to the Table of contents
Increase/decrease font size
Add a zone where he can either write text from keyboard or onscreen with a stylus. This zone can have an image as background, e.g. where he needs to draw circles around answers.
Everything he adds (text/images) is stored locally on the tablet
So after all that, here's the question part. Does anyone have any experience of similar requirements that have found a solution ?
I can do the javascript stuff (well I think I can) up to the zone for adding text/images and storing all that locally. Does anyone have pointers to existing html5 solutions that could suit my need ?
Best regards,
Colm
P.S. I've gone away from the whole epub thing since, lets face it, it is only html and why not just use a browser instead of ebook reader solutions ?
Take a look at this article: Building Books with CSS3
That is an excellent article, and it has a lot of techniques that could be very useful. Obviously you're going to have to generate a lot of HTML, but using the techniques shown in that article, you won't have to generate nearly as much useless HTML. That article tells you exactly how to do the page numbers and table of contents, and it won't be hard to use JavaScript to create left and right arrows for changing pages (and style it with CSS, naturally).
As for annotation, I'm a little bit confused about whether you want this for a tablet, or a PC. If it's for a PC, I'd suggest to use pre-built tools, such as Zotero. If it's for a tablet, then you may have to play it by ear a bit, because what you can or cannot do varies greatly from tablet to tablet.
This is a very difficult problem. The biggest issue is getting intelligent text out of the PDF. PDF does not have the structure that you will be used to with HTML. It is essentially an electronic piece of paper that is printed to. Text is laid out in blocks that visually line up, but may not have much relation to each other in the file.
I think probably your best bet is to use Calibre to change the format to something else. The results will be far from perfrect, especially in something as complex as a text book. When you convert a book, make sure to go into the options for Heristic Processing and enable it.
If Calibre doesn't work for you, there are also some libraries that you can use to do this.
itext is free for non commercial uses and has text extraction.
pdfbox is free and also has text extraction.
pdfnet is a commercial product, but may have something you can use.
I'm not sure that you are going to get automated results that are going to be satisfying. Given that you only have to deal with one child's curriculum, and not a huge library of PDF's, it might be worth the time to hand copy each page. This way you can arrange the text in an intelligent way.
If you access your mobile me account online with Safari, you can select an icon and login directly to selected service, great feature btw.
But if you access the same page using other browser like firefox or Chrome, you will see a gorgeous login page with a big, no huge cloud in the middle (the MobileMe logo) and interesting lighballs comming out of it.
Here's the link:
https://auth.me.com/authenticate?service=mail&ssoNamespace=appleid&formID=loginForm&returnURL=aHR0cHM6Ly9tZS5jb20vbWFpbC8=
And the greatest thing is that you can mouse over those little light balls and they follow your mouse movement.
Its just beautiful and i have never seen anything like that in Javascript. And i couldnt understand by looking at their code, how they did it. Of course their javascript is compressed so i couldn't look at it, but in the markup those shiny lights are just a bunch of canvas tags.
Does any one have an idea of how to make something like that? Its probably way beyond my javascript skills but it would be great to add such an effect to one of my projects.
Thanks in advance for all your suggestions ;)
that takes a lot of skills. I believe its achievable with processing.js
http://processingjs.org/
Take a look at this [quote]:
So, how is this eye candy accomplished? Through over 6000 lines of
(unminified) JS. MobileMe usually uses SproutCore for its
applications, but after looking through the source code, I didn’t find
a single reference to it. There did appear to be some resemblance of
a library being used in the login page, however, but I think it is
pretty custom. There appeared to be a class for each of the visual
components on the screen, at least one if not two separate animation
libraries (one 2d and one 3d), a particle rendering library, and
libraries for dealing with canvas drawing and DOM manipulation.
So it looks like it was custom made. You can read more here: http://badassjs.com/post/1649735994/the-new-mobileme-login-page-has-some-badass-js
I hope this helps.
Quickish issue. I'm currently working with RoR with a great deal of Javascript for a project. I have a particular entity that has a "color" property. Of course I want to do this as "snazzily" (yup that's a word) as possible, however, I'm not sure how to go about it. I've seen a million and one different "Color Pickers" but none seem to fit the overall bill.
My current paradigm involves editing the entities from the "Index" page instead of having to click "Edit" for each and every one. I've got that working for several fields. What I need to implement now is a quality ColorPicker that doesn't take up too much screen real estate and/or hides itself after being presented.
So, all that said, can someone point me to some quality JS techniques for dealing with "pop-ups" and/or window return values? I'd like to really understand what needs to occur as well, so a tutorial would be nice.
Much appreciated.
Did you look at jquery and the jquery-ui tools?
This is one of the jquery-plugins http://www.eyecon.ro/colorpicker/