Главная страница>Исходный код CGI>Другие категории
Скачать
front end

Это репозиторий веб-разработки.

Подготовка : Для этого контента у студента должен быть компьютер с доступом в Интернет, веб-браузер с поддержкой HTML 5 (Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, Opera и т. д.), текстовый редактор (VSCode и т. д.). .) и хостинговую платформу (бесплатную или платную).

  • https://www.frontendmentor.io/
  • https://daily.dev/
  • https://getcsscan.com/css-box-shadow-examples
  • https://whirl.netlify.app/
  • https://flexboxfroggy.com/
  • https://courses.cs.washington.edu/courses/cse154/flexboxducky/
  • http://www.flexboxdefense.com/
  • https://cssgridgarden.com/
  • https://gridcritters.com/
  • https://caniuse.com/
  • https://www.magicpattern.design/tools/blob-generator
  • https://meyerweb.com/eric/tools/css/reset/
  • https://html5boilerplate.com/
  • https://www.color-hex.com/color-palette/22942
  • https://www.greatfrontend.com/pt-BR
  • https://echarts.apache.org/en/index.html

Что такое веб-сайт?

Когда мы говорим о веб-сайте, мы можем заметить, что этот термин представляет собой комбинацию двух слов на английском языке: «web», что означает сеть и относится к всемирной паутине, и «site», что означает место. В этом смысле веб-сайт или сайт — это место, к которому можно получить доступ в Интернете через URL-адрес и которое имеет набор страниц, запрограммированных на каком-либо языке.

Чтобы лучше понять эту тему, давайте рассмотрим пример: когда вы вводите адрес blog.betrybe.com в свой интернет-браузер, чтобы получить доступ к блогу Trybe, браузер будет искать в Интернете, где находится этот веб-сайт. Затем будет сделан запрос на сервер.

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

Веб-сайты могут представлять разные формы и содержание. Некоторые из вариантов включают: виртуальные магазины, такие как Mercado Livre и Amazon, где товары можно покупать и продавать; институциональные веб-сайты и портфолио, используемые компаниями и людьми, чтобы заявить о себе и быть найденными клиентами; и блоги, подобные тому, который вы читаете.

Кроме того, веб-сайты также можно разделить на статические и динамические. Статические веб-сайты обычно разрабатываются с использованием HTML, CSS и JavaScript. Его содержание проще и взаимодействие с базой данных отсутствует.

Динамические веб-сайты, помимо использования преимуществ HTML, CSS и JavaScript, также используют более надежные языки программирования, такие как PHP. Эти сайты имеют функциональность, связанную с базой данных. Таким образом, каждая доступная страница может принести определенные данные.

Веб-дизайн

С помощью веб-дизайна вам необходимо учитывать важность интерфейса для разработки веб-сайтов, эволюцию технологий, используемых при создании насыщенных веб-страниц (Web 1.0, Web 2.0, Web 3.0 и Web 4.0), эволюцию интерфейсов (эстетических, функциональных и структурных). ).

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

Цветовая палитра:

  • https://paletadecolores.online/pt/magenta/
  • https://simpleicons.org/
  • https://colorhunt.co/
  • https://coolors.co/
  • https://colors.muz.li/
  • https://www.toptal.com/designers/colourcode/
  • https://lospec.com/palette-list
  • https://mycolor.space/
  • https://www.pantone.com/articles/color-palettes
  • https://atmos.style/color-generator
  • https://github.com/EmilHvitfeldt/r-color-palettes
  • https://www.color-hex.com/color-palettes/
  • https://visme.co/blog/website-color-schemes/
  • https://colorpalettes.com/
  • https://colorpalettes.net/

Градиенты:

  • https://www.grabient.com/
  • http://gradientsguru.com/
  • https://www.eggradients.com/
  • https://uigradients.com/#Zinc
  • https://webgradients.com/
  • https://cssgradient.io/

Веб-разработка

По сути, веб-разработка означает кодирование страниц для Интернета. Однако эта задача выходит за рамки использования HTML и CSS — основных инструментов для создания статической страницы — на которой представлена ​​информация, которую можно изменить только путем редактирования исходного кода.

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

