Постнагуализм
18 декабря 2024, 10:14:21 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.

      Логин             Пароль
 
   Начало   Помощь Правила Поиск Войти Регистрация Чат  
Страниц: 1 ... 5 6 [7]  Все
  Ответ  |  Печать  
Автор Тема: HTML - CSS - Javascript (Web Dev Log)  (Прочитано 23878 раз)
0 Пользователей и 2 Гостей смотрят эту тему.
Соня (Bruja)
Сказочник Пня
Старожил
*****
Offline Offline

Пол: Женский
Сообщений: 9326


Соня и чумазый Лис


WWW
« Ответ #90 : 13 сентября 2024, 10:05:39 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

Оставила (пока) не выполненным проект с личным веб- портфолио.
Лень, да и спешить особо не куда. Впереди два больших раздела и 2 экзамена, каждый из 2х частей (теория и практика).

И клиентов искать не собираюсь, так что не вижу особого смысла в "порфеле" лично для себя.

Но если набацаю что нибудь, то покажу.


Там как бы по заданию надо показать скилы, которым обучились. Использовать базовые основы джаваскрипт, для интерактивности.

На самом деле мне реально никакое не нужно.

Ну разве что - как практика и похвастушка..

Сам проект - этапы работы над ним (задания) - выглядит так.

Заканчиваешь - сбрасываешь задание в сторону, в колонку - "выполнено".





* portofolio.png (341.93 Кб, 1400x860 - просмотрено 105 раз.)
Записан

Соня (Bruja)
Сказочник Пня
Старожил
*****
Offline Offline

Пол: Женский
Сообщений: 9326


Соня и чумазый Лис


WWW
« Ответ #91 : 13 сентября 2024, 10:14:12 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

А из новшеств - добавили подсказки и помощь искусственного интеллекта (ИИ).

Обучающий Асистент (Помощник) ИИ

В области редактора кода ( - уроков  с программированием).

Выделяешь участок кода, клик на всплывающей надписи - обратиться к помощи ИИ.

ИИ пишет свой анализ по поводу этого куска. Ну и подсказки дает конечно.

Самое смешное, что анализ ИИ можно лайкать или дизлайкать..
Типа понравилось объяснение или оно было не информативно.

 :)

Вот вроде бы люди учат машины, так нам это преподносят обычно.
Но тут как мне кажется - обоюдно происходит. Программы учат нас, и вместе с нами сами учатся.




* Снимок экрана 2024-09-13 в 09.11.35.png (514.75 Кб, 1600x981 - просмотрено 106 раз.)
Записан

Соня (Bruja)
Сказочник Пня
Старожил
*****
Offline Offline

Пол: Женский
Сообщений: 9326


Соня и чумазый Лис


WWW
« Ответ #92 : 18 сентября 2024, 12:49:20 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

Оставила (пока) не выполненным проект с личным веб- портфолио.
Лень, да и спешить особо не куда.

Работаю над проектом для моего тех портфолио.


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

Я решила немного расширить проект, и добавить что то вроде оракула, со стандартными фразами, взятыми в сети, и моими рисунками.

Открывая страницу - оракул автоматически выкинет карту и описание, выбрав случайно из массива объектов -  карту и описаний.

Самое сложное -это поиск цитат. Особенно для Оракула. Пока что нашла весь материал на англ. Буду работать с ним.

А вообще - в портфолио надо напихать свои проекты и ссылки на них, чем больше, тем лучше.
Так понимаю, это что то типа "похвастушки" перед работадателями или другими разработчиками.
)

А параллельно - работаю по другому курсу, где рассматриваются интересные мини-проекты по джаваскрипт, как раз для того, что бы добавить их на страницу портфолио.
И конечно основной курс делаю, где мы учимся как отлавливать ошибки и добавлять описания своих ошибок - во время работы скрипта.


//
Процесс работы над мини проектом - генератор цитат.
Пока подключила джава скрипт к странице. Случайная фраза и автор отображаются в консоли (голубенький текст сбоку, на темном фоне в панели разработчика), но пока не выводится на страницу. На странице видна предустановленная (по умолчанию) цитата и она на испанском. Те что подключатся - будут на английском.


« Последнее редактирование: 18 сентября 2024, 13:48:27 от Соня (Bruja) » Записан

Соня (Bruja)
Сказочник Пня
Старожил
*****
Offline Offline

Пол: Женский
Сообщений: 9326


Соня и чумазый Лис


