Formación gratuita para aprender css.

Hojas de estilo en cascada o CSS (Cascading Style Sheets en inglés). HTML es el lenguaje con el que se construyen los contenidos de una página web, las hojas de estilo CSS son el lenguaje que se usa para trabajar el diseño para crear una página web .Aprende css

Las hojas de estilo CSS son un conjunto reglas que enumeran en un fichero .css o dentro de la etiqueta style ejemplo

<p style="color:red;">Esto es un parrafo rojo.</p>

o también dentro de html de tu página web

<head>
<style>
.center {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}
</style>
</head>

y que describen el aspecto que deben tener los diferentes elementos HTML de una página.

Visualiza el video y aprende css



Agregar nuevo menús de navegación en wordpress

 A veces necesitamos crear un nuevo menú en nuestro tema.

WordPress permite a los desarrolladores definir los menús de navegación y luego mostrarlos.

Voy a explicarlo de forma clara y concisa

Añadir este código en el archivo de funciones de su tema para definir una nueva ubicación del menú en su tema.

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

Ahora puede ir a Apariencia »Menús y verá 'Mi menú personalizado'.

Ahora tiene que añadir este código a su tema en el que desea mostrar el menú de navegación.

 Ahí aparecerá el nuevo menú.

Ahora tiene que añadir este código en su tema en el sitio que desea mostrar el menú de navegación.
<?php
wp_nav_menu( array( 
    'theme_location' => 'my-custom-menu', 
    'container_class' => 'custom-menu-class' ) ); 
?>
Eso es todo solo debe de elegir donde poner el código en la plantilla de su sitio.

Como Actualizar URL de WordPress cuando no pueden acceder a wp-admin

A veces, cuando se mueve a un sitio de WordPress a un nuevo dominio o debido a una mala configuración puede que tenga que actualizar las direcciones URL de WordPress.

Estas URLs dicen a WordPress dónde se encuentran para mostrar su sitio y donde están los archivos principales de WordPress . Una configuración incorrecta puede bloquear y dejar fuera el área de administración de WordPress o redirigir a la página web.
La forma más fácil de actualizar las direcciones URL de WordPress es mediante la adición de este código en su tema actual en el archivo functions.php.

update_option( 'siteurl', 'http://tuweb.com' );
update_option( 'home', 'http://tuweb.com' );
No te olvides de reemplazar tuweb.com con su propio nombre de dominio.

Una vez que acceda a su sitio de WordPress ir a Ajustes »Generales y actualizar las direcciones URL allí. Después usted necesita  eliminar el código que ha agregado en el archivo de funciones para evitar conflictos.

Como Actualizar URL de WordPress

40 Sitios creados con wordpress de gente y empresas importantes

Marcas de renombre están utilizando WordPress.


Uno de los conceptos erróneos comunes acerca de WordPress es que ya que es de código abierto, puede que no sea lo suficientemente bueno para grandes marcas. Para desmentir esto, he creado una lista de las más notables grandes marcas que están utilizando WordPress en sus sitios web.

40 Sitios creador con wordpress de gente y empresas importantes

1. TechCrunch

2. The New Yorker

3. BBC América

4. Profesionales de Bloomberg

5. El Blog de Star Wars Oficial

6. Variedad

7. Sony Music

8. MTV News

9. Beyonce

10. PlayStation.Blog

11. Suecia del Sitio Web Oficial

12. Microsoft News Center

13. Boingo

14. Bata

15. cPanel Blog

16. cuarzo

17. Usain Bolt

18. La compañía de Walt Disney

19. Time Inc.

20. Facebook Sala de prensa

21. El New York Times Company

22. Marks & Spencer para su Negocio

23. El Blog Oficial de Rackspace

24. ExpressJet Blog

25. Dentro de BlackBerry

26. Rotary significa negocios - Rotary Club

27. Los Rolling Stones

28. The Walking Dead - AMC

29. El Blog de Mozilla

30. The Wall Street Law Journal Blog

31. Will Wheaton

32. Snoop Dogg

33. SAP Centro de Noticias

34. Wolverine Worldwide

35. Reuters Blogs

36. Katy Perry

37. Vogue India

38. Mercedes-Benz

