Открыть мобильное меню
Сортировка данных в массиве ArrayList на Java

Для сортировки данных в массиве на Java, можно использовать следующий метод

private static void sortData() {
    Collections.sort(myArrayList, new Comparator() {
        @Override
        public int compare(myClass my2, myClass my1) {
            if (my1.value > my2.value) {
                return 1;
            } else if (my1.value < my2.value) {
                return -1;
            } else {
                return 0;
            }
        }
    });
}

Пример сортировки пользователей по возрасту на Java

Предположим, нам нужно отсортировать пользователей по возрасту.
Создаём ArrayList и добавляем в него пользователей (класс User).
Далее просто вызываем sortUsersByAge()

import java.util.ArrayList;
import java.util.Collections;
import java.util.Comparator;

public class JavaTest {

    private static ArrayList userArrayList;

    public static void main(String[] args) {

        userArrayList = new ArrayList();
        
        User p1 = new User("Alex", 31);
        User p2 = new User("Vasja", 25);
        User p3 = new User("Robert", 43);

        userArrayList.add(p1);
        userArrayList.add(p2);
        userArrayList.add(p3);

        sortUsersByAge();

        for (User user : userArrayList) {
            System.out.println("User: " + user.name + " / " + user.age);
        }
    }

    private static class User {
        public String name;
        public int age;
        User(String _name, int _age) {
            name = _name;
            age = _age;
        }
    }

    //Сортировака пользователей по возрасту
    private static void sortUsersByAge() {
        Collections.sort(userArrayList, new Comparator() {
            @Override
            public int compare(User player2, User player1) {
                if (player1.age > player2.age) {
                    return 1;
                } else if (player1.age < player2.age) {
                    return -1;
                } else {
                    return 0;
                }
            }
        });
    }
}

Данный пример выдаст ответ:
User: Robert / 43
User: Alex / 31
User: Vasja / 25

Микроанимация элементов с помощью transition в сss3

Элементы на сайте можно сделать более интересными применив микроанимацию. Самый простой способ — использовать доступные инструменты прямо в css3.

transition обеспечивает плавное изменение в значениях свойств класса и псевдоклассах hover и active. Так же его можно применять используя javascript.

Параметры свойства transition: [all или конкретное свойство] [2s - продолжительность анимации] [ease - вариант интерполяции перехода] [0s - задержка до начала анимации]

Плавная смена цвета

Поменяю цвет
.but-bg{ 
   transition: all .2s ease-in-out; 
   color:#fff; 
   background:#29ab14; 
   display:inline-block; 
   padding:5px 15px; 
   border-radius:5px; 
   cursor:pointer; 
}
.but-bg:hover{ 
   color:#d2f8fb; 
   background:#149fab; 
}

Масштабирование элемента

scale - масштабирование элемента по двум осям (x, y).
scaleX - масштабирование по горизонтали. Ось x.
scaleY - масштабирование по вертикали. Ось y.

Увеличюсь
.but-scale{ 
   transition:transform .2s cubic-bezier(0.6, 0.3, 0, 2.5); 
   color:#fff; 
   background:#29ab14; 
   display:inline-block; 
   padding:5px 15px; 
   border-radius:5px; 
   cursor:pointer; 
}
.but-scale:hover{ 
   transform:scale(1.1); 
} 

Поворот

rotate - поворот в двумерном пространстве. rotate(5deg)
rotate3d - поворот в трёхмерном пространстве. rotate3d(1,1,1,15deg)
rotateX, rotateY, rotateZ - поворот по оси.

Повернусь
.but-rot{ 
   transition:transform .2s cubic-bezier(0.6, 0.4, 0, 2.5); 
   color:#fff; 
   background:#29ab14; 
   display:inline-block; 
   padding:5px 15px; 
   border-radius:5px; 
   cursor:pointer; 
}
.but-rot:hover{ 
   transform:rotate(5deg); 
}

Изменение размера

Расширюсь
.but-size{ 
   transition:all .2s cubic-bezier(0.6,-0.4, 0.4, 1.5); 
   color:#fff; 
   background:#29ab14; 
   display:inline-block; 
   padding:5px 15px; 
   border-radius:5px; 
   cursor:pointer; 
}
.but-size:hover{ 
   padding: 5px 29px; 
   transform: translateX(-7px); 
}

Смещение по осям

