Category #3 Design of webpages

Message

#1 Post by **Hartzell** » Tue Mar 01, 2016 9:15 am

March 1, 2016
9:40 am
webpage: 是誰下令他們去划船？

1) Please start a new paragraph with this sentence --
這下更讓土人們

2) Pictures are here --
http://www.taiwanbasic.com/farmculture/order-boat/

Please place pictures in appropriate locations for paragraphs beginning as --

各位想一想，1915年非洲
children-schw2.jpg

1915年當人道主義者
boating-europe.jpg

現在請大家來檢視一下
corn-planting2.jpg

尤其當他們看到我們全副武裝
corn-planting.jpg

再看看現今德國、歐日等國的綠色休閒
green-scene.jpg

3) Line of LINKS at bottom of page
新連結一
新連結二
新連結三
should be centered on the line (with appropriate spacing)

In the HTML coding, each link should open in a new page

4) the HTML coding should add
<meta name="author" content="陳燕銀" />

#2 Post by **Hartzell** » Tue Mar 01, 2016 5:33 pm

March 1, 2016
5:35 pm
webpage: 是誰下令他們去划船？

1) Considering the way that the webpage looks now, I believe that we need to insert another picture.

I believe that should accompany the paragraph that begins

回憶起當天種完玉米
http://www.taiwanbasic.com/farmculture/ ... olding.jpg

And I think this picture should be aligned left.

2) I would hope that the links at the bottom of the page could be spread out more. Here is a mock-up for reference --
http://www.taiwanbasic.com/farmculture/ ... isplay.jpg

#3 Post by **Hartzell** » Thu Apr 07, 2016 8:33 am

Real Estate article webpage Project
April 9, 2016
12:35 pm

(A-1)
The goal is to design a webpage very similar to this one --
http://www.appledaily.com.tw/appledaily ... 4/2676711/

But with a slightly different flavor . . . .

(A-2)
The internet address of the desired URL for this new webpage is here --
http://www.taiwanbasic.com/rec-temp/web ... ddrenn.txt

(B)
( As regards the responsiveness of this page, you will note that the design of the page is essentially two columns.
According to what I remember when viewing this on a cellphone, in the cellphone version, the right column is
eliminated. That is fine for this type of news webpage. )

(C)
If you want to know the background to my decision to undertake a webpage design project of this nature, please listen to -- http://www.taiwanbasic.com/rec-temp/web ... te-web.mp3

I also discuss some additional conceptualizations regarding this website here --
http://www.taiwanbasic.com/rec-temp/web ... oncept.mp3

(D)
My online reference data files are here --
http://www.taiwanbasic.com/rec-temp/web ... ealestate/

(E)
I have made four jpg graphics files --
realestate01.jpg
realestate02.jpg
realestate03.jpg
realestate04.jpg

In these graphics files, I have numbered every item on the page of
http://www.appledaily.com.tw/appledaily ... 4/2676711/
as "web page items", hence I begin with
wpitem 01
wpitem 02
wpitem 03
etc.

(F)
So, while keeping the design somewhat similar, I will recommend a lot of changes to the content of
this new webpage.

Below, I will advise you as to the changes I propose --

(G)

wpitem 01

topmost line --
new: 由營養均衡論吃葷吃素?
link to: http://www.angrin.tlri.gov.tw/cow/dhi10 ... 1P56-1.htm

second line --
new: 認識有毒植物?
link to: http://www.sln.ks.edu.tw/plants/pteach/ox.html

BEGINNING of second line -- add
ISnew-logo.jpg

END of second line -- add
safety-first.jpg

wpitem 02

Use bigmangodaily graphic on left side
http://www.taiwanbasic.com/rec-temp/web ... go-01b.jpg

Then, replace other items with "logo items" from bottom of
http://www.taiwanus.net/index.php

See my selections (the circled items) on logos-reference.jpg

Establish links to same webpages as here on http://www.taiwanus.net/index.php

wpitem 03

今日蘋果
new: 天氣預報
link to: http://www.cwb.gov.tw/V7/forecast/

即時新聞
new: 即時新聞
link to: http://www.cna.com.tw/

動新聞
new: 星座新聞
link to: http://www.new0.net/tag-%E6%98%9F%E5%BA%A7.html

娛樂蘋道
new: 良醫健康
link to: http://health.businessweekly.com.tw/ESo ... 03&id=0003

