Sesion01

Diseñando en WordPress

Curso Páginas de Profesores UVa

Diseñando en WordPress
Acceso en modo editor:
…/wp-admin
… al Escritorio:

Hábito importante: guardar o actualizar siempre los cambios y ediciones

Escritorio Diseñando en WordPress

Ajustes generales:
Códigos-lenguaje (ISO-639)

Configurar Jetpack:
Paquete de funcionalidades o ‘plugins’.
Anti-spam (Akismet.com)

Ajustes de lectura y escritura…
Página inicial, página de entradas (blog)

Categorias y etiquetas (tags)…
Organizar el contenido a publicar…

Ajustar enlaces permanentes…
Definen las url…

Publicación…
Página publica o protegida. (Entrada ‘pegajosa’)

Comentarios…
Pingbacks y Trackbacks.
Notificaciones al buscador y
enlaces a entradas. Spam
robot

Menus…
Definir menu de navegación principal...

Enlaces…Se clasifican por categorías
y se muestran como widget.

Editar…
Editor de texto WSYWIG.

CSS: diseño en WordPress…

Editor de texto de Wordpress (Tiny MCE)


Edición de estilo CSS en HTML del editor…
Etiquetas más habituales :
OBJETOS: <div> <p> <img> <a href> <table> <tr> <td>
<ul> <li> <embed> <iframe>…

ESTILO: background / font /
color / size / border /
width / height / margin / padding / top-right-bottom-left /…

<div style="background-color:#333333;
padding:2px; width:300px; height;100px;>
…….. </div>

www.w3schools.com/tags

COMPLEMENTOS para trabajar con html…

…traducción de selección y paginas.

…edicion del estilo y organización del documento.

… edición de texto WYSIWYG (What you see is what you get )

APLICACIONES para trabajar con html…

Notepad http://notepad-plus-plus.org/

…bloc de notas html.

KompoZer www.kompozer.net

…aplicación libre de edición web.

…HTML5 y CSS3

Trabajar con html y css…
<html>
<head>
<title>prueba caja</title>
</head>
<body>

<div style="background-color:
#FFCCCC; width:80%;
height:400px;">
<p>…mi caja tiene este color… </p> Escribir código
</div> en editor de texto,
En el modo html
</body>
</html>

Trabajar con el color web…
#RRGGBB
Modelo RGB hexadecimal

#FF0000 - Con este código HTML le decimos al navegador
que muestre la máxima cantidad de rojo y nada de verde ni de
azul. El resultado es evidentemente el color rojo.

#00FF00 - Este código HTML muestra solo el verde y nada
de rojo ni de azul.

#0000FF - Este código HTML muestra solo el azul y nada de
rojo ni de verde.

#FFFF00 - Con la combinación de color rojo y verde
obtenemos el amarillo.
Números 0 - 99 y letras A - F

Trabajar con el color web…

Modelo RGBA
Valores:
Red,green,blue (alpha)

rgba(0,0,0,0.5) valores 0-255

Modelo HSLA
Valores:
matiz, saturación, brillo, (alpha)

hsla(320, 50%, 75%, 0.8);
Valores 0-360 y porcentaje
…colrd.com Alfa 0 - 1

Texto en CSS…
Parrafo… <p> <p style = “…
• line-height: 1.5em (Interlineado…px / em / % )

• font-size: 16px; (Tamaño… px / em / % )
• text-indent: 5px; (Tabulación )

• letter-spacing: 2px;
• word-spacing: 0.2em;
• vertical-align: top / middle / baseline …
• text-shadow: horizontal / vertical / color (1px 1px #FFF;)

Contenedor <div> <article>
margin style = “ margin-left : 20px ; padding-top : 10px ; ”
style = “ margin : 0, 5px, 0, 7px ; ” (top,right,bottom,left)
padding
style = “ border : 1px solid #FF0000 ”
border

<div style=“… div

width --- height Pixeles (px) Porcentaje (%) Relativa (em)

Atributos y propiedades básicas… Posicionamiento y tipo de caja

float right --- left --- none style = “ float : right ; ”

display inline - block – none… style = “ display : block ; ”

div style = “display: block; margin-left: auto; margin-right: auto;"

Trabajar con textos…

 Calcular la legibilidad de un texto…

Readability index calculator
http://www.standards-schmandards.com/exhibits/rix/index.php

 Editar texto on line…

 Texto 3D online…

http://www.gifss.com/texto3d/

 Texto e imagen…
 Texto animado…
http://www.imagechef.com
http://livetyping.com/

Sesion01

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Similar a Sesion01

Similar a Sesion01 (20)

Último

Último (20)

Sesion01