Hosting Compartido vs VPS vs Servidor Dedicado

Hosting Compartido vs VPS vs Servidor Dedicado

 

Hosting Compartido vs VPS vs Hosting Dedicado. Cuando se está preparando para lanzar un nuevo proyecto de sitio web, la elección del hosting correcto puede ser una decisión difícil. Incluso para los desarrolladores experimentados, no es una tarea fácil dado el gran número de empresas de hosting disponibles que ofrecen diferentes tipos de servicios y características.

Sin embargo, antes de elegir un alojamiento web, es importante averiguar qué tipo de hosting necesitas.

En este artículo exploraremos los cuatro tipos principales de hosting: compartido, VPS y dedicado. Cada una de estas opciones tiene sus propias ventajas y desventajas, que es importante comprender para que puedas determinar qué solución se ajusta mejor a las necesidades de tu sitio web.

Hosting compartido

hosting compartido siteground

El hosting compartido es la opción más popular para la gente que está desarrollando su primer sitio web.

Cuando te registras para un hosting compartido, la compañía de hosting pondrá tu sitio web en un servidor junto con cientos, si no miles, de otros sitios web. Esto significa que cada cliente tiene que compartir el espacio y los recursos del servidor con todos los demás clientes, incluyendo el tiempo de CPU, la memoria y el espacio en disco.

Piensa en el hosting compartido como si vivieras de alquiler en un piso. Todos los vecinos comparten el mismo edificio, pero también comparten cosas como ascensores y escaleras, aparcamiento y recogida de basura. Como alquilado no tienes la opción de modificar o reformar nada importante del piso.

El alojamiento compartido es la opción más barata y económica en cuanto a hosting se refiere. Sin embargo, obtienes lo que pagas – en este caso, el hosting compartido viene con estrictas limitaciones.

Pros de un hosting compartido

Es económico. Algunas compañías de hosting cobran tan poco como 3,95 euros al mes.

Es para principiantes. Es fácil comenzar con el hosting compartido en comparación con otras opciones de hosting.

La seguridad, las actualizaciones y el mantenimiento del servidor no son administrados por ti.

Desventajas de un hosting compartido

Puede ser lento. Con tantos otros sitios web funcionando en el mismo servidor, los tiempos de carga de sus páginas pueden verse afectados.

La seguridad no está garantizada. No sabes quién más está usando el mismo servidor, por lo que si un sitio tiene una fuga de información o es pirateado, tu sitio podría verse afectado.

Falta de control y rendimiento del servidor. Si el servidor está saturado o si otro sitio web ocupa más de su cuota de recursos, el rendimiento puede disminuir.

Es difícil de escalar debido a la limitación del almacenamiento y del ancho de banda.

Precio de un hosting compartido

El hosting compartido puede tener un precio que oscila entre los 3,95 y los 9,95 euros al mes, dependiendo del hosting que elijas.

Se adapta mejor a

Sitios web pequeños con un mínimo de tráfico, como blogs y sitios personales.

Servidores virtuales privados (VPS)

vps banahosting

VPS es similar al hosting compartido en el sentido de que tu sitio web comparte un servidor con otros sitios, pero hay menos sitios que comparten espacio y recursos y el servidor se divide en diferentes entornos de servidores virtualizados. A diferencia del hosting compartido, el VPS suele proporcionar recursos básicos garantizados, así como recursos adicionales disponibles en un momento dado en caso de que tu sitio experimente un pico de tráfico.

Piensa en VPS como si fueras el propietario de un piso. Mientras compartas el mismo edificio con otros propietarios, eres responsable del mantenimiento de tu propiedad y de cualquier reparación que deba realizarse dentro de tu apartamento. Además, hay menos propietarios y tienes tu propio espacio de parking asignado.

Pros de un VPS

Es más asequible que un servidor dedicado y pagas por lo que necesitas.

Más seguro. Para segmentar el servidor adecuadamente, el host instala una capa de software que le dedica parte del servidor, que hace que esté completamente separado de otros clientes.

Es rápido. Se le asignan más recursos en comparación con el hosting compartido.

Acceso al servidor raíz. Puedes realizar personalizaciones según tus necesidades y tienes un mayor control sobre tu entorno de hosting.

Es escalable. Un VPS puede crecer con tu sitio a medida que las necesidades de tu servidor aumentan con el tiempo.

Contras de un VPS

Algunas compañías de servidores sobrevenden sus servidores, con la esperanza de que cada sitio que actualmente utiliza un servidor en particular no tenga un día con más tráfico.

Es más caro que el hosting compartido.

Si elige un VPS no administrado, puede ser difícil de configurar, tomando más tiempo para que tu sitio web funcione.

Precio de un VPS

El precio de un VPS puede variar entre 20 euros y 100 euros al mes, dependiendo del hosting que elijas.

Se adapta mejor a

Si el hosting compartido es demasiado básico para tus necesidades y quieres recursos dedicados y más control sobre tu entorno de hosting, entonces un VPS puede ser el adecuado para ti.

Servidor dedicado

Servidor dedicado raiola

Un servidor dedicado es exactamente como suena: Tu sitio web se almacena en un único servidor físico dedicado a tu uso personal. No compartes el servidor con nadie, tienes todos los derechos sobre los recursos del servidor y puedes configurar los entornos de hosting según tus especificaciones exactas.

Este tipo de hosting es generalmente más caro, pero a cambio obtienes un rendimiento muy alto y un nivel de seguridad más alto comparado con otras formas de hosting.

Piensa en el servidor dedicado como si fueras dueño de tu propio chalet. Eres el único residente. Puedes aparcar tu coche en tu propia entrada y pintar tu casa del color que quieras. Pero tú eres el responsable último del mantenimiento de tu propiedad y depende de ti instalar una alarma de seguridad para ahuyentar a los ladrones.

Pros del servidor dedicado

Tienes un servidor dedicado todo para ti.

Tienes acceso completo a todas las configuraciones y puedes personalizar completamente el servidor para que se adapte a las necesidades de tu sitio web.

Es rápido. Obtienes el 100% de acceso a los recursos del servidor.

Gran rendimiento del servidor ya que puedes adaptarlo para que cumpla con las especificaciones exactas que necesitas para tu sitio web.

Es seguro. Como eres el único que utiliza el servidor, no tienes que preocuparte por el efecto de «mal vecino» que es común en el hosting compartido.

Soporte 24/7. Ya que estás pagando mucho dinero por tu cuenta, las compañías de hosting web harán que ofrecerte el mejor soporte sea una prioridad.

Contras del servidor dedicado

Es muy caro.

Necesitas personal técnico cualificado para mantener y optimizar el servidor. Eres responsable de tu servidor, así que si algo sale mal, depende de ti arreglarlo.

Precio del servidor dedicado

El servidor dedicado puede tener un precio que oscila entre los 80 y los 500 euros al mes, dependiendo de tus necesidades. El precio se basa normalmente en las especificaciones del servidor y los servicios adicionales.

Se adapta mejor a

Dado que el servidor dedicado es bastante caro, es el más adecuado para grandes empresas y sitios web de alto tráfico que reciben más de 500.000 visitantes al mes y cuentan con el personal técnico necesario para mantener el servidor. El servidor dedicado es también una opción ideal si tienes un negocio que requiere un alto nivel de seguridad.

Conclusión sobre Hosting Compartido vs VPS vs Servidor Dedicado

Para finalizar este artículo sobre Hosting Compartido vs VPS vs Servidor Dedicado, decirte que, si eres un principiante en el tema del desarrollo web, lo mejor que puedes hacer es contratar un hosting compartido, en cambio si por el contrario ya eres un desarrollador web freelancer, lo mejor sería que al menos tengas un VPS y para mayor calidad contrates un servidor dedicado.

Mi opinión personal, uno de los mejores hosting que puedes contratar es BanaHosting, puedes contratarlo desde este enlace, es un enlace de afiliado, si lo contratas desde ese enlace ayudará a que pueda seguir creando contenidos gratuitos y sobre todo decirte que solo recomiendo lo mejor y lo que yo utilizo para mis webs 🙂

Mejores monitores USB-C para diseño, programación y juego

Mejores monitores USB-C para diseño, programación y juego

 

Los mejores monitores USB-C tienen múltiples usos, no sólo facilitan la conexión de su portátil USB-C, lo que significa que obtienes una pantalla adicional, sino que también cargan el portátil al mismo tiempo.

Aunque la facilidad de carga no es exactamente el punto principal de los monitores USB-C, existe una creciente necesidad de compatibilidad USB-C. Con los últimos modelos MacBook Pro y MacBook Air haciendo uso de USB-C, y muchos dispositivos Windows más recientes que también utilizan el puerto, nunca ha habido un mejor momento para conseguir uno de los mejores monitores USB-C del mercado.

Pero, ¿qué monitor con puerto USB-C debes comprar? Hay muchas opciones excelentes, pero hemos hecho el trabajo duro por ti y las hemos reunido en esta guía. Ya sea que quieras utilizar el mejor monitor USB-C de 4K para tu MacBook, o un monitor USB-C de un reproductor importante como Dell o LG, o que simplemente quieras la opción más asequible que puedas conseguir, nosotros te cubrimos….

Los mejores monitores USB-C

Hemos encontrado el mejor monitor USB-C y lo enumeramos a continuación.

01. LG 27UD88-W – Monitor USB-C de 27 pulgadas y 4K

LG 27UD88-W mejores monitores USB-C

Cuando se trata de elegir el mejor monitor USB-C de 4K del mercado, el LG 27UD88-W de 27 pulgadas se lleva la mejor parte. Está diseñado para juegos, lo que significa que también es ideal para los diseñadores gráficos y programadores web, y es el hermano menor del monitor USB-C de 5K que ocupa el puesto 5 en esta lista, ofreciendo un brillante equilibrio de características y funcionalidad a un precio mucho más asequible.

Obtendrás una resolución de 4K y un procesamiento antidesgarre FreeSync, además de tres ajustes preestablecidos para juegos, dos ajustes preestablecidos personalizados y dos ajustes preestablecidos de calibración. Y como con todas las opciones de USB-C aquí, alimentará tu portátil mientras actúa como una pantalla.

Tamaño de pantalla: 27 pulgadas | Resolución: 3840 x 2160 | Relación de aspecto: 16:9 | Entradas HDMI: 2 | Puertos de visualización: 1 | Fecha de lanzamiento: 2018

Comprar en España comprar en amazon

Comprar en EEUU  comprar en amazon

02. Dell U3818DW UltraSharp Monitor USB-C curvado de 38 pulgadas

Dell U3818DW UltraSharp

Si dispones de un presupuesto más amplio (y un escritorio) con el que jugar, te recomendamos el gran y hermoso monitor USB-C Dell U3818DW. La pantalla curva de 38 pulgadas InfinityEdge es impresionante y le da una ridícula cantidad de propiedades de pantalla, así que si eres propenso a trabajar con muchas ventanas abiertas, vale la pena considerar esta opción.

