Design of webpages

Message
Author
Hartzell
Site Admin
Posts: 320
Joined: Thu May 16, 2013 9:15 am

Re: Design of webpages

#11 Post by Hartzell »

January 31, 2016
12:42 pm
COMMENTS ON
http://vosive.com/demo/12/read-online2.html

1) Doing a mouseover on the image on screen, then
in upper left corner I see lettering of
Taiwan-Complete-Ebook

But I think this should be changed to crown2Ebook.pdf
Isn't that true?

Is this a problem at my end, or what?

I have copied this pdf to a new pdf (crown2Ebook.pdf) on the website --
See -- http://www.twsite.net/ebooks/crown2/


2) I tried to print out this image on the page,
read-online2.html
and it doesn't work.

This is not desirable. What do you think is the problem?

I don't think that the image here is a jpg image. That might be the problem.


3a) In order to deal with the download problem, I suggest the following.
Please refer to --
http://www.taiwanbasic.com/rec-temp/web ... notes.docx

3b) So, in designing the HTML page, first there is the book title on the page
then the
何瑞元著
Richard W. Hartzell

Then, a jpg image of the book cover (not too big)

Then the description of --
PDF檔 237頁

Then a link for the author.html
作者簡介

Then the characters
閱讀說明:
which (when pressed) opens up a collapsible area of text, which says
讀者如果來過此網頁,而曾經在手機、平板、iPad、筆記型或桌上型電腦等閱讀過這本書,現在建議你如下:

若要繼續閱讀這本書,請先在你的手機、平板、電腦等上使用已經安裝之”瀏覽器”、”檔案總管”、”Adobe Reader”等應用程式,試著去尋找此 crown2Ebook.pdf之檔案。通常是會存入你所預設之 “下載” (“Download”) 的副目錄內。

若找到,就可以順利的繼續閱讀。

否則,就繼續往下看看。


4) Then after all of the above, there is a full size jpg image of the book cover.

5) Underneath this there should be a button/link, which says --
閱讀 (下載)

6) Pressing on this link should then take the reader to Vosive's existing functionality in the
read-online2.html file


THE ABOVE IS MY SUGGESTION in order to solve the problems we have encountered so far.

= = = = = Updated: 1:38 pm = = = = =
Note: In regard to a collapsible block, you might reference the styling of this webpage --
https://www.riddles.com/quiz/riddles-for-kids

There they have a "Show Answer" which opens up to show a block of text.
(Obviously, I don't need the social media buttons.)
Then it is possible to press the "Hide Answer" button to collapse that back up.

Hartzell
Site Admin
Posts: 320
Joined: Thu May 16, 2013 9:15 am

Re: Design of webpages

#12 Post by Hartzell »

February 1, 2016
9:06pm


1) The read-online2.html does not produce an "image" if the user tries to print out the page.
I captured a screen image of this, see -- http://www.taiwanbasic.com/rec-temp/web ... 2print.jpg
There are only "two sides" of a rectangle showing, where one would expect the book cover to be.

If this cannot be corrected, might it be possible within this "rectangle" to display the wording of
見山又是山
何瑞元著
within this "rectangle"?

Obviously, the 見山又是山 would be in a larger typeface.

What do you think?


2) On crown2.html,
I think we can move 作者簡介 to underneath the Richard W. Hartzell

(This 作者簡介 is a LINK.)


3) In regard to the lettering
PDF檔 237頁

There should be several more spaces after PDF檔


4a) On my cellphone, when I pushed the button for 在線閱讀
it still began downloading the entire PDF file.

But on my desktop computer, it didn't .........

4b) Hence, IN THE LEFT SIDE TEXT I am forced to conclude that after the last line which says --
否則,就繼續往下看看。

We will need to add another line --
註:對這一類檔案,有的手機、平板、電腦等沒有在線閱讀的功能。如此,兩個按鈕 ("在線閱讀" 和 "下載PDF檔") 之效果會變成一樣的。

