Advice for editing multiple HTML/Markdown pages together. Any tools for editing multiple pages as a table? - html

Background: I'm having to build a bunch of similar pages*, 50 or more. They share a lot of design and content so I will be encapsulating/reusing as much of the styling and content as possible. Still, each page has unique elements and may have arbitrary design elements, so the pages can't just be manufactured programatically from a database or resource file.
What might help: Because there are so many pages to keep track of I would like to edit them in a big table rather than in a long scrolling text file or in separate files. That would make it easy to compare and contrast the code for each page. The table would look something like this:
| Group | Page name | Description | Formatting | Header | Body | Footer |
|-------|-----------|-------------|------------|--------|------|--------|
| 1 | Page1 |text |code |code | code | code |
| 1 | Page2 |text |code |code | code | code |
| 2 | Page3 |text |code |code | code | code |
The first three fields in this example are for my own use or maybe would go into the pages as metadata, while the remaining fields show where the 'real' code would go.
Questions:
Am I on the right track with the idea of editing the page code in tabular form? Are there established better ways to set up a whole group of similar pages together?
If tabular editing does make sense, what tool should I use?
Tools I've considered:
Text/code editors: Ok, no surprise, but I haven't found any code editors that let you display and edit a file as rows and columns defined by, maybe, special tags. Does anything like that exist?
Spreadsheets and structured databases: great for basic rows and columns, but terrible for text editing, and display of multiline rows is lousy.
A specialized "structured text" database: Maybe one exists, but my searches came up empty. Most 'text databases' are for unstructured/freeform text.
"Table editors": wrong idea, correct? They're for generating code for table structures that you then display on pages, or use in database forms or reports.
Word processors. For now I'm going with a table in Microsoft Word, treating the HTML as ordinary text. With the page width set to Word's max (22") and the font really small, there's plenty of room for the columns I need. I lose all the help a code editor provides and that's a big loss, but at least I can see what I'm doing. Word has a keyboard command that lets you move one or more rows as a block up and down in a table, so that helps for comparing pages. But another major downside is that I will still have to export the table to a CSV using a Word VBA 'macro,' then write a little script to loop through the CSV to create the actual pages. I haven't coded those conversion routines yet, so if you have any alternatives to suggest, please do.
*The 'pages' for this project are actually Anki card types.

Nested files
What I've done before is to build each page or page element as a distinct file, then reference that file from another page. This ends up in nested files, but it makes editing pages in a normal text editor much easier.
________________________________________________________________________________
| Header file |
| Scripts file (or reference) |
| Body file |
| Navigation file | Content file |
| | More Content file (reference from Content file) |
| Footer file |
________________________________________________________________________________
This can get nested pretty deep, if you need, but it doesn't have to. And you can get these references pulled from a DB instead of having them hard coded in logic on your site, like normal, but I'm not sure how this would really work with Anki cards.
Content management sysyem
If you really need/want to store your pages as code/text in a database, I'd recommend building a content management system (CMS) for yourself. This involves a lot of work up front, but it'll allow you to do all the work you want to do and store it in a DB.
I've written a couple for myself and my website customers, and it's a long and difficult process most of the time. You have to think of literally everything you want to do. Essentially, you're recreating FrontPage or DreamWeaver and you'll probably do just as bad a job as they did, unfortunately. Maybe worse. At least I did.
If you don't do anything graphically in this CMS, it'll be easier to develop, but you'll still have to manage your links manually, sort of how StackExchange/StackOverflow works: a text box for code with a line of basic "advanced" features buttons above, with a half HTML and half MarkDown syntax that can easily get confusing or features lost due to not using them very often.
Website builders
If you weren't using something as specific as Anki cards already, I'd suggest using something like WordPress or Drupal. That's basically what they do: store pages as rows in a DB. Of course, many of the pages are built using a GUI, but some people build pages programmatically.
If you're like me, you'd rather stick to hand coding everything. Wordpress has security issues and I'm pretty sure Drupal and all the others do too. The plug-ins people make for them seem to rarely care about security, so a site built with these tools are usually vulnerable, unless you have your site hosted on their servers, which is often also not a preference. Also, you end up managing plug-ins when they update more than actually doing development, or so I hear from people who do this professionally. You might be able to write your pages there, then dive into the DB to copy the results out, but that seems like a less than desirable way to do things, too.
Conclusion
So it seems as if building your own solution seems like the best of the lack of options you have. With building the CMS, though, you can have the code instantly rendered, like SE/SO, as well as do side-by-side comparisons in the same window, if you want. And you have the capability of making it as simple or complex as you want, along with adding or removing features when you want.
Again, this isn't likely to be easy, but it's more likely to be what you want/need than what someone else imagines might be helpful to people in general. And if you make this CMS useful enough, you might even be able to market it to others who use Anki cards. Just a thought, though.

Related

Factsheets from R - cat(), flexdashboard() or Markdown?

I am looking to create Factsheets to demonstrate standardized information for about 20 projects. I want this information to be updated weekly (to observe progress) and be an HTML file. I was thinking of creating something like this: http://htaindex.cnt.org/fact-sheets/?focus=cbsa&gid=741
I have three options I could use:
The frenkenstein approach: I could write all the html for a dummy factsheet, then mush my data into it in R and output the file with cat(). If I really wanted to be fancy I could even define custom functions that would elegantly mush the data together with html so that the implementers wouldn't have a heart attack at the wall of html and css.
The limited approach: I could use flexdashboards which allows for assets to be placed in row or column orientation but not really a combination. This would limit my creative options, but is much faster and more reproducible, debuggable, etc
The correct approach: I guess people will say that I should build a markdown template as documented here, but that seems incredibly time-intensive and it looks as though I would have to get very familiar with pandoc, which I'm not looking forward to.
My question (hopefully not too wide) then is: Why shouldn't I just use the Frankenstein approach?

Isolate lots of CSS files to target only parts of a website (CMS)

I am developing a CMS and one of the design challanges is to isolate CSS to certain parts of the website-builder page
|||||||||||||||||||||||
| CMS HEADER |
|||||||||||||||||||||||
| C | |
| M | |
| S | BUILDER |
| | CANVAS |
| | |
|||||||||||||||||||||||
I need to isolate the CMS CSS of the header and the sidebars from the builder-canvas.
I also need to CSS of the website you are building on the canvas to just be applied to the canvas.
I have tried..
using CSS scoping and a jQuery plugin to do this, but because of the high amounts of CSS, this slows the already javascript-heavy builder to far down.
iFrame is no option, because I need to use alot of JavaScript to get data from both parts at the same time.
The only other thing I can come up with is adding ID's to certain parts and prepending these ID's to every selector in the corresponding CSS files.
I would use SASS to accomplish this.
This will take up huge amounts of time, mainly because I am also using plugin CSS files and Bootstrap in the CMS and I need to isolate EVERYTHING.
QUESTIONS
Does adding these CSS ID's to every selector decrease performance much?
Are there any other options to do this?
Not noticably, just avoid nesting too many levels deep.
I know you mention iframes are not an option, but many existing sites (shopify, wordpress) seem to use iframes to achieve this - to me this seems like the cleanest way, as one doesn't necessarily need to know about the other. If your page is hosted on the same domain, you can pass data, and access methods as normal from your iframe with window.parent.
Someone here suggests using the postmethod API which would give you
more scope to pass data, and send instructions back and forth.

Where to store static / "index" page content in database in Rails

I've been using Rails for a few weeks now and have loved using it to make a fully-baked application. Now, I'm trying to use it for an agency site where we have services, articles and projects (which fit models and controllers nicely)
I've created the usual new/edit form views for these and it works perfectly (even have Redactor JS set up nicely with it)
The bit where it all feels a bit awkward is trying to allow for editing on the "index" pages - ie: the Services page itself would not only list each service but would have a few different bits of text and buttons that ideally I'd like to be able to content manage. Ditto for some content on contact pages and the like.
I've looked at using ActiveAdmin (which looks like a great tool, but ideally I'd like to keep it less serious and edit these pages in the front-end, this looks a perfect tool for managing large amounts of data)
Am just wondering how experienced devs would go about this? Would you have a model/controller for every page so that you could have routes like services/edit, home/edit, or perhaps there is some other way? Or maybe I'm just trying to get Rails to do something it's not really made for?
Thanks.
This probably comes down to
who's going to edit these semi-static pages?
how often?
If you're the only one doing it, no more than once a month, then just set up static pages with appropriate controllers.
If a bunch of people are doing it, on a fairly frequent basis, then go with ActiveAdmin, or a CMS gem, or etc.
Don't let 'elegant' get in the way of 'just do it'.