蘋果地產
new: 天文新知
link to: http://tamweb.tam.gov.tw/v3/TW/list.asp?mtype=c2

特選話題
new: 食安新聞
link to: http://times-bignews.com/category.php?csp=food_safety

APPLE FASHION
new: SWIMSUIT PICTURES
link to: https://goo.gl/DDrSt0

蘋論陣線
new: 颱風新聞
link to: https://tw.news.yahoo.com/topic-typhoon/

昔日
new: 長壽新聞
link to: http://goo.gl/51fUk4

wpitem 04-A

elect-meter.jpg

wpitem 04-B

ceiling-leak.jpg

wpitem 05-A

const-manage.png
[ needs to be cropped ]

link to: http://www.cpami.gov.tw/

wpitem 05-B

cracks.jpg

wpitem 06

taiwan-gmap.png

wpitem 07

即時新聞
new: 法院即時新聞
no links need be established

看更多
new: PART 1

See my listing in
court-news01.docx

wpitem 08

經營建署統計，在台灣房屋漏水一直高居「購屋糾紛」榜首

wpitem 08-B

taipei-buildings.jpg

wpitem 09

g2b_data2.gif

link to -- http://cpabm.cpami.gov.tw/G2Bbuild.html

wpitem 10

(remove)

wpitem 11

new: 頭條新聞拒付房仲費何瑞元妻勝訴

( no selection bar or scrolling is needed )

It is just these Chinese words on the screen, in the "design style" of this wpitem.

wpitem 12

Several social media buttons may be added

Links may be established to go to the MAIN PAGE of each social media site

Example --
facebook is linked to https://www.facebook.com/

Linkedin is linked to https://www.linkedin.com/

etc.

wpitem 13

拒付房仲費何瑞元妻勝訴
2015年11月14日更新

wpitem 14

Use Hartzphoto3.jpg

何瑞元（圖）的妻子拒繳房仲費，打官司經高等法院判決勝訴。網路照片。

wpitem 15

Use purchase-bldg01.docx

wpitem 16

new-immig2.jpg

wpitem 17

Use purchase-bldg02.docx

wpitem 18

logo-01b.jpg

大芒果日報
說這專頁讚 711 萬人

wpitem 18-B

釐清台灣的國際地位真相！
有話要說投稿「台美論壇」

wpitem 19 and
wpitem 20

Use purchase-bldg03.docx

Also insert --
16-04-03-12-11-39-021_photo2.jpg
[ needs to be cropped ]

陳燕銀（圖）拒繳房仲費，打官司經高等法院判決勝訴。網路照片。

wpitem 21

熱門影音
change to: 輕鬆影音

then add title: 日本猩猩與老狗系列

[ select a minimum of eight or nine or more "monkey and dog videos" . . . . -- ]

https://www.youtube.com/watch?v=BzkfuzjUpNY 第二季第一集

https://www.youtube.com/watch?v=yUDBQn0_tuU 第二季第二集

https://www.youtube.com/watch?v=4IoOE59ceno 第二季第三集

https://www.youtube.com/watch?v=j4-7gP6qilM 第二季第四集

https://www.youtube.com/watch?v=Mr2sPaqYFtE 第二季第五集

https://www.youtube.com/watch?v=ewsV-Acuxzg 第二季第六集

https://www.youtube.com/watch?v=PsBgNNXKu90 第二季第七集

https://www.youtube.com/watch?v=oLTho7xMSM0 第二季第八集

https://www.youtube.com/watch?v=jkTmdfydgEM 第二季第九集

wpitem 22

/need/photoshop/HighCourt513290.jpg
[ Please remove date in lower left corner ]

add wording: 台灣高等法院

link to: http://tph.judicial.gov.tw/

wpitem23

PresLee.jpg

李登輝：九二共識是捏造歷史

link to: http://www.peoplenews.tw/news/ec1db785- ... e5f02c972c

wpitem 24

研討會訊息

