This project was developed with HTML, CSS, and JAVASCRIPT

Live Site

https://lribeirodev.github.io/ProjetoWEM/

Views

Mobile View

Desktop View

Mackup Content Project

The code below shows us the components

The webpage below shows us possible database schema

We have a diagram about the project simplifying what How WEM works

Sql Query to create tables in oracle database

CREATE TABLE REPLACE_WITH_DATABASE.TC_LUCASR_TOP_BANNER_INDEX
( ID VARCHAR2(40) PRIMARY KEY NOT NULL,
  ADMINISTRATIVE_NAME VARCHAR2(255),
  URL_LINK VARCHAR2(255),
  URL_IMAGE_DESKTOP VARCHAR2(255),
  URL_IMAGE_MOBILE VARCHAR2(255)
);

CREATE TABLE REPLACE_WITH_DATABASE.TC_LUCASR_TREND_INDEX
( ID VARCHAR2(40) PRIMARY KEY NOT NULL,
  ADMINISTRATIVE_NAME VARCHAR2(255),
  URL_LINK VARCHAR2(255),
  TEXT_TREND VARCHAR2(255)
);

CREATE TABLE REPLACE_WITH_DATABASE.TC_LUCASR_CARD_INDEX
( ID VARCHAR2(40) PRIMARY KEY NOT NULL,
  ADMINISTRATIVE_NAME VARCHAR2(255),
  URL_LINK VARCHAR2(255),
  URL_IMAGE_DESKTOP VARCHAR2(255),
  URL_IMAGE_MOBILE VARCHAR2(255),
  TEXT_TITLE VARCHAR2(255)
);

CREATE TABLE REPLACE_WITH_DATABASE.TC_LUCASR_CAROUSEL_BANNER_INDEX
( ID VARCHAR2(40) PRIMARY KEY NOT NULL,
  ADMINISTRATIVE_NAME VARCHAR2(255),
  URL_IMAGE_DESKTOP VARCHAR2(255),
  URL_IMAGE_MOBILE VARCHAR2(255),
  TEXT_TITLE VARCHAR2(255),
  TEXT_BUTTON VARCHAR2(255),
  URL_LINK_BUTTON VARCHAR2(255)
);

CREATE TABLE REPLACE_WITH_DATABASE.TC_LUCASR_BIOGRAPHY_INDEX
( ID VARCHAR2(40) PRIMARY KEY NOT NULL,
  ADMINISTRATIVE_NAME VARCHAR2(255),
  URL_IMAGE_DESKTOP VARCHAR2(255),
  URL_IMAGE_MOBILE VARCHAR2(255),
  TITLE_TEXT VARCHAR2(255),
  DESCRIPTION_TEXT VARCHAR2(255)
);

Notes:

• Aspect #1 When creating CTD we should consider images references for desktop, and mobile
• Aspect #2 The mockup is just a base to the possible real model, however, while making implementation the database could be altered, for example, a table, a column name URL_IMAGE_DESKTOP is better than URL_IMAGE because the more specific will turn things easy for the user to understand the implementation that was used for.
• Aspect #3 While shaping the page, we will consider that one element will be used to make a component, this is a SHAPE for our CAKE, now repeated images and text will use one CTD to make many content instances and pointing to references inside the database.