• Почему на мобильном устройстве сайт не растягивается на всю высоту?

    @SergeyKot
    На мобильном? браузер opera mobile, не умеет этого делать :)
    Ответ написан
    Комментировать
  • Устройства для тестирования адаптивной верстки. Что посветуете и какие используете?

    @SergeyKot
    Часто, я использую вот этот http://www.responsinator.com он прост и понятен, а так применяю расширение для FF, который позволяет эмулировать юзер агенты, а это важно!!
    очень хорошая подборка инструментов тут
    Ответ написан
  • Как сделать подход "RESS: Вывод разных HTML и CSS на одном URL?

    @SergeyKot
    Воспользоваться технологией RESS предложенной на MobiCot

    frame-440-540-slots_menu_in_ress1_1.png
    Ответ написан
    Комментировать
  • В чём отличие между шириной экрана и шириной устройства?

    @SergeyKot
    Для выяснения того, как там на вашем мобильнике (компе) на самом деле, у меня имеется специальный тест www.cotonti.mobi/aa.html

    В последнее время, жизнь стал портить devicePixelRatio таких трубок с этим мало, но их все больше. К сожалению, это будет большой проблемой, так называемых адаптивных сайтов.
    Ответ написан
    Комментировать
  • Как оформить номер телефона на сайте для мобильных устройств?

    @SergeyKot
    На самом деле, это действительно тайна. Большинство мобильных CMS об этом не знают или не умеют.
    Вот как выглядит якорь <a href="tel:123456">Позвонить по 123456 </a>
    А так можно: послать SMS, позвонить имени из вашего справочника типа Шеф У каждого свой, но для корпоратива удобно. Можно включить звонок и по коммутатору.
    У меня применяется BBcode
    [url=tel:123456]Позвонить[/url]
    [telbook=123456]Позвонить Кому звоним[/telbook]
    А так, где-то у меня на MobiCot - PHP Mobile Content Management Framework
    Ответ написан
    Комментировать
  • Обрезка изображения на лету. Как можно оптимизировать код на PHP?

    @SergeyKot
    Действительно, как написал Fesor
    <Только кеширование уже обработанных картинок спасет вас. Настроить RewriteCond так, что бы тот проверял есть ли такой файл. Не экономьте на спичках в виде места на HDD, оно дешевое в отличии от процессорного времени.


    У меня на MobiCot - PHP Mobile Content Management Framework
    тест www.cotonti.mobi/page.php?al=test_photo
    Это типовая задача. Разбирайтесь, если поможет.

    * @author Sergey Kochegarov
     * @copyright (c) 2010 Sergey Kochegarov SoftWare
    function преобразовать_картинку //	функция из полученного файла картинки создает имя файла иконки,  ищет файл иконки, если нет подходязщей иконки, то создает новую иконку.
    	(
    	$файл_картинки,                     //	@param string	файл картинки из которого должно получится фото.
    										//					Если файл картинки имеет имя none, или пустое имя, или FALSE, то это значит,
    										//					что иконка не нужна - имеет место просто выделение подсказки
    	$раздел_размещения_результата,      //  @param string	разздел в который размещается преобразованная картинка
    	$высота_картинки=0,                 //  @param int 		высота фото
    	$файл_картинки_по_умолчанию=FALSE,	//	@param string	Файл картинки, который будет использован в качестве альтернативного для создания фото - ситуация, когда не подходит файл картинки
    	$ширина_картинки=0,                 //  @param int 		ширина фото
    	$качество=80,    					//  @param int  	JPEG качество(quality)  %
    	$преобразование='height',  			//  @param string	height-по высоте, width - по ширине, frame - вписать размер
    	$обрезать=FALSE,
    	$поворот=0,          				// @param int		поворот картинки
    	$перезаписать=FALSE,     			//                  переписать файл результата
    	$минимальная_высота=8,
    	$минимальная_щирирна=8,
    	$штамп=''							//  @param string
    	)
    {
    if	(empty($файл_картинки)) return array(FALSE);
    $имя_файла_картинки = mb_strtolower(basename(mb_substr($файл_картинки, 0, mb_strrpos($файл_картинки, '.'))));
    if	(empty($имя_файла_картинки) or $имя_файла_картинки == 'none') return array(FALSE);
    if (@file_exists($файл_картинки) and @is_readable($файл_картинки)) $файл_трансформируемой_картинки=$файл_картинки;
    	elseif	(!empty($файл_картинки_по_умолчанию) and @file_exists($файл_картинки_по_умолчанию) and @is_readable($файл_картинки_по_умолчанию))    $файл_трансформируемой_картинки = $файл_картинки_по_умолчанию;
    		else return array(FALSE);
    $имя_файла_трансформируемой_картинки = mb_substr($файл_трансформируемой_картинки, 0, mb_strrpos($файл_трансформируемой_картинки, '.'));
    $расширение_файла_трансформируемой_картинки = mb_substr($файл_трансформируемой_картинки, mb_strrpos($файл_трансформируемой_картинки, '.') + 1);
    list($файл_результата,$ширина_результата,$высота_результата)=
    		mobil_transform_img	(
    							$имя_файла_трансформируемой_картинки,
    							$расширение_файла_трансформируемой_картинки,
    							$раздел_размещения_результата,
    							$высота_картинки,$ширина_картинки,
    							$качество,
    							$преобразование,$обрезать,$поворот,
    							$перезаписать,
    							$минимальная_высота,$минимальная_щирирна,
    							$штамп
    							);
    
    return array($файл_результата,$ширина_результата,$высота_результата);
    }
    
    function mobil_transform_img//	трансфомировать картинку (иконку)
    		(
    		$img_big,			//	@param string  	исходный графический файл без расширения
    		$ext_img,           //  @param string  	расширение файла
    		$path_out_img,      //  @param string  	раздел размещения файла картинки
    		$out_img_height=0,  //  @param int 		высота иконки =0, то в пропорцию исходной картинки - width
    		$out_img_width=0,   //  @param int 		ширина иконки =0, то в пропорцию исходной картинки - height
    		$jpegquality=80,    //  @param int  	JPEG качество(quality)  %
    		$type_res='height', //  @param string	height-по высоте, width - по ширине, frame - вписать размер, in_size  сделать по размеру
    		$crop=FALSE,        //  @param bool	    обрезка. 0 или TRUE просто обрезка, минус - обрезка снизу или  слева. $type_res указывает сторону которую не трогать при обрезке.
    							//					Обрезка производится на указанную величину, но не более размеров $out_img_height или $out_img_width.
    							//					frame со всех сторон на указанную величину.
    		$rotate=0,          // @param int		поворот картинки
    		$rewrite=FALSE,     //                 переписать файл картинки
    		$min_out_img_height=8,
    		$min_out_img_width=8,
    		$stamp=''			//  @param string   не реализовано
    		)
    {
    global $cfg;
    
    if (!function_exists('gd_info')) return FALSE;  //есть графическая библиотека?
    if	(empty($out_img_width) and empty($out_img_height)) return FALSE;
    $file_big=$img_big.'.'.$ext_img;
    
    if	(mb_strtolower($type_res) == 'none')
    	{
    	list($out_img_width, $out_img_height) = getimagesize($file_big);
    	return array($file_big,$out_img_width,$out_img_height);
    	}
    
    if	(empty($type_res)) $type_res='height';
    $name_rez=$type_res.'-';
    if	(!empty($crop)) $name_rez .="crop-".($crop === TRUE?0:$crop).'-';
    if	(!empty($rotate)) $name_rez .="rotate-".($rotate === TRUE?0:$rotate).'-';;
    $file_out_img=$path_out_img.$name_rez.$out_img_width.'-'.$out_img_height.'-'.basename($img_big).'.'.$ext_img;  //Получить  имя файла картинки
    if (@file_exists($file_out_img) and @is_readable($file_out_img) and !$rewrite) //Существует выходной и читабильный файл картинки?
    	{
    	list($out_img_width, $out_img_height) = getimagesize($file_out_img);
    	return array($file_out_img,$out_img_width,$out_img_height);
    	}
    elseif($rewrite)
    	 {
    	if (!(@file_exists($file_big) and @is_readable($file_big))) return FALSE;  //Существует исходный и читaбильный графический файл?
    	//проверяем есть ли файл по маске и удаляет похожие
    	$del_file=TRUE;
    	foreach	($cfg['photo_file_delete'] as $fd=>$filename_no_del)
    			{
    			if	(is_array($filename_no_del)) continue;
    			if	($filename_no_del == (basename($img_big).'.'.$ext_img))	{$del_file=FALSE;break;}
    			}
    	if ($del_file)
    		{
    		$cfg['photo_file_delete'][]=(basename($img_big).'.'.$ext_img);
    		foreach (glob($path_out_img."*".basename($img_big).".".$ext_img) as $filename) {@unlink($filename);}
    		}
         }
    
    list($big_width, $big_height) = getimagesize($file_big);
    if	(empty($out_img_width)) $out_img_width=floor($big_width * ($out_img_height/$big_height));
    if	(empty($out_img_height)) $out_img_height=floor($big_height * ($out_img_width/$big_width));
    
    $real_out_img_width=$out_img_width;
    $real_out_img_height=$out_img_height;
    
    switch($type_res)
    	{
     	case 'height':
    		{
            //if	(empty($big_height)) $big_height=1;
            $real_out_img_width=floor($big_width * ($out_img_height/$big_height));
    		break;}
     	case 'width':
    		{
      		$real_out_img_height=floor($big_height * ($out_img_width/$big_width));
    		break;}
     	case 'frame':
    		{
    		if	($big_width/$out_img_width <= $big_height/$out_img_height)  $real_out_img_width=floor($big_width * ($out_img_height/$big_height));
    		    else	$real_out_img_height=floor($big_height * ($out_img_width/$big_width));
    		break;}
     	case 'in_size':
    		{
      		$real_out_img_width=floor($big_height * ($out_img_width/$big_width));
      		$real_out_img_height=floor($big_width * ($out_img_height/$big_height));
    		break;}
    	default:
    		{ return FALSE; }
         }
    
    
    $cat_out_img_width=0;
    $cat_out_img_height=0;
    if	($crop === TRUE) $crop=0;
    if	($crop !== FALSE)
    	{
    	switch($type_res)
    		{
     		case 'height':
    			{
       			if($crop === 0 and $real_out_img_width > $out_img_width) $crop=($real_out_img_width-$out_img_width)/2;
       			$cat_out_img_width=abs(floor($crop*$out_img_height/$big_height));
       			$out_img_width=$real_out_img_width-$cat_out_img_width;
       			if	($out_img_width < $min_out_img_width) $out_img_width=$min_out_img_width;
       			$cat_out_img_width=abs($crop);
                if	($crop > 0) $cat_out_img_width=0;
    			break;}
     		case 'width':
    			{
    			if($crop === 0 and $real_out_img_height > $out_img_height) $crop=($real_out_img_height-$out_img_height)/2;
       			$cat_out_img_height=abs(floor($crop*$out_img_width/$big_width));
       			$out_img_height=$real_out_img_height-$cat_out_img_height;
       			if	($out_img_height < $min_out_img_height) $out_img_height=$min_out_img_height;
       			$cat_out_img_height=abs($crop);
                if	($crop < 0) $cat_out_img_height=0;
    
    			break;}
    		case 'in_size':
     		case 'frame':
    			{
    			$crop=abs($crop);
    			$cat_out_img_width=abs(floor(2*$crop*$out_img_height/$big_height));
    			$out_img_width=$real_out_img_width-$cat_out_img_width;
     			if	($out_img_width < $min_out_img_width) $out_img_width=$min_out_img_width;
    
    			$cat_out_img_height=abs(floor(2*$crop*$real_out_img_width/$big_width));
     			$out_img_height=$real_out_img_height-$cat_out_img_height;
     			if	($out_img_height < $min_out_img_height) $out_img_height=$min_out_img_height;
    
     			$cat_out_img_height=$cat_out_img_width=$crop;
    			break;}
    		default:
    			{ return FALSE; }
    		}
    	}
    	else
    		{
    		$out_img_width=$real_out_img_width;
    		$out_img_height=$real_out_img_height;
    		}
    
    switch($ext_img)
    	{
    	case 'gif':
    		{$source = imagecreatefromgif($file_big);
    		break;}
    
    	case 'png':
    		{$source = imagecreatefrompng($file_big);
    		break;}
    	case 'jpg':
    	case 'jpeg':
        	{$source = imagecreatefromjpeg($file_big);
    		break;}
    	default:
    		{ return FALSE; }
    }
    
    $rotate= -$rotate;
    if ($cfg['th_amode']=='GD1')
    	{
    	$new = imagecreate($out_img_width, $out_img_height);
    	imagecopyresized($new, $source, 0, 0, 0, 0, $out_img_width, $out_img_height, $big_width, $big_height);
    	}
    	else
    	{
    	$new = imagecreatetruecolor($out_img_width, $out_img_height);    // $out_img_height (-) обрезвет картинка снизу    $out_img_width (-) обрезает справа
    	if	($ext_img  == 'gif')
    		{
    		$color_tr2 = imagecolortransparent($source);
    		$color_ind = imagecolorsforindex($source, $color_tr2);
    		$color_tr = imagecolorexact($new, $color_ind['red'], $color_ind['green'], $color_ind['blue']);
    		}
    		else
    			{
    			$col = imagecolorallocatealpha($new, 255, 255, 255,127);
    			$color_tr = imagecolortransparent($new,$col);
    			}
    	imagefill($new,0,0,$color_tr);
    	imagecopyresampled($new, $source, 0, 0, $cat_out_img_width, $cat_out_img_height, $real_out_img_width, $real_out_img_height, $big_width, $big_height);    // после $source 3 (+)двигает картинку  влево, 4 (+) двигает картинку вверх
    	if	($rotate)	$new = imagerotate($new, $rotate, $color_tr);
    	imagealphablending($new, FALSE);
    	imagesavealpha($new, TRUE);
    	}
    
    switch($ext_img)
    	{
    	case 'gif':
    		{imagegif($new, $file_out_img);
    		break;}
    
    	case 'png':
    		{imagepng($new, $file_out_img);
    		break;}
    
    	default:
    		{imagejpeg($new, $file_out_img, $jpegquality);
    		break;}
    	}
    
    $out_img_width=imagesx($new);
    $out_img_height=imagesy($new);
    
    imagedestroy($new);
    imagedestroy($source);
    return array($file_out_img,$out_img_width,$out_img_height);
    }
    Ответ написан
  • С какой шириной вы рисуете адаптивные сайты?

    @SergeyKot
    Сетки? Баловство все это. На мобильниках это не "катит". Тут скорее всего проблема со стандартами под картинки. www.cotonti.mobi/page.php?al=model_style_css&pg=Se... а рисую один резиновый скин, который, как оказывается подходит под все разрешения. Для перехода под мобильный сайт использую специальный плагин, в котором есть стандарты разрешения экрана. Например, есть вариант 0, это когда весь экран мобильника заполняет картинка, а есть вариант 1 когда надо, чтобы над картинкой и под картинкой была одна строка управления (комментария, титла...) кроме того массу и других проблем, о которых отцы HTML5 не подумали, например, рыхлый сайт на компьютере и перегруженный на мобильнике. В общем путь сеток тупиковый, насаждаемый всякими сеошниками, типа адаптивный дизайн за вечер и миллион у вас в кармане. Берите специализированный движок.
    Это проще и париться не придется.

    Вот тест www.responsinator.com/?url=www.cotonti.mobi подвигайте слайдером, увидите, что ни о каких колонок не может быть речи. Итак все уже мелко. А картинки? Картинки надо готовить на сервере под каждый, практически стандартный размер. Тут проблем столько, что не на одну статью.

    Теперь статистики по браузерам mobtop.ru/stat/browsers ну так вот эти браузеры из первой тройки, сетки, закруглений и прочих штучек от CSS3 не знают.
    Ответ написан
  • Как реализовать переход между мобильной и основной версией сайта?

    @SergeyKot
    Эту проблему решил я, еще 5 лет тому назад. Вот мой MobiCot - PHP Mobile Content Management Framework www.cotonti.mobi Но проблемы общего урла, как оказалась самая простая.

    А так смотрим мою статью www.cotonti.mobi/page.php?al=model_style_css Модель. Стиль моделей. CSS - Mobicot. Model. Style models. CSS.

    Другая, совершенно не решенная практически проблема, это сторонние ссылки. Это тогда, когда вы дали ссылку, а зашли по ней... с мобильника. В основном, сайты или разваливаются или выходит компьютерная версия.

    Мой метод дал индексацию под гугл как компьютерной, так и мобильных версий.
    Ответ написан
  • Как разработать адаптивный макет?

    @SergeyKot
    Отвечу так, все темы связанные с адаптивной версткой подразумевают использование HTML5 и CSS3 это типичный СЕО развод. Ничего, из приведенного в многочисленных статьях работать на реальных мобильниках не будет!! За редким исключением крутого Айфона, но на веру.
    Смотрим сюда caniuse.com/#search=grid по поиску grid и видим, что только часть возможностей есть у FF 28 и Crome 33. И это действительно так. Однако в мобильных версиях существенные ошибки: несоответствие выдаваемых и реальных размеров экрана. То есть адаптивная верстка, но для чего? Можно сказать для планшета, чуть побольше экран (более 1025 по ширине) это фактически воспринимается как компьютер, а менее выглядит как мобильник.

    Как же я решил эту проблему. Я взял проверенный движок Cotonti и написал для него кучу расширений, и пока добился отличного результат только для мини Оперы. Вот мой сайт www.cotonti.mobi Теперь уже не верстка, а использование специальных Ббкодов, которые и дают желанную адаптивную верстку.

    На новый год, мне подарили хороший смартфон на андроиде. Мой MobiCot - PHP Mobile Content Management Framework исключительно хорошо смотрится на мине Опере, я даже не ожидал на сколько это хорошо получилось (раньше были мобильники и планшеты). Особенно замечательно стали выгодны мои версии статей на PDF. Андроид их замечательно скачивает и они воспроизводятся его читалками. Что, как понял, удобно читателям, не надо все время инета. Это направление я, естественно буду решать.

    Мой совет, найдите для вашего движка плагин подключения мобильников и не паритесь с адаптивной версткой. Я, сайтов, работающих на реальных мобильников с сетками пока, практически не встречаю. Есть мобильные приложения, но это совсем другое.
    Ответ написан
  • Коллеги программисты, подскажите, в какую область программирования податься junior'у?

    @SergeyKot

    Что могу посоветовать? Я занимаюсь непрерывно программированием уже 37 лет. Нужна удача. Все модные системы сейчас, через 3-4 года никому уже не нужны. Требуются знания в направлениях. Недавно сделал запрос на видеоролик "friendly mobile sites" на русском не нашел...

    Ответ написан
    Комментировать
  • Русскоязычные гуру responsive/mobile first сайтостроения

    @SergeyKot

    Да, есть достаточно набрать в гугле "PHP Mobile Content Management Framework" http://www.cotonti.mobi

    Ответ написан
    Комментировать