Está diseñado para el trabajo profesional y está dirigido especialmente a los profesionales del diseño gráfico y diseño web, o a cualquiera que necesite la mayor precisión de color posible, y también es ideal para los juegos. El contraste podría ser un poco mejor, pero la precisión del color es excelente y las imágenes son nítidas. Lo mejor de todo es que tienes una garantía de tres años. ¿Tiene aún más dinero? Prueba el Asus ProArt PA32UC, en el número 7 de esta lista.

Tamaño de pantalla: 38 pulgadas | Resolución: 3840 x 1600 | Relación de aspecto: 21:9 | Entradas HDMI: 2 | Puertos de visualización: 1 | Fecha de lanzamiento: 2017

Comprar en España comprar en amazon

Comprar en EEUU  comprar en amazon

03. Acer H277HU Monitor USB-C de 27 pulgadas

Acer H277HU Monitor USB-C

El Acer H277HU es un monitor USB-C de presupuesto más asequible para cualquiera que tenga menos dinero para gastar. No se trata de un monitor USB-C de 4K, y te faltan las especificaciones de gama alta para la edición de vídeo, pero es una excelente opción si necesitas una pantalla para diseñar, programar o jugar, y viene con un puerto HDMI y un DisplayPort también. ¿Buscas el monitor USB-C más económico para jugar? Echa un vistazo a la Acer XR382CQQK de 38 pulgadas en el número 09.

Tamaño de pantalla: 27 pulgadas | Resolución: 2560 x 1440 | Relación de aspecto: 16:9 | Entradas HDMI: 1| Puertos de visualización: 1 | Fecha de lanzamiento: 2016

Comprar en España comprar en amazon

Comprar en EEUU  comprar en amazon

04. HP Envy Monitor USB-C  de 27 pulgadas y 4K

HP Envy mejores Monitores USB-C

Otra opción más asequible es el HP Envy 27, un impresionante monitor USB-C de 4K con una estética elegante, gracias a sus biseles microfinos. Ofrece colores ricos y excelentes detalles de imagen, aunque la precisión de color podría ser un poco mejor directamente de la caja. Pero si estás buscando un monitor UHD de 4K a un precio razonable con amplios ángulos de visión – y eso se ve muy bien en tu escritorio – vale la pena echarle un vistazo.

Tamaño de pantalla: 27 pulgadas | Resolución: 3840 x 2160 | Relación de aspecto: 16:9 | Entradas HDMI: 2 | Puertos de visualización: 1 | Fecha de lanzamiento: 2017

Comprar en España comprar en amazon

Comprar en EEUU  comprar en amazon

05. LG 27MD5KA Monitor USB-C de 27 pulgadas UltraFine 5K

LG 27MD5KA mejores Monitores USB-C

El monitor USB-C LG UltraFine 5K se sitúa en el mercado de monitores de gama alta. Presionado por Apple como su compañero preferido del MacBook Pro, este magnífico monitor cuenta con una increíble pantalla de 14,7 millones de píxeles de 27 pulgadas. Las fotos y los vídeos son increíblemente ricos en detalles, vibrantes y realistas, con 218 píxeles por pulgada y una frecuencia de actualización de 60 Hz.

Está dirigido a usuarios de Mac, con cuatro puertos Thunderbolt 3/USB Type-C en la parte posterior, y absolutamente nada más, excepto un enchufe para el cable de alimentación. Si no te importa la falta de otros puertos, esta es una opción fabulosa para fotógrafos, diseñadores y videógrafos.

Tamaño de pantalla: 27 pulgadas | Resolución: 5120 x 2880 | Relación de aspecto: 16:9 | Entradas HDMI: 0 | Puertos de visualización: 0 | Fecha de lanzamiento: 2017

Comprar en España comprar en amazon

Comprar en EEUU  comprar en amazon

06. BenQ PV3200PT mejores monitores USB-C

BenQ PV3200PT monitor USB-C

Diseñado para editores de vídeo profesionales, animadores, cineastas, modeladores 3D y diseñadores CAD, el BenQ PV3200PT ofrece colores ricos y muy precisos y una fantástica reproducción en escala de grises. Cubre el 100 por ciento de la gama de colores Rec.709 (HDTV), así como el 100 por ciento del espacio de color sRGB, e incluso te recordará cuándo está previsto que se calibre.

El cambio al modo vertical es rápido y sencillo gracias a un mecanismo de rotación con resorte; la única característica que falta son los ajustes de luz azul. Si trabajas con vídeo de alta definición en particular, este es el mejor.

Tamaño de pantalla: 32 pulgadas | Resolución: 3840 x 2160 | Relación de aspecto: 16:9 | Entradas HDMI: 1| Puertos de visualización: 2 | Fecha de lanzamiento: 2016

Comprar en España comprar en amazon

Comprar en EEUU  comprar en amazon

07. Asus ProArt PA32UC mejores monitores USB-C

Asus ProArt PA32UC mejores monitores USB-C

El Asus ProArt PA32UC de alta calidad es el monitor USB-C más caro de esta lista – y está en una liga diferente. Dirigido a profesionales creativos, cuenta con una resolución de 4K con capacidades de imágenes HDR, y viene en un sofisticado paquete equipado con USB-C y Thunderbolt 3 con casi todas las funciones que un creativo podría necesitar para el trabajo con SDR y HDR. Obtienes una cobertura de espacio de color 100% sRGB, 99,5% Adobe RGB y 95% DCI-P3; además de funciones de calibración profesional y una herramienta de calibración de hardware en la caja. Con la PA32UC se puede realizar un trabajo de precisión sRGB, un trabajo de precisión de amplio espectro y un trabajo HDR.

Sin embargo, no se trata de un monitor USB-C destinado a los jugadores; la frecuencia de actualización es decepcionante; en su lugar, recomendaríamos el Acer XR382CQK en el número 08 de esta lista. Pero con un fuerte seguimiento de rayos gamma y consistencia de color, pero si eres un creativo profesional que trabaja en cualquier cosa, desde películas hasta gráficos, esta es una pantalla media que reproduce el contenido exactamente como se supone que debe verse.

Tamaño de pantalla: 32 pulgadas | Resolución: 3840 x 2160 | Relación de aspecto: 16:9 | Entradas HDMI: 4 | Puertos de visualización: 1 | Fecha de lanzamiento: 2018

Comprar en España comprar en amazon

Comprar en EEUU  comprar en amazon

08. Acer XR382CQK Monitor USB-C curvado de 38 pulgadas

Acer XR382CQK mejores monitores USB-C

Este enorme monitor USB-C de 38 pulgadas, el Acer XR382CQK, ofrece la tecnología FreeSync de AMD y 75Hz, además de un soporte ergonómico con altura, inclinación y giro, y una calidad de construcción superior. El radio de la curva es de 2300 mm, lo que ofrece un efecto envolvente sin distorsión de la imagen. La reproducción del color es fantástica, mientras que los niveles de negro son impresionantes. Y en cuanto a los videojuegos – bueno, es maravilloso. Este es uno de los mejores monitores USB-C para juegos que puedes conseguir.

Tamaño de pantalla: 37,5 pulgadas | Resolución: 3840 x 1600 | Relación de aspecto: 21:9 | Entradas HDMI: 2 | Puertos de visualización: 1 | Fecha de lanzamiento: 2018

Comprar en España comprar en amazon

Comprar en EEUU  comprar en amazon

09. LG 34UM69G-B Monitor USB-C de 34 pulgadas UltraWide

LG 34UM69G-B Monitor USB-C

Con una reducción del desenfoque por movimiento de 1ms, tecnología FreeSync y sincronización de acción dinámica, el LG 34UM69G-B de 34 pulgadas está repleto de funciones fáciles de usar, lo que lo convierte en uno de los mejores monitores USB-C de bajo presupuesto para juegos que puedes conseguir ahora mismo. Alojado en una carcasa negra sin bisel, hay tres modos de juego personalizables: dos modos de disparo en primera persona y un modo RTS preestablecido. Mientras tanto, la precisión de color lista para usar es buena, con un fuerte rendimiento en escala de grises. Este es un monitor USB-C de precio excepcional.

Tamaño de pantalla: 34 pulgadas | Resolución: 2560 x 1080 | Entradas HDMI: 1| Puertos de visualización: 1 | Fecha de lanzamiento: 2018

Comprar en España comprar en amazon

Comprar en EEUU  comprar en amazon

Si te ha gustado esta lista de los mejores monitores USB-C, te recomiendo le eches un vistazo a mi lista de Los Mejores Portátiles Para Programación En 2019.

Los 5 mejores frameworks para JavaScript para 2020

Los 5 mejores frameworks para JavaScript para 2020

 

Mejores frameworks para JavaScript. Básicamente, JavaScript, a menudo abreviado como JS, se utiliza para potenciar el contenido o los medios interactivos de una página web.

JS te ayuda a hacer más con tu contenido para que puedas proporcionar al usuario animaciones, contenido relevante basado en ciertos parámetros y gráficos especiales. Esto es utilizado a lo largo y ancho del planeta por páginas web y por compañías de todo el mundo para una gran variedad de propósitos. Algunos ejemplos populares incluyen:

Servicios distribuidos de Netflix
Creación de React en Facebook
Amazon Marketplaces

¿Qué es un Framework? Mejores frameworks para JavaScript

Un framework es «una abstracción en la que el software que proporciona funcionalidad genérica puede ser cambiado selectivamente por código adicional escrito por el usuario, proporcionando un software específico de la aplicación«. Los frameworks se construyen sobre lenguajes para acelerar los procesos y desarrollar herramientas específicas.

Lista de los mejores frameworks para JavaScript

En este artículo vamos a analizar los cinco principales frameworks JavaScript en 2019.

Framework Vue.js

Framework Vue.js

Vue es un framework progresivo para la construcción de interfaces de usuario. Vue está diseñado desde el principio para ser adoptado de forma progresiva, lo que facilita las integraciones y la conexión con proyectos existentes.

Este framework también es súper rápido, con 20KB min+gzip de ejecución y la optimización mínima necesaria para alimentar tus aplicaciones.

La forma en la que funciona es a través de estilos de plantillas similares a Angular. Es un lenguaje rápido y fácil de usar para aplicaciones, interfaces de usuario y desarrollo de interfaces interactivas, y también tiene la capacidad de impulsar proyectos de una sola página web.

Una de las mayores razones por las que a la gente le gusta Vue sobre algunos de los otros frameworks es porque se ahorra mucho tiempo durante el renderizado. Vue realiza un seguimiento de las dependencias de los componentes, de modo que el sistema ya sabe qué componentes deben volver a renderizarse cuando algo cambia.

Mira ejemplos de sitios web, aplicaciones y proyectos geniales realizados con vue.js.

Framework Angular

Angular mejores frameworks para JavaScript

Angular se construye para el futuro. El mantenimiento de la estructura está a cargo de un equipo de ingenieros que comparten la pasión por hacer que el desarrollo web parezca sencillo. Ellos creen que escribir buenas aplicaciones debe ser divertido y entretenido.