(If you have a better Chinese grammatical way of saying this, perhaps you can do the necessary adjustment .... )


5a) It would even be great if you could add an additional two characters (on a separate line), which would be --
隱藏

and this would be a LINK to hide the left side text, if the text was being displayed at that point.


5b) So the complete LEFT SIDE TEXT would be --
讀者如果來過此網頁,而曾經在手機、平板、iPad、筆記型或桌上型電腦等閱讀過這本書,現在建議你如下:

若要繼續閱讀這本書,請先在你的手機、平板、電腦等上使用已經安裝之”瀏覽器”、”檔案總管”、”Adobe Reader”等應用程式,試著去尋找此 crown2Ebook.pdf之檔案。通常是會存入你所預設之 “下載” (“Download”) 的副目錄內。

若找到,就可以順利的繼續閱讀。

否則,就繼續往下看看。

註:對這一類檔案,有的手機、平板、電腦等沒有在線閱讀的功能。如此,兩個按鈕 ("在線閱讀" 和 "下載PDF檔") 之效果會變成一樣的。

隱藏


5c) I realize that your 閱讀說明 button is already a toggle switch, to turn this LEFT SIDE TEXT on and off.

However, when this left side text is fully displayed, it is not immediately obvious that pushing the 閱讀說明 button will hide this text.

Hence, I give the above suggestion, that the LEFT SIDE TEXT should include an additional two Chinese characters --
隱藏
as the last line, and this is a LINK to hide the left side text.


6) Also, i would ask that please adjust the quotation marks, as used in the LEFT SIDE TEXT.

By way of explanation, this word --
“Download”

appears to have a left quote on the left, and a right quote on the right.

However, some of the others are not so perfect.

Sometimes, it seems that there is a right quote on the left, or a left quote on the right.

I realize that this is a minor point, but it is worth fixing.

Thank you.


7) Do you think that BLACK is the best background color for this whole page?

What other options might be reasonable?


8) On the author.html page
IN THE RIGHT COLUMN
There are three paragraphs of text.

There should be a blank line between each paragraph.

Then the last two words in the RIGHT COLUMN
首頁

can be "centered" within the RIGHT COLUMN area.

Hartzell
Site Admin
Posts: 320
Joined: Thu May 16, 2013 9:15 am

Re: Design of webpages

#13 Post by Hartzell »

February 2, 2016
12:30 am

1) How about a background like the one you sent, but more of a light green. ? ?


2) You still need to add more spaces after the wording of
PDF檔


3) If you are making the 隱藏 into a button, I really think it should be smaller in size.
Also, please add a blank line before this button.


4) In LEFT SIDE TEXT, I guess we should note the size of this file.
After the wording of 試著去尋找此
please add a space, and then --
(大小接近: 80M)
and then a space


5a) I downloaded crown2Ebook.pdf from --
http://vosive.com/demo/12/crown2Ebook.pdf

and placed that on my server. So, it is now at --
http://www.twsite.net/ebooks/crown2/crown2Ebook.pdf

5b) Is this the pdf file that is being linked to in your READER?
Or, perhaps you can adjust the coding to facilitate this .......


REFERRING TO YOUR REPLY COMMENTS OF FEBRUARY 1ST --
6) Yes, the read-online2.html looks fine on screen. But did you try to print the page? ?

In my experience of several tries, it does not produce an "image" if the user tries to print out the page.

So, I was wondering if some workaround was possible. Please see relevant comments in previous posting.

Hartzell
Site Admin
Posts: 320
Joined: Thu May 16, 2013 9:15 am

Re: Design of webpages

#14 Post by Hartzell »

Feb. 2, 2016
9:04 pm

1) Please adjust your coding to put all subsidiary files in one "mother-type" subdirectory. So now you have css, img, etc. and whatever ......
and my desire is that they all be put inside a /crown2/ subdirectory.

Then, when I upload to my server, I only have to worry about three items -- read-online2.html and crown2.html and the /crown2/ subdirectory.

