1.IniciarSesiónParapublicarenEDUBLOGSnecesitamosingresaralsiguienteenlacecontuusuarioycontraseñainstitucional:

http://portales.sabes.edu.mx/edublogs/scp/

EDUBLOGSAutores

Servicio:EDUblogs URL:www.portales.sabes.edu.mx/edublogs/

Creadopor:VíctorHugoMtz.Jmz.(VH.MJ) Área:CoordinacióndeServiciosWeb/Portal

Contenido:1. Iniciarsesión.2. Crearunartículo.3. Herramientasdepublicación(EBSshortcodes)

ControldeVersióndelDocumento

Versión Fecha Elaboró

1.0 Abrildel2018 VH.MJ

2.CrearunartículoAliniciarsesiónpodemosverelescritoriodeautordeblogs,elcualtieneunanavegaciónsuperior,unanavegaciónlateral(izquierda)yelcontenido:

Paracrearunartículodebemosiranuestromenúlateral,colocarelmouseenlaopción“Entradas”ydarclica“Añadirnueva”:

Alhacerlopodremosverdiferentescajas:Título,Contenido,Extracto,Publicar,Categorías,EtiquetaseImagendestacada.

Encasodequenoveaslascajasmencionadastendrásqueactivarlasen“Opcionesdepantalla”ubicadoenlapartesuperiorderecha:

Título

Eltítulonosóloidentificaelartículo,sinoquetambienayudaagenerarsuURL.

Contenido

EncuantoalcontenidotenemosmúltiplesherramientasconlasqueestamosacostumbradosenprogramascomoWord,parapodervertodasbastaconactivarelmóduloenelpenúltimoícono:

Paraagregarunaimagenalcontenidopodemoshacerclicenelbotón“Añadirobjeto”oatravésdelaherramientaEBSqueseverádepués.

ConestaherraminetapodemosinsertarunaimagenqueestéennuestraPC,queyasehayasubidoalalibreríaobien,atrvésdeunaURL.DeigualformaatravésdeestebotónpodemosunsertarunaGalería,listadeaudioydevideo.

Esimportantequecadavezqueagreguemosunaimagenalalibrería,lepongamosuntextoalternativo,yaqueestetextosuplealaimagenenelcaso

dequeporcualquierrazónnosepuedaver.

Extracto

Resumiendoelextractoeseltextoqueapareceráenlapáginadeinicio,encasodenoagregarniguno,tomaráeltextodelcontenidohastaunciertonúmerodecaracteres.

Publicar

AlteneryacontenidodebemostenerencuentalacajadePublicaryaquetenemostresbotones:

1. Vistaprevia:estebotónnospermiteprevisualizarcómosevaavernuestroartículoalpublicarlo.

2. Guardarborrador:conestebotónguardamoselcontenidoparacontinuardespuésconél.

3. Publicar:estebotóneselquehacepúbliconuestroartículo,esdecir,nadadeloqueeditemosmientrasestéenestadodeBorradorynoserápúblico.de

Categorías

Debemoselegirlacategoríaquemásseadapteanuestroartículo,yaqueestonospermitiráagruparlosportemas.

Etiquetas

Lasetiquetassonpalabrasquedescribananuestroartículomásadetalle,conelfindeenontrarloconfacilidadyquenospermitaagruparloaligualquelascategorías,sinembargo,lasetiquetassonmenosglobales.Enestecaso,podemoselegirentrelasetiquetasmásutilizadasobien,agregarlasquecreamosadecuadas.

Imagendestacada

Estaimageneslaquesemuestraenlapáginadeinicioyseinsertadelamismamaneraqueunaimagendecontenido.

Estaimagennoapareceenelcontenidosóloagregándolaenestacaja,aloquerecomendamosseinsertetambiénaliniciodelcontenidoparaqueseamássencilloidentificaralartículo.

