HTML의 원본 탭 디자인. 스크립트를 사용하지 않고 CSS를 사용하여 적응형 탭(탭)을 만드는 방법입니다. 새 HTML 탭용 CSS 만들기
기업정보포털(기업 정보 포털, EIP) - 기업 포털이라고도 합니다. 직원에게 필요한 서비스를 통일된 방식으로 제공하는 자동화된 정보 시스템입니다. 기업 포털에는 직원에 대한 액세스가 제한되어 있고 (회사 자체가 원하는 경우) 모든 사람이 무료로 액세스할 수 있습니다. 어떤 경우든 EIP 시스템은 단일 리소스에 대한 보안 액세스를 제공하며(대개 웹 인터페이스를 통해) 일반적으로 기업 포털은 정보를 집계하고 개인화하는 수단입니다.
첫 번째 포털의 목적은 다음과 같은 용어의 최초 정의로 명확하게 나타납니다. “기업 정보 포털(EIP)은 기업이 조직 내부 및 외부에 저장된 정보를 공개하고 각 사용자에게 단일 액세스 지점을 제공할 수 있는 애플리케이션입니다. 정보에 입각한 관리 결정을 내리는 데 필요한 정보입니다."(Christopher C. Shilakes 및 Julie Tylman, "Enterprise Information Portals", 1998년 11월)
첫 번째 기간의 포털은 경영진이 회사 직원에게 정보를 게시하는 도구로 사용되었습니다. 이는 회사에 대한 정보가 포함된 웹사이트였으며 페이지 중 하나에 간단한 내부 포럼을 구성할 수 있었습니다. 포털에서는 회사의 최신 조직 변화에 대한 정보를 얻고 뉴스를 읽을 수 있습니다. 또한 포털은 간단한 파일 저장소 역할을 했습니다.
기술의 발달로 포털의 기능이 확장되었습니다. 2000년부터 회사 직원들은 포털을 사용하여 질문에 대한 답변을 얻는 데 필요한 정보를 찾기 시작했습니다. 포털 기술은 데이터를 구조화하고 분류하고, 필요한 정보를 검색하는 속도와 효율성을 높이며, 얻은 결과를 제시하는 데 필요한 형식을 제공하는 방향으로 발전했습니다. 이 기간 동안 기업 포털은 회사 활동과 관련된 다양한 주제 영역에서 지식 기반 역할을 하기 시작했습니다.
가트너 정의
EIP: 선택 및 구현
기업 포털 및 솔루션 제조업체
| 제조업체 | 상품명 | 기술 | 특허 | 포털 API | 러시아화 |
|---|---|---|---|---|---|
| 아파치 소프트웨어 재단(ASF) | 제트스피드 2.1.3 | J2EE | 아파치 라이센스 v2.0 | JSR-168 | 알려지지 않은 |
| ATG | ATG 포털 | J2EE | 상업 | JSR-168 | 알려지지 않은 |
| 백베이스 | 리치 포털 | RIA, J2EE, .NET | 상업 | 웹 지향 아키텍처 | 알려지지 않은 |
| 브로드비전 | 브로드비전 포털 8.0 | J2EE | 상업 | 알려지지 않은 | 알려지지 않은 |
| eXo 플랫폼 SAS | 엑소포탈 2.5 | J2EE | Affero 일반 공중 라이선스 | JSR-286 | 알려지지 않은 |
| 파시히 | Fasihi 엔터프라이즈 포털 2.0 | J2EE | 상업 | JSR-286 | 알려지지 않은 |
| IBM | 웹스피어 포털 서버 6.1 | J2EE | 상업 | JSR-286 | 예 |
기업 포털은 조직의 내부 정보 자원을 관리하고 프로젝트, 작업, 문서에 대한 공동 작업, 회사 직원과 고객 간의 커뮤니케이션을 위한 자동화된 시스템입니다.
기업 포털은 기업 서버와 클라우드 모두에 설치할 수 있습니다. 기업 포털은 정보를 수집하고 작업하기 위한 단일 리소스이므로 고유한 모든 기능을 갖춘 내부 기업 소셜 네트워크라고 안전하게 부를 수 있습니다.
기업포털의 주요 기능
기업 포털은 조직 직원의 협업에 필요한 거의 모든 영역을 포괄하는 풍부한 기능으로 인해 널리 보급되었습니다. 우선, 이것은:
- 내부 및 외부 커뮤니케이션
포털을 사용하면 우리에게 친숙한 메신저와 소셜 네트워크에서 친숙한 기타 도구 덕분에 직원과 고객 간의 커뮤니케이션 프로세스 속도를 높일 수 있습니다. '라이브 피드', 알림 등 사업 영역이나 프로젝트별로 다양한 비즈니스 채팅을 생성할 수 있는 기능은 의사소통 과정과 필요한 의사결정을 가속화합니다. 많은 포털에서는 온라인에 없는 동료에게 전화를 걸 수 있습니다. 또한 최신 기업 포털을 사용하면 작업 그룹 및 회사 고객과 진행 중인 프로젝트에 대해 소통하고 현재 문제를 해결할 수 있습니다.
- 작업 및 프로젝트 관리
작업과 프로젝트는 모든 조직의 작업 프로세스에서 없어서는 안될 부분입니다. 일반적으로 기업 포털에는 작업을 위한 다양하고 편리한 도구가 있습니다. 작업 설정부터 시작하여 일정 마감일 관리, 위임 메커니즘, 체크리스트, 기성 템플릿을 거쳐 다양한 생성자와 필터로 끝납니다. 이 모든 기능을 통해 할당된 작업이 적시에 완료되는지 모니터링하고 직원의 작업을 평가하여 관련 보고서를 받을 수 있습니다.
- 문서 공동작업
많은 기업 포털의 기능을 통해 문서 작업이 매우 편리해졌습니다. 문서에 대한 액세스 수준 생성, 편집, 저장, 구성 등 동시에 문서 작업을 위해 문서를 컴퓨터에 다운로드할 필요가 없고 완료 후 업데이트된 버전을 다시 업로드할 필요가 없는 경우도 많습니다. Google Docs 및 MS Office와 같은 타사 온라인 서비스를 사용하면 포털에서 직접 문서 작업을 할 수 있습니다. 기업 포털을 사용하면 동료와 편리하게 문서를 공유하고, 동료와 고객이 액세스할 수 있도록 문서에 대한 외부 링크를 만들 수 있습니다.
- 근무 시간 계획 및 기록
조직의 효율성은 주로 업무 규율에 따라 달라집니다. 기업 포털을 사용하면 직원의 근무 시간을 추적할 수 있습니다. 근무일의 시작과 끝은 물론 모든 종류의 휴식, 결석, 출장 등을 표시합니다. 이 모든 정보는 프로젝트 및 작업에 소요되는 시간을 최적화하는 데 도움이 됩니다. 많은 포털에는 훌륭한 회의 도구 세트가 있습니다. 초대장 대량 발송, 달력에서 회의 일정 잡기, 모든 참가자와 회의 결과 및 작업에 대한 알림.
- CRM:고객 및 판매
많은 기업 포털에서는 협력하는 고객 및 파트너의 연락처 데이터베이스를 유지할 수 있는 CRM 시스템 기능을 제공합니다. 모든 통화와 이메일을 녹음하는 기능을 통해 가장 중요한 순간을 놓치지 않을 수 있으며, 영업 유입 경로는 영업 부서의 효율성을 추적하는 데 도움이 됩니다.
- HR:인사관리
기업 포털을 사용하면 회사 구조를 쉽게 제시하고 관리할 수 있습니다. 연락처, 내선 번호, 이메일 등과 같은 직원에 대한 모든 필요한 정보는 항상 가까이에 있습니다. 누가 직장에 있는지, 누가 결근했는지, 누가 출장 중인지, 누가 임시로 교체를 했는지, 오늘 누가 생일인지 쉽게 알 수 있습니다.
- 비즈니스 프로세스 자동화
자동화된 비즈니스 프로세스만큼 회사 작업 속도를 높이거나 시간을 절약해 주는 것은 없습니다. 기업 포털은 회사의 주요 비즈니스 프로세스를 자동화하는 기능을 제공합니다. 출장, 휴가, 청구서 승인, 결제 등 일상적인 업무를 몇 배 더 빠르게 완료할 수 있습니다.
기업 포털은 누구에게 필요하며 그 이유는 무엇입니까?
기업 포털은 우선 원격 직원이 많거나 지점 구조를 가진 회사에 매우 편리한 도구입니다. 업무 특성상 같은 사무실에 있지 않거나 많이 이동하는 경우 기업 포털은 이들에게 모바일 작업 공간 역할을 할 수 있습니다. 그러나 정규 직원이 있고 단일 위치에 있는 회사의 경우 기업 포털은 다음과 같은 이유로 매우 유용합니다.
- 작업 시간 절약
필요한 정보를 더 빠르게 찾고 처리하세요. 동료들과 더욱 효율적으로 소통하고 할당된 작업 완료 속도를 높이세요.
- 직원 생산성 향상
기업 포털의 도움으로 모든 사람은 자신이 무엇을 해야 하는지, 어떤 기간에 해야 하는지 항상 알 수 있습니다. 실무 그룹을 통해 우리는 이를 보다 효율적으로 수행할 수 있으며, 축적된 모든 지식은 회사 내에서 축적되고 이전될 것입니다.
- 비즈니스 프로세스 최적화
문서와 정보가 사무실에서 사무실로 이동하는 대신 문자 그대로 조직 내로 이동하도록 하십시오.
- 통제력과 관리 효율성 확보
누가 어디에 있는지, 무엇을 하고 있는지, 얼마나 오랫동안 작업하는지 항상 알 수 있습니다. 직원에 대한 피드백은 훨씬 더 빠르고 효과적이 될 것입니다.
- 경영 의사결정의 질과 업무 효율성을 향상시킵니다.
작업 완료에 대한 보고와 직원 작업량 분석은 더 나은 결정을 내리는 데 도움이 됩니다. 결과적으로 회사의 업무 품질과 경쟁력이 높아질 것입니다.
기업포털 선정 및 구축
현재 선택할 수 있는 옵션은 세 가지가 있습니다.
- 기성품 박스형 솔루션 구매
- 클라우드 솔루션으로서의 기업 포털
- 처음부터 포털 개발(맞춤형 솔루션)
각 옵션에는 장단점이 있으므로 최종 결정은 조직의 규모, 작업 및 구현 목표에 따라 달라집니다.
팀이 효과적으로 협업하는 데 도움이 되는 도구를 찾고 계십니까?
무료 상담 요청 보내기
이전 기사에서는 및 웹 사이트 탭을 만드는 방법을 배웠습니다. 그리고 우리는 소셜 네트워크를 활용하는 방법을 알아냈습니다.
하지만 때로는 HTML과 CSS의 조합을 사용하여 가장 간단한 탭을 만들고 사용하는 cms에 관계없이 사이트 페이지의 어느 곳에나 배치해야 할 때가 있습니다.
이러한 탭에 콘텐츠나 코드를 배치할 수 있습니다. 이를 위해 추가 라이브러리와 스크립트(기본 Html 및 CSS)를 연결할 필요가 없습니다.
페이지의 html css 탭 예:
HTML 탭 만들기
1단계. 탭의 경우 간단한 코드를 작성합니다.
탭 1의 내용
탭 2의 내용
탭 3의 내용
탭 4의 내용
새 HTML 탭용 CSS 만들기
2 단계. 우리는 외부 디자인을 위한 스타일을 작성합니다.
스타일에서는 원하는 대로 무엇이든 변경할 수 있습니다. 이 예에서는 탭의 모서리가 둥글게 되어 있습니다. 필요하지 않은 경우 이 블록을 삭제하면 됩니다.
/* CSS 문서 */ .tabs ( 불투명도: 0; 표시 여부: 숨김; ) .tab( 위치:절대; 표시 여부: 숨김; z-index: 10; 색상:#000; 글꼴: 굵은 9pt arial; ) .tabs: target+.tab ( opacity: 1; visible: visible; ) .tabsLink a( background-color:#F06406; padding:2px; 글꼴: 굵은 10pt arial; color:#fff; text-꾸밈:none; /* 둥근 탭 시작 */ -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -top-right-radius: 10px; /* 둥근 탭 끝 */ )
보시다시피, 비활성 탭의 콘텐츠를 숨기기 위해 일반 탭을 만드는 옵션이 많이 있습니다. 그리고 이것은 5분 안에 끝나는 가장 간단한 방법입니다.
2019년 10월 25일 게시물이 업데이트되었습니다.
유리 네메츠
아름다운 탭 모음 - 사이트를 위한 아름다운 탭 세트
오늘 저는 아름답고 독창적인 탭을 여러분께 소개해 드리겠습니다. 이러한 효과를 생성하기 위해 의사 요소, SVG 이미지 및 CSS 전환이 사용되었습니다. 모든 탭의 디자인은 현대적인 스타일로 만들어졌으며 거의 모든 웹사이트에 적합합니다. 이러한 탭의 예를 보면 사이트에서 자주 사용되는 요소인 것처럼 보이는 것을 얼마나 특이하게 디자인할 수 있는지 놀라게 될 것입니다.
다양한 아름다운 탭
다운로드
다양한 아름다운 탭
데모 버전을 보면 모든 예제가 한 페이지에 있다는 것을 알 수 있습니다. 따라서 소스를 다운받아 열어보면 왼쪽 이미지처럼 긴 페이지가 나옵니다. 겁먹지 마세요! 거기에는 모든 것이 아름답게 구성되어 있습니다. 원하는 코드 "조각"을 가져와 웹사이트에 붙여넣기만 하면 됩니다.
각각의 새로운 예시는 별도의 블록에 위치합니다.
스타일 파일에서도 마찬가지입니다. 크기도 크지만 거기에 모든 것이 설명되어 있으므로 문제가 없을 것입니다.
아직 데모를 시청하지 않으신 분들을 위해 스크린샷 몇 장을 준비했습니다. :)
결론
비표준 효과 및 전환이 포함된 다양한 탭이 있습니다. 몇 분 동안 시간을 내어 모든 탭을 살펴보세요. 당신이보고 생각하는 경우가 있습니다. “글쎄, 평범한 탭, 그게 무슨 문제 야. 사실은 아니고 나한테는 그게 필요해.” 하지만 하나, 일부 특이한 디자인은 너무 기억에 남기 때문에 사이트에 탭을 구현해야 할 때 바로 이 방법을 사용하면 됩니다. 그리고 당신은 그들을 어디서 봤는지조차 기억하지 못합니다!
그러므로 브라우저의 북마크에 내 사이트를 추가하는 것을 잊지 마십시오(이 작업은 키보드 단축키를 사용하여 수행됩니다). Ctrl+D) 😉 .
안녕하세요, 독자 여러분. 이 추운 날에도 우리는 당신과 함께 할 것입니다 CSS와 JQuery를 사용한 아름다운 탭. 이러한 소위 탭은 사이트 전체에 매우 유용하며 페이지 공간을 크게 절약할 수 있습니다. 사이드바나 콘텐츠 자체, 즉 기사에 직접 배치할 수 있습니다.
또한 우리가 만들 탭은 아름다운 디자인으로 귀하의 사이트를 멋지게 꾸밀 것입니다. 얼마나 :-) 아름답고 유용한지, 제 생각에는 드문 우연의 일치인 것 같습니다. 또한 각각의 도움을 통해서만 만들어집니다. 즉, 빠르게 로드되고 서버에 로드가 발생하지 않습니다.
제이쿼리
$(document).ready(function() ( $("#content div").hide(); // 숨겨진 콘텐츠 $("#tabs li:first").attr("id","current"); // 먼저 표시할 탭 $("#content div:first").fadeIn() // 첫 번째 탭 내용 표시 $("#tabs a").click(function(e) ( e.preventDefault() ; $ ("#content div").hide(); //모든 콘텐츠 숨기기 $("#tabs li").attr("id","") //식별자 재설정 $(this).parent() .attr ("id","current"); // 식별자 활성화 $("#" + $(this).attr("title")).fadeIn(); // 현재 탭의 내용 표시 )) () ;이것이 기본적으로 전부입니다. 가장 중요한 것은 탭에 배경 이미지를 추가하면 모양이 크게 향상되지만 로드하는 데 시간이 더 오래 걸립니다.
브라우저 호환성
이 탭은 거의 모든 브라우저에서 지원되지만, 많은 브라우저가 아직 CSS3를 지원하지 않기 때문에 일부 브라우저에서만 약간 다르게 보일 것입니다.
그게 다입니다. 마음에 드셨기를 바랍니다. :-) 명확하지 않은 부분이 있으면 댓글로 문의해 주세요. 곧 봐요.