2) I would note that I think the following line in crown2.html is not optimal --
<p>PDF 檔  237頁</p>

It would best be changed to --
<p>PDF 檔 &nbsp; &nbsp; &nbsp; 237頁</p>

3) The light green background looks very good now. However, the lettering is white, and that does not show up so well. (The contrast is poor.)

Do I think that we should change the lettering to another color? No, I don't.

However, I believe that there are some kinds of typefonts/typefaces which have a bit of "black border" or "black shading". If one of these typefonts/typefaces were used, then the color of the type could remain as white, but it would still stand out from the light green colored page.

What do you think?

4) Over and above the comments given above, ...... On my desktop computer, the layout of these pages is looking pretty good.

However, on my cellphone, when looking at crown2.html, I see that the "閱讀說明" button is sitting exactly on top of the coverpage image.

My suggestion would be to add two blank lines after the "閱讀說明" button, when displaying on a cellphone.

Additionally, the "在線閱讀" button is exactly at the bottom of the screen.

My suggestion would be to add two blank lines after the "在線閱讀" button, when displaying on a cellphone.

[ I would also note that on a cellphone, the "隱藏" button sits at the very bottom of the screen. ]

My suggestion would be to add two blank lines after the "隱藏" button, when displaying on a cellphone.

===> Are there similar problems on a Pad (we say "平板" 電腦) ..... I am not sure.

In the author.html, after the "首頁" link, I would also think it desirable to add two blank lines.

7) Additionally, in the coding for author.html you have --
<title>見山又是山</title>

which should be changed to
<title>作者:何瑞元</title>

Hartzell
Site Admin
Posts: 320
Joined: Thu May 16, 2013 9:15 am

Re: Design of webpages

#15 Post by Hartzell »

February 2, 2016
11:58 pm

1) The only thing I would note now is that I think that on the page crown2.html

The
見山又是山

at the very top should be another size larger typeface/typefont.

2) Please ZIP this project up, and add to your ZIP file.

3) I will release the Milestone.

4) For the next webpage project, please see
the January 23, 2016, posting here --
http://www.taiwanbasic.com/cbs/viewtopic.php?f=6&t=33

We need to have something of a different design for this webpage, although the subject is Andrew.

Hartzell
Site Admin
Posts: 320
Joined: Thu May 16, 2013 9:15 am

Re: Design of webpages

#16 Post by Hartzell »

http://vosive.com/demo/andrew/andrew.html
COMMENTS
Feb. 16, 2016 at 6:02 am

1a) For the GREEN BAR at the top of the page, I would suggest using some attractive "texture" such as --
http://www.taiwanbasic.com/rec-temp/web ... en106B.jpg

(The size of this graphic image may be adjusted if necessary)

1b) Is it possible to have some small "button" in the upper right corner of this GREEN BAR, so that it can be made to disappear (if the viewer wants to see the FULL SCREEN )

? ?

1c) I am not sure that the RAGGED EDGE effect is suitable ...... what other possibilities are available? Maybe something curved?

1d) Moreover, I think an additional BLANK LINE needs to be added after the GREEN BAR.


2) In my experience, most people use cloud-based email services these days, and not the email service which is installed on their computer .... hence this --
Email: ajhtge@hotmail.com

SHOULD NOT BE a link


3) Then I think that the SIZE of this "contact area" design (which has the "envelope-type graphic" on the left and right) --
http://www.taiwanbasic.com/rec-temp/web ... ontact.jpg

CAN BE REDUCED BY HALF


( Unless you have some special intent regarding the continuing design here )

Hartzell
Site Admin
Posts: 320
Joined: Thu May 16, 2013 9:15 am

Re: Design of webpages

#17 Post by Hartzell »

Feb. 18, 2016, Thursday
12:48 pm
Early afternoon in Taipei

I am working on my wife's computer (office) here now. Her computer screeen (screen only, not including outer frame) appears to be 46 cm when measured diagonally. That is approx. 23 cm tall and 41 cm wide.