3.HerramientasdepublicaciónEBSshortcodesEasyBootstrapShortcodes(EBS)esunaherramientaquenosvaapermitirhacermásatractivoeinteractivonuestroblogopublicaciones.Laherramientalapodemosverdentrodenuestrabarradeherramientasdelasiguientemanera:

Lasherramientassedividenen:

• BasicElements(elementosbásicos)• Interactive(interactivos)• Content(contenido)• Miscellaneous(diverso)• Columns(columnas)

Alseleccionaralgunadeestasherramientasnosabriraunpanelconlaspropiedadesdelelementoqueseleccionamos,incrustandoennuestroarchivounextractodecódigoconlaspropiedadesqueseleccionamos.

Acontinuación.temostramosuncatálogodeestasherramientas,dondepodremosencontrar:botones,notificaciones,sliders,tablasinteractivas,íconosymás.

BasicElements

Button.Comosunombreeninglésloindica,esteshortcodecreaunbotónypodemosasignarlediferentespropiedades.Ejemplos:

Códigodelosejemplos:

[buttonstyle="btn-primarybtn-xs"type="button"title="Ex-small"][buttonstyle="btn-successbtn-sm"type="button"title="Small"][buttonstyle="btn-warningbtn-lg"icon="glyphiconglyphicon-th"align="left"iconcolor="#ffffff"type="button"title="Large"][buttonstyle="btn-defaultbtn-lgbtn-block"icon="glyphiconglyphicon-th"align="left"type="button"title="Block"]

Propiedadesdelelemento:

ButtonGroup.Agrupalacantidaddebotonesquedeseamosenunasolalínea.Ejemplo:

Códigodelejemplo:

[buttongroup][buttonstyle="btn-primarybtn-sm"type="button"title="Primary"][buttonstyle="btn-successbtn-sm"type="button"title="Succes"][buttonstyle="btn-infobtn-sm"type="button"title="Information"][buttonstyle="btn-warningbtn-sm"type="button"title="Warning"][buttonstyle="btn-dangerbtn-sm"type="button"title="Danger"][buttonstyle="btn-linkbtn-sm"type="button"title="Link"][/buttongroup]

Propiedadesdelelemento:

Notifications.Creaunavisoonotificacióndentrodeunrecuadroquepuedeonocerrarse.Ejemplo:

Códigodelosejemplos:

[notificationtype="alert-warning"close="true"]Yournotification[/notification][notificationtype="alert-danger"close="false"]Yournotification[/notification]

Propiedadesdelelemento:

Tooltip.Creaunmensajecortoenunelementocuandoseposicionaelmousesobreél;nospermitequeelmensajeaparezcaalaizquierda,derecha,arribaoabajo.Ejemplo:

Códigodelejemplo:

[tooltiptype="button"link=""tooltip="Tooltip"style="top"]Posicionaelmouseparaverlafunción[/tooltip]

Propiedadesdelelemento:

Popover.Creaunmensajeenunelementocuandoseposicionaelmousesobreélosehaceclic;nospermitequeelmensajeaparezcaalaizquierda,derecha,arribaoabajo.Adiferenciadeltootltip,estaherramientapermiteincorporarmáscontenido.Ejemplo:

Códigodelejemplo:

[popovertitle="Título"pop_content="Contenido"trigger="hover"style="right"type="btn-warning"]Posicionaelmouseparaverlafunción[/popover]

Propiedadesdelelemento:

ButtonDropdown.Creaunbotónquedesplegadistintoselementoscomoestilosubmenús.Aloscualeslespodemosagregarhipervínculosydivisiones.Ejemplos:

Códigodelosejemplos:

[dropdowndropup="dropdown"][dropdownheadstyle="btn-info"size=""split="split"]ButtonDropdown[/dropdownhead][dropdownbody][dropdownitemtype="menuitem"link="#"]DropdownItem[/dropdownitem][/dropdownbody][/dropdown]