( There is a good graphic for this on the
lower right corner of --
http://www.rootlaw.com.tw/index.aspx )

( The link should also be established )

wpitem 25

春夏時裝秀

fashion-girl.jpg

wpitem 26

外貿高手台北講習

trade-promo.jpeg

wpitem 27

mango-09picSMALL.jpg

wpitem 27-B

PrettyMiss.jpg

link to: http://www.wacoal.com.tw/

wpitem 28

wacoal.jpg

link to: http://www.wacoal.com.tw/

wpitem 29

法院即時新聞
( no links need be established )

PART 2

See my listing in
court-news02.docx

wpitem 30

[ two graphics placed horizontally ]

judic-new.jpg
link to -- http://www.judicial.gov.tw/revolution/index.asp

judic-sun.jpg
link to -- http://www.jrf.org.tw/newjrf/index_new2014.asp?id=4482

*** PLEASE REFERENCE need/photoshop/judic-clear.jpg and make a new graphic (judic-sun.jpg) with lettering --
司法陽光網
[ Note: size and corners should be done similar to judic-new.jpg ]

wpitem 31

頭條新聞拒付房仲費何瑞元妻勝訴

wpitem 32

Use purchase-bldg04.docx
( including portion copied from wincourt.htm, and
necessary changes/amendments )

wpitem 33

index_speed_table_03_1.jpg

link to -- http://www.ecosolutions.com.tw/

wpitem 34

[ three videos, displayed horizontally, descriptions underneath ]

太陽能發電
https://www.youtube.com/watch?v=P0PEqgjdkXc

海浪發電
https://www.youtube.com/watch?v=3nVKncpmM1w

水力發電
https://www.youtube.com/watch?v=RC0QJx4bcrw

wpitem 35

[ Small Headline and two graphics vertically ]

台灣學生抗議高房價

Taiwan_Sunflower_LY.jpg

tentcity-flic606.jpg

wpitem 35-B

( SMALL HEADLINE title )

租屋和購屋法規大收集

wpitem 35-C

[ Buttons and their links are given below ]

[ These are to appear one per line , stacked vertically , with appropriate spacing in between ]

公寓大廈管理條例
http://www.rootlaw.com.tw/LawArticle.as ... 00-1020508
button-711.png

公寓大廈管理條例施行細則
http://www.rootlaw.com.tw/LawArticle.as ... 00-0941116
button-712.png

消費者保護法
http://www.rootlaw.com.tw/LawArticle.as ... 00-1040617
button-713.png

消費者保護法施行細則
http://www.rootlaw.com.tw/LawArticle.as ... 00-1041231
button-714.png

不動產經紀業管理條例
http://www.rootlaw.com.tw/LawArticle.as ... 00-1001230
button-715.png

不動產經紀業管理條例施行細則
http://www.rootlaw.com.tw/LawArticle.as ... 00-0910322
button-716.png

民法物權編
http://www.rootlaw.com.tw/LawContent.as ... 00-1010613
button-717.png

民法物權編施行法
http://www.rootlaw.com.tw/LawArticle.as ... 00-0990203
button-718.png

土地法
http://www.rootlaw.com.tw/LawArticle.as ... 00-1000615
button-719.png

土地法施行法
http://www.rootlaw.com.tw/LawArticle.as ... 00-1000615
button-720.png

wpitem 35-D

( The following graphics should probably be reduced in size somewhat )

LEFT --
big-mangoBOTT.png

RIGHT --
groupBOTT.png

CENTER -- 律師顧問 || 利益迴避 || 反對中國南海軍事化 || 海外論壇 || 新聞自由

( If this Chinese lettering is too much, you can remove the 海外論壇 )

(There are no links to be established here.)

wpitem 36

(remove)

wpitem 37

咖啡杯系列

[graphic] http://www.taiwandocuments.net/sovproof ... ROCmug.jpg

大特價！

wpitem 38

(remove)

wpitem 39

Simplify to horizontal "textured bar" across the screen

approx. 42 px in height, could use green047.jpg
See -- http://www.grsites.com/archive/textures ... e/id=1353/

wpitem 40

Replace these with a collection of five horizontal graphics,

Get four graphics and relevant links from --
http://www.taiwanus.net/index.php
See my reference -- link-showing02.jpg

But please redesign the lettering on the 賢哥健康站 graphic
to be more attractive (shadowing, 3D effect, etc.)

Get one more graphic and relevant link from --
http://www.taiwan-un-alliance.org.tw/
See my reference -- link-showing01.jpg

Ordering of the five graphics on the new webpage, from left to right,
is according to the numbers I have indicated --
1 2 3 4 5

wpitem 41

*** eight items in horizontal row, with links established. Separation of items is: ｜

台北旅遊網｜
http://www.travel.taipei/

1999 服務網｜
http://1999.taipei.gov.tw/

台北市民 e點通｜
http://www.e-services.taipei.gov.tw/

台北 e大學習網｜
http://elearning.taipei/mpage/

國立空中大學｜
http://www.nou.edu.tw/

國立台灣科學教育館｜
http://www.ntsec.gov.tw/User/index.aspx

中央健康保險署｜
http://www.nhi.gov.tw/

文化部
http://www.moc.gov.tw/

wpitem 42

© 2016 http://www.bigmangodaily.com Limited. All rights reserved. 台灣大忙果日報版權WikiLeaks所有歡迎轉載

#4 Post by **Hartzell** » Sun Apr 10, 2016 3:29 am

April 11, 2016
9:57 pm

I have a plan to make a sort of "landing page" on another HIGHER-UP subdirectory.

We can discuss this later.

#5 Post by **Hartzell** » Tue Apr 12, 2016 8:16 pm

April 16, 2016
8:38 pm

1) I am in an internet cafe in Nantou County, southern Taiwan. The screen is fairly wide, however I still think the line of "white lettering" with "black background" at the top is too much (too wide). I suggest that you remove 星座新聞

