Showing posts with label html5. Show all posts
Showing posts with label html5. Show all posts

Tuesday, October 8, 2013

Стартирах нов проект kazanlachani.com

Стартирах нов проект kazanlachani.com















Пуснах нов портал за обяви http://kazanlachani.com/

Надявам се да бъде полезен всичко стана на майтап ;)

За разработка позлвах php codeigniter, html5, css, jQuery

Ако имате критики или предложения, ще се радвам да ги споделите.
Оставям времето и потребителите да го раздвижат

Поздрави Мехмедов

Friday, June 14, 2013

Модална форма за вашето меню html, css, jquery

Модална форма за вашето меню!

Много често при разработка на нашите страници искаме да имаме някой друга нова функционалност или нещо по свежо.

Скоро се замислих какво ми липсва в някой от моите проекти и реших, че е време да си направя модална форма, където ще ми бъде изнесена повечето навигация.

Предимствата на този тип форми е че left side и right side в един сайт стават ненужни.

И така седнах и си написах един Jquery plugin, който следи всеки hover елемент 
например: 




<a href="#">Home</a>

и прихваща събитие за показване на span елемент който в началото е скрит с display: none на css;

ето и кода надявам се да съм полезен;

Как да използвате кода

1.Създайте папка modal-box
2.Създайте html файл с име index.html в папка modal-box и копирайте html кода
3.Създайте css файл с име style.css в папка modal-box и копирайте css кода
4.Създайте js файл с име modal-box.js в папка modal-box и копирайте jQuery кода

HTML 


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="modal-box.js"></script>
<link href="style.css" rel="stylesheet" />
<link href="modal-box.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function() {

$('a').zoom();

});
</script>

</head>
<body>

<header>
<div class="menu">
<ul>
<li>
<a href="#">
Home
<span class="modal-box">
<div class="add-image"></div>
<p class="add-data">This is sample modal home box 1</p>
</span>
</a>
</li>

<li>
<a href="#">
Contact
<span class="modal-box">
<div class="add-image"></div>
<p class="add-data">This is sample modal contact box 2</p>
</span>
</a>
</li>
<ul>
</div>
</header>
</body>

</html>


CSS


/* 
  development by mehmedov 
  email: jakomena@gmail.com 
  main modal box css 

*/

/* ----- modal modal box style */

.modal-box  {
display: none;
padding: 20px 30px;
width: 500px;  
}

.modal-box p {
text-transform: uppercase;
font-size: 18px;
text-align: center;
background: #f5f5f5;
color: #2d2d2d;
border-radius: 5px;
height: 180px;
margin: 0 auto;
}

.modal-box  .add-image  {
float: left;
margin: 0 auto;
background: url(photo_kids.png) no-repeat;
width: 200px;
height: 200px;
}

.modal-box .add-data{
float: right;
width: 250px;
margin: 0 auto;
}

.modal-box-show {
float: left;
display: block;
padding: 20px 30px;
border-radius: 5px;
list-style: none;
background: #fff;
    z-index: 1000;
}

/* ----- end modal modal box style */


jQuery



/* 
development by mehmedov
email: jakomena@gmail.com
create modal box hover element
*/

(function($){ 
   $.fn.zoom = function() {  
var element = $(this.selector);
element.hover(function () {
var box = $(this).find('span');
box.addClass('modal-box-show');
});
element.mouseleave(function () {
var box = $(this).find('span');
box.removeClass('modal-box-show');
});
   } 
})(jQuery);


Поздрави мехмедов!


Wednesday, March 13, 2013

Ajax Crawlable Demo за работа с динамични сайтове



Здравейте, отново е време да се захванем с някой нови интересни неща с които се занимавах тези дни.

Започнах нов проект за споделяне на събития.

http://bgjoin.com/

в сайта може да разгледате секция "КАК РАБОТИ ?".

Но да се върна към темата:

Технологиите, които ползвам за html 5, jquery, ajax, css и php за rest service.