Angular es útil hoy en día porque utiliza Typescript de última generación para aplicaciones más grandes. La escritura tipográfica se define como «JavaScript que se escala». Debido a la forma en que se diseñó Typescript, millones de desarrolladores pueden utilizar el código JavaScript existente, incorporar bibliotecas JavaScript populares y llamar a código TypeScript desde JavaScript. Esto hace que el proceso sea mucho más fácil para proyectos grandes con muchos colaboradores. Tener Angular construido encima de esto es eficiente y permite a los desarrolladores concentrarse más en la velocidad y el rendimiento.

Angular sigue un patrón clásico de MVP (Model View Presenter) para aplicaciones complejas. Este es un concepto que la gente usa para dividir los grandes proyectos en áreas específicas de «separación de responsabilidades» y zonas en las que centrarse en el desarrollo.

Echa un vistazo a los proyectos realizados con angular para ver ejemplos interesantes de proyectos construidos sobre este framework.

Framework React

Framework React

React es una librería JavaScript para construir interfaces de usuario. React fue creado por Facebook, inicialmente para su uso en las aplicaciones newsfeed e Instagram. El marco fue de código abierto en JSConf US en mayo de 2013.

Similar a Vue, React es eficiente en el renderizado y sólo cambia los componentes necesarios cuando interactúa con el render. React también cambia la forma en que las personas pueden interactuar con los render y trabaja para hacer evolucionar el proceso de desarrollo. Se basa en componentes, lo que significa que cada sección encapsulada puede gestionar su propio render, lo que es importante en interfaces de usuario a gran escala y complejas.

Framework Express

Express mejores frameworks para JavaScript

Express es un framework minimalista que se ejecuta sobre Node.js, un ejecutable JavaScript construido sobre el motor JavaScript V8 de Chrome y utilizado por muchas aplicaciones a gran escala.

Express es un framework de aplicaciones web rápido y minimalista para aplicaciones web y móviles. Piensa en ello como el framework para construir sitios web. Express te ayuda a poner en marcha tus aplicaciones rápidamente, a la vez que te ofrece una serie de métodos para crear APIs fácilmente.

Muchos otros frameworks populares están construidos sobre Express debido a la simplicidad y facilidad de integración. Puedes ver la lista completa aquí.

Framework Redux

Framework Redux

Redux es un sistema de gestión de datos que se utiliza principalmente con React. Para proyectos a gran escala con muchas partes móviles, Redux ayuda a organizar los datos y a mantener todo funcionando de forma predecible incluso en entornos muy diferentes.

Una cosa importante a tener en cuenta sobre Redux es que no debes usarlo a menos que sea absolutamente necesario! Según las FAQ de Redux, «la necesidad de usar Redux no debe darse por sentada«. Múltiples colaboradores iniciales del proyecto proclaman que es algo que sabrás cuando lo necesites, y que sólo lo necesitarás cuando surjan otros problemas.

Dan Abramov dice: «Me gustaría corregir esto: no uses Redux hasta que tenga problemas con React.»

Así que tenlo en cuenta antes de saltar a toda máquina a este potente y un tanto avanzado framework. Sin duda es útil, pero sólo a gran escala y cuando se trata de grandes cantidades de datos que cambian con el tiempo.

Conclusiones finales sobre los mejores frameworks para JavaScript

Desde mi experiencia como desarrollador web freelancer, tengo que decir, que si tengo que recomendarte un framework, te recomendaría sin dudarlo Angular. Porque Angular, porque hoy en día en España existe una gran demanda de profesionales especializados en el.

Si quieres aprender más sobre JavaScript, te recomiendo leas mi artículo ¿Qué Es JavaScript? Esto Te Va A Interesar, donde podrás empezar a conocer el maravilloso mundo de JavaScript 🙂

5 reglas básicas para una mejor revisión del código

5 reglas básicas para una mejor revisión del código

Como hacer una mejor revisión del código

5 reglas básicas para una mejor revisión del código. ¿Cuántas veces te has perdido como revisor, mientras revisabas un código muy desordenado con un desarrollador web que constantemente tiene que explicar lo que ha hecho, sólo para descubrir que el código ni siquiera se puede recopilar?

¿Y cuántas veces, como desarrollador web, has sentido que la revisión del código no tenía sentido, y que se habia utilizado un tiempo sin que se aprendiera una lección?

Si te relacionas con cualquiera de las anteriores preguntas, aquí tienes 5 reglas básicas que te recomiendo que sigas, tanto como desarrollador web como revisor, que mejorarán enormemente tu proceso de revisión del código y te ayudarán a crear un impacto mucho mayor y más duradero al hacerlo.

Evita tirar de peticiones, hazlo cara a cara.

Hoy en día, utilizar servicios como github, es prioritario por su fácilidad, no te voy a decir que no lo hagas, pero piénsalo por un minuto, el acto de transferir un conocimiento que se está introduciendo en una pequeña caja de texto (un comentario), sin conversación o interacción humana, sin dar la oportunidad de que el desarrollador web se explique adecuadamente.

una mejor revisión del código

¿Es la codificación tan simple como el blanco y el negro? ¿No preferirías aprender a escribir mejor el código, tanto al revisarlo como al escribirlo?

Las revisiones de código cara a cara crean conversación, un vivo intercambio de ideas. Permite al revisor ofrecer sugerencias y consejos que no necesariamente cambiarán tu código, pero que te abrirán la mente la próxima vez que escribas algo similar. Y también le da al desarrollador web la oportunidad de explicar por qué cree que lo que hizo es mejor, y quién sabe, tal vez el revisor también aprenda algo nuevo.

2. El revisor toma el timón, mientras el desarrollador web se sienta y observa.

Las revisiones de código cara a cara tienen un gran inconveniente. Tener al desarrollador web explicando su código a lo largo de toda la revisión, podría hacer difícil entender si el código no es limpio y legible. Otros programadores tendrán que lidiar con su código sin que se siente a su lado y explique sus ideas paso a paso – y ahí es donde entra en juego la siguiente regla.

El revisor debe manejar el código solo, y el desarrollador web sólo debe responder cuando se le pida, el desarrollador web no inicia una conversación, sólo responde cuando se le pide.

De esta manera, la conversación sobre la legibilidad del código es sincera, y el revisor no se sentirá engañado. Sé que suena bastante estricto, pero funciona, y aún así se puede seguir una conversación de forma educada.

3. El desarrollador web es «Responsable».

No le hagas perder el tiempo al revisor, asegúrate de que tu código se compila, todas tus pruebas son correctas, y echa un último vistazo a tu código (evita errores tipográficos, problemas de filtrado, etc.) antes de pasar a la etapa de revisión.

No queremos que la revisión del código sea sobre tecnicismos, recuerda, tiene que ser significativa.

4. Nunca digas «tú», di «nosotros» en su lugar.

Notarás que si usas demasiado el término «Tú», el desarrollador web puede ponerse a la defensiva mientras protege su código (y tal vez sienta que su dignidad también está en juego). Asegúrate de que esta revisión de código sea productiva y no tenga ningún sentido.

desarrollador web puede ponerse a la defensiva

Recomendar tu argumento al equipo o a ti mismo, es más agradable y abre al desarrollador web para que esté más atento a los cambios.

Por ejemplo: «Lo que hiciste está mal» => «Lo que solemos hacer es eso» => «Lo que hago normalmente es así, ¿qué opinas?

Sí, ese tipo de «tú» está bien 🙂

5. Que el desarrollador web elija a su revisor para la revisión del código.

Este consejo está dirigido a los managers que hay entre nosotros, que asignan al mismo revisor (en su mayoría ellos mismos) para hacer revisiones de código para su equipo. En mi humilde opinión, cuando se trata de revisiones de código, la experiencia debería tener poco significado, y déjame que te sorprenda: Un estudiante de último año también puede aprender algo de los estudiantes de tercer año!

Cuando hay un solo revisor – sólo se hacen réplicas de sus propias opiniones y estilo de codificación en todo el equipo, en lugar de tener un «mix & match» de las opiniones y estilos de codificación con los que todo el equipo está de acuerdo.

Resumiendo la revisión del código, me gustaría dejarte una nota:

Las revisiones de código deben ser sobre el intercambio de conocimientos y la auto-mejora. Una mejor base de código es sólo un bonus, y llegará cuando los miembros de tu equipo se respeten y aprendan unos de otros.

Si te ha gustado este artículo pero aun no has comenzado a estudiar programación, te recomiendo leer Fundamentos De JavaScript: Sintaxis Y Estructura, para que puedes empezar en este maravilloso mundo 🙂

Como hacer web scraping en php

Como hacer web scraping en php

Herramientas o bibliotecas para hacer web scraping en php

Como hacer web scraping. Si estás empezando con el web scraping, sigue leyendo este artículo en donde te explico que librerías o herramientas existen en PHP que te ayudarán con esta tarea!

El Web scraping es algo que los desarrolladores necesitan realizar a diario. Puede haber diferentes necesidades en lo que se refiere a cada tarea de scraping. Podría ser desde el control del precio de un producto o el de su stock.

En el desarrollo de backend, el web scraping es muy popular. Hay gente que sigue creando analizadores y scrapers de calidad.

En este post, exploraremos algunas de las bibliotecas que pueden permitir el scraping de sitios web y el almacenamiento de datos de una manera que podría ser útil para tus necesidades inmediatas.

En PHP, se puede hacer scraping con algunas de estas librerías:

1. Goutte web scraping

La librería Goutte es genial, ya que le puede dar un soporte increíble en cuanto a cómo scrapear contenido usando PHP. Está basado en el marco de Symfony. Goutte es una biblioteca de rastreo web y de scraping web. Es útil porque proporciona APIs para rastrear sitios web y scrapear datos de las respuestas HTML/XML.
Goutte tiene licencia bajo la licencia del MIT.

Características:
Funciona bien con grandes proyectos.
Está basado en OOP.
Tiene una velocidad de análisis media.

Requisitos:
Goutte depende de PHP 5.5+ y Guzzle 6+.

Documentación
https://goutte.readthedocs.io/en/latest/

Obten más información:
https://menubar.io/php-scraping-tutorial-scrape-reddit-with-goutte

2. Simple HTML DOM

Está escrito en PHP5+,  HTML DOM es muy bueno porque te permite acceder y usar HTML de forma bastante fácil y cómoda. Con él, puedes encontrar las etiquetas en una página HTML con selectores bastante parecidos a jQuery.

Puede scrapear el contenido de HTML en una sola línea. No es tan rápido como algunas de las otras bibliotecas.
Simple HTML DOM está licenciado bajo la licencia MIT.

Características:
Soporta HTML no válido.

Requisitos:
Requiere PHP 5+.

Documentación
http://simplehtmldom.sourceforge.net/manual.htm

Obtenga más información:
http://www.prowebscraper.com/blog/web-scraping-using-php/

3. htmlSQL (Como hacer web scraping)

Básicamente, es una librería PHP experimental. Es útil porque te permite acceder a valores HTML con una sintaxis similar a la de SQL. Lo que esto significa es que no es necesario escribir funciones complejas o expresiones regulares para scrapear valores específicos.

