2. Diseñando en WordPress
Acceso en modo editor:
…/wp-admin
… al Escritorio:
Hábito importante: guardar o actualizar siempre los cambios y ediciones
3. 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…
4. Escritorio Diseñando en WordPress
Publicación…
Página publica o protegida. (Entrada ‘pegajosa’)
Comentarios…
Pingbacks y Trackbacks.
Notificaciones al buscador y
enlaces a entradas. Spam
robot
5. Escritorio Diseñando en WordPress
Menus…
Definir menu de navegación principal...
Enlaces…Se clasifican por categorías
y se muestran como widget.
6. Escritorio Diseñando en WordPress
Editar…
Editor de texto WSYWIG.
7. CSS: diseño en WordPress…
Editor de texto de Wordpress (Tiny MCE)
8. Escritorio Diseñando en WordPress
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
9. 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 )
10. 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
11. 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>
12. 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
13. 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
16. CSS: diseño en WordPress…
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;"
17. 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/