Эта функция позволяет разрабатывать сложные приложения, использующие бизнес-правила, API — интерфейс прикладного программирования — и многое другое. Поэтому существует разделение деятельности, ориентированной на веб-разработку, кодирование на стороне клиента (front-end) и кодирование на стороне сервера (back-end).

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

Веб-приложения представляют собой растущее число сайтов в Интернете; то есть они имитируют настольные приложения, а не традиционные документы и статические ссылки с текстом и изображениями, составляющие большую часть Интернета. Например, у нас есть онлайн-текстовые процессоры, инструменты для редактирования фотографий, картографические веб-сайты и т. д. Используя в значительной степени JavaScript, они довели HTML4 до предела своих возможностей. HTML5 определяет новые API (интерфейс прикладного программирования) для DOM (объектная модель документа), которая представляет собой кросс-платформенное, независимое от языка соглашение для представления и взаимодействия с объектами и документами HTML, XHTML и XML.

Эти новые API помогают перетаскивать объекты, отправленные сервером, например рисунки, видео и т. п.

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

Еще более важным является необходимость открытого стандарта, который был бы бесплатным (в использовании и реализации), который мог бы конкурировать с проприетарными стандартами, такими как Adobe Flash или Microsoft Silverlight. Независимо от того, что вы думаете об этих технологиях или компаниях, мы считаем, что Интернет является жизненно важной платформой для общества, торговли и коммуникаций, которая находится в руках производителя.

Существуют миллионы веб-страниц, которые уже используются, и крайне важно, чтобы они продолжали воспроизводиться. Таким образом, HTML5 по большей части является производным от HTML4, который продолжает определять, как браузеры должны обрабатывать старую разметку, такую ​​​​как ,

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

Интерфейс

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

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

Взаимодействие человека с компьютером — это дисциплина, занимающаяся проектированием, оценкой и внедрением интерактивных вычислительных систем для использования человеком, а также изучением основных явлений, окружающих их.

Пример 3: Отправка сообщения на электронную почту

 Отправить письмо

[HTML5] Мультимедийные теги

Термин «цифровые носители» является противоположностью аналоговых носителей, которые были настроены на материальную основу: звук записывался в небольшие канавки на виниловой поверхности и, когда игла проходила через эти канавки, звук воспроизводился. В цифровых носителях физическая поддержка практически исчезает, а данные преобразуются в числовые или цифровые последовательности – отсюда и использование термина «цифровой». Таким образом, звуки, изображения, тексты на самом деле представляют собой последовательности чисел, что позволяет обмениваться данными, хранить и преобразовывать их. В самом широком смысле цифровые медиа можно определить как совокупность средств и устройств связи, основанных на цифровых технологиях, позволяющих цифровое распространение или передачу письменных, звуковых или визуальных интеллектуальных произведений. Средства электронного происхождения, используемые в стратегиях коммуникации брендов со своими потребителями, обычно называемые цифровыми медиа.

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

Просто добавьте вызов плагина , и он работает.

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

Благодаря всему этому HTML 5 имеет новую поддержку, встроенную в язык, позволяющую избежать использования ненужных плагинов и команд. В настоящее время просто сделайте простой вызов, как если бы это было изображение, и файл запустится.

 <контроля видео src="video.mp4" width="426" height="240">

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

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

видео

">
 < video width =" 426 " height =" 240 " controls >
  < source src =" video.mp4 " type =" video/mp4 " >
  < source src =" video.webm " type =" video/webm " >
  < source src =" video.ogg " type =" video/ogg " >
 video >

аудио

">
 < audio controls >
 < source src =" audio.mp3 " type =" audio/mpeg " >
 < source src =" audio.ogg " type =" audio/ogg " >
 < source src =" audio.wav " type =" audio/wav " >
 audio >

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

Примечание . Кодеки — это программы, используемые для кодирования и декодирования медиафайлов. Они сжимают исходный формат, отдавая предпочтение сохранению, и распаковывают его во время воспроизведения, преобразуя обратно в изображение или аудио.

Все упомянутые примеры аудио и видео импортированы через документ в каталоге. И вопрос в том, как мне импортировать видео, уже размещенное на таком сайте, как YouTube или Vimeo? И какое из двух решений (через документ или через сервер) наиболее выгодно?