Si eres alguien a quien le gusta SQL, también te encantará esta librería experimental. Lo útil es que se puede aprovechar para cualquier tipo de tarea variada y analizar una página web con bastante rapidez. Aunque dejó de recibir actualizaciones/soporte en 2006, htmlSQL sigue siendo una biblioteca fiable para el análisis y el scraping. htmlSQL está licenciado bajo la licencia BSD.

Características:
Proporciona un análisis relativamente rápido, pero tiene una funcionalidad limitada.

Requisitos:
Cualquier sabor de PHP4+ debería ser suficiente.
Clase PHP Snoopy – Versión 1.2.3 (opcional – requerido para transferencias web).

Documentación:
https://github.com/hxseven/htmlSQL

Obten más información:
https://github.com/hxseven/htmlSQL/tree/master/examples

4. cURL (Como hacer web scraping)

cURL es conocido como una de las bibliotecas más populares (un componente PHP incorporado) para extraer datos de páginas web. No es necesario incluir archivos y clases de terceros, ya que se trata de una librería PHP estandarizada.

Requisitos:
Cuando quieras usar las funciones cURL de PHP, todo lo que necesita hacer es instalar el paquete » libcurl. Necesitarás la versión 7.10.5 o posterior de libcurl.

Documentación
http://php.net/manual/ru/book.curl.php

Obten más información:
http://scraping.pro/scraping-in-php-with-curl/

5. Requests

Requests es una biblioteca HTTP escrita en PHP. Está basado en la API de la excelente librería Requests Python. Requests te permite enviar incidencias HEAD, GET, POST, PUT, DELETE y PATCH HTTP. Con la ayuda de requests, puedes añadir cabeceras, datos de formulario, archivos de múltiples partes y parámetros con órdenes simples, y acceder a los datos de respuesta de la misma manera. Requests tiene licencia ISC.

Características:
Dominios y URLs internacionales.
Verificación estilo navegador SSL.
Autenticación básica/digestiva.
Descompresión automática.
Tiempos muertos de conexión.

Requisitos:
Requisitos de la versión 5.2+ de PHP

Documentación :
https://github.com/rmccue/Requests/blob/master/docs/README.md

HTTPful web scraping

HTTPful es una librería PHP bastante sencilla. Es buena porque es enlazable y legible. Su objetivo es hacer que HTTP sea legible. La razón por la que se considera útil es porque permite al desarrollador centrarse en la interacción con las APIs en lugar de tener que navegar por las páginas curl set_opt. También es un gran cliente PHP REST. HTTPful está licenciado bajo la licencia MIT.

Características:
Soporte del método HTTP legible (GET, PUT, POST, DELETE, HEAD, PATCH y OPTIONS).
Encabezados personalizados.
Análisis automático «inteligente».
Serialización automática de la carga útil.
Autentificación básica
Autores de certificados del lado del cliente.
Solicitud de «Plantillas».

Requisitos:
Requiere PHP versión 5.3+

Documentación:
http://phphttpclient.com/docs/

7. Buzz

Buzz es útil ya que es una librería bastante ligera y te permite emitir peticiones HTTP. Además, Buzz está diseñado para ser simple y tiene las características de un navegador web. Buzz tiene licencia bajo la licencia del MIT.

Características:
API simple.
Alto rendimiento.
Requisitos:
Requiere PHP versión 7.1.

Documentación:
https://github.com/kriswallsmith/Buzz/blob/master/doc/index.md

Obten más información:
https://github.com/kriswallsmith/Buzz/tree/master/examples

8. Guzzle web scraping

Guzzle es útil porque es un cliente HTTP en PHP que te permite enviar peticiones HTTP de una manera fácil. También es fácil de integrar con servicios web.

Características:
Tiene una interfaz simple que te ayuda a construir cadenas de consulta, peticiones POST, streaming de grandes cargas, streaming de grandes descargas, uso de cookies HTTP, carga de datos JSON, etc.
Puede enviar solicitudes síncronas y asíncronas con la ayuda de la misma interfaz.
Utiliza interfaces PSR-7 para solicitudes, respuestas y flujos. Esto te permite utilizar otras bibliotecas compatibles con PSR-7 con Guzzle.
Puede extraer el contenido HTTP subyacente, permitiéndote escribir un entorno y transmitir código agnóstico; es decir, sin dependencia de cURL, streams PHP, sockets o bucles de eventos sin bloqueo.
El sistema Middleware te permite aumentar y configurar el comportamiento de los clientes.

Requisitos:
Requiere PHP versión 5.3.3+.

Documentación
http://docs.guzzlephp.org/en/stable/

Obten más información:
https://lamp-dev.com/scraping-products-from-walmart-with-php-guzzle-crawler-and-doctrine/958

Si te ha gustado este artículo y quieres empezar a scrapear datos te recomiendo visites Cómo crear un entorno de desarrollo localhost, y si me puedes hacer un favor, recomienda este artículo en las redes sociales:)

Cómo instalar Google Analytics en WordPress para principiantes

Cómo instalar Google Analytics en WordPress para principiantes

 

¿Quieres instalar Google Analytics en WordPress?

Instalar Google Analytics en WordPress. Saber cómo tu audiencia interactúa con tu página web es fundamental para tu negocio. La mejor manera de conocer a tu audiencia es a través de tus estadísticas de visitas, y esto es lo que Google Analytics proporciona GRATIS.

En este artículo, compartiremos por qué es importante Google Analytics, y cómo puedes instalar fácilmente Google Analytics en tu página web en WordPress (paso a paso).

En primer lugar, te explicaremos por qué Google Analytics es importante y cómo puede ayudarte a hacer crecer tu página web. Después de eso, le mostraremos cómo registrarse para obtener una cuenta de Google Analytics y diferentes formas de instalarlo en tu página de WordPress. Por último, te explicaremos cómo ver tus informes de tráfico en Google Analytics.

¿Por qué es importante Google Analytics para los bloggers?

Una vez que empiezas un blog, tu meta #1 es conseguir más tráfico y suscriptores. Google Analytics te ayuda a tomar decisiones basadas en datos mostrándote las estadísticas que importan. Puedes ver:

¿Quién visita tus páginas web?

Esta parte de la analítica responde cuál es la ubicación geográfica de tu audiencia, qué navegador usó el usuario para visitar tu sitio y otras informaciones importantes tales como resolución de pantalla, soporte para JavaScript, lenguaje y mucho más.

Estos datos son extremadamente útiles y pueden ayudar de muchas maneras. Al obtener unas estadísticas personalizadas, puedes utilizar los datos del usuario para verificar que tu sitio sea compatible con tu audiencia.

Si la mayoría de tus usuarios visitan tu web desde un navegador en concreto, entonces deberías asegurarte que en ese navegador tu web no genera nigún problema. Si la mayoría de tus usuarios tienen resoluciones de pantalla de 1280, asegúrate de que tu diseño sea compatible con esa resolución o menor.

¿Qué hace la gente cuando está en tu sitio web?

Puedes hacer un seguimiento de dónde van los usuarios en tu página web, cuánto tiempo permanecen en ella y cuál es el porcentaje de rebote (el porcentaje de usuarios que salen de tu página web en la primera visita).

Usando esta información, puedes disminuir el porcentaje de rebote y aumentar tus vistas de página.

También puedes encontrar tus artículos más populares, artículos que no van muy bien, y qué tipo de contenido están buscando tus usuarios.

¿Cuándo visita la gente tu sitio web?

Al ver las horas más populares del día para tu página web, puedes elegir la hora en la que deseas publicar tu contenido. Si esa zona horaria no es compatible con la tuya, entonces puedes programar tu entrada para que cumpla esa hora.

¿Cómo encuentra la gente tu página web?

Esta sección de la analítica te muestra de dónde vinieron los usuarios (por ejemplo: Motores de Búsqueda, Enlaces Directos, Enlaces de Referencia de otro sitio).

También te muestra qué porcentaje de tus visitantes proceden de cada una de estas fuentes. Google Analytics te ofrece el detalle de cada una de estas categorías. Si es la categoría del motor de búsqueda, entonces te muestra qué motor de búsqueda te ha dado más tráfico, Google, Yahoo, Bing, etc.

El analisis de las fuentes de referencia te muestra en qué sitios necesitas trabajar más. Si tu principal fuente de referencia es Facebook, entonces necesitas tener contenido exclusivo de Facebook para que tu audiencia de Facebook se sienta especial.

Si tu principal fuente de referencia es un sitio web externo, entonces podrías considerar tener una asociación con ese sitio web (intercambio de mensajes de invitados u otra cosa).

¿Cómo interactúan las personas con tu contenido?

Google Analytics muestra cómo interactúan los usuarios con el contenido de tu página web. Te muestra qué porcentaje de los usuarios han hecho clic en cada enlace de tu sitio y mucho más.

Puedes realizar tests A/B creando experimentos de contenido en Google Analytics para entender qué es lo que mejor funciona para alcanzar tus objetivos.

Al ver la interacción del usuario, puede trabajar tu contenido con tus usuarios. Al ver las respuestas a las preguntas anteriores, puedes concentrarte en las estrategias que funcionan para tu sitio y evitar las que no funcionan.

En pocas palabras, elimina las suposiciones y concéntrate en las estadísticas que importan, para que puedas tomar decisiones basadas en los datos.

Cómo registrarte en Google Analytics

Google Analytics está disponible de forma gratuita y todo lo que necesitas es una cuenta de Google o Gmail para registrarte. El proceso de registro es muy sencillo, sigue las siguientes instrucciones paso a paso para crear tu cuenta de Google Analytics.

Paso 1: Primero debes acceder con tu gmail en Google Analytics.

Se te pedirá que accedas con tu cuenta de Google. Si ya tienes una cuenta de Google o Gmail, puedes utilizarla para iniciar sesión. De lo contrario, puede crear una cuenta de Google o Gmail.

acceder con tu gmail en Google Analytics

Paso 2: Ahora comienza el verdadero registro en Google Analytics.

Una vez que inicies sesión con tu cuenta de Gmail, se te pedirá que accedas a una pantalla como la que se muestra a continuación. Aquí es donde te registrarás en Google Analytics con tu cuenta de Gmail.

registro en Google Analytics

Paso 3: Introducir datos de la cuenta

En la siguiente pantalla, se te dará la opción de elegir entre un sitio web o una aplicación móvil. Asegúrate de seleccionar el sitio web.

A continuación, deberás introducir el nombre de la cuenta (será el nombre del perfil de Google Analytics para este sitio web), el nombre del sitio web, la URL del sitio web, el país y la zona horaria.

Introducir datos de la cuenta

Una vez que hayas introducido esta información, haz clic en el botón Obtener ID de seguimiento. Se te mostrarán las condiciones de uso y el servicio de Google Analytics con los que debes estar de acuerdo, así que haz clic en el botón «Acepto».

Paso 4: Código de seguimiento de Google Analytics

Ahora se te mostrará el código de seguimiento de Google Analytics. Puedes copiar este código de seguimiento porque necesitarás introducirlo en tu sitio de WordPress dependiendo del método que utilices a continuación.

Código de seguimiento de Google Analytics