По време на разработка на проекта  всичко беше добре, докато не стигнах до извода, че динамичните сайтове не се индексират от google.

Веднага се разрових в internet и открих решение на проблем става въпрос за:

how to make ajax crawlable

Ето и мое демо http://test.nh.zonebg.com/

Идеята на всичко това е, че когато зареждаме динамично сайта ние работим с # hash знака
и така с jquery прихващаме този селектор, но проблема е  че това се рендира при клиента 
и няма content които да бъде индексиран от google.

За целта от google са намерили решение, като след # добавяме и удивителен знак (!)
получаваме www.example.com/#!99 примерно 99 играе ролята на ID за да може после да се направим заявка и да се генерира content.

как става това.

google замества кобинацията от #! със ?_escaped_fragment_  което играе ролята на ключ за търсене в $_GET.

Примерно $_GET['_escaped_fragment_'];


но за да стане всичко по прегледно нека пусна и кода



Надявам се да съм бил полезен.

Ако имате въпроси пишете ми

Поздрави Мемхедов!


Tuesday, February 19, 2013

NodeJS пример четене от MySQl



Ех доста време си играх с това чудо, докато си направя прост
пример с който да покажа как се чете от база данни и как се обработва DOM

NodeJS пример четене от MySQl -
http://jakomen.chat.jakomen.jit.su/

И тук
http://chat.pmsys.org/

Ето и кода да се забавлявате
https://github.com/halachev/NodeJS-Example---MySql

Поздрави Мехмедов

















Wednesday, October 24, 2012

Награждаване - Cloud Development

Награждаване - Cloud Development

И така  - поредния сертификат от "Телерик"  заслужено си го добавям към моята колекция.


Курса обхвана технологии като .Net, WCF services, NoSql, CouchDB, облачни услуги AppHarbor, Drobbox и др..
Разработихме проект, с който защитихме нашите знания .













Шампионите от курса Разработка на софтуер в cloud среда, които предаваха домашни, положиха тест върху изучавания материал, разработиха и защитиха с отличие практически курсов проект, включващ разработка на cloud приложения с NoSQL база данни, cloud storage, REST услуги в cloud среда и HTML5-базиран front-end, са:
  • CL254 – Г. Ангелов – 103 точки
  • CL511 – С. Стаев – 99 точки
  • CL400 – С. Тодоров – 96 точки
  • CL128 – А. Георгиев – 93 точки
  • CL111 – D. Тодоров – 89 точки
  • CL152 – И. Стоянов – 89 точки
  • CL493 – И. Пенев – 88 точки
  • CL515 – М. Димитров – 84 точки
  • CL399 – Т. Паскалев – 84 точки
  • CL286 – Н. Мехмедов – 82 точки
  • CL036 – Й. Тодоров – 77 точки
  • CL057 – М. Гебов – 74 точки


Поздрави мехмедов

Tuesday, July 10, 2012

Бързо и лесно чат приложение - html5, jquery,PubNub

Създаването на чат в web се оказа доста лесна задача.Благодарение на една облачна услуга "PubNub" - http://www.pubnub.com/ 

Може бързо и лесно да си направите, чат приложение във вашата web страница.


Ето и разработено чат приложение от мен http://secretcom.apphb.com/Chat.aspx


Изисквания:
Познания с html5, jquery

Не забравяйте, да добавите следния код в body на html файла,
където pub-key и sub-key са задължителни.
След влизане в сайта вашия pub-key и sub-key ще ги намерите на :

My Account  ???

Api Keys ???



 <div pub-key="???" sub-key="???"
        ssl="on" origin="pubsub.pubnub.com" id="pubnub">
 </div>
 <script src="http://cdn.pubnub.com/pubnub-3.1.min.js" type="text/javascript"></script>

пример:
https://pubnub-prod.appspot.com/account-javascript-api-include
JavaScript Push API Reference:
https://pubnub-prod.appspot.com/tutorial/javascript-push-api

С  помощта  на Telerik - http://academy.telerik.com/