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