2) If the picture of the 台灣高等法院 is followed by the picture of President Lee, there should be at least one blank line between them.

3) If the picture of the students occupying the 立法院 is followed by the tent city picture, there should be at least one blank line between them.

4) In the line beginning 經營建署統計 please move the 一直高居 down to the second line.

5) Please change the label of 台北101 to 台北地區高樓林立

6) In the main wording/text/essay the type size of the TITLES and SUBTITLES should be different.

Of course the SUBTITLES would be a bit smaller than the TITLES.

So, for example, 買賣完原則上就應付費 is a SUBTITLE.

7) There is still a picture of Ms. Chen which needs to be "integrated" into the wording/text/essay portion.

8-A) Test Here should be 牆壁裂開

8-B) 「不動產標的現況說明書中」有關 should be 「不動產標的現況說明書」中有關

9) Bottom of page, 長青論壇 link should be --
http://caochangqing.com/big5/index.php?dispmode=0

10) Meta tags, see -- http://www.taiwanbasic.com/cbs/viewtopi ... p=141#p141

#6 Post by **Hartzell** » Tue Apr 19, 2016 6:45 pm

April 19, 2016
6:45 pm

real estate webpage

1) In the 判決書 portion,

I would hope that this entire portion could have some very light background color.

95年度上易字第630號 should be aligned right

There should be a blank line before the paragraph that begins --
上列當事人間請求給付服務報酬事件，

At the bottom, after the 不得上訴。 you need the date --
中　　華　　民　　國　　 95　　年　　 10　　月　　 25　　日
(which has many spaces between each "character")

You could add a blank line before --
台灣高等法院

And also put many spaces between the characters of 台灣高等法院

2) The caption to Ms. Chen's picture is missing.

3) The title of 房仲未據實告知屋況，仲介業者沒資格收取服務費 could be in bigger typeface/typefont.

4) In my cellphone, when viewing this webpage, a lot of the pictures and data in the right column are still showing.

5) The wording of 租屋和購屋法規大收集 can be treated as a title, and done in a bigger typeface/typefont.

6) We have these ten green "buttons" which link to different laws. What can be done to make this entire AREA more attractive? Maybe we need a picture or some design or some "artwork" in the background?

7) It appears that the right column is not long enough.
As a first step to dealing with this problem, I suggest adding in three or four more MONKEY/DOG videos.

8) caption for Ms. Chen picture --
陳燕銀（圖）拒繳房仲費，打官司經高等法院判決勝訴。網路照片。

9) The line of 中　　華　　民　　國　　 95　　年　　 10　　月　　 25　　日
can be centered, and an additional space or two added between "characters"

10) The two yellow-background HEADERS of * 法院即時新聞 *
should be the same size. I prefer the bigger size.

11) I think we can put a CHART/TABLE next to the buttons. For the location, see --
http://www.taiwanbasic.com/rec-temp/web ... -chart.jpg

The design style would be something like this --
http://www.taiwanbasic.com/rec-temp/web ... -chart.jpg

But I have new data, please see --
http://www.taiwanbasic.com/rec-temp/web ... atios.docx

-

#7 Post by **Hartzell** » Wed Apr 20, 2016 7:40 am