Cómo instalar Google Analytics en WordPress

Hay varias maneras de configurar Google Analytics en WordPress. Pero en este artículo nos vamos a centrar en la forma más sencilla y gratis que hay.

Google Analytics para WordPress de MonsterInsights

MonsterInsights es el plugin de Google Analytics más popular para WordPress. Más de 1 millón de páginas web lo utilizan, incluyendo Bloomberg, PlayStation, Zillow, y más.

Es la forma más fácil y con diferencia la mejor de añadir Google Analytics a WordPress (para todos los usuarios principiantes).

MonsterInsights está disponible como plugin premium de pago y como versión gratuita. En este tutorial, usaremos la versión gratuita de MonsterInsights.

Puede usar la versión de MonsterInsights Pro si quieres características más avanzadas como seguimiento de comercio electrónico, seguimiento de anuncios, seguimiento de usuarios, etc.

Vamos a empezar.

Lo primero que tienes que hacer es instalar y activar el plugin MonsterInsights.

Una vez activado, el plugin añadirá un nuevo elemento de menú llamado ‘Insights’ al menú de administración de WordPress. Al hacer clic en él, aparecerá el asistente de configuración de MonsterInsights.

instalar y activar el plugin MonsterInsights

Primero, se te pedirá que elijas una categoría para tu sitio web (un sitio web empresarial, un blog o una tienda online). Selecciona uno y luego haz clic en el botón ‘Guardar y continuar’.

A continuación, tienes que hacer clic en el botón ‘Conectar MonsterInsights‘.

Connect MonsterInsights

Esto te mostrará una ventana emergente que te llevará a las cuentas de Google donde se te pedirá que accedas o que selecciones una cuenta de Google si ya lo has hecho.

accedas o que selecciones una cuenta de Google

Haz clic en el botón «Permitir» para continuar.

El paso final es seleccionar el perfil que desea rastrear. Debes seleccionar tu sitio web y luego hacer clic en el botón ‘Autenticación completa’ para continuar.

Debes seleccionar tu sitio web

MonsterInsights instalará Google Analytics en tu sitio web. Después se te pedirá que selecciones la configuración recomendada para tu sitio web.

recommended settings

La configuración predeterminada funcionará en la mayoría de los sitios web. Si usas un plugin de enlace de afiliado, entonces necesitas añadir la ruta que usas para encubrir los enlaces de afiliado. Esto te permitirá realizar un seguimiento de tus enlaces de afiliado en Google Analytics.

Haz clic en el botón Guardar y continuar para guardar la configuración.

A continuación, MonsterInsights te mostrará los complementos de pago a los que puedes acceder si te actualizas a PRO. Puede simplemente hacer clic en el botón «Guardar y continuar» para omitir este paso.

Y ya está, esto es todo lo que tienes que hacer para instalar y configurar Google Analytics en tu sitio de WordPress. Recuerda que Google Analytics tardará un tiempo en mostrar tus estadísticas.

Si te ha gustado este artículo, puedes compartirlo en las redes sociales y ayudar a otras personas a que puedan instalar Google Analytics en WordPress 🙂

Como crear un diseño web responsive en Grid con CSS

diseño web responsive en Grid con CSS

Esta es una guía paso a paso para crear un diseño web responsive en Grid con CSS.

El diseño web responsive en Grid está creciendo en el soporte del navegador cada día. La rápida adopción del formato Grid ha sido realmente notable.

Antes de que lleguemos a hacer un diseño de portafolio responsive en formato Grid, vamos a aclarar un par de cosas: El formato Grid no es un sustituto de Flexbox. Ni siquiera es un reemplazo. De hecho, puede que te des cuenta de que hemos estado usando Flexbox para hacer cosas que el formato Grid hace mucho mejor. Pero en lugar de pensar en términos de sustitución, podemos pensar en términos de combinación.

Imagina un sándwich de queso y jamón york. El queso y el jamón son muy buenas por sí solas, pero cuando se juntan, nace una nueva cosa y ocurre la magia.

Así son nuestras herramientas de diseño web. Son excelentes en las cosas que hacen individualmente, pero cuando se combinan, la magia sucede y podemos crear nuevos y emocionantes diseños. En este caso, haremos un desarrollo web propio con el formato Grid y Flexbox.

01. Configura tu código HTML

Configura tu código HTML

Nuestro diseño no parece gran cosa, pero ya tenemos en su lugar el esqueleto con estos seis artículos.

En este tutorial, vamos a usar CSS Grid y Flexbox juntos para crear un diseño de portafolio que responda a tus necesidades. Cada una de estas cajas tiene un tamaño diferente, algunas de ellas se extienden a través de filas y cada caja tiene un título que se encuentra en la parte inferior. Usaremos algunas de las grandes herramientas de alineación que vienen con Flexbox para hacer que eso suceda.

Empezaremos por establecer nuestro html.

<ul class=”boxes”>
  <li>
    <div class=”boxes__text-wrapper”>
      <h2>Titulo del portafolio</h2>
      <p>Aquí la descripción del portafolio</p>
    </div>
  </li>
</ul>

Duplicaremos ese elemento y todo lo que hay en él seis veces para que podamos jugar con él. En caso de que te lo estés preguntando, he decidido usar el elemento ul porque es una lista de entradas. Si lo deseas, puedes usar lo que te parezca correcto.

Dentro del ítem de la lista tenemos un div con la clase .boxes__text-wrapper que contendrá el título del portafolio y la descripción que lo acompaña.

02. Escribe los estilos que necesitas

Escribe los estilos que necesitas

He establecido nuestra fuente en algo un poco más agradable y he eliminado el margen por defecto de los encabezados y párrafos.

Ahora vamos a establecer algunos estilos de base con los que trabajar.

body {
  font-family: Avenir, sans-serif;
  margin: 2rem auto;
  width: 95%;
}
h2,
p {
  margin: 0;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.boxes > * {
  padding: .5rem;
  background-color: #333;
  color: white;
}

He cambiado la fuente para que sea Avenir. Eliminaremos el margen de nuestro encabezado y párrafo, y resetearemos la lista desordenada. También le daré a cada elemento de la lista algunos estilos predeterminados para ayudarnos a ver dónde está cada uno.

03. Configura tu diseño web responsive en Grid

Configura tu diseño web responsive en Grid

Con sólo tres líneas, hemos añadido un margen entre nuestros elementos de Grid y los hemos hecho un poco más altos.

Primero queremos construir nuestro diseño para móviles. Configurar nuestra cuadrícula en pantallas pequeñas es tan fácil como esto:

.boxes {
  display: grid;
  grid-auto-rows: minmax(125px, auto);
  grid-gap: .5rem;
}

Grid apilará nuestros artículos uno encima del otro porque por defecto sólo hay una columna. Vamos a crear un espacio entre cada item del portafolio mediante el uso de grid-gap, esto nos permite añadir un margen entre filas y columnas.

Olvídate de añadir un margen a las columnas sólo para necesitar selectores complejos; los márgenes sólo aparecen entre columnas o filas, nunca antes o después de una columna o row.grid-gap es la abreviatura de grid-column-gap y grid-row-gap. Normalmente usamos la abreviatura a mano, pero vamos a sobreescribir ambas a medida que el navegador crece, así que usaremos la abreviatura.

A continuación, utilizaremos las filas automáticas de cuadrícula para indicar a nuestro contenedor de cuadrícula la altura de las filas nuevas. Grid creará nuevas filas para colocar todo nuestro contenido. Podemos controlar el tamaño de estas filas creadas automáticamente con la propiedad grid-auto-rows. Estamos usando una nueva función disponible para nosotros: minmax(). Con minmax() podemos especificar un tamaño mínimo y un tamaño máximo.

Con nuestro código estamos diciendo que queremos que nuestras filas tengan un mínimo de 120px y un máximo de auto. Estamos usando auto aquí porque queremos que nuestras filas crezcan si el contenido lo justifica.

04. Configurar compatibilidad con navegadores de gran tamaño

compatibilidad con navegadores de gran tamaño

Nuestra cuadrícula está tomando forma! Tenemos seis columnas con las que trabajar y menos márgenes entre los elementos de nuestra cuadrícula.

Vamos a configurar nuestra página para que cuando nuestro navegador sea 40em o mayor, nuestro contenedor de cuadrícula tenga seis columnas de una fracción cada una.

@media screen and (min-width: 40em) {
  .boxes {
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 2px;
  }
}

grid-template-columns es la propiedad que usamos para indicar a nuestra cuadrícula cuántas columnas deben existir. Acepta todas las unidades de longitud que conocemos y amamos como rem, em, px, porcentajes, vw, vh y fr.

El fr es una nueva unidad que obtenemos con el formato CSS Grid. Con él, podemos decirle al navegador que haga cálculos en vez de nosotros .

Al decirle al navegador que cree seis columnas de una fracción, el navegador calculará el ancho de nuestro contenedor de cuadrícula y lo dividirá en seis columnas iguales. Además, como Grid es inteligente, sólo dividirá el espacio restante después de calcular el margen que hemos especificado.

05. Estilo de los ítems individualmente

Estilo de los ítems individualmente

El café hace que todo se vea mejor, ¿no? También un sutil degradado hace que nuestro título y descripción destaquen.

Nuestros items del portafolio parecen un poco monótonos como cajas grises. Añadamos una imagen de fondo, consigamos que nuestros títulos se muestren en la parte inferior de estas cajas y añadamos un degradado para que nuestro título destaque.

.boxes li {
  background-image:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.8)),
    url(path/to/image);
  background-size: cover;
  display: flex;
  align-items: flex-end;
}

Esta imagen de fondo era una imagen libre de Unsplash, pero puedes usar cualquier imagen que desees. También estoy trayendo Flexbox a la mezcla para alinear nuestro texto al fondo de nuestras cajas. Aún no lo verás, pero a medida que coloquemos cada caja diferente, lo verás funcionar.

06. Colocar elementos en la cuadrícula

Colocar elementos en la cuadrícula

Grid hace que sea fácil dimensionar nuestros elementos de Grid como queramos. Pero esto es sólo el principio

Desafortunadamente, Grid no tiene una manera de colocar automáticamente los elementos en el diseño de la cuadrícula que vimos al principio. Afortunadamente para nosotros, sin embargo, Grid nos da las herramientas para hacerlo manualmente con bastante facilidad. En este tutorial, usaremos nth-child para colocar cada elemento de la tabla. En un sitio web de producción, aconsejo utilizar una clase que, si se planifica correctamente, permita automatizar diseños como éste en un sitio con mucho contenido.

Empecemos con nuestro primer artículo.

@media screen and (min-width: 40em) {
  .boxes li:nth-child(1) {
    grid-column: 1 / -1;
    grid-row: span 3;
  }
}

Estaremos poniendo todos nuestros estilos de posición dentro de la consulta de contenidos que escribimos anteriormente porque queremos que este diseño ocurra después de que nuestro navegador tenga 40em o más. Con el enésimo child estamos apuntando al primer elemento de la lista. CSS Grid nos permite colocar fácilmente nuestros artículos con columna de cuadrícula y fila de cuadrícula. Hay muchas maneras diferentes de especificar dónde deben estar los artículos, pero aquí estamos diciéndole a nuestro artículo que empiece en la línea uno de la columna y se extienda por todo el contenedor con -1.