WWW
« Ответ #93 : 19 сентября 2024, 10:39:08 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

Генератор случайных цитат с использованием HTML, CSS, JavaScript

Код создает простой «Генератор случайных цитат», который отображает новую случайную цитату каждый раз при нажатии кнопки «Создать цитату».

Вы можете отправить цитату на свой аккаунт в Твиттере, нажав кнопку «Твитнуть».

Живая версия на гит-страницах. Вот так это выглядит и работает.

https://mtapirina.github.io/Quote-Generator/

Записан

Соня (Bruja)
Сказочник Пня
Старожил
*****
Offline Offline

Пол: Женский
Сообщений: 9326


Соня и чумазый Лис


WWW
« Ответ #94 : 06 октября 2024, 09:59:12 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

Линукса - Убунта

Все неприятности(и учеба в том числе :D) из-за ситуации - Уран в Тельце ;).
Но когда то это закончится и мы начнем интенсивно общаться(Уран перейдет в Близнецы). Вот Близнецы обрадуются ;).

Да не назвала бы учебу неприятностями :)

скорее наоборот, соскучилась, устала бить балду..
Даже как то неудобно перед людьми, человеками, что общению с ними предпочитаю (на данном этапе)-общение с учебными пособиями и всяко-разную практику в редакторе кода.

Кстати да, на одном из компов доставшемуся со вторых рук (пользованный  стационарный, докупила к этому блоку монитор)- стояла винда 10.
Ох как же она меня выбесила своеволием и настырностью!
как люди вообще эти наглым обрезком майкрософта пользуются и не сходят с ума?

Удаляю ненужные мне компоненты, а эта сука при каждом запуске ставит мне их вновь!
Скачиваю программы с торрентов, а эта скатина мне все кряки удаляет, не успеваю оглянуться..прям при загрузке.

если отключить Windows Defender Antivirus  и прогу установить - то эта скотина перезагрузившись - мне сжирала уже установленные лицензии(хотя и не все, но адобовские сразу распознала. Я акробат ставила ПДФ читать и собирать)

Зашла в мод разработчика, там больше прав, хотя я в профиле администратора, но нынешние версии винды кастрировали эту должность.
Поотключала к ебеням все "веселые картинки" из старта (кнопка Пуск и открывающееся меню).
Потом всякие советы и рекламму в другом конце панели.
Намучалась отключая встроенный антивирусник, пришлось закрыть к чертям через административные шаблоны и в путях regedit вставить запреты.

Стало лучше нмного. Иначе ощущение было, что сидишь на выставке или ветрине, и всякие поставщики рекламмы и услуг пялятся на тебя из этих всплывающих окошек.
Ну и программы смогла установить, кряки не слетали.

Но и все равно, полностью отключенная от обновлений, с выключенным антивирем - она повизгивает, что замечен троян и требует "Срочно сделать что нибудь!"

А трояны мне до лампочки, так как работаю я на том компе - с выключенным интернетом.
Только если скачать надо что то - включаю.
Эдакая "песочница", для программ музыкальных, так как все библиотеки у меня на основном компе - все место загружают и не помещаются уже. Плюс уроки, коих тоже более сотни гигов..

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

Однако на диске где установлена Винда - оставалось довольно много пустого места, а я давно мечтала разобраться с Линуском.
Ну чисто безопасно ползать по интернету, ну и качать с ютуба нужное в хорошем разрешении и без рекламмы..