1a) When viewing this andrew.html, at the resolution of 70%, it is OK, and 80% I believe so too ...... but when viewing at 90%, there is a huge blank area. This blank area is above the 其他聯絡方式

See -- http://www.taiwanbasic.com/rec-temp/web ... k-area.jpg


1b) Looking at your HTML code, my best guess is that this blank area is being caused by the following coding

See -- http://www.taiwanbasic.com/rec-temp/web ... ml-div.txt

(Although of course I could be mistaken ........ )


2) For the CONTACT INFORMATION, please arrange as follows --

See -- http://www.taiwanbasic.com/rec-temp/web ... ontact.jpg

This is all HTML text, to be put directly into the HTML coding.


3) For the ADDITIONAL CONTACT INFORMATION, please arrange as follows --

See -- http://www.taiwanbasic.com/rec-temp/web ... ontact.jpg

何岸榮 is HTML text, to be put directly into the HTML coding.

The remainder --
0910 067 950
taiwanmidway@hotmail.com


is a graphic, which needs the statement of <img src=""


4) On this andrew.html page, Can you find some pictures in the video(s) that are better than these?

Those could then be used as the Youtube "picture" .

Hartzell
Site Admin
Posts: 320
Joined: Thu May 16, 2013 9:15 am

Re: Design of webpages

#18 Post by Hartzell »


Hartzell
Site Admin
Posts: 320
Joined: Thu May 16, 2013 9:15 am

Re: Design of webpages

#19 Post by Hartzell »

http://vosive.com/demo/farm/small_farm1.html
COMMENTS
Feb. 24, 2016
8:55 am

1) At the top, you have some blue background. Could this please be changed to light green?

2a) For the picture at the top of the page, something more colorful might be appropriate. How about http://www.taiwanbasic.com/farmculture/ ... GP6597.JPG

2b) The lettering on top of (overlaying) the picture should be
小農主義者民宿﹝一﹞

2c) The lettering of 生命能量的愛之旅 can appear at the top of the page.
See reference -- http://www.taiwanbasic.com/rec-temp/web ... m_head.jpg

3) In your HTML coding, it would be appropriately changed to

<title>小農主義者民宿﹝一﹞</title>
<meta name="author" content="陳燕銀" />
<meta name="description" content="小農主義者民宿﹝一﹞" />

Hartzell
Site Admin
Posts: 320
Joined: Thu May 16, 2013 9:15 am

Re: Design of webpages

#20 Post by Hartzell »

http://vosive.com/demo/farm/small_farm1.html
Feb. 24, 2016
9:59pm

1a) I think the title that begins 生命能量 can be smaller

1b) I think I liked it better when you overlayed the TITLE LINE on the topmost picture, and that was in a white color.
If white doesn't show up well on the current image, perhaps you could add some "shading" to the typeface/typefont.
The TITLE LINE is 小農主義者民宿﹝一﹞
The squiggly lines in front and back of this TITLE LINE can be removed.

1c) This TITLE LINE needs to be bigger in size.

2) You have three links at the bottom of the page.

I suggest that the bottom right link picture/image be changed to
http://www.taiwanbasic.com/farmculture/ ... GP6606.JPG
and the caption is 小農主義者民宿﹝二﹞


3) In your HTML coding,

<a href="water-glass.html" class="isotope-alt-image">
== SHOULD BE CHANGED TO ==
<a href="water-grass.html" class="isotope-alt-image">


AND HERE IS A REFERENCE FOR MAKING CORRECTIONS TO THE HTML CODING FOR THE BOTTOMMOST RIGHT "LINK" --
<a href="small_farm2.html" target="_blank" class="isotope-alt-image">
<img src="img/IMGP6606-reduced.JPG" alt="image" />
<div>
<h4>小農主義者民宿﹝二﹞</h4>
</div>
</a>
<div class="isotope-alt-details">
<div>
小農主義者民宿﹝二﹞
</div>
</div>

Post Reply