Доброго времени суток.
В данной статье я бы хотел рассказать о разработке своего первого стартапа, а так же о том, как я потратил 3 часа в пустую из-засвоей самоуверенности недостатка знаний.
Честно признаться у меня давно «чесались» руки написать что-нибудь, и как вы понимаете, я не имею в виду никому не нужные университетские лабы, а то, что будет полезно как профессионалам ИТ сферы так и рядовым пользователям. И вот, некоторое время назад, мы: я (кодер) и два моих боевых товарища (верстальщик и сисадмин), решились начать работу над своим первым стартапом.
Так как дизайнера не было — я взял на себя обязанность нарисовать шаблон. Не скажу, что для меня это было просто — но это совсем другая история. В итоге почитав пару десятков статей, полистав книжки — я со своей задачей справился.
Дальше — верстка. Наш верстальщик — человек очень строгих понятий о стандартах: если что-то не соответствует — отправляется на помойку. «Только XHTML» — сказал он мне, и я был не против, скорее даже за, хотя на тот момент я совершенно не представлял, что меня ждет впереди. Пока шла работа над версткой — я занялся ядром.
Думаю, следует отметить, что до этого я писал под html и файлы шаблонов создавал как *.jsp, но прекрасно представлял, что такое xhtml и чем они отличаются. В итоге я подумал: «Если xhtml — то правильней создавать *.jspx страницы» — и, так и сделал. Как раз в это время верстка была готова: я получил html-файл с ресурсами.
Я надеялся задать высокий темп со старта, поэтому быстро скопировал разметку в jpsx файл, кое-где его поправил, скопировал ресурсы и запустил tomcat в надежде увидеть всю красоту, однако tomcat выругался на меня ошибкой со стектрейсом, какого я в жизни не видел. Я спросил у Google’а — «Google не ответил мне, качая головой». Хотя нет — он конечно же ответил — только это мне не помогло. Я еще потыкался вслепую, поменял то, удалил это — не помогало, «котик» упорно засыпал меня стектрейсами. Тут я сдался, нет, не совсем, просто понял, что наверное все-таки стоит почитать литературу о jspx.
В итоге я нашел следующие ошибки:
1. DOCTYPE
Вместо привычной для меня строчки в начале документа
Нужно пользоваться специальным тэгом
2. Escaped Chars
На странице присутствуют textarea тэги, внутри которых html код, и я как то совсем забыл, что символы
3. CDATA
Используется, когда необходимо выделить символьные данные внутри xml документа, например, стили, которые не вынесены в отдельный файл:
4. Разметка
В некоторых местах у одиночных тэгов забыл поставить / вконце
например
вместо
5. Директивы
Вместо
необходимо использовать
Все эти ошибки ломали структуру документа, парсер не мог его обработать и с чистой совестью выбрасывал исключение.
Исправив все эти ошибки, и запустив tomcat, я наконец-то увидел как браузер (FF 3.6.*) отобразил страницу.
Однако, я рано обрадовался.
После последнего затыка разработка пошла живее, мы уже практически вышли на финишную прямую. Для теста я установил все основные браузеры: FF, Opera, Safari, Chrome, IE. Хотя стоп, IE конечно уже был предустановлен. И кстати он как раз и испортил всю малину в последний момент.
Для справки (лирическое отступление): у меня стоит любимая старушка xp sp3 — в ней IE6, да я знаю, что это вообще древность, но не было такой уж прямо необходимости апгрейдить его до 7й или 8й версии.
IE я в принципе никогда не пользуюсь — только для тестирования кроссбраузерности. По непонятным для меня причинам, когда я в очередной раз решил проверить как работает приложение в IE — я увидел сообщение «IE не может отобразить страницу». Я немного удивился, как это он не может отобразить страницу «http:⁄⁄localhost⁄». Попрыгав с бубнами — я так ничего и не добился. Ослик бодро продолжал мне показывать сообщение «IE не может отобразить страницу». Ну, осёл он и в Африке осёл.
Я плюнул на IE, тем более когда получил верстку — мой товарищ клялся и божился что в IE6-9 все отображается идеально. И это была моя ошибка.
Прошло несколько дней, разработка все также шла ровно, без заминок. Мне просто стало интересно — почему не работает IE, у меня прямой выход в интернет, без проксей, настроек никаких нет. Я полез гуглить — оказалось, что я не единственный с такой проблемой. Пара советов не помогла, но я увидел следующий — «сбросить все настройки». Я так и сделал. И, о чудо, сей замечательный браузер стал грузить и отображать страницы.
Я тут же решил проверить и попробовал зайти на свое приложение, на localhost. Немного зависнув IE предложил мне сохранить файл. Я подумал, что это глюк, нажал отмена, попробовал зайти в FF, Opera и так далее — все остальные браузеры отображали страницу. Я снова попробовал зайти через IE, и опять увидел предложение сохранить файл. Сохранил, открыл через блокнот — и увидел разметку страницы. Попросил проверить товарищей — у них ситуация была такая же.
Изучив проблему, я получил следующее:
IE6, IE7, IE8 — предлагали сохранить файл
IE9 — нормально отображал страницу
Заподозрив неладное, я открыл в своем IE6 ту верстку, которую мне прислал наш верстальщик, html-файл. IE нормально отобразил страницу. Я начал искать отличия между этой версткой, и своей в jspx-шаблоне, и нашел, в самом начале, это был content-type:
— content-type моего товарища:
— мой content-type:
«Какого...?» — подумал было я, но решил попробовать и поставить content-type: text/html. На самом деле это принесло свои плоды — все браузеры стали работать одинаково — отображать пустую страницу. Даже IE. Дальше стандартная схема: Firefox+Firebug, перезагрузил страницу: в консоли пусто, никаких ошибок, внимание привлекла структура документа: внутри ничего не было, пустота. Я «попросил» у FF исходный код страницы: там внутри была вся необходимая структура документа. Я ее сохранил и начал снова искать отличия от той, что была в шаблоне на сервере.
Внимание привлекла следующая строка:
Хотя в шаблоне на сервере она выглядела так:
И на самом деле такое “преобразование” было применено ко всем тэгам
И кроме того, с тэгами , внутри которых было пусто — была такая же беда.
Решение пришло само собой. Обернуть эти тэги с помощью <![CDATA[]]>. Таким образом мы заставим сервер отдавать то, что внутри именно в таком же виде без преобразований, получаем:
Сохранил, перезапустил сервер, попробовал зайти. FF отобразил страницу. Скрестив пальцы, я запустил IE. И он тоже отобразил страницу так как она должна выглядеть. После этого я проверил во всех остальных основных браузерах — все работало как и должно.
Хотелось сделать как лучше, быстрее, чтобы не тратить время на изучение узких мест слабо знакомой технологии — в итоге получилось как всегда. Моя самонадеянность привела в данной ситуации к негативным последствиям. И хорошо, что ошибки были замечены на этапе разработки.
В данной статье я бы хотел рассказать о разработке своего первого стартапа, а так же о том, как я потратил 3 часа в пустую из-за
Предисловие
Честно признаться у меня давно «чесались» руки написать что-нибудь, и как вы понимаете, я не имею в виду никому не нужные университетские лабы, а то, что будет полезно как профессионалам ИТ сферы так и рядовым пользователям. И вот, некоторое время назад, мы: я (кодер) и два моих боевых товарища (верстальщик и сисадмин), решились начать работу над своим первым стартапом.
Начало разработки
Так как дизайнера не было — я взял на себя обязанность нарисовать шаблон. Не скажу, что для меня это было просто — но это совсем другая история. В итоге почитав пару десятков статей, полистав книжки — я со своей задачей справился.
Дальше — верстка. Наш верстальщик — человек очень строгих понятий о стандартах: если что-то не соответствует — отправляется на помойку. «Только XHTML» — сказал он мне, и я был не против, скорее даже за, хотя на тот момент я совершенно не представлял, что меня ждет впереди. Пока шла работа над версткой — я занялся ядром.
Первые «камни»
Думаю, следует отметить, что до этого я писал под html и файлы шаблонов создавал как *.jsp, но прекрасно представлял, что такое xhtml и чем они отличаются. В итоге я подумал: «Если xhtml — то правильней создавать *.jspx страницы» — и, так и сделал. Как раз в это время верстка была готова: я получил html-файл с ресурсами.
Я надеялся задать высокий темп со старта, поэтому быстро скопировал разметку в jpsx файл, кое-где его поправил, скопировал ресурсы и запустил tomcat в надежде увидеть всю красоту, однако tomcat выругался на меня ошибкой со стектрейсом, какого я в жизни не видел. Я спросил у Google’а — «Google не ответил мне, качая головой». Хотя нет — он конечно же ответил — только это мне не помогло. Я еще потыкался вслепую, поменял то, удалил это — не помогало, «котик» упорно засыпал меня стектрейсами. Тут я сдался, нет, не совсем, просто понял, что наверное все-таки стоит почитать литературу о jspx.
В итоге я нашел следующие ошибки:
1. DOCTYPE
Вместо привычной для меня строчки в начале документа
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Нужно пользоваться специальным тэгом
<jsp:output doctype-root-element="html" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" omit-xml-declaration="true"/>2. Escaped Chars
На странице присутствуют textarea тэги, внутри которых html код, и я как то совсем забыл, что символы
< и > нужно преобразовать к < и > соответственно, ну и все остальные естественно.3. CDATA
Используется, когда необходимо выделить символьные данные внутри xml документа, например, стили, которые не вынесены в отдельный файл:
<style type=”text/css”>
<![CDATA[
input {...} /* стили тут */
]]>
</style>
4. Разметка
В некоторых местах у одиночных тэгов забыл поставить / вконце
например
<img src="1.gif" width="10" height="10">вместо
<img src="1.gif" width="10" height="10"/>5. Директивы
Вместо
<%@ page contentType="text/html;charset=UTF-8" language="java" %>необходимо использовать
<jsp:directive.page contentType="text/html; charset=UTF-8"/>Все эти ошибки ломали структуру документа, парсер не мог его обработать и с чистой совестью выбрасывал исключение.
Исправив все эти ошибки, и запустив tomcat, я наконец-то увидел как браузер (FF 3.6.*) отобразил страницу.
Однако, я рано обрадовался.
Неожиданность
После последнего затыка разработка пошла живее, мы уже практически вышли на финишную прямую. Для теста я установил все основные браузеры: FF, Opera, Safari, Chrome, IE. Хотя стоп, IE конечно уже был предустановлен. И кстати он как раз и испортил всю малину в последний момент.
Для справки (лирическое отступление): у меня стоит любимая старушка xp sp3 — в ней IE6, да я знаю, что это вообще древность, но не было такой уж прямо необходимости апгрейдить его до 7й или 8й версии.
IE я в принципе никогда не пользуюсь — только для тестирования кроссбраузерности. По непонятным для меня причинам, когда я в очередной раз решил проверить как работает приложение в IE — я увидел сообщение «IE не может отобразить страницу». Я немного удивился, как это он не может отобразить страницу «http:⁄⁄localhost⁄». Попрыгав с бубнами — я так ничего и не добился. Ослик бодро продолжал мне показывать сообщение «IE не может отобразить страницу». Ну, осёл он и в Африке осёл.
Я плюнул на IE, тем более когда получил верстку — мой товарищ клялся и божился что в IE6-9 все отображается идеально. И это была моя ошибка.
Прошло несколько дней, разработка все также шла ровно, без заминок. Мне просто стало интересно — почему не работает IE, у меня прямой выход в интернет, без проксей, настроек никаких нет. Я полез гуглить — оказалось, что я не единственный с такой проблемой. Пара советов не помогла, но я увидел следующий — «сбросить все настройки». Я так и сделал. И, о чудо, сей замечательный браузер стал грузить и отображать страницы.
Я тут же решил проверить и попробовал зайти на свое приложение, на localhost. Немного зависнув IE предложил мне сохранить файл. Я подумал, что это глюк, нажал отмена, попробовал зайти в FF, Opera и так далее — все остальные браузеры отображали страницу. Я снова попробовал зайти через IE, и опять увидел предложение сохранить файл. Сохранил, открыл через блокнот — и увидел разметку страницы. Попросил проверить товарищей — у них ситуация была такая же.
Изучив проблему, я получил следующее:
IE6, IE7, IE8 — предлагали сохранить файл
IE9 — нормально отображал страницу
Заподозрив неладное, я открыл в своем IE6 ту верстку, которую мне прислал наш верстальщик, html-файл. IE нормально отобразил страницу. Я начал искать отличия между этой версткой, и своей в jspx-шаблоне, и нашел, в самом начале, это был content-type:
— content-type моего товарища:
text/html— мой content-type:
application/xhtml+xml«Какого...?» — подумал было я, но решил попробовать и поставить content-type: text/html. На самом деле это принесло свои плоды — все браузеры стали работать одинаково — отображать пустую страницу. Даже IE. Дальше стандартная схема: Firefox+Firebug, перезагрузил страницу: в консоли пусто, никаких ошибок, внимание привлекла структура документа: внутри ничего не было, пустота. Я «попросил» у FF исходный код страницы: там внутри была вся необходимая структура документа. Я ее сохранил и начал снова искать отличия от той, что была в шаблоне на сервере.
Внимание привлекла следующая строка:
<script type="text/javascript" src="/js/jquery-1.5.1.min.js"/>Хотя в шаблоне на сервере она выглядела так:
<script type="text/javascript" src="/js/jquery-1.5.1.min.js"></script>И на самом деле такое “преобразование” было применено ко всем тэгам
И кроме того, с тэгами , внутри которых было пусто — была такая же беда.
Решение пришло само собой. Обернуть эти тэги с помощью <![CDATA[]]>. Таким образом мы заставим сервер отдавать то, что внутри именно в таком же виде без преобразований, получаем:
<![CDATA[<script type="text/javascript" src="/js/jquery-1.5.1.min.js"></script>]]>Сохранил, перезапустил сервер, попробовал зайти. FF отобразил страницу. Скрестив пальцы, я запустил IE. И он тоже отобразил страницу так как она должна выглядеть. После этого я проверил во всех остальных основных браузерах — все работало как и должно.
В качестве заключения
Хотелось сделать как лучше, быстрее, чтобы не тратить время на изучение узких мест слабо знакомой технологии — в итоге получилось как всегда. Моя самонадеянность привела в данной ситуации к негативным последствиям. И хорошо, что ошибки были замечены на этапе разработки.