Отделила 250 гб от 1 тб основного диска (винде нужно больше места, она склонна к расширению причем неконтролируемому, при любом выходе в инет, все равно какой то хренью закачивается..

Так как в Линуксе я полный ноль, а видела ее в последний раз еще в юности, в эпоху общения с хакерами - то решила поставить самую простенькую ее версию, для чайников и с графическим интерфейсом и поддержкой сообщества - Ubuntu

Сначала просто с флешки включала ее, не используя физический диск. Благо 32 гб оператичной памяти - позволяют хоть 3д проги запускать, будь они в комплекте загрузчика операционки.

Я помню как впервые увидела комп знакомого хакера..
Это системный блок с открытыми боками, требухой из шлейфов наружу - и совсем - БЕЗ ЖЕСТКОГО ДИСКА!

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

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

Уже не помню подробностей, а может там и мне лапшу вешали, либо сами верили в мифы -- но суть сводилась к тому - нет железа (данных о нем)- нет и человека. Ну и компа как бы нет
( в любом случае - в то время и вирусня была древняя, не чета современной.. и виндоус не походил сам на троян, а был вполне благожелательной системой, удобной в управлении)

Но помню вид распотрошенного блока меня сильно поразил.. Ну и ребята стали про линукс рассказывать, показывали как работают.. Однако мне те голые линукса казались непроходимыми дебрями строк текста.. ничего не понятно.. графического интерфейса у них не было. Любопытство осталось, так как ребята делали чудеса (для порядочного пользователя все эти ломаные программы и скачивание с закрытых приватных источников чужих данных и т.д.  - казались фантастикой)


И вот только сейчас смогла "осуществить" и это желание и закрыть " камическую дыру", если можно так выразится.

Ну что сказать.. Честно, я ожидала Худшего.
Убунта меня очень порадовала, очень похожа на операционку мака, внешне. Хотя имеет другую немного архитектуру.
Удивило, что все нужные проги оказались в их "магазине", причем попались среди них и те, что на маке или винде - платные - под линукс - выложены бесплатно.. Линусководов использующих графический интерфейс (который смешно называется - Гном!) -- словно неполноценными считают, ну и относятся с каким то душещипательным сочувствием..Отдают свои проги бесплатно..

Да Адоба вы там в шопе не встретите, но на торрентах есть упакованные самоделки.. если кому надо..

Мне же первой радостью в том шопе был VLC player и маленькая программулечка - поиска по ютубу, просмотра без рекламмы в любом нужном разрешении!!! и с возможностью очень быстро закачать..
Хоть 22 часа обучающего видео (уроки -слепленные в одно видео ) в разрешении 4К и с отличным звуком..
Разработчик - индиец какой то..гений!

В общем поставила там бызовый фаервол и все
И красота..
Чисто для фронтэнда - самое оно, самая крутая среда..

Все программки под эту систему - крохотулечки.. от силы 15 гб заняли.. Так что места опять же с избытком..
Для всяких экспериментов с программированием самая удобная  песочница.
Само собой - из под суперпользователя (root)-- я только систему обновляю когда надо, но не сижу. Для работы отдельный профиль, гостем.. Вполне хватает, и меньше шансов что сама я что то в системе испорчу своими экспериментами.

Очень понравилась резкость - на винде и даже на маке буквы кажутся после Линукса какими то смазанными.. Винда так вообще замыленная..

Само собой ни на винде ни на линуксе  - никаких .. личных документаций я не держу.
И в банки не захожу. И ничего не оплачиваю..
Это песочницы..
Но удовольствие от знакомства с Линуксом получила большое.
Учусь на маке, а вот экспериментирую с тем что изучила - на Убунте.
А вин - чисто для игрушек - музыки в основном..
А то в один мой рабочий комп все мои интересы уже не помещались. Разрузила его немного..
Меньше ломанных прог - меньше опасений..
А песочницы на то и песочницы - - развалятся под натиском вирусни - без потерь и сожаления легко переустановлю систему.

Вот такие новости у меня..
« Последнее редактирование: 06 октября 2024, 11:14:42 от Соня (Bruja) » Записан

Соня (Bruja)
Сказочник Пня
Старожил
*****
Offline Offline

Пол: Женский
Сообщений: 9326


Соня и чумазый Лис


WWW
« Ответ #95 : 07 октября 2024, 10:34:09 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

В академии кода - мы проходим Тестирование приложений на Джаваскрипт. Ну и создание своих наборов тестов. Честно говоря практически нам еще нечего тестировать, так как веб приложения нас научат создавать после.

Показывать там особо нечего. Ну и немного скучно.




Гораздо веселее параллельно с тестирование - делать другие уроки, найденные на ютубе, такое добро и совершенно бесплатно!

Анимировать картинки с собачкой.

У урока с собакой - есть продолжение. Будем делать движущийся фон, с параллакс эффектом.

Идея заключается в том, чтобы перемещать фоновые слои с разной скоростью (т. е. чем дальше слой, тем медленнее он движется.

(в конце всех уроков про собаку - обещают 2д игру, платформер.. Ну посмотрим)


Анимация Спрайтов на Javascript

Выполнено по уроку "Анимация Спрайтов на чистом (ванильном) Джаваскрипт" на youtube канале Franks laboratory https://www.youtube.com/hashtag/frankslaboratory

Лист спрайтов теневой собаки используется только в учебных целях. Сайт художника: Bevouliin https://bevouliin.com


Веб страница с возможностью выбрать и просмотреть все анимации, которые есть у Теневого Пса:

LivePage https://mtapirina.github.io/Sprite_Animation_Javascript/



« Последнее редактирование: 07 октября 2024, 12:09:43 от Соня (Bruja) » Записан

Соня (Bruja)
Сказочник Пня
Старожил
*****
Offline Offline

Пол: Женский
Сообщений: 9326


Соня и чумазый Лис


WWW
« Ответ #96 : 10 октября 2024, 10:31:30 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

Параллакс.
Анимация заднего фона для игры
Скорость увеличивается постепенно, если передвигать ползунок вправо.



Живая веб страница:
https://mtapirina.github.io/Sprite_Animation_Javascript/parallax.html
Записан

Соня (Bruja)
Сказочник Пня
Старожил
*****
Offline Offline

Пол: Женский
Сообщений: 9326


Соня и чумазый Лис


WWW
« Ответ #97 : 10 октября 2024, 11:38:28 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

А это пример уже с моим рисунком фона. Слои нарисованы в стиле пиксель-арт.
Скрипт универсальный, все работает, хотя картинки имеют маленький размер, чем те, которые шли с уроком.

« Последнее редактирование: 10 октября 2024, 12:49:55 от Соня (Bruja) » Записан

Соня (Bruja)
Сказочник Пня
Старожил
*****
Offline Offline

Пол: Женский
Сообщений: 9326


Соня и чумазый Лис


WWW
« Ответ #98 : 05 ноября 2024, 08:46:19 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

Шаблон портфолио веб-разработчика. version 1.0
Проект для портфолио на  Codecademy

HTML CSS SASS JS

Страница содержит 4 раздела:

Стартовая страница (домашняя страница)

Обо мне (динамический индикатор выполнения)

Портфолио (изображения со ссылками на фиктивные действующие проекты)

Контакты (веб-форма и ссылки на социальные сети)

Индикатор выполнения (статус бар прогресса на странице About Me) - обновляется каждый раз при перезагрузке веб-страницы. Он имитирует случайный процент прогресса от 70 до 100. Эта симуляция отображается зелеными полосами на индикаторе выполнения.
Для этого использовала Javascript. А так же для "липкой" панели навигации по сайту.


Поиграться и покрутить кнопочки - можно тут, на "живой версии" веб проекта
https://mtapirina.github.io/portfolio_template_1/

Репозиторий с файлами и кодами проекта посмотреть или скачать можно тут
https://github.com/mtapirina/portfolio_template_1



* home.png (259.09 Кб, 500x550 - просмотрено 91 раз.)

* about.png (78.52 Кб, 500x541 - просмотрено 90 раз.)

* portfolio.png (348.43 Кб, 500x509 - просмотрено 93 раз.)

* contact.png (149.21 Кб, 500x536 - просмотрено 91 раз.)
« Последнее редактирование: 05 ноября 2024, 10:17:09 от Соня (Bruja) » Записан

Соня (Bruja)
Сказочник Пня
Старожил
*****
Offline Offline

Пол: Женский
Сообщений: 9326


Соня и чумазый Лис


WWW
« Ответ #99 : 05 ноября 2024, 09:52:05 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

И еще один мини-проект, за компанию

#Mixed_Messages – Синтаксис JS.

Программа-генератор смешанных сообщений. Каждый раз, когда пользователь запускает программу, он должен получать новый рандомизированный результат.

Это мини-проект на Node.js, работает только в терминале( в консоли).
А веб вариант - или то, как это можно применять практически в создании веб страниц - я показывала выше в этой теме.


репозиторий проекта
https://github.com/mtapirina/my_quote_generator

А это похожий проект, на веб странице,  я показывала его выше в этой теме
веб страница - https://mtapirina.github.io/Quote-Generator/



* 379880438-b9451f1b-e409-4cc9-b963-3b4d852e1576.png (118.27 Кб, 1752x530 - просмотрено 26 раз.)

* 379874892-957b2064-1824-47d7-906f-f1bf5163f6f5.png (48.53 Кб, 500x127 - просмотрено 88 раз.)

* 379874847-5df8d99a-083d-4e02-871c-b07b35013abd.png (68.3 Кб, 500x174 - просмотрено 84 раз.)
« Последнее редактирование: 06 ноября 2024, 17:36:08 от Соня (Bruja) » Записан

Соня (Bruja)
Сказочник Пня
Старожил
*****
Offline Offline

Пол: Женский
Сообщений: 9326


Соня и чумазый Лис


WWW
« Ответ #100 : 05 ноября 2024, 10:04:19 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

Ну и заодно я парикончила курс по SASS.
Проскакали по нему галопом, не сильно вдаваясь в детали, на мой взгляд. Хотя вещь довольно удобная.
Это сопроцессор для более гибкой и удобной работы со стилями, вы пишите в нем, а он автоматом компилирует в CSS style стиль для вашей веб страницы. Удобное использование переменных, и целых отдельных классов, которых нет физически на вашей странице HTML , но которые существуют виртуально, и позже автоматом компилируются с файл стиля, вам даже заморачиваться об этом не надо.
Переменные и классы (миксины и заполнители)- спасают от множественных повторений и дублирования кода, которое неизбежно в CSS.
И хотя не сказать чтоб нас натаскали на все 100%, каждый может использовать именно те опции которые удобны лично ему.
Например какие то булевы операции или даже циклы! - я считаю исполнять в стилях - вычурностями. Ну максимум транзиты или анимацию .
А для более сложных вычислений по имху - удобнее Javascript.
Но думаю кому то лень учить ее, вот они и вымудряют нечто похожее.
Мне показалось - слишком громоздко делать вычисления в описании  стиля - по сути в раскраске.
Она не предназначена для этого.

В конечный вариант проекта - насколько я поняла - папка и файлы SCSS (SASS)- не вкладываются, если конечно вы не намерены позже редактировать проект.
А вот редактировать без этих файлов проект довольно сложно.
Но проект Портфолио например - который является только шаблоном - я редактировать не собираюсь. Так что файлов лишних не загружала.
Оставила чистый CSS стиль, который после компиляции даже читать трудно, не то что там что то править ...

Так что еще один сертификат в кармане.
Сама не знаю на кой они мне.. Ну для коллекции разве что.

Вообще меня нельзя к кодакадемии подпускать.. У меня на нее одержимость развивается быстро..
Даже не знаю, увлечение КК и прочей эзотерикой на это время отходит на какой то очень задний план..
Писать код, это как писать музыку.. Или рисовать.. Тоже своего рода медитация..
Отключаюсь от всего..

Записан

Соня (Bruja)
Сказочник Пня
Старожил
*****
Offline Offline

Пол: Женский
Сообщений: 9326


Соня и чумазый Лис


WWW
« Ответ #101 : 06 ноября 2024, 19:02:16 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

Сейчас у меня передышка.
 Собираю коллекцию анимированных на CSS кнопок для веб сайтов.
И учусь делать те виды анимации, что мне пока не знакомы.
Запомнить все варианты извращения с кодом невозможно, поэтому соберу их себе в одну веб страницу, типа шпаргалки. Чтоб не вымудрять каждый раз с самого начала (легче чуть изменить под новые задачи, чем каждый раз изнова писать всю анимацию).

Пока только фотки для примера.

Анимированный вариант на веб странице - будет позже,  когда коллекция станет побольше.
Тогда можно будет потыкать в них, посмотреть анимацию. Ну и кому интересно - могут порыться в исходном коде CSS.

на скринах - кнопки в обычном состоянии и при наведении мышки (после анимации)


1- 2д плоский градиент



2- 3д градиент - кнопка поворачивается и по ней пробегает блеск, словно она стеклянная
(похожа на пуговицу на пальто моей бабушки!)




3- 3д эффект - плоский цветной квадрат-иконка - открывается как книжка, при наведении мышки




4- анимированный эффект для текста на кнопке. При наведении мыши - первая буква кружится увеличиваясь в размерах.
Появляется темная полоса, и весь текст на ее фоне - меняет цвет.





ЗЫ--цвета можно изменять на ЛЮБЫЕ.
Тут - главное сами эффекты.
Каждому варианту кнопок можно менять и цвет, и скорость анимации и направление, в какую сторону и на сколько градусов поворачивается или кружится..

Записан

Страниц: 1 ... 5 6 [7]  Все
  Ответ  |  Печать  
 
Перейти в:        Главная

+ Быстрый ответ
Postnagualism © 2010. Все права защищены и охраняются законом.
Материалы, размещенные на сайте, принадлежат их владельцам.
При использовании любого материала с данного сайта в печатных или интернет изданиях, ссылка на оригинал обязательна.
Powered by SMF 1.1.11 | SMF © 2006-2009, Simple Machines LLC