[dropdowndropup="dropup"][dropdownheadstyle="btn-default"size="btn-lg"split=""]ButtonDropup[/dropdownhead][dropdownbody][dropdownitemtype="menuitem"link="#"disabled="disabled"]item1[/dropdownitem][dropdownitemtype="divider"][/dropdownitem][dropdownitemtype="menuitem"link="#"]item2[/dropdownitem][/dropdownbody][/dropdown]

Propiedadesdelelemento:

Progressbar.Creaununa“barradeprogreso”decolor,convaloressobreporcentajes.Ejemplos:

Códigodelosejemplos:

[progressbarvalue="50"barstyle="progress-stripedactive"][progressbarvalue="60"bartype="progress-bar-danger"]

Propiedadesdelelemento:

Interactive

Accordion.Comosunombreeninglésloindica,generaunacordeóninteractivo,dondealhacerclicdespliegaelcontenidodenuestraelección.Ejemplos:

Códigodelosejemplos:

[togglesclass="yourcustomclass"][toggletitle="Accordionnumber1"]ContenidodeAccordionnumber1[/toggle][toggletitle="Accordionnumber2"]ContenidodeAccordionnumber2[/toggle][toggletitle="Accordionnumber3"]ContenidodeAccordionnumber3[/toggle][toggletitle="Accordionnumber4"]ContenidodeAccordionnumber4[/toggle][/toggles]

Propiedadesdelelemento.

Esteelementoseeditadirectamenteenelcódigodelasiguienteforma:

Tabs.Sonparecidasalosfolders,dondecadapestañamuestraunciertocontenido.Ejemplo:

Códigodelejemplo:

[tabsclass="yourcustomclass"][tabtitle="Tabnumber1"active="active"]Tab1contentgoeshere.[/tab][tabtitle="Tabnumber2"]Tab2contentgoeshere.[/tab][tabtitle="Tabnumber3"]Tab3contentgoeshere.[/tab][tabtitle="Tabnumber4"]Tab4contentgoeshere.[/tab][/tabs]

Propiedadesdelelemento:

Esteelementoseeditadirectamenteenelcódigodelasiguienteforma:

Tables.Comosunombreeninglésdice,creaunatablaconciertosefectos.Ejemplo:

Códigodelejemplo:

[tablewidth="100%"style="table-stripedtable-bordered"responsive="true"][table_head][th_column]Heading-1[/th_column][th_column]Heading-2[/th_column][th_column]Heading-3[/th_column][/table_head][table_body][table_row][row_column]value-1[/row_column][row_column]value-2[/row_column][row_column]value-3[/row_column][/table_row][table_row][row_column]value-1[/row_column][row_column]value-2[/row_column][row_column]value-3[/row_column][/table_row][/table_body][/table]

Propiedadesdelelemento:

Esteelementocuentaconpanelyseeditadirectamenteenelcódigodelasiguienteforma:

Panels.Generaunpanelconelementoscomoencabezado,contenidoypiedepágina.Ejemplo:

Códigodelejemplo:

[panelstyle="panel-info"][panel-header]Headinggoeshere[/panel-header][panel-content]Contentgoeshere[/panel-content][panel-footer]Footergoeshere[/panel-footer][/panel]

Propiedadesdelelemento:

Esteelementocuentaconpanelyseeditadirectamenteenelcódigodelasiguienteforma:

Slider.Generauncarruseldeimágenes,alosquelepodemosesocgereltiempodelatransición,agregartextoyotraspropiedades.Serecomiendausarelmismotamañoparatodaslasimágenes.Ejemplo:

Códigodelejemplo:

[sliderinterval="5000"navcolor="#000000"controls="true"bullets="true"wrap="true"][slidetitle="Slider1"image="http://portales.sabes.edu.mx/edublogs/wp-content/uploads/2018/04/semiconductors_0-1024x768.jpg"active="active"/][slidetitle="Slider2"image="http://portales.sabes.edu.mx/edublogs/wp-content/uploads/2018/04/desktop-free-hd-wallpapers-3D-1024x640.jpg"/][/slider]