April 20, 2016
8:08 am
real estate webpage

1) The HEADERS on the chart/table still need to be added. Please see the wording for the HEADERS here (where I have circled in green) -- http://www.taiwanbasic.com/rec-temp/web ... chart2.jpg

2-A) I think the first line of the caption on Ms. Chen's picture should LINE-BREAK after the characters 高等

2-B) On the cellphone version, you need a blank line after the caption of Mr. 何 and also after the caption of Ms. 陳

3-A) As regards the "blank space" next to the 環保綠生活 graphic, can this be CROPPED to fit --
http://www.taiwanbasic.com/rec-temp/web ... stline.jpg

3-B) The links for the 司法改革新作為 and 司法楊光網 need to be made. Next to these can be a third graphic.
司法改革新作為
link to -- http://www.judicial.gov.tw/revolution/index.asp

司法楊光網
judic-sun.jpg
link to -- http://www.jrf.org.tw/newjrf/index_new2014.asp?id=4482

My question is, can this be adjusted to become the third graphic -- http://www.taiwanbasic.com/rec-temp/web ... raphic.jpg

and linked to https://www.tmm.org.tw/

4) The "Wacoal 華歌爾" graphic can be smaller.

5) Here is a graphic which can be inserted in the right column after the 外貿高手台北講習
http://www.taiwanbasic.com/rec-temp/web ... WH-pic.jpg

Notes:
a) The hair should be fixed with Photoshop, see --
http://www.taiwanbasic.com/rec-temp/web ... ic_fix.jpg

b) There should be lettering under this graphic
2013年的聲明
and a link made to http://www.taiwanadvice.com/advert.htm

6) The red background on the Chart Header is probably not good.
See -- http://www.taiwanbasic.com/rec-temp/web ... nBACKG.jpg

Maybe a simple BEIGE texture would be suitable --
http://www.grsites.com/archive/textures ... texture/0/

#8 Post by **Hartzell** » Thu Apr 21, 2016 3:12 pm

April 21, 2016
3:14 pm

Hello:

Here are some final issues for this webpage.

1) There is a picture which could be described as 學生佔領立法院, and you now have three videos above it.

The ordering, beginning from the left, (and the first character of the description) is --
= = = = 1) 太 2) 海 3) 水

I would recommend changing the ordering to

= = = = 1) 太 2) 水 3) 海

2) I put this webpage through a LINK CHECKER and found a number of re-directs.

I guess it would be a good idea to update those.

Please see --
http://www.taiwanbasic.com/rec-temp/web ... e0421.docx

-

#9 Post by **Hartzell** » Mon May 02, 2016 10:42 am

Hello:

May 2, 2016
10:45 am

I am getting ready to coordinate with you on the design of the small-farm 2 and small-farm3 webpages. (The design of the small-farm1 webpage can be our guide.)

However, in regard to --
http://www.taiwanadvice.com/farm/small/

which is the small-farm1 webpage that you did, I am wondering why I CANNOT put this small-farm1 webpage through the html validator at https://validator.w3.org/

Notably, I checked the other pages that you designed with this validation program without problems.

= = = PROBLEM #1 = = =
The HTML validator program at refuses to process the small-farm1 webpage at --
http://www.taiwanadvice.com/farm/small/

= = = PROBLEM #2 = = =
When I go in and make a few adjustments to the content of the small-farm1 webpage, the Chinese text then immediately becomes garbled.

In order for me to FIX the Chinese text, I have to change the metatag to --
<meta charset="big5" />

I am wondering why this is the case?

Your comments?

#10 Post by **Hartzell** » Tue May 03, 2016 12:10 pm

Hello:

May 3, 2016
12:10 pm

http://validator.w3.org/

I get a notice of three "problems" when running this small-farm1 webpage through the validator.

https://validator.w3.org/nu/?doc=http%3 ... 2Fsmall%2F

What is your opinion about these items? I would guess that maybe the first one is the most significant.

What do you think?

Taiwan Governance

Category #3 Design of webpages

Category #3 Design of webpages

Re: Category #3 Design of webpages

Re: Category #3 Design of webpages

Re: Category #3 Design of webpages

Re: Category #3 Design of webpages

Re: Category #3 Design of webpages

Re: Category #3 Design of webpages

Re: Category #3 Design of webpages

Re: Category #3 Design of webpages

Re: Category #3 Design of webpages