How does import.io do its magic? - web-scraping

Can anyone give a rough outline of how import.io might do what it does?
For example try
https://magic.import.io/?site=http:%2F%2Fwww.zara.com%2Fuk%2F
It finds the navigation and submenus perfectly.
How can a scraper abstract to the level of working with any website fed to it like this? Not relying on a specific websites DOM structure or class names.
I know it's closed source, and I'm obviously just asking at a broad level here...what are our best guesses?

Related

Corporate Intranet on IIS 7: Looking to Enhance Directory Listing

I am looking for the ability to enhance the appearance of the directory listing pages of a very basic corporate intranet I developed for use by our employees. I am using Windows Server 2012 R2, and the site is deployed in Internet Information Services.
I did not use anything like Visual Studio to create this, and I have already handwritten all of the CSS and HTML for the index page that serves as a jump-off point for the rest of the site so that users can get to the content they need; however, the directory listings pages where the users land leave quite a bit to be desired to say the least.
I just want to be able to add some quick styles to these directories, such as modifying the font family and perhaps the link styles. Nothing major, really. The site already functions perfectly for what it was designed to do, and has been for years. This is just something that's always kind of bugged me but I never devoted any time to it. I'd like to do that now. Ideally I'd be able to just add something in the web.config file like inline CSS, or perhaps link it to a .css file that will house the styles. The latter is probably preferred, actually, but any way is fine.
Any help is greatly appreciated. To get this out of the way early: yes, I have done lots and lots and lots of searching on this topic — I'm talking hours. I have not been able to find a solution that seems to meet my needs. I consider posting here as somewhat of a last resort because I understand that it's a free resource and users here are usually quick to let other users know when they didn't find a particular article that seems to offer the solution they're seeking — which is usually a result of not knowing exactly what keywords to use — and I don't want to waste anyone's time. Just know that I have tried everything I know to find the solution, and that I'm genuinely stumped and looking for help from some pros.
Thank you!
Since the directory page is not HTML, you can't directly style it with CSS. However, there are a few options for changing the way it looks.
Write a script to point to your own, custom-styled, directory page. See this forum thread for tips on how to do that and a sample script.
Create a custom page using this module that you can further customize yourself.
Use the DirectoryListing open source app, which allows for customization of the directory page.
Either one of those solutions should give you more control over how the directory page looks.

Is there a wireframing tool for web apps that can re-use my own custom CSS?