translate - смещение элемента по двум осям (x, y).
translateX - смещение по горизонтали. Ось x.
translateY - смещение по вертикали. Ось y.

Передвинусь
.but-pos{ 
   transition:transform .2s cubic-bezier(0.6,-0.4, 0.4, 1.5); 
   color:#fff; 
   background:#29ab14; 
   display:inline-block; 
   padding:5px 15px; 
   border-radius:5px; 
   cursor:pointer; 
}
.but-pos:hover{ 
   transform:translateX(15px); 
}

Несколько одновременных изменений

Увеличюсь и повернусь
.but-multi{ 
   transition:transform .2s cubic-bezier(0.6, 0.3, 0, 2.5); 
   color:#fff; 
   background:#29ab14; 
   display:inline-block; 
   padding:5px 15px; 
   border-radius:5px; 
   cursor:pointer; 
}
.but-multi:hover{ 
   transform:scale(1.1) rotate(-3deg);
 }
Проекция 3d модели на плоскость. Делаем 3d картинку.

3d картинка создаёт иллюзию глубины в изображении, поэтому зритель под определённым углом наблюдает реалистичное присутствие изображённого объекта.

Вся работа, для получения конечной проекции, делится условно на два шага.

Шаг 1 — получаем изображение, которое должен увидеть зритель.

Расположение объектов и камеры на 3d сцене

Размещаем объекты на сцене нужным нам образом. Устанавливаем поверхность, имитирующую пол, на которую будет падать тень.

В идеале источники света установить на сцене программы так же, как и в реальном месте, где будет находиться изображение.

В общих случаях советую размещать над объектом, чтобы тень создавалась максимально под ним, так легче добиться 3d эффекта.

Изображение после рендера. Шаг 1

Не забывайте — удачный ракурс и правильная тень 90% успеха.

Устанавливаем направленную на объект камеру. Стоит учитывать масштаб сцены и расположить её в том месте, с которого зритель будет наблюдать 3д эффект в реальности.

Рендерим изображение. Для листа A4 вполне хватит 2500 пикселов. Получаем картинку по примеру логотипа сверху.

Шаг 2 — получаем проекцию 3d изображения.

Расположение камеры для рендера и проектора

Получив нужное изображение, скрываем в отдельном слое все объекты из прошлой сцены.

Устанавливаем проектор в тех же координатах и под таки же углом, как и камера прошлой сцены. (В Cinema 4d используется камера с тегом Camera Calibrator. В 3D Max в роли проектора выступаем направленный источник света.)

Перед камерой ставим плоскость, на которую будет проецироваться изображение. Материал используем белый, без отражений и бликов.

Над созданной плоскостью устанавливаем "камеру для рендера", направленную точно в низ. Отрендерив, мы получим необходимую проекцию 3d изображения.

Стоит учитывать при печати проекции.

3д эффект максимально проявляется только из одной точки на определённом расстоянии. Отметить место можно наклейкой, чтобы зритель точно знал откуда смотреть.

Небольшие изображения с близкого расстояния нужно смотреть прикрыв один глаз. Более масштабные проекции с расстояния более нескольких метров уже можно смотреть обоими глазами.

HTML5 баннер для Google Adwords
Изучив ниже приведённый список, становится очевидным выбор в пользу баннеров на технологии HTML5:
  • JPG, PNG — статичная картинка.
  • GIF — устаревший формат анимации, с неоправданно огромным весом и ограничением 256 цветов.
  • SWF (Flash) — нужен дополнительный плагин, плюс новые версии браузеров блокируют автостарт.
  • HTML5 — на данный момент неоспоримый лидер, а с новыми инструментами позволяет делать анимацию такой же сложности, как и во флэш.

Баннер в HTML5 можно сделать с помощью таких программ как Google Web Designer, Adobe Edge Animate или Adobe Animate CC.

Подготовка к размещению рекламы

Когда баннер готов, заходим в настройки экспорта и снимаем галочку с Hosted libraries (файл библиотеки не должен подгружаться извне). Теперь при экспорте мы получаем не только html и основной js, а так же папку libs.

Далее в редакторе открываем html файл и в head прописываем <meta name="ad.size" content="width=336,height=280"> (width и height соответственно размер баннера)

Теперь архивируем в zip все экспортированные файлы. Для Google Adwords архив не должен превышать 150 кб. Детали можно найти в центре правил AdWords

Автоматизированное размножение (перевод) баннеров на разные языки (система и скрипт для Photoshop)