hiding login fields from google search

Background:
My website allows registered users to upload and share videos.
On the main page there is a "Username" and "Password" field so that registered users can log in if they wish.
Also, on each video page, there are text links to choose bitrate and flash player.
(See http://videoflier.com/ and http://videoflier.com/movies/1360488842878341996730 for examples of both.)
or search google for "site:videoflier.com" to see what I'm talking about.
My Problem:
When google or any search engine indexes it, they of course see the login text and the links for setting the video bitrate (which look like " 190 234 [698] 1247 kbps | osflv [jwplayer] flowplayer ")
(Search google for "site:videoflier.com" to see example.)
It looks like this:
Cardboard Airplane
videoflier.com/movies/1352509017371554759177
Cardboard Airplane By jesseg 190 234 [698] kbps | osflv jwplayer [flowplayer] This is a model airplane built from cardboard and tape. It was outfitted with remote ...
(Notice how the bitrates and player selections look ugly and waste space.)
My attempts to solve so far in a clean tidy manner
(And why I don't like any of them.)
Using pictures instead of text: I want my site to be fast and efficient, so I don't want to use pictures for text if I don't have to.
Having a separate page for settings: I want the site to be fast and simple to use.
robots.txt: If the search engines can't read the pages then it won't know how to find them!
Using CGI to hide stuff from search bots This is about the best idea I've had - but I don't really want to do a dirty hack, and it seems there's no universal way for my CGI to identify a robot. Google themselves uses several different user-agent strings, none of which actually contain the word "robot." Most contain "Googlebot" but not all. And who knows what other search engines use.
Of course I understand (and google makes this very claim) why they use agent strings that look like regular web browsers -- because dishonest folks try to send completely different content to the search engine for ad fraud.
But I don't really want to have to essentially run a continually changing blacklist to try to identify all possible search engines out there. Sounds too much like fighting email spam. And besides, I'm just trying to hide the login and bitrate lists so the search results are easier to read.
javascript: Javascript brings its own problems (Browser compatibility issues, accessibility, etc.) I use it when it is the best tool for the job, but I really love pure clean HTML when I can have it.
In an ideal world: I wish I had an HTML tag that goes like <NOBOT>username: password:</NOBOT> -- but as far as I know, nothing exists. Ideally, this fictitious tag would also keep the search engines from returning results based on the hidden items. Somebody who puts the word "password" into google most certainly is not trying to find my site -- and yet google may return it simply because it has a login field on it.
schema.org? I initially had hopes for schema.org because it allows one to specify the type of data within scopes in the HTML. Unfortunately, as far as I could tell, all of its categories and things are for things that are: It didn't seem to have a "Ignore" or "Administrative object" option.
Maybe the more round about answer is to use schema.org extensively for everything else so the search engines already know where to get their author, description, and title text from, then maybe they will skip the administrative control links.
Thank you very much,
Jesse Gordon
I would think it makes more sense to add a meta description to your pages.
For for example:
Cardboard Airplane videoflier.com/movies/1352509017371554759177 Cardboard Airplane By jesseg 190 234 [698] kbps | osflv jwplayer [flowplayer] This is a model airplane built from cardboard and tape. It was outfitted with remote ...
I would just add this to your header section.
<meta name="description" content="This is a model airplane built from cardboard and tape. It was outfitted with remote control and servos so it could be flown as an RC glider.
It did fly but had a tendency to stall. " />

Good PDF to HTML Converter for Mobiles

We are having Multiple PDF which have account tables and balance sheet within it. We have tried many Converters but the result is not satisfactory. Can anybody please suggest any good converter that would replicated the contents of PDF to Exact structure in HTML. IF any paid Converter is there please suggest me .
This is the PDF we want to convert and Show in html "http://www.marico.com/html/investor/pdf/Quarterly_Updates/Consolidated%20Financial%20Results%20-%20Q3FY11.pdf"
Have you looked into this? http://pdftohtml.sourceforge.net/
It's open source as well, so it's free and can be modified if necessary.
There's even a demo showing the before PDF and the after HTML version. Not bad if you ask me.
If you're having issues specifically with tables in PDFs, perhaps the issue are the table themselves and whatever program is being used to generate them. Not all PDFs are created equal.
ALSO: Be aware that all PDFs that I've created and come across over the years have had lots of issues when it comes to copy/pasting blocks/lines of text that have other blocks/lines of text at equal or higher height on any given page. I think Acrobat lacks the ability to define a "sequence order" of what block is selected after what (or most programs don't use it properly), so the system sorta moves from a top-down, left-to-right way of selecting content.....even if that means jumping over large blank areas or grabbing lines from multiple columns at once when you wouldn't expect it. This may be part of your tabular data issue. Your weak link here is the PDF format itself and I think perhaps you may be expecting too much from it. Turning anything into a PDF is pretty much a one-way street, especially when you start putting lots of editable text into it.
Have you tried http://www.jpedal.org/html_index.php - there is also a free online version