I have been searching for and have not located (I fear it doesn't exist) a wire frame application that will use our current css for objects.
We have spent a lot of time perfecting our css to get the look we want, now I want to be able to use that css for new mockups without creating new objects each time we add something (as we would have to in photoshop).
In a perfect world, it would even handle the page layout so all that remains is the logic.
Has anyone heard of a tool that can do this?
I haven't used it, and I can't vouch for it, but https://alpha.easel.io/ might fit the bill. It's still in beta, but looks very interesting.
From their homepage: "Implement designs quickly using exact CSS properties rather than guessing from a mockup."
http://axure.com is a popular wireframing tool. There ways to make it use custom CSS: http://enterpriseux.tumblr.com/post/8972215862/an-axure-html-prototype-hack

Something to visual CSS structures and compare them

I am looking for a tool to help with some CSS editing, but I am not planning to use it in what seems to be the normal way.
I have a website that is getting a reskin, we already have the CSS files with the changes as it is already applied to a related website.
What I ideally want, is an editor of some kind that will help me to visualize the structure or hierarchy of the old CSS and the new CSS so I can more easily find the classes that will cross over nicely, the classes that require tweaking, and the classes that will need to be created from scratch.
I'm not worried auto completion, or being able to view the changes instantly or anything like that, what i really want is just the easy way to view and traverse it.
Does anyone know of anything that can do this? Ideally free or open source, but all suggestions welcome.
Try this tool: Compare CSS Stylesheet Tool

CSS Guides for improving skills

Hi for the last month I have started to learn CSS.Fist thing I did is read everything i could find on www.w3school.com , after that I started reading CSS Mastery 2nd edition.I have build a couple of my own websites with succes but I'm still not happy with what I know , I even practiced with the new CSS3 elements.
I've seen alot of cool stuff build using css especialy on http://www.cssplay.co.uk/ but the only problem is the source code is not displayed and I don't know how the bloody things are.A good example is this:
http://www.cssplay.co.uk/menu/tilt.html
And these is only one of the things that I've seen on this website and would like o learn how to build them.
So anyone know any other similar sites that ofer a good explanation on the more advanced stuff about css(not beginer stuff like building some drop down menus , rollover or hover efects )?Any advice is much apreciated thank you!
As already mentioned, tools like Firebug/Chrome Inspector are definite must haves.
I gained the most experience from real world problems with various different browsers. You make a site, it doesn't look so good in a particular browser. So you search on the internet. Find a solution and memorize it. I think that CSS in itself is a fairly simple tool, I class 'advanced' CSS as mastering the various techniques required to make sites work cross browser and in browsers like IE6/IE7+.
Also, Never give up with CSS, if you find a problem try and find an answer. Most of the time, there will be a simple solution.
In general, make sure your CSS is as simple as can be. I generally find that most complicated CSS can be replaced with relatively simple code, and find people get carried away and forget simple techniques to achieve similar solutions. One such problem, would be putting a button on the right hand side of a div, like below:
-----------------------------------------------
| Button |
-----------------------------------------------
You may see that some people will float the button right, adding more complexity than necessary. What ever happened to text-align:right? :-)
Finally, make sure you find a couple of blogs you like, for example http://csstricks.com and read them, taking note of new techniques. Try and master a '2 column layout', understand the difference between block/inline-block/inline, margin collapsing, tables, html forms, IE6/7 hasLayout, the list goes on. Most of which you will cover if you try and make a website template from scratch. Maybe start with an existing site and see if you can achieve the same layout.
I'm not sure with CSS how to learn it's pitfalls without encountering them mistakenly.
It looks like the stylesheet for the maze is located at: http://www.cssplay.co.uk/menu/candr/tilt.css. You can use that against the source code to figure it out.
One of my favorite is A List Apart. Great articles, not only about CSS like I linked, but about web design and more.
Also HTML Dog has some nice CSS entries.
Then, you can find great CSS resources on the w3 site.

How to disable menu wrap and enable horizontal scrolling on window resize?

First of all I am not programmer nor web developer.
Someone made a website for me but can not contact him right now.
After 3 days of googling i decided to post this question.
How to enable gorizontal scrolling instead of menu and footer wrap on window resize?
I tried attributes such as: display:inline-block; white-space: nowrap (i think this is related to text only), some JavaScripts.
I might placed these elements in wrong place as it's hard to know that code.
This is index file:
http://slawgd.webpark.pl/index.rtf
and pls find CSS here:
http://slawgd.webpark.pl/style.css
Thank you very much for you help!!
Greg
CAUTION: I am sorry that my answer has no real solution so you can choose to ignore.
The followings are just my comment on your web page after I had analyzed it.
It would be slightly better if you copy the rendered code of HTML as we won't get your data in your SQL Database.
Simply right click the page in browser and find Source Code to get it.
Also, you might find a better answer from the someone who help you to produce it because he is the only one person familiarize your page most.
EDIT: Just a suggestion and not a solution.
After I looked at your page, it is suggested that to find the someone because the page was complicated designed.
It needs lots of effort to modify it without affecting other component.
Moreover, it is quite horrible to work out on cross-broswer compatibility because the code is not well designed.
In mainland China, users of Firefox might not have much, but there are still numbers of users using Maxthon which include WebKit engine.
Variant IE-based browser in mainland China also give a slightly different result of rendering so the code must be optimized.
Therefore, ask the website editor for cleaning the code (such as repeating CSS, malformed HTML structure, etc) and working hard on cross-broswer compatibility is considerable.
More personal comment:
In conclusion, if you find a worker for your website construction with money pay, it seems that it is a huge job to rewrite it and it is not easy to persuade him to help you.
Maybe you can ask someone to help you with a simpler basic structure and insert the original JS background slide effect and drop menu effect to your newer, simpler, and cleaner structure.
There are still a readable amount of unnecessary wrappers inside the page.

Resources