Luego, con la fila de cuadrícula, le decimos al ítem que abarque tres filas. ¿Cómo sabemos que tres filas serán del tamaño que queremos? Bueno, hemos especificado el tamaño de estas filas con cuadrículas automáticas hace unos momentos, y si no estamos contentos con ellas podemos cambiar el tamaño mínimo.

Coloquemos el resto de nuestros artículos.

@media screen and (min-width: 40em) {
  .boxes li:nth-child(2) {
    grid-column: span 2;
    grid-row: span 7;
  }

  .boxes li:nth-child(3) {
    grid-column: span 4;
    grid-row: span 3;
  }

  .boxes li:nth-child(4) {
    grid-column: span 2;
    grid-row: span 4;
  }

  .boxes li:nth-child(5),
  .boxes li:nth-child(6) {
    grid-column: span 2;
    grid-row: span 2;
  }
}

¿No es increíble cuánto control nos da el formato Grid? Con sólo unas pocas líneas de código, podemos crear un diseño completamente responsive que no se romperá si se añaden más elementos.

Claro, pueden parecer un poco torpes porque sólo ocuparán una columna y una fila de la cuadrícula por defecto, pero esto no rompe nuestro diseño. Si estuviéramos haciendo esto con los anchos y alturas fijos, estaríamos en un lío si se añadiera más contenido.

Nuestro diseño está terminado! ¿No es increíble? La cuadrícula nos permite colocar nuestros artículos fácilmente en dos dimensiones.

Un pequeño comentario sobre los navegadores antiguos en diseño web responsive en Grid

Bien, es hora de dirigirse al elemento de la celda. ¿Qué hay de los navegadores antiguos? La respuesta a esta pregunta es la misma que para cualquier característica nueva en CSS: Hay que usar las consultas de características y aceptar la secuencia. Las consultas de características están muy bien soportadas, y donde no lo están, podemos colocar nuestra solución de emergencia en primer lugar. Por ejemplo, escribiríamos algo parecido a:

.your-selector {
  display: flex;
}

/* Your Grid code */
@supports (display: grid) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem 2rem;
}

Escribir nuestro código de esta manera significa que si el navegador entiende el diseño de la cuadrícula, lo usará en lugar de Flexbox. Además, debido a que estamos adoptando la combinación, los navegadores que no entienden las consultas de características las ignoran y ya tienen la información que necesitan. Puede que necesitemos planear cómo escribimos nuestros estilos un poco más de lo habitual, pero al hacerlo podemos crear diseños atractivos con soluciones alternativas adecuadas.

Diseño web responsive en Grid CSS en el futuro

Además, a medida que pase el tiempo, sólo habrá más y más soporte para CSS Grid. Piensa en lo genial que sería borrar más tarde nuestras correcciones y dejar todos los CSS relacionados con Grid. A medida que aprendas más sobre Grid, te darás cuenta de que hace muchas cosas que hacemos ahora mismo con muchas menos líneas de CSS.

Y si quieres aprender más sobre diseño web, mi canal de Youtube

Si te apasiona el mundo del diseño web responsive, tienes que suscribirte a mi canal en Youtube, verás contenidos tan chulos como este jeje 😉




Que es ethical hacking y que necesitas saber

Que es ethical hacking

 

El ethical hacking es un gran negocio; descubre que es, quién está contratando, qué quieren los empleadores y cómo puedes empezar.

Que es ethical hacking. El ethical hacking se está convirtiendo en una industria en crecimiento. El sector de la seguridad de la información está en auge y se espera que crezca a un ritmo del 10,2 por ciento anual hasta 2023, según un informe de Markets and Markets. Esto ha provocado una demanda de hackers de guante blanco y otros profesionales de la seguridad.

Un estudio del Grupo Herjavec predice que se crearan 3,5 millones de puestos de trabajo relacionados con la ciberseguridad hasta 2021. La alta demanda y el coste creciente de los ataques han dado lugar a unos sueldos extraordinarios. PayScale calcula que el salario medio anual de un especialista en seguridad informática es de unos 72.000 euros, mientras que el Instituto Infosec estima en unos 71.331 euros el de un ethical hacking certificado.

Los trabajadores de seguridad de TI también parecen ser muy resistentes a la recesión económica. Si las respuestas a la encuesta de (ISC)2 son una indicación del futuro, los ethical hacking pueden estar relativamente seguros de que conservarán sus puestos de trabajo cuando llegue la próxima recesión. Esto significa que aprender más sobre el ethical hacking en lugar de centrarse en otros aspectos del diseño web como la construcción del mejor diseño web, podría ayudarte a prepararte para el futuro.

La ciberseguridad es esencial para cualquier empresa que almacene datos u opere online, lo que significa que existen muchas oportunidades para los hackers éticos. Las profesiones obvias son las de los gigantes de Internet como Facebook, Google o Amazon. Los bancos y otras empresas del sector financiero también requieren altos niveles de seguridad.

Muchas de las principales empresas tienen su propio personal de ciberseguridad, pero también hay especialistas en infoseguridad como Cisco y FireEye, así como funciones en el sector militar. Los profesionales de la seguridad de la información pueden encontrar trabajo en una amplia gama de industrias y en casi cualquier ciudad importante del mundo.

Pero una carrera como hacker ético no se trata sólo de los beneficios financieros. A medida que nuestra sociedad se ha ido moviendo online y con el éxito de series como la del Sr. Robot, la imagen del hacker ha salido del sótano poco iluminado y se ha convertido en una figura respetada e intrigante.

Con todas estas ventajas en mente, trabajar como un ethical hacking puede ser un buen negocio. Pero, ¿cuál es la mejor manera de convertirse en uno?

¿Qué tipos de hacking ético existen?

Elethical hacking es un campo amplio compuesto por numerosas subdisciplinas. Cada uno de ellos tiene sus propias habilidades y requisitos. Algunos de los tipos principales incluyen:

Pruebas de penetración – Esto implica que una organización te conceda permiso para piratear sus sistemas en un intento de encontrar agujeros de seguridad.
Forense digital – La rama digital de la ciencia forense puede incluir cosas como la investigación de intrusiones y la asistencia a las fuerzas de seguridad.
Ingeniería social – Una parte importante de los sistemas de brechas consiste en engañar a la gente en lugar de dejar atrás la tecnología. Este campo particular de especialización se conoce como ingeniería social.
Investigación de vulnerabilidades – Este trabajo implica encontrar las últimas vulnerabilidades y amenazas, así como idear formas de gestionarlas de forma eficaz.

¿Qué habilidades se necesitan para el elethical hacking?

Esto realmente depende de la respuesta a la última pregunta. Si quieres ser un experto en pruebas de penetración, entonces necesitarás ser un experto en al menos un lenguaje de programación, pero cuantas más mejor. Necesitarás entender cómo se interrelacionan los sistemas, los principios y el diseño de redes clave, los modelos de seguridad de Unix y Windows, así como una gran cantidad de otros conocimientos.

Si prefieres seguir con la ingeniería social, puedes arreglártelas con carisma y una sonrisa. A pesar de ello, sigue siendo una idea tener al menos una formación técnica decente, especialmente si se quiere ser capaz de entender a los profesionales y progresar más en el campo.

Las habilidades particulares necesarias para tu carrera dependen de hacia dónde te dirijas. Algunas personas tendrán un plan sólido y se apegarán a él, mientras que otras pueden elegir seguir la corriente, buscar oportunidades en su entorno y adquirir todas las habilidades que puedan. Este enfoque puede llevarlos a áreas de hacking ético en las que nunca hubieran pensado.

¿Necesitas un título de ethical hacking?

Un título puede ser una buena manera de entrar en la industria, pero no es estrictamente necesario. Por supuesto, esto se relaciona con el tipo de papel ethical hacking que quieres.

Algunos países pueden ser más estrictos en cuanto a los requisitos de titulación, al igual que algunas empresas. Pero muchos negocios bien considerados en la industria no ponen tanto énfasis en los títulos – se preocupan más por el conjunto de habilidades de una persona y su actitud. A los ojos de muchos empresarios, alguien que es excelente en su trabajo está muy por encima de un candidato mediocre con un pedazo de papel.

Dicho esto, los títulos pueden ser beneficiosos para el ascenso profesional y la evolución hacia puestos directivos. Los posibles ethical hacking tienen varios caminos entre los que elegir. Pueden obtener un título general en ciencias de la computación o ingeniería en computación, y luego, tal vez, incorporarse a la plantilla por unos cuantos años. Después de un tiempo, pueden optar por obtener una licenciatura en ciberseguridad, idealmente con su empresa pagando por sus estudios.

Alternativamente, algunos pueden querer entrar en la ciberseguridad desde el inicio. Hay muchos programas de ciberseguridad en todo el mundo y el mejor para ti dependerá de tu ubicación y de tus objetivos profesionales.

Si optas por la universidad, no te conformes con tu título. Si quieres sobresalir en el campo, combínalo con el estudio personal, como aprender nuevos lenguajes de programación, mantenerte al día con las noticias de la industria e incluso navegar por los foros de hackers. Mantenerse al día es importante para hacer frente a las últimas amenazas y cambios tecnológicos.

¿Está disponible la certificación de ethical hacking?

Afortunadamente, muchas de las habilidades necesarias se pueden encontrar de otras formas y, siempre y cuando las tengas, deberías poder encontrar un trabajo.

En el sentido más desestructurado, puedes aprender mucho de lo que necesitas de los foros y ver videos de YouTube. Aunque esta no es la manera más rápida de aprender, ha sido un camino de confianza para muchos hackers adolescentes.

Un enfoque más estructurado implica cursos y certificaciones online, que a menudo son más respetados en ciberseguridad que en otras industrias. Hay una variedad de cursos gratuitos y relativamente baratos que ofrecen excelentes maneras de empezar.

Si deseas certificaciones valoradas por la industria, busca obtener una de las siguientes calificaciones:

La ciberseguridad es una industria muy amplia y en rápida evolución. Hacer una carrera profesional de ella implica saber en lo que quieres especializarte y trabajar duro para convertirte en un experto en ese rol en particular. Mientras te mantengas al día con los últimos desarrollos de amenazas, podrías estar preparándote para una carrera cómoda y atractiva.

Como aumentar el Upload Limit de WordPress

Como aumentar el Upload Limit de WordPress

 

Como aumentar el Upload Limit de WordPress. Una de las mayores ventajas de una página web es tener un lugar para compartir fácilmente archivos con los visitadores. Me vienen a la mente cosas como formularios para imprimir, libros electrónicos, vídeos, música e imágenes.

Para aquellos de nosotros que usamos WordPress como nuestro sistema de gestión de contenidos (CMS), añadir este tipo de archivos es relativamente fácil a través de la Media Library. Incluso hay una forma integrada de incrustar archivos multimedia, galerías y listas de reproducción.