Размножение баннеров в Photoshop на множество языков занимает много времени? Воспользуйтесь моей системой и скриптом, которые максимально автоматизируют процесс и избавят вас от рутинной работы.

Подготовка к переводу баннеров

Для начала нам нужен сам баннер и его вариации размеров на одной странице в Photoshop. Я их подготавливаю в отдельных папках и закрываю маской по размеру. Текстовые поля лучше всего перевести в параграф текст ( Convert to Paragraph Text ) и установить нужную ширину и высоту с учётом наиболее длинных предложений.

Теперь выбираем Slice Tool и вырезаем каждый баннер. В Edit Slice Option в поле Name пишем размер среза (336x280).

Настройка экспорта

Заходим File → Save For Web. Настраиваем нужный формат и компрессию, нажимаем Save.
  • В меню Slices выбираем All User Slices.
  • Далее переходим к Settings и выбираем Other.
  • В открывшимся окне настраиваем File Naming: doc. name + underscore + slice name (все остальные none)
  • В Optimized Files снимаем галочку с Put Image in Folder, чтобы не создавалась лишняя папка.
Экспортируем файлы и после проверки удаляем.

Файл исходник

Копируем текущий psd и ставим постфикс _src (например: bannername_src.psd).

В этом файле меняем во всех текстовых полях, которые нужно перевести, текст на t1, t2, t3 и тд. В дальнейшем скрипт методом Find and Replace будет заменять метки на необходимый перевод.

Скрипт шаг 1

Открываем скрипт step 1.
  • вставляем в bannerName название файла до последнего нижнего подчёркивания (например: ljuros_propagate_default.psd вставляем только ljuros_propagate).
  • в массив langArray идут текста нужных языков (например: ['ru', 'первый текст', 'второй текст', 'купить'], ['en', 'first text', 'second text', 'buy'])
  • Запускаем скрипт File → Scripts → Browse
После окончания работы скрипта открываем полученные файлы на разных языках и вносим поправки пори необходимости.

Скрипт шаг 2

Открываем скрипт step 2.
  • вставляем в bannerName название файла таке же как в пером шаге.
  • в массив langArray вставляем одномерный массив с метками языков для экспорта (например: ['ru', 'en', 'de'])
  • Запускаем скрипт File → Scripts → Browse

Всё готово. Создалась папка export, которая включает в себя папки с названием языков, а в них экспортированы все баннеры.

Скачать скрипт для Photoshop

Правильное использование тега H1 на странице (сколько их должно и может быть)

Кратко: Внутри каждого тега article можно использовать свой h1.

Для начала разберёмся, что такое тег H1

Это тег обозначающий заголовок страницы или статьи. Он несёт ёмкую информацию о ниже написанном тексте, информации которую получит посетитель читая текст относящийся к данному заголовку.

Далее рассмотрим H2 — подзаголовок. Если информацию относящуюся к h1 можно поделить логически на несколько отдельных подтем, то используем h2 для их визуального и смыслового разделения.

По такому же принципу используются остальные h3, h4, h5, h6

Тег article

Со стандартами HTML5 мы получили семантически значимые теги article и section. Они учитываются поисковыми роботами, при сканировании и индексации страницы.

В случае, когда блок информации может быть выдернут с сайта и не потеряет смысл, он заключается в тег article. Например это статья, пост, документ.

Тег section объединяет по смыслу часть страницы или выступает в роли разделения информации в теге article, например главы статьи.

<section>
    <p>Ниже приведены несколько алгоритмов</p>
    <article>
        <h1>Алгоритм поиска пути</h1>
        <p>До того, как создать алгоритм поиска пути, я изучил разные...</p>
    </article>
    <article>
        <h1>Триангуляция многоугольной поверхности</h1>
        <p>Суть алгоритма триангуляции: берём точки 1, 2, 3. Узнаём...</p>
    </article>
</section>

Таким образом заголовки h1 можно использовать и несколько раз на странице, но разумно и логично для посетителя страницы, ведь это должно быть главным в вёрстке текста.

Размышления

Если разобраться в проблеме глубже, возникают вопросы: нужно ли независимую информацию внедрять на одну страницу или удобнее сделать несколько?

  1. Таким образом выигрывает сайт — поисковиком будет проиндексировано больше страниц.
  2. Возрастает удобство посетителя — по запросу он сразу попадает на нужную страницу, видя заголовок и искомую информацию.