Propiedadesdelelemento:

Content

List.Generaunalistaagrupada.Ejemplo:

Códigodelejemplo:

[list][litype="glyphicon-ok"]yourlistcontent[/li][litype="glyphicon-ok"]yourlistcontent[/li][litype="glyphicon-ok"]yourlistcontent[/li][/list]

Propiedadesdelelemento:

Esteelementocuentaconpanelyseeditadirectamenteenelcódigodelasiguienteforma:

IconHeading.Creauntítuloconunícono.Ejemplo:

Códigodelejemplo:

[iconheadingtype="h1"style="glyphiconglyphicon-info-sign"color="#1e73be"]Heading[/iconheading]

Propiedadesdelelemento:

Label.Generaunaetiquetaconfondodecolor.Ejemplo:

Códigodelrender:

[labeltype="label-warning"]LoremIpsumessimplementeeltextoderellenodelasimprentasyarchivosdetexto.[/label]

Propiedadesdelelemento:

Well.Creaunrecuadroconmargen.Ejemplo:

Códigodelejemplo:

[welltype="well-lg"]YourContent[/well]

Propiedadesdelelemento:

DescriptionList.Creaunalistacontítuloydescripción.Ejemplo:

Códigodelejemplo:

[dlstyle="dl-horizontal"][dlitemheading="Heading1"]Description1[/dlitem][dlitemheading="Heading2"]Description2[/dlitem][dlitemheading="Heading3"]Description3[/dlitem][/dl]

Propiedadesdelelemento:

Esteelementocuentaconpanelyseeditadirectamenteenelcódigodelasiguienteforma:

Servicebox.Generaunacajaconícono,títuloycontenido.Ejemplo:

Códigodelejemplo:

[serviceboxicon="glyphicon-shopping-cart"icontype="glyphicon"icon_size="59"iconbg_size="97"iconbg_radius="30"margin_bottom="30"margin_top="30"iconbgcolor="#dd9933"iconcolor="#1e73be"headingtype="h2"heading="Encabezado"readmore="true"readmore_link="#"readmore_text="ReadMore"readmore_type="btn-lg"readmorestyle="default"]YourContent[/servicebox

Propiedadesdelelemento:

Esteelementocuentaconpanelyseeditadirectamenteenelcódigodelasiguienteforma:

Micellaneous

Responsiveimage.Agregaunaimagenatodoloancho.Estaherramientaesmuyparecidaaladeañadirobjeto,sinembargoeltermino“responsive”significaqueseadaptaculquierdispositivoyseescaladeformaproporcional.

Códigodeunaimageninsertada:

[thumbnailborder="1"src="http://portales.sabes.edu.mx/edublogs/wp-content/uploads/2018/04/free-download-pc-hd-wallpaper-hd-3D-1024x576.jpg"]

Propiedadesdelelemento:

Icon.Agregaunícono.Ejemplo:

Código:

[icontype="glyphiconglyphicon-picture"color="#dd3333"fontsize="30"]

Propiedadesdelelemnto:

Imageeffect.Redondealasequinasdelaimagenobien,agregaunborde.Ejemplo:

Códigodelejemplo:

[imagesrc="http://portales.sabes.edu.mx/edublogs/wp-content/uploads/2018/04/free-download-pc-hd-wallpaper-hd-3D-300x169.jpg"shape="img-circle"]

Propiedadesdelelemento:

ColumnsEstaherramientaeslamáscomplejadetodasynoesnecesarioocuparlaalmenosqueunolaconozcamásyseveaenlanecesidaddeusarla,yaqueestadependedefuncionalidadesdeunabibliotecallamadaBootstrap,lacualdividedemanerainvisibleelcontenidoenuntotalde12columnasypermitevisualizarsucontenidoendiferentesformasdependiendoeldispositivo.Parasumayorcomprensiónpuedesseguirelsiguientelink:https://www.w3schools.com/bootstrap/bootstrap_grid_basic.aspx