Pero, dependiendo de su configuración particular, es posible que te encuentres con límites de tamaño de carga de archivos bastante restrictivos (Upload Limit). Esto hace que sea difícil publicar, por ejemplo, un vídeo HD a pantalla completa o un archivo.zip de archivos PDF de alta resolución.

Afortunadamente, el límite de carga se puede aumentar en la mayoría de las situaciones – y es bastante fácil de hacer. Sin embargo, el método para hacerlo depende en gran medida de tu entorno de alojamiento web. Echemos un vistazo a los ajustes que es necesario cambiar, junto con algunos enfoques diferentes para realizarlos.

Lo que necesita cambiar para aumentar el límite de Upload Limit de WordPress

Para aumentar el Upload Limit de WordPress, tendrás que cambiar algunos ajustes dentro de la configuración PHP de tu cuenta de alojamiento. Por supuesto, las empresas de alojamiento web varían mucho cuando se trata de configuraciones de servidores y sus propias políticas para hacer cambios.

Por lo tanto, el enfoque que tomes depende en gran medida del método que soporte tu host. Revisa tu documentación o pregunta a un agente de soporte de tu hosting para saber qué te recomiendan.

Pero a pesar de todo, queremos cambiar (o al menos revisar) los siguientes ajustes:

Por ahora, es importante saber que cada uno de estos elementos (especialmente los tres primeros) tiene un papel que desempeñar cuando se trata de subir archivos. El último tiene voz en el procesamiento de los mismos (como un archivo de importación lleno de mensajes, por ejemplo), que también puede ser relevante.

Métodos para modificar los uploads límite

Ahora que sabemos qué ajustes queremos cambiar, es el momento de hacer algunas investigaciones. Habla con tu proveedor de alojamiento web sobre los métodos que soportan para ajustar la configuración de PHP. Es probable que sea una de las siguientes opciones.

Ten en cuenta que la edición de estos ajustes es un asunto serio. Por lo tanto, asegúrate de hacer copias de seguridad de cualquier archivo antes de hacer cambios. Un movimiento en falso podría hacer que su sitio se caiga.

Con esto, aquí están algunos de los métodos más comunes para aumentar el Upload Limit de WordPress:

1 – En tu panel de control de hosting

Una de las maneras más fáciles de ajustar estas configuraciones es cambiando algunos números en su panel de control de alojamiento web. Los hosts que usan cPanel o una GUI similar pueden permitirle cambiar la configuración de PHP directamente en tu navegador.

2  – Edición directa del archivo php.ini

Algunos hosts (o si estás ejecutando un entorno de alojamiento local) permiten el acceso directo al archivo php.ini de tu cuenta. Esto puede lograrse descargando el archivo a través de FTP, haciendo cambios, y luego volviendo a cargarlo en el lugar que le corresponde en tu servidor.

Alternativamente, puedes acceder a ella a través de una línea de comandos. Este es un terreno para expertos, así que ten cuidado.

3 – Creación y carga de un archivo user.ini

Muchos hosts preferirían que no tuvieras acceso directo al archivo php.ini completo – y por una buena razón. Como alternativa, te permitirán crear un archivo llamado «user.ini», que te permite añadir y cambiar manualmente sólo la configuración que necesites.

Desde allí, súbelo a tu servidor (normalmente el directorio raíz de tu sitio web) y tu nueva configuración anulará los valores predeterminados. Este método ofrece un poco más de seguridad, ya que incluso si comete un error, puedes arreglar o eliminar rápidamente el archivo por completo.

Modificar tu archivo .htaccess

En algunos hosts, puedes modificar la configuración de PHP a través del archivo .htaccess de tu sitio. Este es un archivo oculto que normalmente se encuentra en el directorio raíz de tu sitio. Es posible que tengas que modificar la configuración del software FTP para poder verlo.

Sin embargo, ten cuidado al editar este archivo y guarda las copias de seguridad. .htaccess puede ser usado para diferentes configuraciones de servidor, y WordPress depende de él para su estructura Permalink.

Valores de ajuste

Una vez que sepas cómo y dónde cambiar la configuración de PHP para tu sitio web, ahora es cuestión de implementarla. Pero, ¿cuáles son los valores correctos?

Esto realmente depende de tus necesidades específicas. En la mayoría de los casos, tendrás cierta flexibilidad a la hora de aumentar el Upload Limit. Sin embargo, cuanto más alto sea el límite, más recursos de servidor usarás. Así que, ten eso en cuenta cuando hagas cambios.

Para nuestros objetivos, establecer el límite de 24 MB debería ajustarse a la mayoría de las necesidades, pero tú puedes establecer el tuyo como quieras. Así es como se hace.

Si está editando la configuración existente en tu php.ini o creando un archivo user.ini desde cero, tu configuración se verá algo así:

upload_max_filesize = 24M
post_max_size = 26M
memory_limit = 28M
max_execution_time = 300

Si estás editando un archivo .htaccess, tu configuración se verá como la siguiente:

php_value upload_max_filesize 24M
php_value post_max_size 26M
php_value memory_limit 28M
php_value max_execution_time 300

Ahora, vamos a proporcionar un poco de contexto sobre lo que hacen estas configuraciones y cómo llegamos a estos valores específicos.

upload_max_filesize = 24M

Esta configuración permitirá cargar un archivo de hasta 24 MB (ten en cuenta que la configuración en sí utiliza «M», en lugar de «MB»). Se puede cambiar a cualquier número que quieras, dentro de lo razonable.

post_max_size = 26M

En general, el tamaño post_max_size debería ser mayor que el tamaño upload_max_filesize para asegurar un poco de espacio para respirar. Como se muestra aquí, el ajuste no tiene que ser significativamente más alto – sólo un poco más servirá.

memory_limit = 28M

A continuación, el memory_limit debe ajustarse aún más alto. Seguir esta fórmula ayudará a mantener las cosas funcionando sin problemas.

max_execution_time = 300

Este es completamente opcional. Define el número de segundos (300, en nuestro caso) que un script PHP puede ejecutar antes de terminar.

Sin embargo, es muy útil cuando una carga de archivos está siendo procesada por una aplicación PHP, como WordPress. Por ejemplo, si estás subiendo un archivo realmente grande a la Media Library, WordPress (y potencialmente un plugin) necesitarás procesar el archivo. Eso puede llevar mucho tiempo.

Aumentar el max_execution_time ayudará a asegurar que el proceso no se detenga antes de que haya tenido la oportunidad de terminar. Una vez más, es recomendable que compruebes con tu host para ver qué se recomienda aquí.

Para aquellos de nosotros que necesitamos subir archivos grandes, un rápido cambio en la configuración de PHP es todo lo que se necesita. Es sólo una forma más de hacer que un sitio web de WordPress sea tuyo.

Los mejores portátiles para programación en 2019

portátiles para programación

 

Portátiles para programación. La programación web (a menudo utilizada indistintamente con ‘codificación’) significa cosas diferentes para personas diferentes. El corazón de la programación en cualquier lenguaje no es particularmente exigente – sólo estás escribiendo líneas de texto, que cualquier computadora debería ser capaz de manejar. Sin embargo, siempre es bueno tener algo de potencia bajo el capó.

Por estas razones, creo que el mejor portátil para programar en 2019 es el Huawei MateBook 13. Se presenta con algunas grandes especificaciones a un precio muy razonable (y es super-portátil, también). Sigue leyendo para conocer mi ranking de ordenadores portátiles para programación, adecuados para una amplia gama de presupuestos, además de un resumen de lo que deberías estar buscando.

Los mejores portátiles para programación: Qué buscar

Como dije antes, la programación se basa esencialmente en la escritura de texto, por lo que se puede hacer en casi cualquier máquina. Sin embargo, hay algunas características que marcarán la diferencia en el flujo de trabajo de un programador.

El tamaño de pantalla perfecto para la programación es un debate interesante. Con más área de pantalla en un ordenador portátil de 15 pulgadas, es más fácil leer el código y hacer ajustes GUI, pero generalmente se pierde algo de la portabilidad de un portatil más pequeño. He trabajado en  portatiles de tamaños de pantalla de 13 pulgadas, y recientemente tuve la oportunidad de probar el nuevo e impresionante portátil LG Gram de 17 pulgadas. El LG Gram tiene una pantalla masiva que acomoda aún más código, pero sin el peso y el volumen de un portátil típico de 17 pulgadas.

Más memoria significará que los entornos de desarrollo integrado (IDEs) más pesados de la actualidad, como Visual Studio, funcionarán sin problemas y facilitarán los cambios cuando se trabaje con diseños de sitios web complejos que tengan grandes cantidades de código de fondo. Los programas grandes y complejos se compilan más rápido con un procesador más rápido.

Por último, si crees que tu nueva idea va a ser el próximo gran éxito en la App Store de Apple, necesitas un portátil que ejecute MacOS para usar Xcode, el IDE de Apple que se utiliza exclusivamente para desarrollar aplicaciones para iPhone, iPad y Mac. Del mismo modo, si estás pensando en trabajar con el desarrollo de juegos en un entorno como UnrealEd o Unity, como parte de tu proyecto, tampoco puedes ignorar el rendimiento de los gráficos.

Huawei MateBook 13

01. Huawei MateBook 13

Por su portabilidad, rendimiento y precio, es un de los mejores portátiles para programación.

CPU: Intel Core i5 – i7 de octava generación | Gráficos: Gráficos Intel UHD 620, Nvidia GeForce MX150 2GB GDDR5 | RAM: 8GB | Almacenamiento: 256GB – 512GB SSD | Tamaño: 21.1×28.6×1.2cm | Peso: 1.3kg | OS: Windows 10
Ligero y delgado
Asequible
Mucho rendimiento del procesador
Memoria limitada a 8 GB
Sólo dos puertos USB-C

El Huawei MateBook 13

es mi elección como el mejor portátil para la programación en este momento. Huawei irrumpió en el mercado telefónico con su excelente gama de teléfonos a precios competitivos, y ahora lo hace de nuevo con los portátiles: este portátil tiene grandes especificaciones para el trabajo de codificación.

Por un precio de venta (relativamente) modesto, obtendrá toda la potencia de un chip Core i5 o Core i7, una pantalla nítida, brillante y de alta resolución de 13 pulgadas y un montón de almacenamiento SSD. Hace que Apple (y otros fabricantes de alta gama) parezcan ladrones. Además, también es un súper portátil, ya que pesa sólo 1,3 kg y tiene menos de 1,5 cm de grosor. Vale la pena echar un vistazo antes de pensar en otra cosa.

Vista en España   comprar en amazon Huawei MateBook 13
Vista en EEUU  comprar en amazon Huawei MateBook 13

LG Gramo 17

02. LG Gram 17

17″ de espacio en pantalla en un portátil increíblemente ligero.

CPU: Intel Core i7-8565U (quad core, 4.6GHz Max Turbo Boost) | Gráficos: Gráficos Intel UHD 620 | RAM: 16 GB | Almacenamiento: 512GB SSD | Tamaño: 38.1×21.1×1.7cm | Peso: 1.34kg | OS: Página principal de Windows 10