Импорт видео

Давайте посмотрим, как шаг за шагом импортировать видео с YouTube и Vimeo!

[HTML5] Теги таблиц

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

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

Эти таблицы все еще существуют в HTML 5 как ресурс для отображения табличных данных, информации, поступающей из базы данных. С помощью новой версии HTML мы можем создавать веб-сайты полностью без таблиц, создавая таким образом динамические макеты, которые отображаются на больших экранах, как на компьютере, и хорошо адаптируются к небольшому экрану смартфона. Позже вы увидите, как создавать адаптивные макеты с помощью HTML5 и CSS3.

Команда table не была удалена из языка, но ее использование было ограничено. С другой стороны, у нас все еще есть несколько веб-сайтов, использующих этот ресурс, поэтому важно понимать, как он работает, чтобы при необходимости мы могли поддерживать страницы этого типа.

Команда для вставки таблицы —

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

 < table >
  < tr >
    < td >  td >
    < td >  td >
   tr >
 table >

Команда

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

align="" выравнивает таблицу в трёх положениях: center , left , right и justify
bgcolor="" определяет цвет таблицы
border="" определяет размер границы, если он равен нулю, граница не отображается
cellspacing="" определяет расстояние между ячейками
colspan="" определяет группировку между двумя или более столбцами таблицы (по бокам)
rowspan="" определяет группировку между двумя или более строками таблицы. (направление вниз и вверх)
cellpadding="" определяет расстояние между текстом и границей ячейки

отображает текст по центру таблицы, как если бы это был заголовок.

Атрибут правил

Чтобы выбрать внутренние строки, которые будут отображаться в таблице, мы используем атрибут RULES внутри тега. Дополнениями к этому атрибуту являются:

и
none нет всей строки.
all чтобы показать все строки между каждым столбцом и строкой в ​​таблице (по умолчанию)
rows для горизонтальных линий между каждой строкой таблицы.
cols для вертикальных линий между каждым столбцом таблицы.
groups для строк между группами столбцов и горизонтальными разделами, определяемыми специальными тегами, такими как

См. несколько примеров:

">
 < table border rules =" all " 6 >
">
 
">
 
 
">
 
 
">
 
 
 Формировать теги
 Часть HTML-форм очень важна для заполнения данных, которые пользователи вводят на HTML-страницу. Сбор этих данных осуществляется серверной частью с помощью внутреннего языка программирования (PHP, JavaScript, Python, Java и т. д.), который сохраняет и запрашивает эти данные в базе данных (MySQL, PostgreSQL, MongoDB, OracleDB и т. д.). .) Давайте посмотрим на теги формы:
 Форма входа (шаблон) : 


	Senha:

	

	
     
  
">
 < html >
  < body >
     < h2 > Login  h2 >
     < form >
	Login: < br >
	< input type =" email " name =" email " > < br >
	Senha: < br >
	< input type =" password " name =" senha " > < br >
	< input type =" submit " value =" Logar " >
      form >
   body >
 html >
 С помощью атрибута type мы можем определить тип используемого input , а атрибут name='' позволяет обрабатывать данные, отправленные через язык программирования.
 Форма входа (шаблон) — с PHP : 

	Login:

	

	Senha:

	

	
     
  
">
 < html >
  < body >
     < h2 > Login  h2 >
     < form action =" processa.php " >
	Login: < br >
	< input type =" email " name =" email " required > < br >
	Senha: < br >
	< input type =" password " name =" senha " required > < br >
	< input type =" submit " value =" Logar " >
      form >
   body >
 html >
 Регистрационная форма (шаблон) : 

	  Nome Completo:

	  

	  
      Email:

	  

	  Senha:

	  

	  Repita a senha:

	  

	  	
	  Sexo:

	   Masculino

	   Feminino

	  
	  Interesses:

	   Futebol

	   Video-games

	   Academia

	  
	  Estado

	  

	
	  Comente!

	  


	  
       
   