39. Las grapas Canda Blog

40. Harvard Gaceta Onine

41. Pulso por Target

Quiere construir su propio sitio en WordPress?

Desde este sitio podemos ayudarte

Preparar wordpress para estar en los primeros lugares en los buscadores

WorPress es el CMS más usado. Se necesita SEO para poder estar el los primeros lugares.Por eso debes maquear el SEO para WordPress para situarte en los primeros puestos de los buscadores.

Debajo dejo un video de seo para perfeccionar tu página web con wordpress

La optimización y configuración interna es necesaria para mejorar el posicionamiento en buscadores con tu WordPress.


Te recomiendo tener tu página web en un Hosting de calidad.

Tener cuenta en Google Search Console como en Google Analytics. Google te ofrece tener un control total sobre todo lo que sucede alrededor de tu sitio Web.

El archivo Robots.txt. Este archivo te permite bloquear la indexación de las parte del sitio web que deseas mantener en secreto.
User Agent:*
Disallow: /wp-admin/
Disallow: /wp-includes/
Disallow: /*trackback
Disallow: /wp-login/
Disallow: /*feed
Sitemap: http://tuweb.com/sitemap.xml
Esto es un ejemplo de un archivo por defecto, puedes personalizarlo mucho más, bloqueando la indexación tanto en carpetas como en archivos.
El sitemap no es más que un listado de enlaces que apuntan a URLs de tu sitio que están accesibles a los robots.Es un archivo que tiene todas las páginas que forman parte de tu sitio Web. Este archivo les sirve a las arañas de los motores de búsqueda para realizar un rastreo más efectivo de tu sitio web.

https://es.wordpress.org/plugins/google-sitemap-generator/, un plugin muy completo.Pero si instalas un plugin para SEO ya viene con esta opción. De momento no te apresures a instalar.

El archivo .htaccess WordPress nos permite hacerlo de forma fácil y sencilla, y no es necesario tocarlo por el momento:
Puede ser que algún plugin de caché lo haga.

En el siguiente video te explica todo de forma amena y profesional.

Sabes como poner una entrada fija en el blog de wordpress

Cómo fijar una entrada en la página de inicio del blog de wordpress.

Mucha gente no sabe como hacer esto y es muy fácil.

Cómo fijar una entrada de WordPress en la página de inicio del blog. Por defecto el orden utilizado suele ser la fecha de publicación del artículo/entrada.
Sabes como poner una entrada fija en el blog de wordpress
Podemos dejar fija una entrada que queramos en la página de inicio del blog de WordPress.(Especifico en la página del blog).
Si ya has configurado una página de inicio, ahí no se mostrara sino la página que has configurado como blog ,donde se verán las entradas.

Aclarado esto.Veamos cómo fijar una entrada:

En el menú de Publicar o Actualizar si ya esta publicada, despliega visibilidad dale a editar solo tenemos seleccionar la opción Fijar esta entrada en la página de incio y actualizar la entrada, de esta manera la entrada ya saldrá en primera posición de la página de inicio del blog.
Espero les haya resultado de ayuda.

Como crear un perfil social profesional

Como crear un perfil social profesional y mejorar tu imágen

Como crear un perfil social profesional en LinkedIn


LinkedIn se ha convertido es nuestro escaparate profesional en la red. Explico los puntos más importantes a tener en cuenta a la hora de crear un perfil profesional en esta red social, de modo que puedas aprender a sacarle el mayor partido.

Las primeras impresiones cuentan, si tienes un perfil de LinkedIn potente y diferenciador seguro que conseguirás más y mejores resultados.
Para crear un buen perfil, ya sea que busques trabajo, buenos contactos o hacer branding personal transformando tu nombre y tu imagen en una marca como tal para tener presencia y renombre en Internet.

Completa todo tu perfil: desde la foto que elijas, la portada y toda tu información personal en donde es importante tener un correo que mostrar, tu número de teléfono, otras redes sociales y todas las demás funciones que nos permite LinkedIn.

Aqui dejo un video explicativo de mucha calidad



Como desemfocar una imagen con css

DESENFOCAR IMÁGENES CON CSS
La propiedad filter nos permite aplicar algunos efectos a nuestras imágenes, para conseguir desenfocar imágenes nada mejor que aplicarle el valor blur para conseguirlo fácilmente, le damos un valor en “px” y solucionado:
Hay que recordar que el valor blur, al igual que otros efectos, se puede aplicar tanto a etiquetas de bloque (en el ejemplo se está usando con un ‹div›), con ‹img› o fondos, así que todo es cuestión de la imaginación que le queráis dar.

/* En este caso vamos a aplicar el filtro de desenfoque al hacer :hover */
.desenfocar:hover{
   filter: blur(2px);
   -moz-filter: blur(2px);
   -webkit-filter: blur(2px);
   -o-filter: blur(2px);
   -ms-filter: blur(2px);
}
Ejemplo