Potente procesador de cuatro núcleos
Mucha memoria
Sin tarjeta gráfica
Opciones de personalización limitadas

el LG Gram de 17 pulgadas

Construido con una aleación superligera de magnesio y carbono, el LG Gram es considerado el portátil de 17 pulgadas más ligero del mundo, con sólo 1,7 cm de grosor. Si te gusta la idea de tener una pantalla de ordenador portátil más grande para editar código, entonces un modelo de 17 pulgadas será la elección correcta, pero la mayoría de los portátiles de 17 pulgadas son desafortunadamente gruesos, pesados y difíciles de transportar. Con el LG Gram 17, no tienes que hacer esa concesión – además tienes una especificaciones que asegurará que cualquier herramienta de programación funcione sin problemas.

LG ha equipado la magnífica pantalla IPS WXGA (2560×1600) de Gram 17 con un aspecto nítido y brillante, una alta precisión de color, un procesador Intel Core i7 de cuatro núcleos, una tarjeta SSD de 512 GB y 16 GB de memoria. Esto es suficiente rendimiento para masticar cualquier IDE de peso pesado.

Vista en España   comprar en amazon LG Gram 17
Vista en EEUU  comprar en amazon LG Gram 17

 

Dell Inspiron 14 5000

03. Lenovo ThinkPad P1

Rendimiento de primera calidad de grado profesional

CPU: Seis Core Intel Core i7 / Xeon | Gráficos: Nvidia Quadro P2000 | RAM: 8-16GB | Almacenamiento: 256GB-4TB | Tamaño: 36.2×24.6×1.8cm | Peso: 1.7kg | OS: Windows 10 Home / Pro

Rendimiento increíble en un chasis delgado
Una de las mejores pantallas en un portátil
El ethernet por cable ha cambiado a un nuevo’mini’ estándar
No es mucho más barato que los modelos premium de Apple

Completando nuestra selección de los mejores portátiles para la programación está el ThinkPad p1. Con este modelo, Lenovo ha tomado el tipo de experiencia informática que la mayoría de nosotros asumimos que sólo es posible con una estación de trabajo de escritorio alojada en una gran caja debajo de un escritorio, y no sólo la ha hecho portátil, sino que la ha apretado en una forma que, en grosor, se parece a la de un Ultrabook.

Procesadores Xeon de calidad profesional

Es el único portátil de este tamaño que ofrece procesadores Xeon de calidad profesional, con hasta seis núcleos, una tarjeta gráfica Nvidia Quadro P2000 y hasta 64 GB de memoria. PuedeS rellenarlo con hasta 4 TB de almacenamiento nVME SSD y optar por una pantalla de 15,6 pulgadas y 4K que no sólo es sensible al tacto, sino también es precisa en cuanto al color. Es una gran estación de trabajo de uso general, capaz de realizar todo tipo de trabajo de diseño visual y tareas de gran intensidad de procesador.

Por supuesto, también funciona muy bien para la codificación. Esto se debe en parte al excelente diseño del teclado de Lenovo, pero en general el ThinkPad P1 está muy bien construido, incluyendo un chasis semirrígido que puede sobrevivir a golpes ligeros, una selección muy buena de puertos, la retención de dos puertos USB Gen 1 originales, así como dos nuevos puertos USB tipo C con capacidad para Thunderbolt y HDMI. No te equivoques, si lo que quieres es rendimiento en bruto, este es el portátil que necesita.

Vista en España  comprar en amazon Lenovo ThinkPad P1
Vista en EEUU  comprar en amazon Lenovo ThinkPad P1

Microsoft Surface Laptop 2

04. Portátil Microsoft Surface 2

Programación de Windows en el propio hardware de Microsoft

CPU: Intel Core i5 – i7 | Gráficos: Gráficos Intel UHD 620 | RAM: 8 GB – 16 GB | Almacenamiento: 128GB – 1TB SSD | Tamaño: 30.8x 22.3×1.4cm | Peso: 1.25kg | OS: Windows 10

Gran diseño
Potente
Un único y miserable puerto USB 3
El lápiz táctil se vende por separado

Como viene Microsoft, el Surface Laptop 2

Ofrece efectivamente una experiencia pura de Windows 10, lo que lo convierte en un punto de referencia para probar y desarrollar software de Windows. Tiene un gran diseño, una sólida carcasa de aluminio y un teclado muy cómodo. La nueva versión viene en negro mate y ofrece especificaciones bastante robustas, con un Core i7, hasta 16 GB de memoria, 1 TB de almacenamiento SSD y una pantalla de 13,5 pulgadas de alta resolución que funciona con el lápiz táctil Surface Pen de Microsoft.

Vista en España  comprar en amazon Microsoft Surface 2
Vista en EEUU  comprar en amazon Microsoft Surface 2

Apple MacBook Pro 13

05. MacBook Pro de 13 pulgadas

El magnífico y polifacético portátil Mac

CPU: 2-4 núcleos | Gráficos: Intel Iris Plus 640-655 | RAM: 8-16GB | Almacenamiento: 128GB-2TB | Tamaño: 30.4cm x 21.2cm x 1.5cm | Peso: 1.37kg | OS: MacOS

Los Mac son la única opción para el desarrollo de iOS
Portátil pero potente
El Touch Bar puede ser de uso limitado
La opción de cuatro núcleos aumenta significativamente el precio

El MacBook Pro de 13 pulgadas

Mientras que el MacBook de Apple y el recién actualizado MacBook Air son los portátiles Apple más portátiles de la gama, con su reciente actualización, el MacBook Pro de 13 pulgadas. es ahora nuestra primera opción para trabajar con Xcode en el desarrollo de aplicaciones para iOS y MacOS.

Las CPUs Intel de cuatro núcleos y ocho generaciones son ahora una opción que ofrece mejoras en el rendimiento general, lo que hace que este MacBook sea portátil y potente. Aunque puede pesar un poco más que los modelos de MacBook mencionados anteriormente, el aumento de rendimiento valdrá la pena a la hora de realizar tareas de procesamiento exigentes, como los proyectos de codificación para trabajos pesados.

Y como los Macs pueden ejecutar Windows a través de bootcamp o en una máquina virtual como Parallels, podrás usar tu Mac para desarrollar aplicaciones para cualquier plataforma del mundo.

Vista en España  comprar en amazon MacBook Pro de 13 pulgadas
Vista en EEUU  comprar en amazon MacBook Pro de 13 pulgadas

Asus Zenbook UX-430

06. Asus Zenbook UX-430

Portátil y asequible, el Zenbook es un gran ordenador portátil para la programación

CPU: Intel Core i3-i7 a 2,4-2,7 GHz | Gráficos: Nvidia GeForce 940MX | RAM: 4-16GB | Almacenamiento: 128-512GB | Tamaño: 32.4×22.5×1.59cm | Peso: 1.25kg | OS: Windows 10 Home Pro

Ligero y delgado
Disponible en cuatro colores
Sin opción de cuatro núcleos
Geforce 940MX es ligeramente limitada

Alternativa a los portátiles para programación grandes

A pesar de los estereotipos anticuados de programadores atrapados en dormitorios y oficinas, muchos programadores ven la profesión como altamente sociable – ya sea trabajando juntos en proyectos de grupo, o asistiendo a uno de los numerosos talleres y conferencias que existen en todo el país.

En ese caso, es posible que prefieras una alternativa a los portátiles más grandes que te he sugerido y, en su lugar, pon la portabilidad en la parte superior de tu lista de deseos. El Asus Zenbook UX-430 de 14 pulgadas
es una opción ultraportátil – pesa sólo 1,25 kg y mide 15,9 mm – sin un precio muy elevado. Sin embargo, aunque el Zenbook es delgado y tiene un buen precio, tiene una especificación que sigue siendo excelente para el trabajo de codificación.

Vista en España  comprar en amazon Asus Zenbook UX-430
Vista en EEUU  comprar en amazon Asus Zenbook UX-430

HP Envy 13

07. HP Envy 13

Un portátil totalmente metálico de primera calidad para trabajos de codificación

CPU: Intel Core i7-8565U (quad core, 4.6GHz Max Turbo Boost) | Gráficos: Gráficos Intel UHD 620 | RAM: 16 GB | Almacenamiento: 512GB SSD | Tamaño: 38.1×21.1×1.7cm | Peso: 1.34kg | OS: Página principal de Windows 10

Diseño totalmente metálico de alta calidad
Muchos caballos de potencia
Opciones de almacenamiento limitadas en comparación con algunos competidores

La última HP Envy 13 (2018)

Es una gran elección para los programadores. HP hizo grandes cambios en su popular portátil Envy de 13 pulgadas con el último rediseño, añadiendo un procesador Intel Core i7 de octava generación, aumentando la memoria y reduciendo el tamaño y el peso. Junto con su pantalla táctil de 1080p de alta calidad, ahora es a la vez potente y súper portátil. Pero quizás el cambio más notable es el impresionante diseño totalmente metálico, que cubre incluso las teclas y alrededor del área de la pantalla, lo que le da a este portátil el sobrenombre de «Envidia».

El teclado tiene mucho recorrido, con teclas de subida y bajada de página, y el trackpad es lo suficientemente grande como para ser extremadamente cómodo, dos aspectos críticos de un portátil a tener en cuenta para largas sesiones de codificación.

Vista en España  comprar en amazon HP Envy 13
Vista en EEUU  comprar en amazon HP Envy 13

 

HP Spectre Folio

8. HP Spectre

Un 2 en 1 de gama alta que es ideal comoportátiles para programación.

CPU: Intel Core i5-8200Y – Intel Core i7-8500Y | Gráficos: Gráficos Intel UHD 615 | RAM: 8-16GB | Almacenamiento: 256GB SSD | Tamaño: 15.4x23x3.2cm | Peso: 1.49kg | OS: Windows 10 Home 64

Hermoso acabado de cuero
Diseño 2 en 1
Caro para portátiles para programación

El Folio HP Spectre de 13,4 pulgadas (portátiles para programación)

El Folio HP Spectre de 13,4 pulgadas es un gran dispositivo 2 en 1 para programadores. Por lo general, elegimos portátiles para programación en lugar de una tableta para la codificación pura, pero un 2 en 1 es un buen sustituto, ya que le ofrece un entorno en el que también puede probar aplicaciones para tablet.

Este ejemplo de gama alta rezuma calidad gracias a su preciosa funda de cuero, que le ha valido el nombre de Folio. También hay una gran especificación interna: con hasta 16 GB de memoria y un procesador Core i7, no va a defraudar en cuanto al rendimiento, pero puede dejar un hueco en tu cartera.

Vista en España  comprar en amazon HP Spectre
Vista en EEUU  comprar en amazon HP Spectre

Y una recomendación para terminar

Si te ha gustado este artículo y has decidido comprar alguno de los portátiles de arriba, te recomiendo acceder a mi artículo Fundamentos del JavaScript y aprende a programar con tu nuevo equipo!

Háblame ;)
¿Necesitas ayuda?
Hola! estás interesado en mis servicios? hablemos por WhatsApp ;)