">
 < html >
  < head >
    < title > Cadastro  title >
   head >
  < body >
     < h2 > Cadastre-se  h2 >
       < form action =" processa.php " >
	  Nome Completo: < br >
	  < input type =" text " name =" nome " required > < br >
	  
      Email: < br >
	  < input type =" email " name =" email " required > < br >
	  Senha: < br >
	  < input type =" password " name =" password " required > < br >
	  Repita a senha: < br >
	  < input type =" password " name =" password " required > < br >
	  	
	  Sexo: < br >
	  < input type =" radio " name =" sexo " value =" masculino " > Masculino < br >
	  < input type =" radio " name =" sexo " value =" feminino " > Feminino < br >
	  
	  Interesses: < br >
	  < input type =" checkbox " name =" interesse " value =" futebol " > Futebol < br >
	  < input type =" checkbox " name =" interesse " value =" video-games " > Video-games < br >
	  < input type =" checkbox " name =" interesse " value =" academia " > Academia < br >
	  
	  Estado < br >
	  < select name =" estado " >
	    < option value =" RJ " > RJ  option >
	    < option value =" SP " > SP  option >
	    < option value =" MG " > MG  option >
	    < option value =" ES " > ES  option >
	   select > < br >
	
	  Comente! < br >
	  < textarea name =" comentario " >  textarea > < br >

	  < input type =" submit " value =" Cadastrar " >
        form >
    body >
 html >
 Мы сможем input между радиостанциями только в том случае, если name одинаковое. Таким образом, мы можем сгруппировать эту информацию, и только одна из нее будет отмечена.
 С помощью checkbox мы можем выбрать более одного варианта для выбора.
 С
 Мы можем определить типы  и их атрибуты:
  •  button
  •  password
  •  text
 Элементы  ,  и ">
 < button type =" button " > Clique Aqui  button >
 Короче говоря, если вы создаете кнопку для навигации, используйте  . Если вы создаете кнопку для отправки данных из формы, используйте  или 
 Псевдо-класс Определение
 :hover Он изменяет элемент, наведя на него курсор.
 :active Измените элемент, щелкнув его.
 :link Изменяет все непосещенные ссылки.
 :visited Изменяет все посещенные ссылки.
 :focus Изменяет элемент  , имеющий фокус.
 :checked Изменяет все отмеченные элементы  .
 :disable Изменяет все отключенные элементы  .
 :enabled Изменяет все включенные элементы  .
 :empty Изменяет все элементы 
 , у которых нет дочерних элементов.
 :first-child Изменяет каждый включенный элемент  .
 :enabled Изменяет каждый включенный элемент  .
 :first-child Изменяет каждый элемент 
 , который является первым дочерним элементом родительского элемента.
 :first-of-type Он изменяет каждый элемент 
 , который является первым элементом 
 его родительского элемента.
 :in-range Изменяет элементы  на значение в пределах указанного диапазона.
 :invalid Изменяет все элементы  на недопустимое значение.
 :lang(language) Изменяет каждый элемент 
 на значение атрибута lang, начинающееся с « it ».
 :last-child Он изменяет все элементы 
 , которые являются последними дочерними элементами родительского элемента.
 :last-of-type Изменяет каждый элемент 
 , который является последним элементом 
 его родительского элемента.
 :link Изменяет все непосещенные ссылки.
 :not(selector) Изменяет каждый элемент, кроме элемента 
 .
 :nth-child(n) Изменяет каждый элемент 
, упорядоченный от родительского элемента.
 :nth-last-child(n) Изменяет каждый элемент 
, упорядоченный от его родительского элемента, считая от последнего дочернего элемента.
 :nth-last-of-type(n) Изменяет каждый элемент 
, который является вторым элементом 
 от своего родительского элемента, считая от последнего дочернего элемента.
 :nth-of-type(n) Он изменяет каждый элемент 
, который является вторым элементом 
 его родительского элемента.
 :only-of-type Изменяет элемент 
, который является единственным элементом 
 из родительского элемента.
 :only-child Он изменяет каждый элемент 
, который является единственным дочерним элементом родительского элемента.
 :optional Изменяет элементы  без атрибута «required».
 :out-of-range Изменяет элементы  с помощью atr        
        
Расширять

    



    

        

            Дополнительная информация
        

        
    





    

        

            Связанные приложения
        

        
    





    

        

            Рекомендуем вам
        

        
    






    

        

            Связанные новости
            Все