Cabecera responsive simple con css

Cabecera responsive simple con css

Flexbox . La compatibilidad con exploradores hoy por hoy es buena , esta técnica se puede aplicar sin causar ningún caos dentro de los navegadores.
Este es el CSS, que sólo con un par de líneas logra hacer todo el trabajo y lo que hace es encontrar los lugares adecuados para cada una de las secciones.

<header>
  <div class="header-left"><span>Titulo</span>-ec</div>
    <div class="header-center">
        <ul>
            <li><a href="#>hola3</a></li>
            <li><a href="#">hola2</a></li>
            <li><a href="@">hola1</a></li>
        </ul>
    </div>
  <div class="header-right"><button>Registrarse </button></div>
</header>

css

header{
    /* Activamos flex. */
    display: flex;
    /* extendemos los elmentos dentro de la cabecera. */
    justify-content: space-between;
    /* Alineamos el contenido verticalmente dentro de la cabecera. */
    align-items: center;

    padding: 40px 100px;
    color: #fff;
    background-color: #ccebff;

}
@media (max-width: 1000px){
    header{
        /* revertimos la cabecera haciendola vertical. */
        flex-direction: column;
        /* alinemamos el contenido al comienzo (a la izquierda) de la cabecera. */
        align-items: flex-start;
    }
}

Para obtener más información sobre Flexbox y sus propiedades CSS utilizadas, echa un vistazo a los siguientes enlaces:

Una guía rápida para flexbox
justify-content
align-items
flex-direction

PLANTILLA WEB HTML5 Y CSS3

LHANDER: PLANTILLA WEB HTML5 Y CSS3


Construida para retina display y con su respectiva versión móvil. Tiene iconos disponibles e integración con Mailchimp, lista para ser usada.

Armónica, con tipografías muy interesantes y una gran combinación entre ellas. Es una plantilla web HTML5 que supone un espacio ideal para mostrar productos, aplicaciones y servicios de la mejor forma y con un resultado profesional.



Características de la plantilla


HTML5
CSS3
Responsiva
Integración con Mailchimp
Iconos integrados
Flexslider Retina
Compatible con exploradores
Descargar

ALTERNATIVA CSS MINIMALISTA

Se trata de una herramienta de código abierto, que los ayudará a desarrollar sitios adaptables y amigables con dispositivos móviles. Desde la ubicación de sus elementos hasta la definición de contenedores, tipografías y botones, está pensado para funcionar correctamente en todas las pantallas.



Ver y descargar

EDITOR DE TEXTO MINIMALISTA

La aplicación que quiero recomendarles se denomina ZenPen y es otra opción de editor de texto para solamente dedicarse a escribir, este sistema posee un inversor de color, de fondo blanco y letras negras a fondo negro con letras blancas, también hay posibilidad de marcar citas en el texto y de agregar enlaces, además de insertar formatos simples como negritas o italicas.



Ver y descargar

Agregar un menu fijo en wordpress

Este método requiere que se añadan código CSS personalizado a su tema.
En primer lugar usted necesita entrar en Apariencia »Personaliza y Personalizador de css.

#site-navigation {
    background:#fff;
    height:60px;
    z-index:170;
    margin:0 auto;
    border-bottom:1px solid #dadada;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
    text-align: center;
}

Reemplazar #site-navigationcon el ID de CSS de su menú de navegación y haga clic en el botón Guardar.
Si el menú de navegación aparece normalmente después de la cabecera del sitio, entonces este código CSS podría superponer el título del sitio y la cabecera.
Esto se puede ajustar fácilmente añadiendo un margen a su área de cabecera usando un poco de CSS como este:

.site-branding {
margin-top:60px;
}

Reemplazar site-branding con la clase CSS de su área de cabecera.

Pero si todo esto es muy complicado para usted le recomiendo este sencillo plugin



Cómo mover su sitio de WordPress y no romper los enlaces

¿Quieres actualizar las direcciones URLs después de mover su sitio de WordPress? 

Puede ser bastante doloroso editar manualmente cada post sólo para reemplazar las direcciones URL.

 Vamos a mostrar cómo actualizar fácilmente las direcciones URLs cuando se mueve de su sitio de WordPress.

 A continuación, puede cambiar la dirección URL del sitio de WordPress, visitando la página de configuración de WordPress.




A continuación, es necesario instalar y activar este plugin.

Tras la activación, es necesario visitar Herramientas »Update URLs para configurar los ajustes del plugin.

 

Aquí es necesario para proporcionar las viejas y nuevas direcciones URLs de su sitio web.

 Después usted tiene que elegir dónde desea que las URL sean actualizadas.
Puede actualizar las direcciones URL en entradas, páginas, extractos, archivos adjuntos de imagen, campos personalizados, etc.

 Ahora puede visitar su sitio web para ver que todas las URLs se actualizan.

Usar WordPress como CMS sin plataforma de blogs

Deshabilitar características de blog en WordPress


Crear la construcción de sitios web que no tienen blogs con wordpress o cualquier elemento relacionado con los blogs. En este artículo, vamos a mostrar cómo desactivar fácilmente las características del blog en WordPress sin necesidad de escribir código.

Ver fecha de actualización en los articulos de wordpress

Viendo última fecha de actualización en WordPress


Método 1: Mostrar última actualización de fecha antes de publicar contenido
Usted tendrá que añadir este código a su tema de functions.php archivo o al plugin personal del sitio .

Quitar el título de las páginas en wordpress sin afectar al SEO

Añadir esta función para ocultar el título en páginas wordpress sin afectar al SEO

Añade este código al archivo functions.php del tema activo, o a tu plugin de personalización.

Curso de Visual Studio Code un buen editor de código

Curso de Visual Studio Code


El Curso de Visual Studio Code habla de un completo editor de código disponible tanto para Windows como para OS X y GNU/Linux de manera totalmente gratuita,

Crear una página para ver listado de páginas hijas en Genesis

Tan solo crear un archivo.php y copiar el código de abajo luego añadir en tu tema de genesis, luego selecciona tu plantilla en atributos de página
Ver código

Deshabilitar JSON API REST en WordPress

La REST API de WordPress puede ser un agujero de seguridad importante para cualquier sitio web.
WordPress 4.4 añade el muy esperado API REST JSON. Es ideal para los desarrolladores de plugin, pero muchos propietarios de sitios web no puede encontrar nada útil. En este artículo, vamos a mostrar cómo desactivar fácilmente la API REST JSON en WordPress.

Crear páginas personalizada para posts en WordPress 4.7

Hasta ahora teníamos la posibilidad de crear plantillas personalizadas para las páginas estáticas. Esto se hacía creando un archivo php dentro de nuestro tema y añadiendo al inicio del mismo:

Crear un Widget personificado en Wordpress

Este código le permite rápida y fácilmente añadir un nuevo widget, insertara Google Plus y seguidores en su sitio web con Wordpress

Para no abultar el archivo de funciones, crea una carpeta dentro de tu tema y ponle como nombre widgets y un archivo google+.ph dentro de la carpeta y pegar el siguiente código.

Aprende a usar WooCommerce con Genesis

Contenido completo a todos los archivos, las categoría, las etiquetas y las páginas de productos en WooCommerce en su sitio con genesis.

Sección de bienvenida en Génesis

Sección de bienvenida con la imagen a la izquierda y un widget de texto a la derecha en Génesis.

Cómo se puede registrar un área de widget de bienvenida y lo mostrará debajo del header en Génesis . Vamos a escribir CSS responsive y mostrar una imagen a la izquierda, con un widget de texto.

Entradas más recientes Entradas antiguas Página principal